HTML 반영하기

<main class="l-page cart-list" shopby-helper-key="cart-helper-key"> <!-- 장바구니 테이블--> <cart-products> <section> <div> <table class='l-table'> <colgroup> <!-- 체크박스 --> <col width='3%' /> <!-- 상품/옵션 정보 --> <col /> <!-- 수량 --> <col width='8%' /> <!-- 상품금액 --> <col width='10%' /> <!-- 할인/적립 --> <col width='12%' /> <!-- 합계금액 --> <col width='10%' /> <!-- 배송비 --> <col width='6%' /> </colgroup> <thead> <tr> <th> <!-- 전체선택 --> <label class='form-check form-check--md' slot='isAllChecked'> <input type='checkbox' name='isAllChecked' shopby-action='TOGGLE_ALL' /> </label> <!-- 전체선택 --> </th> <th>상품/옵션 정보</th> <th>수량</th> <th>상품금액</th> <th>할인/적립</th> <th>합계금액</th> <th>배송비</th> </tr> </thead> <tbody slot='products'> {{#if products}} {{#each products}} <!-- // --> <tr class="cart-list__item" slot="deliveryGroup" shopby-delivery-group-idx='{{#if isInvalidProduct}}-1{{else}}{{@index}}{{/if}}'> <!-- 선택 --> <td class='cart-list__delivery-group' colspan="7"> <label class='form-check form-check--md' slot='checkboxPerDeliveryGroup' shopby-delivery-group-idx='{{#if isInvalidProduct}}-1{{else}}{{@index}}{{/if}}' shopby-is-invalid-product='{{isInvalidProduct}}' shopby-partner-name='{{partnerName}}' > <input type='checkbox' shopby-action='TOGGLE_CHECKBOX_PER_DELIVERY_GROUP' /> <span class='form-check__label'>{{partnerName}}</span> </label> </td> <!-- 선택 --> </tr> {{#each orderProducts}} <tr class='cart-list__item' slot='orderProduct' shopby-cart-no='{{cartNo}}' shopby-product-no='{{productNo}}' shopby-is-invalid-product='{{../isInvalidProduct}}'> <!-- 선택 --> <td class='cart-list__checkbox'> <label class='form-check form-check--md' slot='checkboxPerCartNo' shopby-cart-no='{{cartNo}}'> <input type='checkbox' shopby-action='TOGGLE_CHECKBOX_PER_CART_NO' /> </label> </td> <!-- 선택 --> <!-- 상품/옵션 정보 --> <td class='cart-list__product-option-info option-info'> <span class='option-info__media'> <!-- 상품 이미지 --> <a class='option-info__img' href='/pages/product/product-detail.html?productNo={{productNo}}'> {{#if hasImage}} {{img imageUrl 120 120 productName '' ''}} {{else}} <span class='no-img'></span> {{/if}} </a> <!-- 상품 이미지 --> {{#unless ../isInvalidProduct}} <button class='btn btn--line-dark btn--xs-wide' shopby-on:click='HANDLE_CHANGE_OPTION_BTN_CLICK' shopby-status='COMPLETED' shopby-cart-no='{{cartNo}}' >옵션/수량 변경</button> {{/unless}} </span> <span class='option-info__option'> <span class='option-info__brand-name'>{{{brandName}}}</span> <span class='option-info__product-name'> {{{productName}}} {{#if ../isInvalidProduct}} <span class="alert alert--error"> 구매제한 상품</span> {{/if}} {{#if duplicate}} <span class="alert alert--error"> 중복 상품</span> {{/if}} </span> {{#unless ../isInvalidProduct}} {{#if optionUsed}} <!-- 상품 멀티옵션 --> <span slot="optionSelectorController"> {{#each optionSelector}} <span class='option-info__option-label'>{{label}}</span> <span class='select select--sm' slot="optionSelector"> <select slot='optionSelect' disabled shopby-disabled shopby-selected-option-key='{{selectedOptionKey}}' shopby-on:change='HANDLE_OPTION_SELECTOR_CHANGE' shopby-cart-no="{{../cartNo}}" > {{#unless selectedOptionKey}} <option value=''> {{placeholder}} </option> {{/unless}} <!-- // --> {{#each options}} <option value='{{optionKey}}' shopby-option-no="{{optionNo}}"> {{value}} </option> {{/each}} </select> </span> {{/each}} </span> <!-- 상품 멀티옵션 --> {{/if}} <!-- 상품 텍스트옵션 --> <span slot="inputsController"> {{#each optionInputs}} <span class="cart-option" slot="textOptionContainer" shopby-input-matching-type="{{inputMatchingType}}" shopby-input-no="{{inputNo}}"> <span class='option-info__option-label'>{{inputLabel}}{{#if required}}<span class="dot dot--r-must highlight"> (필수)</span>{{/if}}</span> {{#each inputValues}} <span class='input-field input-field--sm' slot='textOption' disabled shopby-disabled shopby-required='{{../required}}' shopby-input-no='{{../inputNo}}' shopby-input-matching-type='{{../inputMatchingType}}' shopby-input-label='{{../inputLabel}}' > <input type='text' slot="inputValue" value='{{@this}}' disabled shopby-disabled shopby-required='{{../required}}' shopby-input-no='{{../inputNo}}' shopby-input-label='{{../inputLabel}}' /> </span> {{/each}} {{#ifEq inputMatchingType 'OPTION'}} {{#ifGt orderCnt 1}} <button type="button" class="btn btn--line-dark btn--sm" slot="textOptionType" shopby-on:click="HANDLE_TEXT_OPTION_TYPE_CLICK" shopby-input-no="{{inputNo}}" shopby-count="{{count}}" shopby-order-cnt="{{orderCnt}}" shopby-type="{{type}}" shopby-cart-no="{{cartNo}}" >{{#ifEq type 'BY_QUANTITY'}}옵션별{{else}}수량별{{/ifEq}}</button> {{/ifGt}} {{/ifEq}} </span> {{/each}} </span> <!-- 상품 텍스트옵션 --> {{/unless}} </span> </td> <!-- 상품/옵션 정보 --> <!-- 수량 --> <td slot='quantityController' shopby-cart-no='{{cartNo}}' shopby-product-no='{{productNo}}' shopby-option-no='{{optionNo}}' shopby-status='COMPLETED' > <span class='counter counter--center' slot='quantityChanger' shopby-max="{{stockCnt}}"> <button type="button" class='counter__btn' disabled shopby-disabled shopby-on:click='HANDLE_DECREASE_COUNT_BTN_CLICK' > - </button> <span class='counter__input' slot="orderCnt"> <input type='number' value='{{orderCnt}}' disabled shopby-disabled shopby-on:change="HANDLE_COUNT_CHANGE"/> </span> <button type="button" class='counter__btn' disabled shopby-disabled shopby-on:click='HANDLE_INCREASE_COUNT_BTN_CLICK' > + </button> </span> </td> <!-- 수량 --> <!-- 상품금액 --> <td> {{#with price}} {{#if ../../isInvalidProduct}} <!-- --> {{#with ../contentsIfPausing}} {{@this}} {{else}} <em>-</em> {{/with}} <!-- --> {{else}} <span class="currency"><em>{{convertToKoreanCurrency standardAmt}}</em>원</span> {{/if}} {{/with}} </td> <!-- 상품금액 --> <!-- 할인/적립 --> <td class='cart-list__benefit'> {{#if ../isInvalidProduct}} - {{else}} {{#if price.hasDiscount}} <span> <span class='highlight'>할인</span><span class="currency"><em>-{{sum price.immediateDiscountAmt price.additionalDiscountAmt}}</em>원</span> </span> {{/if}} {{#if accumulationAmtWhenBuyConfirm}} <span><span>적립</span><span class="currency"><em>{{convertToKoreanCurrency accumulationAmtWhenBuyConfirm}}</em>{{../../accumulationUnit}}</span></span> {{#unless (isSignedIn)}}<span class="currency">(로그인 시 적립 가능)</span>{{/unless}} {{else}} <span><span>적립</span><span class="currency"><em>-</em></span></span> {{/if}} {{/if}} </td> <!-- 할인/적립 --> <!-- 합계금액 --> <td> <span class='currency'>{{#if ../isInvalidProduct}}-{{else}}<em>{{convertToKoreanCurrency price.buyAmt}}</em>원{{/if}}</span> </td> <!-- 합계금액 --> {{#if showsRowSpan}} <!-- 배송비 --> <td class='cart-list__shipping-info' rowspan="{{shippingRowSpan}}"> {{#if ../isInvalidProduct}} - {{else}} {{#unless ../isAllNotDeliverable}} <span slot="deliveryFee"> {{#if ../deliveryAmt}} <span class='currency'><em>{{convertToKoreanCurrency ../deliveryAmt}}</em>원</span> <span class='cart-list__shipping-info-label'> {{#ifEq deliveryPayType 'PAY_ON_DELIVERY'}}  (착불) {{else}}  (선결제) {{/ifEq}} </span> {{else}} <span class='cart-list__shipping-info-label'>배송비<br />무료</span> {{/if}} </span> {{/unless}} {{/if}} </td> <!-- 배송비 --> {{/if}} </tr> {{/each}} <!-- // --> {{/each}} {{else}} <tr class="cart-list__item"> <td colspan="7"> {{#if isLoading}} <div class="loader loader--lg loader--full"> <span class="spinner"></span> </div> {{else}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>장바구니에 담긴 상품이 없습니다.</em> </div> {{/if}} </td> </tr> {{/if}} </tbody> </table> </div> <button type="button" class="btn btn--line-dark btn--xs cart-list__delete-btn" slot='selectedCount' shopby-action='DELETE_SELECTED_ITEMS' shopby-selected-count='{{selectedCount}}' shopby-checked-cart-nos-as-string='{{checkedCartNosAsString}}' >선택 삭제</button> </section> </cart-products> <!-- 장바구니 테이블--> <cart-order> <section class='cart-list__price-tag'> <div slot='totalCount'> {{#if totalCount}} <div class='price-tag' slot='price'> <dl class='price-tag__details'> <dt>상품금액 합계</dt> <dd><span class='currency'><em>{{convertToKoreanCurrency price.standardAmt}}</em>원</span></dd> {{#if price.discountAmt}} <dt><span class='sprite-image ico-formula ico-formula--minus'></span>할인금액 합계</dt> <dd> <span class='currency'><em>{{convertToKoreanCurrency price.discountAmt}}</em>원</span> </dd> {{/if}} <dd> <dt><span class='sprite-image ico-formula ico-formula--plus'></span>배송비 합계</dt> <dd><span class='currency'><em>{{convertToKoreanCurrency price.totalPrePaidDeliveryAmt}}</em>원</span></dd> </dd> <dd> <dt class='final-price'> <span class='sprite-image ico-formula ico-formula--equal'></span> 총 결제금액 </dt> <dd><span class='currency'><em class='highlight'>{{convertToKoreanCurrency price.totalAmt}}</em>원</span></dd> </dd> </dl> {{#if price.accumulationAmtWhenBuyConfirm}} <span class='currency benefit'> 예상적립<em>{{convertToKoreanCurrency price.accumulationAmtWhenBuyConfirm }}</em>{{accumulationUnit}}{{#unless (isSignedIn)}}<br />(로그인 시 적립 가능){{/unless}}</span> {{/if}} </div> {{/if}} </div> </section> </cart-order> <cart-order> <section class='cart-list__btn-group'> <div slot='totalCount'> {{#if totalCount}} <div class='btn-group'> <button type='button' class='btn btn--fill-dark btn--md' shopby-action='ORDER'>선택 상품 주문하기</button> <button type='button' class='btn btn--fill-point btn--md' shopby-action='ORDER_ALL'>전체 상품 주문하기</button> </div> <div id='naver-pay'></div> {{/if}} </div> </section> </cart-order> </main> <main class="l-content cart" shopby-helper-key="cart-helper-key"> <cart-products> <div> <!-- 전체선택 --> <section slot="totalCount"> {{#if totalCount}} <div class="l-title l-title--sm-medium l-title--center"> <label class="form-check form-check--sm" slot="isAllChecked"> <input type="checkbox" shopby-action="TOGGLE_ALL" /> <span class="form-check__label">전체 선택</span> </label> <button type="button" class="btn btn--line-dark btn--sm" slot="selectedCount" shopby-action="DELETE_SELECTED_ITEMS" shopby-selected-count="{{selectedCount}}" shopby-checked-cart-nos-as-string="{{checkedCartNosAsString}}" > 선택 삭제 </button> </div> {{/if}} </section> <!-- 전체선택 --> <section slot="products"> {{#if products}} <!-- // --> {{#each products}} <div slot="deliveryGroup" shopby-delivery-group-idx="{{#if isInvalidProduct}}-1{{else}}{{@index}}{{/if}}"> <!-- 배송비 템플릿 별 그룹 선택 --> <label class="form-check form-check--sm cart__group-checkbox" slot="checkboxPerDeliveryGroup" shopby-delivery-group-idx="{{#if isInvalidProduct}}-1{{else}}{{@index}}{{/if}}" shopby-is-invalid-product="{{isInvalidProduct}}" shopby-partner-name="{{partnerName}}" > <input type="checkbox" shopby-action="TOGGLE_CHECKBOX_PER_DELIVERY_GROUP" /> <span class="form-check__label">{{partnerName}}</span> </label> <!-- 배송비 템플릿 별 그룹 선택 --> <!-- 옵션영역 --> <ul class="cart__products"> {{#each orderProducts}} <li class="cart__product cart-product" slot="orderProduct" shopby-cart-no="{{cartNo}}" shopby-product-no="{{productNo}}"> <!-- 상품 기본정보 --> <span class="cart-product__top"> <!-- 상품 선택 --> <label class="form-check form-check--sm cart-product__top-checkbox" slot="checkboxPerCartNo" shopby-cart-no="{{cartNo}}"> <input type="checkbox" shopby-action="TOGGLE_CHECKBOX_PER_CART_NO" /> </label> <!-- 상품 선택 --> <span class="cart-product__top-content"> <span class="cart-product__info-wrap"> <!-- 상품 이미지 --> <a class="cart-product__media" href="/pages/product/product-detail.html?productNo={{productNo}}"> {{#if hasImage}} {{img imageUrl 90 90 productName '' ''}} {{else}} <span class="no-img"></span> {{/if}} </a> <!-- 상품 이미지 --> <!-- 상품 정보 --> <span class="cart-product__info"> {{#if ../isInvalidProduct}} <span class="alert alert--error"> 구매제한 상품</span> {{/if}} {{#if duplicate}} <span class="alert alert--error"> 중복 상품</span> {{/if}} <span class="brand-name">{{{brandName}}}</span> <span class="product-name">{{{productName}}}</span> <span class="price"> {{#with price}} {{#if ../../isInvalidProduct}} <!-- --> {{#with ../contentsIfPausing}} {{@this}} {{else}} <em>-</em> {{/with}} <!-- --> {{else}} <em>{{convertToKoreanCurrency buyAmt}}</em> 원 {{#if hasDiscount}} <span class="origin-price"> <s>{{convertToKoreanCurrency standardAmt}}</s> 원 </span> {{/if}} {{/if}} {{/with}} </span> </span> <!-- 상품 정보 --> </span> {{#unless ../isInvalidProduct}} <!-- 상품 수량 선택 --> <span class="cart-product__count-wrap" slot="quantityController" shopby-cart-no="{{cartNo}}" shopby-product-no="{{productNo}}" shopby-option-no="{{optionNo}}" shopby-status="COMPLETED" > <span class="counter counter--center" slot="quantityChanger" shopby-max="{{stockCnt}}"> <button type="button" class="counter__btn" disabled shopby-disabled shopby-on:click="HANDLE_DECREASE_COUNT_BTN_CLICK" > - </button> <span class="counter__input" slot="orderCnt"> <input type="number" value="{{orderCnt}}" disabled shopby-disabled shopby-on:change="HANDLE_COUNT_CHANGE" /> </span> <button type="button" class="counter__btn" disabled shopby-disabled shopby-on:click="HANDLE_INCREASE_COUNT_BTN_CLICK" > + </button> </span> <button type="button" class="btn btn--line-dark btn--sm" shopby-on:click="HANDLE_CHANGE_OPTION_BTN_CLICK" shopby-status="COMPLETED" shopby-cart-no="{{cartNo}}" > 옵션/수량 변경 </button> </span> <!-- 상품 수량 선택 --> {{/unless}} </span> </span> <!-- 상품 기본정보 --> {{#unless ../isInvalidProduct}} {{#if optionUsed}} <!-- 상품 멀티옵션 --> <span class="cart-product__multi-option cart-option" slot="optionSelectorController"> {{#each optionSelector}} <span class="cart-option__label">{{label}}</span> <span class="select select--sm" slot="optionSelector"> <select slot="optionSelect" disabled shopby-disabled shopby-selected-option-key="{{selectedOptionKey}}" shopby-on:change="HANDLE_OPTION_SELECTOR_CHANGE" shopby-cart-no="{{../cartNo}}" > {{#unless selectedOptionKey}} <option value="">{{placeholder}}</option> {{/unless}} <!-- // --> {{#each options}} <option value="{{optionKey}}" shopby-option-no="{{optionNo}}">{{value}}</option> {{/each}} </select> </span> {{/each}} </span> <!-- 상품 멀티옵션 --> {{/if}} <!-- 상품 텍스트옵션 --> <span class="cart-product__text-option" slot="inputsController"> {{#each optionInputs}} <span class="cart-option" slot="textOptionContainer" shopby-input-matching-type="{{inputMatchingType}}" shopby-input-no="{{inputNo}}" > <span class="cart-option__label"> {{inputLabel}}{{#if required}} <span class="dot dot--r-must highlight"> (필수)</span> {{/if}} </span> {{#each inputValues}} <span slot="textOption" class="input-field input-field--sm" disabled shopby-disabled shopby-required="{{../required}}" shopby-input-no="{{../inputNo}}" shopby-input-matching-type="{{../inputMatchingType}}" shopby-input-label="{{../inputLabel}}" > <input type="text" slot="inputValue" value="{{@this}}" disabled shopby-disabled shopby-required="{{../required}}" shopby-input-no="{{../inputNo}}" shopby-input-label="{{../inputLabel}}" /> </span> {{/each}} {{#ifEq inputMatchingType 'OPTION'}} {{#ifGt orderCnt 1}} <button type="button" class="btn btn--line-dark btn--sm" slot="textOptionType" shopby-on:click="HANDLE_TEXT_OPTION_TYPE_CLICK" shopby-input-no="{{inputNo}}" shopby-count="{{count}}" shopby-order-cnt="{{orderCnt}}" shopby-type="{{type}}" shopby-cart-no="{{cartNo}}" > {{#ifEq type 'BY_QUANTITY'}}옵션별{{else}}수량별{{/ifEq}} </button> {{/ifGt}} {{/ifEq}} </span> {{/each}} </span> <!-- 상품 텍스트옵션 --> {{/unless}} </li> {{#unless deliverable}} <div class="cart__shipping-fee-wrap"> <div class="cart__shipping-fee">배송불가 상품</div> </div> {{/unless}} {{/each}} </ul> <!-- 옵션영역 --> <!-- 배송비 영역 --> {{#if isInvalidProduct}} <div class="cart__shipping-fee-wrap"> <span class="cart__shipping-fee">-</span> </div> {{else}} {{#unless isAllNotDeliverable}} <div class="cart__shipping-fee-wrap" slot="deliveryFee"> {{#ifGt deliveryAmt 0}} <span class="cart__shipping-fee"> 배송비 {{convertToKoreanCurrency deliveryAmt}}원 {{#ifEq deliveryPayType 'PAY_ON_DELIVERY'}}  (착불) {{else}}  (선결제) {{/ifEq}} </span> {{else}} <span class="cart__shipping-fee">배송비 무료</span> {{/ifGt}} </div> {{/unless}} {{/if}} <!-- 배송비 영역 --> </div> {{/each}} {{else}} {{#if isLoading}} <div class="loader loader--lg loader--full"> <span class="spinner"></span> </div> {{else}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>장바구니에 담긴 상품이 없습니다.</em> </div> {{/if}} {{/if}} </section> </div> </cart-products> <cart-order> <section> <div slot="totalCount"> {{#if totalCount}} <div class="price-tag" slot="price"> <dl class="price-tag__details"> <dt>상품금액 합계</dt> <dd> <span class="price"> <em>{{convertToKoreanCurrency price.standardAmt}}</em> 원 </span> </dd> {{#if price.discountAmt}} <dt>할인금액 합계</dt> <dd> <span class="price"> <span class="sprite-image ico-formula ico-formula--minus"></span> <em>{{convertToKoreanCurrency price.discountAmt}}</em> 원 </span> </dd> {{/if}} <dt>배송비 합계</dt> <dd> <span class="price"> <span class="sprite-image ico-formula ico-formula--plus"></span> <em>{{convertToKoreanCurrency price.totalPrePaidDeliveryAmt}}</em> 원 </span> </dd> <dt class="total-price">총 결제금액</dt> <dd> <span class="price"> <span class="sprite-image ico-formula ico-formula--equal"></span> <em class="highlight">{{convertToKoreanCurrency price.totalAmt}}</em> 원 </span> </dd> </dl> <span slot="price"> {{#if price.accumulationAmtWhenBuyConfirm}} <span class="benefit"> 예상적립  <em>{{convertToKoreanCurrency price.accumulationAmtWhenBuyConfirm }}</em>  {{accumulationUnit}} {{#unless (isSignedIn)}} <br /> (로그인 시 적립 가능){{/unless}} </span> {{/if}} </span> </div> <div id="naver-pay"></div> {{/if}} </div> </section> </cart-order> <cart-order> <section class="cart__order-wrap"> <div class="cart__order"> <span class="font-montserrat" slot="selectedCount">총 결제금액 ({{selectedCount}}개)</span> <span class="price highlight" slot="totalPrice"> <em>{{convertToKoreanCurrency price.totalAmt}}</em> 원 </span> </div> <button type="button" class="btn btn--fill-point btn--lg" shopby-action="ORDER">주문하기</button> </section> </cart-order> </main>

CSS 반영하기

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