HTML 반영하기

<div class="product-summary"> <product-purchase> <div class="product-purchase__info"> <div class="product-purchase__option" slot="selectorOptions"> <dl class="product-summary__purchase-option"> {{#unless hasOnlyOneOption}} <dt>옵션 선택</dt> <div style="clear: both; display: flex; flex-direction: column; gap: 10px"> {{#each selectorOptions}} <div class="select select--sm"> <select shopby-on:change="CHANGE_OPTION" shopby-option-key="{{depthKey}}"> {{#select depthKey}} <option value="" disabled>{{option.emptyOptionLabel}}</option> {{#each option.options}} <option value="{{optionDepthKey}}" shopby-selected="{{#ifEq ../option.selectedOptionDepthKey optionDepthKey}}true{{/ifEq}}" shopby-disabled="{{disabled}}" > {{displayLabel}} {{#ifGt stockCnt 0}} / 재고 : {{stockCnt}}개{{/ifGt}} {{#ifNe addPrice 0}} ({{#ifGt addPrice 0}}+{{/ifGt}}{{convertToKoreanCurrency addPrice}}원) {{/ifNe}} </option> {{/each}} {{/select}} </select> </div> {{/each}} </div> {{/unless}} <!-- --> {{#each quantities}} <div class="quantity quantity-box{{#if ../hasOnlyOneOption}} undeletable{{/if}}"> <span class="quantity__label">{{title}}{{#ifGt quantity.stockCnt 0}} / 재고 : {{quantity.stockCnt}}개{{/ifGt}}</span> <span class="quantity__content"> <span class="counter"> <button class="counter__btn" shopby-count="{{quantity.count}}" shopby-selected-key="{{selectedKey}}" shopby-on:click="SUBTRACT_OPTION_COUNT" > - <span class="a11y">감소</span> </button> <span class="counter__input"> <input type="number" value="{{quantity.count}}" shopby-selected-key="{{selectedKey}}" shopby-on:change="CHANGE_OPTION_COUNT" /> </span> <button class="counter__btn" shopby-count="{{quantity.count}}" shopby-selected-key="{{selectedKey}}" shopby-on:click="ADD_OPTION_COUNT" > + <span class="a11y">증가</span> </button> </span> <span> <span>{{convertToKoreanCurrency quantity.totalPrice}}</span> <div class="quantity__del"> <span class="ico ico--x-black-24" shopby-on:click="REMOVE_OPTION" shopby-selected-key="{{selectedKey}}"></span> </div> </span> </span> </div> {{#eachTextOptionMapByOption ../textOptionsMapByOption selectedKey}} <dl class="product-summary__purchase-option {{#if byQuantity}}open-by-quantity{{/if}}" shopby-selected-option-key="{{../selectedKey}}" shopby-text-option-key="{{textOptionKey}}" shopby-purchase-option > <div class="text-option"> <span class="text-option__label"> <span>{{inputLabel}}</span> {{#if required}} <em>(필수)</em> {{/if}} </span> </div> <div class="product-summary__purchase-option-input-wrap"> {{#each values}} <div class="character-counter {{#ifNe @index 0}}by-quantity{{/ifNe}}"> <span class="input-field input-field--md"> <input type="text" shopby-selected-option-key="{{../../selectedKey}}" shopby-text-option-key="{{../textOptionKey}}" shopby-text-option-index="{{@index}}" placeholder="{{../inputLabel}} (을)를 입력하세요." value="{{this}}" shopby-on:change="CHANGE_TEXT_OPTION_BY_OPTION" shopby-on:input="INPUT_TEXT_OPTION_BY_OPTION" maxlength="100" /> </span> <span class="character-counter__status character-counter__status--character"> <span class="character-counter__error" shopby-option-length-error></span> <span class="character-counter__count" shopby-option-length="{{../textOptionKey}}-{{@index}}">{{length this}}</span> <span class="character-counter__limit-count">/ 100</span> </span> </div> {{/each}} </div> {{#ifGt ../quantity.count 1}} <div class="by-quantity-toggle-btn"> <span shopby-on:click="TOGGLE_TEXT_OPTIONS_BY_QUANTITY">{{#if byQuantity}}옵션별 입력{{else}}수량별 입력{{/if}}</span> </div> {{/ifGt}} </dl> {{/eachTextOptionMapByOption}} <!-- --> {{/each}} </dl> </div> <!-- 상풉옵션 --> <div slot="textOptionsByProduct"> {{#each textOptionsByProduct}} <dl class="product-summary__purchase-option"> <div class="text-option"> <span class="text-option__label"> <span>{{textOption.inputLabel}}</span> {{#if textOption.required}} <em>(필수)</em> {{/if}} </span> </div> <div class="character-counter"> <span class="input-field input-field--md"> <input type="text" shopby-text-option-key="{{textOptionKey}}" shopby-text-option-index="0" placeholder="{{textOption.inputLabel}} (을)를 입력하세요." value="{{textOption.value}}" shopby-on:change="CHANGE_TEXT_OPTION_BY_PRODUCT" shopby-on:input="INPUT_TEXT_OPTION_BY_PRODUCT" maxlength="100" /> </span> <span class="character-counter__status character-counter__status--character"> <span class="character-counter__error" shopby-option-length-error></span> <span class="character-counter__count" shopby-option-length="{{textOptionKey}}-0">{{length textOption.value}}</span> <span class="character-counter__limit-count">/ 100</span> </span> </div> </dl> {{/each}} </div> <!-- 상풉옵션 END --> <div class="purchase__total"> <span>총 상품 금액</span> <span> <em slot="totalPrice">{{#if totalPrice includeZero=true}}{{convertToKoreanCurrency totalPrice}}{{else}}-{{/if}}</em> 원 </span> </div> <div> <div class="purchase__button-wrap"> <div class="like-btn-wrap"> <button type="button" class="btn btn--default sc-like-button purchase__like-btn {{#if likeStatus.isLiked}}is-active{{/if}}" slot="likeStatus" shopby-action="PRODUCT_LIKE" > <svg width="40" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" shopby-action="PRODUCT_LIKE"> <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(--gray500)" stroke-linejoin="round" shopby-action="PRODUCT_LIKE" ></path> </svg> </button> <div class="tooltip" shopby-element="like-action-message"></div> </div> <span class="purchase__btns" slot="unpurchasable"> {{#if unpurchasable}} <button class="btn btn--dark btn--md" style="width: 100%" disabled>구매불가</button> {{else}} <button class="btn btn--fill-dark btn--md" shopby-action="ADD_CART">장바구니</button> <button class="btn btn--fill-point btn--md" shopby-on:click="PRODUCT_ORDER">구매하기</button> {{/if}} </span> </div> <div id="naver-pay" class="purchase__naver-pay-btn"></div> </div> </div> </product-purchase> </div> <div class="product-detail"> <product-purchase open> <div> <div class="purchase product-detail full-width"> <button type="button" class="purchase__opener {{#if openPurchase}}is-show{{/if}}" shopby-on:click="TOGGLE_PURCHASE" slot="openPurchase"> <span class="ico ico--angle-down-black-24"></span> </button> <div class="purchase__button-wrap" slot="unpurchasable"> {{#if unpurchasable}} <button type="button" class="btn btn--dark btn--lg btn__buy purchase__buy-btn--unpurchasable" disabled>구매불가</button> {{else}} {{#unless openPurchase}} <button type="button" class="btn btn--default sc-like-button purchase__like-btn {{#if likeStatus.isLiked}}is-active{{/if}}" slot="likeStatus" shopby-on:click="PRODUCT_LIKE" > <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="{{#if likeStatus.isLiked}}var(--color-point){{else}}none{{/if}}" d="M11.9932 5.13581C9.9938 2.7984 6.65975 2.16964 4.15469 4.31001C1.64964 6.45038 1.29697 10.029 3.2642 12.5604C4.89982 14.6651 9.84977 19.1041 11.4721 20.5408C11.6536 20.7016 11.7444 20.7819 11.8502 20.8135C11.9426 20.8411 12.0437 20.8411 12.1361 20.8135C12.2419 20.7819 12.3327 20.7016 12.5142 20.5408C14.1365 19.1041 19.0865 14.6651 20.7221 12.5604C22.6893 10.029 22.3797 6.42787 19.8316 4.31001C17.2835 2.19216 13.9925 2.7984 11.9932 5.13581Z" stroke="var(--gray500)" stroke-width="{{#if likeStatus.isLiked}}0{{else}}2{{/if}}" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button> <button type="button" class="btn btn--fill-point btn--lg btn__buy" shopby-on:click="TOGGLE_PURCHASE">구매하기</button> {{/unless}} {{/if}} </div> <div class="purchase__option hidden" shopby-element="purchase-option"> <!-- SELECT BOX --> <div slot="hasOnlyOneOption"> {{#unless hasOnlyOneOption}} <div class="purchase__option-title">옵션 선택</div> <div class="purchase__option-options-box" slot="selectorOptions"> {{#each selectorOptions}} <span class="select select--sm"> <select shopby-on:change="CHANGE_OPTION" shopby-option-key="{{depthKey}}"> {{#select depthKey}} <option value="" disabled>{{option.emptyOptionLabel}}</option> {{#each option.options}} <option value="{{optionDepthKey}}" shopby-selected="{{#ifEq ../option.selectedOptionDepthKey optionDepthKey}}true{{/ifEq}}" shopby-disabled="{{disabled}}" > {{displayLabel}} {{#ifGt stockCnt 0}} / 재고 : {{stockCnt}}개{{/ifGt}} {{#ifNe addPrice 0}} ({{#ifGt addPrice 0}}+{{/ifGt}}{{convertToKoreanCurrency addPrice}}원) {{/ifNe}} </option> {{/each}} {{/select}} </select> </span> {{/each}} </div> {{/unless}} </div> <!-- SELECT BOX END --> <div class="purchase__quantity-box l-panel" slot="quantities"> {{#each quantities}} <div shopby-option-no="{{quantity.optionNo}}"> <div class="quantity{{#if ../hasOnlyOneOption}} undeletable{{/if}}"> <span> <span class="quantity__label"> {{title}}{{#ifGt quantity.stockCnt 0}} / 재고 : {{quantity.stockCnt}}개{{/ifGt}} {{#ifGt quantity.addPrice 0}}(+{{convertToKoreanCurrency quantity.addPrice}}원){{/ifGt}} </span> </span> <div class="quantity__content"> <span class="counter"> <button class="counter__btn" shopby-count="{{quantity.count}}" shopby-selected-key="{{selectedKey}}" shopby-on:click="SUBTRACT_OPTION_COUNT" > - </button> <span class="counter__input"> <input type="number" value="{{quantity.count}}" shopby-selected-key="{{selectedKey}}" shopby-on:change="CHANGE_OPTION_COUNT" /> </span> <button class="counter__btn" shopby-count="{{quantity.count}}" shopby-selected-key="{{selectedKey}}" shopby-on:click="ADD_OPTION_COUNT" > + </button> </span> <em>{{convertToKoreanCurrency quantity.totalPrice}}</em> </div> <button class="quantity__del" shopby-on:click="REMOVE_OPTION"> <span class="ico ico--x-black-24" shopby-selected-key="{{selectedKey}}"></span> </button> </div> <!-- 텍스트 옵션 --> {{#eachTextOptionMapByOption ../textOptionsMapByOption selectedKey}} <div class="purchase__text-option {{#if byQuantity}}open-by-quantity{{/if}}" shopby-selected-option-key="{{../selectedKey}}" shopby-text-option-key="{{textOptionKey}}" shopby-purchase-option > <div class="text-option"> <label> <span class="{{#if required}}dot dot--r-must{{/if}}">{{inputLabel}}</span> </label> {{#each values}} <div class="{{#ifNe @index 0}}by-quantity{{/ifNe}}"> <span class="input-field input-field--sm" style="flex: none"> <input type="text" shopby-selected-option-key="{{../../selectedKey}}" shopby-text-option-key="{{../textOptionKey}}" shopby-text-option-index="{{@index}}" placeholder="{{../inputLabel}} (을)를 입력하세요." value="{{this}}" shopby-on:change="CHANGE_TEXT_OPTION_BY_OPTION" shopby-on:input="INPUT_TEXT_OPTION_BY_OPTION" maxlength="100" /> </span> <span class="character-counter__status character-counter__status--character"> <span class="character-counter__count" shopby-option-length="{{../textOptionKey}}-{{@index}}">{{length this}}</span> <span class="character-counter__limit-count">/ 100</span> </span> </div> {{/each}} </div> {{#ifGt ../quantity.count 1}} <div class="by-quantity-toggle-btn"> <span shopby-on:click="TOGGLE_TEXT_OPTIONS_BY_QUANTITY">{{#if byQuantity}}옵션별 입력{{else}}수량별 입력{{/if}}</span> </div> {{/ifGt}} </div> {{/eachTextOptionMapByOption}} </div> <!-- 텍스트 옵션 END --> {{/each}} <!-- 상풉옵션 --> {{#each textOptionsByProduct}} <div class="text-option"> <label> <span class="{{#if textOption.required}}dot dot--r-must{{/if}}">{{textOption.inputLabel}}</span> </label> <div class="character-counter"> <span class="input-field input-field--sm"> <input type="text" shopby-text-option-key="{{textOptionKey}}" shopby-text-option-index="0" placeholder="{{textOption.inputLabel}} (을)를 입력하세요." value="{{textOption.value}}" shopby-on:change="CHANGE_TEXT_OPTION_BY_PRODUCT" shopby-on:input="INPUT_TEXT_OPTION_BY_PRODUCT" maxlength="100" /> </span> <span class="character-counter__status character-counter__status--character"> <span class="character-counter__count" shopby-option-length="{{textOptionKey}}-0">{{length textOption.value}}</span> <span class="character-counter__limit-count">/ 100</span> </span> </div> </div> {{/each}} <!-- 상풉옵션 END --> </div> <p class="purchase__total"> <span>총 상품 금액</span> <em> <span class="highlight bold" slot="totalPrice">{{convertToKoreanCurrency totalPrice}}</span> 원 </em> </p> <div class="purchase__btns"> <button type="button" class="btn btn--fill-dark btn--lg" shopby-action="ADD_CART">장바구니</button> <button type="button" class="btn btn--fill-point btn--lg" shopby-on:click="PRODUCT_ORDER">구매하기</button> </div> <div id="naver-pay" class="purchase__naver-pay-btn"></div> </div> </div> </div> </product-purchase> </div>

CSS 반영하기

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