HTML 반영하기

<main shopby-display-detail class="l-page display-detail"> <display-detail-total-count section-id:query="sectionId" sort-type:query="sortType" page-size:query="pageSize" page-number:query="pageNumber"> <div> {{#unless isLoaded}} <div class="skeleton__line display-detail__current-category-skeleton"></div> {{else}} <em class="l-title">{{displayLabel}}</em> {{/unless}} </div> <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'}}active{{/ifEq}}"> <button value="SALE">판매량순</button> </li> <li class="sort-item {{#ifEq sortType 'LOW_PRICE'}}active{{/ifEq}}"> <button value="LOW_PRICE">낮은가격순</button> </li> <li class="sort-item {{#ifEq sortType 'HIGH_PRICE'}}active{{/ifEq}}"> <button value="HIGH_PRICE">높은가격순</button> </li> <li class="sort-item {{#ifEq sortType 'REVIEW'}}active{{/ifEq}}"> <button value="REVIEW">상품후기순</button> </li> <li class="sort-item {{#ifEq sortType 'REGISTER'}}active{{/ifEq}}"> <button value="REGISTER">신상품순</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> </display-detail-total-count> <!-- 진열 --> <display-detail-items section-id:query="sectionId" sort-type:query="sortType" page-size:query="pageSize" page-number:query="pageNumber"> <section> <div shopby-display-detail-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">{{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="isEmptySection"> {{#if isLoaded}}{{#if isEmptySection}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>진열중인 상품이 없습니다.</em> </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> </display-detail-items> </main> <main shopby-display-detail shopby-view-type="GALLERY" class="display-detail"> <!-- "총 n개 / 상품정렬 셀렉박스" UI --> <display-detail-total-count section-id:query="sectionId" sort-type:query="sortType"> <div class="total-sort"> <p class="total-sort__count"> 총 <em class="highlight font-montserrat" slot="totalCount">{{totalCount}}</em> 개 </p> <div> <span class="select select--sm display-detail__sort"> <select shopby-on:change="PRODUCTS_SORT_TYPE" slot="sortType"> {{!-- {{#selected sortType slot='sortType'}} --}}{{!-- 실사용시 "!"를 제거해 주석코드를 지우세요. --}} <option value="SALE">판매량순</option> <option value="LOW_PRICE">낮은가격순</option> <option value="HIGH_PRICE">높은가격순</option> <option value="REVIEW">상품후기순</option> <option value="REGISTER">신상품순</option> {{!-- {{/selected}} --}}{{!-- 실사용시 "!"를 제거해 주석코드를 지우세요. --}} </select> </span> <button class="display-detail__display-type-btn ico ico--list-32" type="button" shopby-on:click="VIEW_TYPE"></button> </div> </div> </display-detail-total-count> <!-- 상품리스트 --> <display-detail-items section-id:query="sectionId" sort-type:query="sortType"> <section class="display-detail-items"> <!-- 상품목록 --> <div shopby-display-detail-items class="thumb-GALLERY" 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">{{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 isAllItemsShown}} <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> <!-- 검색결과 상품이 0인 경우 --> <div slot="isEmptySection"> {{#if isEmptySection}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>진열중인 상품이 없습니다.</em> </div> {{/if}} </div> </section> </display-detail-items> </main>

CSS 반영하기

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