에어 테마

[icaria36]

카테고리 페이지에 하위 카테고리를 표시하는 방법에 대해 여러 분들이 질문하셨습니다. 이 글은 Modern Category + Group Boxes 컴포넌트에 관한 것이지만, 해당 컴포넌트에 별도의 주제(topic)가 없기 때문에(맞죠?) 여기서 제 조사 결과를 공유합니다:

다음은 작동하는 코드입니다:

/* Displays subcategories */
.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategories {
  display: inline-flex;
  flex-flow: wrap;
}

.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategory {
  display: inline-flex;
  align-items: baseline;
  margin-right: .3em;
}

/* Removes the category images from the list */
.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategories .subcategory .subcategory-image-placeholder {
  display: none;
}

또한, 하위 카테고리가 많다면 한 줄에 하나의 카테고리씩 표시하는 것을 원할 수 있습니다.

/* One category per row */
.custom-category-boxes:not(.above-discovery-categories-outlet) {
  grid-template-columns: 1fr;
}

결과물은 다음과 같습니다:

박스에는 높이 제한이 있는 것 같지만 이를 제거하는 방법을 아직 찾지 못했습니다. 아직 하위 카테고리가 충분하지 않아 데스크톱에서는 문제가 보이지 않지만, 모바일에서는 한계에 도달하고 있습니다:

이 문제를 해결할 아이디어가 있으신가요?