HTML 반영하기

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <main shopby-product-list class="l-page product-list"> <display-category> <section class="page-content-top"> {{#unless isSearchPage}} <!-- 브래드크럼브 --> <div slot="breadcrumb"> {{#unless isCategoryLoaded}} <div class="skeleton__line product-list__breadcrumb-skeleton"></div> {{else}} <nav class="product-list__breadcrumb"> <ul class="page-content-top__path page-content-top__location"> <li> <a href="/">HOME</a> </li> {{#each categoryRoute}} > <li class="page-content-top__breadcrumb-category"> <span class="page-content-top__breadcrumb-category-label">{{label}}</span> <ul class="page-content-top__breadcrumb-category-siblings"> {{#each siblingCategories}} <li> <a href="/pages/product/product-list.html?categoryNo={{categoryNo}}&depth={{depth}}">{{label}}</a> </li> {{/each}} </ul> </li> {{/each}} </ul> </nav> {{/unless}} </div> <!-- 현재 카테고리 --> <div slot="currentCategoryLabel"> {{#unless isCategoryLoaded}} <div class="skeleton__line product-list__current-category-skeleton"></div> {{else}} <em class="l-title">{{currentCategoryRoute.label}}</em> {{/unless}} </div> <!-- 하위 카테고리 --> <nav slot="childCategories"> {{#unless isCategoryLoaded}} <div class="skeleton__line product-list__child-category-skeleton"></div> {{else}} <ul class="category-nav"> {{#each categoryChildren}} <li> <a class="category-nav__link" href="/pages/product/product-list.html?categoryNo={{categoryNo}}&depth={{depth}}"> <span class="category-nav__label">{{label}}(</span> <span class="category-nav__count font-montserrat">{{count}}</span> <span class="category-nav__label">)</span> </a> </li> {{/each}} </ul> {{/unless}} </nav> {{/unless}} </section> </display-category> <!-- 상품검색으로 접근시 검색어영역 --> <product-keyword> {{#if isSearchPage}} <div class="product-list__search-keyword-wrap"> <em class="product-list__search-keyword">{{keywords}}</em> <span>검색결과</span> </div> {{/if}} </product-keyword> <total-count-and-sort category-no:query="categoryNo" depth:query="depth" sort-type:query="sortType" page-size:query="pageSize"> <div class="sort-list__wrap sort-list__wrap--end sort-list__wrap--margin"> <p class="total-count total-count--md"> 총 <em class="highlight bold" slot="totalCount">{{totalCount}}</em> 건 </p> <ul class="sort-list" slot="sortType" shopby-on:click="PRODUCTS_SORT_TYPE"> <li class="sort-item {{#ifEq sortType 'SALE_CNT'}}active{{/ifEq}}"> <button value="SALE_CNT" shopby-product-search-order="SALE_CNT">판매량순</button> </li> <li class="sort-item {{#ifEq sortType 'LOW_PRICE'}}active{{/ifEq}}"> <button value="LOW_PRICE" shopby-product-search-order="LOW_PRICE">낮은가격순</button> </li> <li class="sort-item {{#ifEq sortType 'HIGH_PRICE'}}active{{/ifEq}}"> <button value="HIGH_PRICE" shopby-product-search-order="HIGH_PRICE">높은가격순</button> </li> <li class="sort-item {{#ifEq sortType 'REVIEW'}}active{{/ifEq}}"> <button value="REVIEW" shopby-product-search-order="REVIEW">상품후기순</button> </li> <li class="sort-item {{#ifEq sortType 'RECENT_PRODUCT'}}active{{/ifEq}}"> <button value="RECENT_PRODUCT" shopby-product-search-order="RECENT_PRODUCT">신상품순</button> </li> </ul> <span class="select select--sm"> <select slot="pageSize" shopby-on:change="SEARCH_SIZE"> {{!#selected pageSize slot='pageSize'}}{{!-- 실사용시 "!"를 제거해 주석코드를 지우세요. --}} <option value="20">20개씩 보기</option> <option value="40">40개씩 보기</option> <option value="60">60개씩 보기</option> <option value="80">80개씩 보기</option> {{!/selected}}{{!-- 실사용시 "!"를 제거해 주석코드를 지우세요. --}} </select> </span> </div> </total-count-and-sort> <!-- 상품리스트 --> <product-list-items page-size:query="pageSize" page-number:query="pageNumber"> <section> <div shopby-products-items class="thumb-GALLERY" slot="items"> {{#each items}} <div class="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">{{#if adult}} {{/if}} {{img listImageUrls.[0] 500 500 productName '' ''}}</span> <!-- 좋아요 버튼 --> <button type="button" class="btn thumb-fab thumb-fab--like{{#if liked}} is-active{{/if}}" shopby-action="PRODUCT_LIKE_BTN" shopby-product-no="{{productNo}}" > <svg width="40" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"> <path d="M52.29 19.24c-6.382 0-10.932 3.926-12.41 6.888-1.82-3.086-8.408-8.31-14.79-6.888-7.977 1.777-12.613 11.532-5.774 21.324C25.521 49.45 34.74 56.557 39.88 61c5.319-4.443 17.728-14.216 22.16-22.213 5.596-10.097-1.773-19.547-9.75-19.547Z" stroke="var(--color-point)" stroke-width="5" stroke-linejoin="round" ></path> </svg> </button> <!-- 품절 오버레이 --> {{#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> </div> {{/each}} </div> <!-- 상품이 없을 때 --> <div slot="noItems"> {{#if isLoaded}}{{#if hasNoItems}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> {{#if isSearchPage}} <em>검색결과가 없습니다.</em> {{else}} <em>진열중인 상품이 없습니다.</em> {{/if}} </div> {{/if}}{{/if}} </div> <!-- 스켈레톤 --> <div slot="skeleton"> {{#unless isLoaded}} <div class="skeleton-grid skeleton-grid__column--4"> {{#repeat 8}} <div class="thumb-item skeleton skeleton--gallery"> <div class="skeleton__media"></div> <div class="skeleton__line"></div> <div class="skeleton__line"></div> </div> {{/repeat}} </div> {{/unless}} </div> <!-- 페이지네이션 --> <div class="pagination" slot="pagination"> {{#if paginationInfo.pages}} <a href="?{{paginationInfo.firstPage}}"> <button class="sprite-image pagination__btn pagination__btn--double-lt"></button> </a> <a href="?{{paginationInfo.prevPage}}"> <button class="sprite-image pagination__btn pagination__btn--lt"></button> </a> {{#each paginationInfo.pages}} <a class="pagination__link {{#if isCurrentPage}}is-current{{/if}}" href="?{{param}}">{{page}}</a> {{/each}} <a href="?{{paginationInfo.nextPage}}"> <button class="sprite-image pagination__btn pagination__btn--rt"></button> </a> <a href="?{{paginationInfo.lastPage}}"> <button class="sprite-image pagination__btn pagination__btn--double-rt"></button> </a> {{/if}} </div> </section> </product-list-items> </main> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <main shopby-product-list shopby-view-type="GALLERY" class="product-list"> <!-- 카테고리 선택 --> <display-category> <div> {{#if categoryNo}} <!-- 브레드크럼브 --> <section class="breadcrumb" slot="breadcrumb"> <div class="breadcrumb__section{{#if isLeafCategory}} breadcrumb__leaf-category{{/if}}"> {{#each categoryRoute}} <a class="breadcrumb__item" href="/pages/product/product-list.html?categoryNo={{categoryNo}}&depth={{depth}}">{{label}}</a> {{/each}} </div> </section> <!-- 하위 카테고리 리스트 --> <section slot="childCategories"> <nav class="category-slider product-list-category-slider"> <ul class="swiper category-slider__wrapper" shopby-slider-id="{{slider.id}}"> <div class="swiper-wrapper"> {{#each categoryChildren}} <li class="swiper-slide category-slider__slide"> <a class="category-slider__item" href="/pages/product/product-list.html?categoryNo={{categoryNo}}&depth={{depth}}"> {{label}} </a> </li> {{/each}} </div> </ul> </nav> </section> {{/if}} </div> </display-category> <!-- 상품검색으로 접근시 검색어영역 --> <product-keyword> {{#if isSearchPage}} <div class="product-list__search-keyword-wrap"> <em class="product-list__search-keyword">{{keywords}}</em> <span>검색결과</span> </div> {{/if}} </product-keyword> <!-- "총 n개 / 상품정렬 셀렉박스" --> <total-count-and-sort category-no:query="categoryNo" depth:query="depth" sort-type:query="sortType"> <div class="total-sort"> <p class="total-sort__count"> 총 <em class="highlight" slot="totalCount">{{totalCount}}</em> 개 </p> <div> <span class="select select--sm product-list__sort"> <select shopby-on:change="PRODUCTS_SORT_TYPE" slot="sortType"> {{!#selected sortType slot='sortType'}}{{!-- 실사용시 "!"를 제거해 주석코드를 지우세요. --}} <option value="SALE_CNT" shopby-product-search-order="SALE_CNT">판매량순</option> <option value="LOW_PRICE" shopby-product-search-order="LOW_PRICE">낮은가격순</option> <option value="HIGH_PRICE" shopby-product-search-order="HIGH_PRICE">높은가격순</option> <option value="REVIEW" shopby-product-search-order="REVIEW">상품후기순</option> <option value="RECENT_PRODUCT" shopby-product-search-order="RECENT_PRODUCT">신상품순</option> {{!/selected}}{{!-- 실사용시 "!"를 제거해 주석코드를 지우세요. --}} </select> </span> <button class="product-list__display-type-btn ico ico--list-32" type="button" shopby-on:click="VIEW_TYPE"></button> </div> </div> </total-count-and-sort> <!-- 상품리스트 --> <product-list-items> <section class="product-list-items"> <div shopby-products-items class="thumb-{{viewType}}" slot="items"> {{#each items}} <a shopby-is-adult="{{adult}}" shopby-action="MOVE_PRODUCT_DETAIL" class="thumb-item thumb-item__link" href="/pages/product/product-detail.html?productNo={{productNo}}" > <div class="thumb-item__media"> <!-- 상품이미지 --> <span class="thumb-item__img">{{#if adult}} {{/if}} {{img listImageUrls.[0] 250 250 productName '' ''}}</span> <!-- 좋아요 버튼 --> <button type="button" class="btn btn--default sc-like-button thumb-fab{{#if liked}} is-active{{/if}}" shopby-action="PRODUCT_LIKE_BTN" shopby-product-no="{{productNo}}" > <svg width="40" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"> <path d="M52.29 19.24c-6.382 0-10.932 3.926-12.41 6.888-1.82-3.086-8.408-8.31-14.79-6.888-7.977 1.777-12.613 11.532-5.774 21.324C25.521 49.45 34.74 56.557 39.88 61c5.319-4.443 17.728-14.216 22.16-22.213 5.596-10.097-1.773-19.547-9.75-19.547Z" stroke="var(--color-point)" stroke-linejoin="round" ></path> </svg> </button> <!-- 품절 오버레이 --> {{#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> </div> <!-- 상품설명 --> <div class="thumb-item__info"> <!-- 상품명 --> <p class="product-thumb-title">{{productName}}</p> <!-- 진열타입 리스트인경우 홍보문구 노출 --> <p class="product-thumb__promotion-text">{{promotionText}}</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> </div> </a> {{/each}} </div> <!-- 스켈레톤 --> <div slot="skeleton"> {{#unless isLoaded}} {{#repeat 2}} <div class="skeleton__wrap {{#if items}}skeleton__wrap--has-item{{/if}} thumb-{{viewType}}"> <!-- view type 갤러리 스켙레톤 --> {{#ifEq viewType 'GALLERY'}}{{#repeat 2}} <div class="thumb-item skeleton skeleton--gallery"> <div class="skeleton__media"></div> <div class="skeleton__line"></div> <div class="skeleton__line"></div> </div> {{/repeat}}{{/ifEq}} <!-- view type 리스트 스켙레톤 --> {{#ifEq viewType 'LIST'}}{{#repeat 2}} <div class="thumb-item skeleton skeleton--list"> <div class="skeleton__media"></div> <div> <div class="skeleton__line skeleton__line--product-name"></div> <div class="skeleton__line skeleton__line--product-price"></div> </div> </div> {{/repeat}}{{/ifEq}} </div> {{/repeat}} {{/unless}} </div> <div slot="searchMoreBtn"> {{#unless hasNoMoreItems}} <div class="product-section__more btn" shopby-action="SEARCH_MORE_PRODUCT"> 더보기 <span class="product-section__more-ico"> <span class="ico ico--angle-right-solid"></span> </span> </div> {{/unless}} </div> <div slot="noItems"> {{#if isLoaded}}{{#if hasNoItems}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> {{#if isSearchPage}} <em>검색결과가 없습니다.</em> {{else}} <em>진열중인 상품이 없습니다.</em> {{/if}} </div> {{/if}}{{/if}} </div> </section> </product-list-items> </main>

CSS 반영하기

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