Aurora Modules

CategoryTabs

상품 카테고리를 이용한 탭 컴포넌트입니다.
swiper를 활용한 슬라이더가 적용됩니다.
하나의 탭 당 노출가능한 상품은 최대 20개 입니다.
swiper옵션은 `swiper-option`커스텀 어트리부트를 통해 커스텀 가능합니다.

* 현재 1depth카테고리만 지원합니다.
* 위 예시화면상 탭당 하나의 상품이 노출중이지만 실사용시 탭당 4개의 상품 노출이 기본값입니다(커스텀 가능).

모듈명: category-tabs원본소스

속성

속성명	타입	기본값	설명
slider-id	string	""	(필수) 상품리스트 슬라이더 아이디
category-no	string	""	(필수) 카테고리번호(1,2,3 과 같이 표기)
sort-type	"SALE_CNT": 판매량순 "LOW_PRICE" : 낮은가격순 "HIGH_PRICE" : 높은가격순 "REVIEW" : 상품후기순 "RECENT_PRODUCT" : 신상품순	"SALE_CNT"	(필수) 상품 정렬 타입
sale-status	"ALL_CONDITIONS" : 전체 판매상태 "ONSALE" : 판매중 "READY_ONSALE" : 판매대기와 판매중 "RESERVATION_AND_ONSALE": "예약판매중인 상품과 판매중인 상품"	"ALL_CONDITIONS"	(필수) 상품 판매 상태
parameters	JSON	-	상품검색 API의 parameters와 동일합니다.
swiper-option	JSON	-	상품리스트 슬라이더 옵션 Swiper 옵션과 동일합니다(11.7버전).

사용 가능 변수

변수명	타입	기본값	설명
productsMap	ProductsMap	{}	각 카테고리별 상품 리스트
tabs	Tab[]	[]	탭 리스트(각 카테고리 탭입니다)
currentTab	string	""	현재 선택된 탭
swiperOption	object	{}	상품리스트 슬라이더 옵션 Swiper 옵션과 동일합니다(11.7버전).
sliderId	string	""	상품리스트 슬라이더 아이디
isLoaded	boolean	false	상품리스트 로드 여부

ProductsMap 타입

속성명	타입	기본값	설명
{각 카테고리 번호(string)}	object	null	카테고리에 해당하는 상품 리스트 각 카테고리별 상품검색 API의 응답값과 동일합니다.

Tab 타입

속성명	타입	기본값	설명
categoryNo	string	""	카테고리 번호
label	string	""	카테고리 명

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<category-tabs
    slider-id=""
    category-no=""
    sort-type=""
    sale-status=""
    size=""
    parameters='{
      "pageSize": "10",
      "order.by": "LIKE_CNT",
      "order.direction": "ASC"
    }'
    swiper-option='{
      "direction": "horizontal",
      "effect": "slide",
      "slidesPerView" : 4,
      "spaceBetween": 24
    }'
>
    <section class="tabs-wrap">
        <h4 class="tab__title">category-tabs</h4>

        <ul class="tab category-tab" slot="tabs">
            {{#each tabs}}
            <li>
                <a href="javascript:;">
                    <button class="tab__btn {{#ifEq ../currentTab categoryNo}}is-active{{/ifEq}}" shopby-on:click="TAB_CLICK" shopby-tab-value="{{categoryNo}}">
                        {{label}}
                    </button>
                </a>
            </li>
            {{/each}}
        </ul>

        <div class="tab__contents" slot="content">
            {{#each productsMap}}
            <div class="swiper" shopby-slider-id="{{../sliderId}}">
                <ul class="swiper-wrapper tab__content {{#ifEq categoryNo ../currentTab}}is-active{{else}}is-inactive{{/ifEq}}">
                    {{#each products}}
                    <li class="swiper-slide thumb-item">
                        <a
                            class="thumb-item__media thumb-item__link"
                            shopby-is-adult="{{adult}}"
                            shopby-action="MOVE_PRODUCT_DETAIL"
                            href="/pages/product/product-detail.html?productNo={{productNo}}"
                        >
                            <!-- 상품이미지 -->
                            <span class="thumb-item__img">{{img listImageUrls.[0] 500 500 productName '' ''}}</span>
                            <!-- 좋아요 버튼 -->
                            <!-- 품절 오버레이 -->
                            {{#if isSoldOut}}
                            <div class="thumb-item__overlay">SOLD OUT</div>
                            {{/if}}
                            <!-- 뱃지(판매종료/판매임박) -->
                            <span class="thumb-item__badges">
                                {{#ifEq saleStatusType 'FINISHED'}}
                                <span class="badge badge--fill-navy">판매종료</span>
                                {{/ifEq}} {{#ifEq saleStatusType 'READY'}}
                                <span class="badge badge--fill-red">판매임박</span>
                                {{/ifEq}}
                            </span>
                        </a>
                        <!-- 상품설명 -->
                        <a
                            class="thumb-item__info thumb-item__link"
                            shopby-is-adult="{{adult}}"
                            shopby-action="MOVE_PRODUCT_DETAIL"
                            href="/pages/product/product-detail.html?productNo={{productNo}}"
                        >
                            <!-- 상품명 -->
                            <p class="product-thumb-title">{{productName}}</p>
                            <!-- 가격정보 -->
                            <div class="product-thumb-price-info">
                                <!-- 판매가에대한 즉시할인+추가할인의 할인율 -->
                                {{#ifHasDiscount immediateDiscountAmt additionDiscountAmt}}
                                <span class="product-thumb__immediately-percent font-montserrat">
                                    {{calculatePercentage (addNumber immediateDiscountAmt additionDiscountAmt) salePrice 1}}%
                                </span>
                                {{/ifHasDiscount}}
                                <!-- 할인된 가격 -->
                                <em class="product-thumb-price font-montserrat">
                                    {{convertToKoreanCurrency (subtractNumber salePrice immediateDiscountAmt additionDiscountAmt)}}
                                </em>
                                <span class="product-thumb-unit">원</span>
                                <!-- 즉시할인 또는 추가할인이 있는경우 판매가를 삭선처리 -->
                                {{#ifHasDiscount immediateDiscountAmt additionDiscountAmt}}
                                <s class="product-thumb-price--origin font-montserrat">{{convertToKoreanCurrency salePrice}}원</s>
                                {{/ifHasDiscount}}
                            </div>
                            <!-- 스티커(뱃지) -->
                            <div>
                                {{#each stickerInfos}}
                                <span class="product-thumb__sticker">
                                    <!-- 텍스트형 스티커 -->
                                    {{#ifEq type 'TEXT'}}{{label}}{{/ifEq}}
                                    <!-- 이미지형 스티커 -->
                                    {{#ifEq type 'IMAGE'}} {{img label '' '' productName 'product-thumb__sticker-img'}} {{/ifEq}}
                                </span>
                                {{/each}}
                            </div>
                        </a>
                    </li>
                    {{/each}}
                </ul>
                <div class="swiper-scrollbar" shopby-slider-scroll-id="{{../sliderId}}"></div>
            </div>
            {{/each}}
        </div>
    </section>
</category-tabs>

<category-tabs
    slider-id=""
    category-no=""
    sort-type=""
    sale-status=""
    size=""
    parameters='{
      "pageSize": "10",
      "order.by": "LIKE_CNT",
      "order.direction": "ASC"
    }'
    swiper-option='{
      "direction": "horizontal",
      "effect": "slide",
      "slidesPerView" : 2,
      "spaceBetween": 24
    }'
>
    <article class="tabs-wrap">
        <h4 class="tab__title">PERFUME</h4>

        <ul class="tab category-tab" slot="tabs">
            {{#each tabs}}
            <li>
                <a href="javascript:;">
                    <button class="tab__btn {{#ifEq ../currentTab categoryNo}}is-active{{/ifEq}}" shopby-on:click="TAB_CLICK" shopby-tab-value="{{categoryNo}}">
                        {{label}}
                    </button>
                </a>
            </li>
            {{/each}}
        </ul>

        <div class="tab__contents" slot="content">
            {{#each productsMap}}
            <div class="swiper" shopby-slider-id="{{../sliderId}}">
                <ul class="swiper-wrapper tab__content {{#ifEq categoryNo ../currentTab}}is-active{{else}}is-inactive{{/ifEq}}">
                    {{#each products}}
                    <li class="swiper-slide thumb-item">
                        <a
                            class="thumb-item__media thumb-item__link"
                            shopby-is-adult="{{adult}}"
                            shopby-action="MOVE_PRODUCT_DETAIL"
                            href="/pages/product/product-detail.html?productNo={{productNo}}"
                        >
                            <!-- 상품이미지 -->
                            <span class="thumb-item__img">{{img listImageUrls.[0] 500 500 productName '' ''}}</span>
                            <!-- 좋아요 버튼 -->
                            <!-- 품절 오버레이 -->
                            {{#if isSoldOut}}
                            <div class="thumb-item__overlay">SOLD OUT</div>
                            {{/if}}
                            <!-- 뱃지(판매종료/판매임박) -->
                            <span class="thumb-item__badges">
                                {{#ifEq saleStatusType 'FINISHED'}}
                                <span class="badge badge--fill-navy">판매종료</span>
                                {{/ifEq}} {{#ifEq saleStatusType 'READY'}}
                                <span class="badge badge--fill-red">판매임박</span>
                                {{/ifEq}}
                            </span>
                        </a>
                        <!-- 상품설명 -->
                        <a
                            class="thumb-item__info thumb-item__link"
                            shopby-is-adult="{{adult}}"
                            shopby-action="MOVE_PRODUCT_DETAIL"
                            href="/pages/product/product-detail.html?productNo={{productNo}}"
                        >
                            <!-- 상품명 -->
                            <p class="product-thumb-title">{{productName}}</p>
                            <!-- 가격정보 -->
                            <div class="product-thumb-price-info">
                                <!-- 판매가에대한 즉시할인+추가할인의 할인율 -->
                                {{#ifHasDiscount immediateDiscountAmt additionDiscountAmt}}
                                <span class="product-thumb__immediately-percent font-montserrat">
                                    {{calculatePercentage (addNumber immediateDiscountAmt additionDiscountAmt) salePrice 1}}%
                                </span>
                                {{/ifHasDiscount}}
                                <!-- 할인된 가격 -->
                                <em class="product-thumb-price font-montserrat">
                                    {{convertToKoreanCurrency (subtractNumber salePrice immediateDiscountAmt additionDiscountAmt)}}
                                </em>
                                <span class="product-thumb-unit">원</span>
                                <!-- 즉시할인 또는 추가할인이 있는경우 판매가를 삭선처리 -->
                                {{#ifHasDiscount immediateDiscountAmt additionDiscountAmt}}
                                <s class="product-thumb-price--origin font-montserrat">{{convertToKoreanCurrency salePrice}}원</s>
                                {{/ifHasDiscount}}
                            </div>
                            <!-- 스티커(뱃지) -->
                            <div>
                                {{#each stickerInfos}}
                                <span class="product-thumb__sticker">
                                    <!-- 텍스트형 스티커 -->
                                    {{#ifEq type 'TEXT'}}{{label}}{{/ifEq}}
                                    <!-- 이미지형 스티커 -->
                                    {{#ifEq type 'IMAGE'}} {{img label '' '' productName 'product-thumb__sticker-img'}} {{/ifEq}}
                                </span>
                                {{/each}}
                            </div>
                        </a>
                    </li>
                    {{/each}}
                </ul>
                <div class="swiper-scrollbar" shopby-slider-scroll-id="{{../sliderId}}"></div>
            </div>
            {{/each}}
        </div>
    </article>
</category-tabs>

/* 여기에 스타일 코드를 작성해주세요. */