다나와 에누리 몰테일 플레이오토
무료이용

무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 상품관련

멀티옵션 설정 후 노출방법

글번호 : 1018

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=1018
상품의 옵션을 선택하실 경우 여러 개의 옵션을 한 번에 선택하여 장바구니에 담기도록 설정하실 수 있습니다. 이 기능은 멀티옵션으로 제공되고 있으며 관련 소스에 대해 안내드리도록 하겠습니다. ※ 기본 소스상에는 이미 입력되어 있기 때문에 기본 소스를 수정하지 않으신 상태라면 별도 소스 작업 없이 기능 설정만으로 이용이 가능합니다. << 기능설정 >> 쇼핑몰구축 > 쇼핑몰 기본정보 설정 > 상품상세 멀티옵션 설정 << 작업위치 >> 중앙디자인 > 상품관리 > 상품 상세 페이지

1. 멀티옵션 사용하지 않는 경우 적용될 소스 <!--/if_not_multi_option_box/-->
<!--/if_option_price_sell/-->
<tr>
<th scope="row"><div class="tb-left">옵션적용가격</div></th>
<td class="price"><div class="tb-left"><!--/number/option_price_sell/-->원</div></td>
</tr>
<!--/end_if/-->
<!--/end_if/-->


2. 멀티옵션 사용할때 적용되는 옵션 선택영역 소스 <!--/if_multi_option/-->
<tr>
<td colspan="2">
<div class="opt-wrap" style="margin-top: 0">
<div class="tit"><strong>기본옵션</strong></div>
<!--/loop_multi_option/-->
<dl>
<dt><!--/multi_option@title/--></dt>
<dd><!--/multi_option@select/--></dd>
</dl>
<!--/end_loop/-->
<!--/if_is_unify_option/-->
<!--/if_link_option_select_complete/-->
<div class="sel-btn"><a href="<!--/link_option_select_complete/-->"><img src="/images/d3/modern_simple/btn/btn_h18_select_complete.gif" title="옵션 선택 완료" alt="옵션 선택 완료" /></a></div>
<!--/end_if/-->
<!--/end_if/-->
</div>
</td>
</tr>
<!--/end_if/--> << 소스설명 >> 2-1. 옵션명을 노출하는 가상태그 <!--/multi_option@title/--> 2-2. 옵션값을 노출하는 셀렉트박스 가상태그 <!--/multi_option@title/--> 2-3 선택한 멀티옵션이 순서대로 반복되며 보여지는 소스 <!--/loop_multi_option/-->
<dl>
<dt><!--/multi_option@title/--></dt>
<dd><!--/multi_option@select/--></dd>
</dl>
<!--/end_loop/-->

3. 선택옵션일 경우 [선택완료] 버튼이 보여지는 영역 <!--/if_is_unify_option/-->
<!--/if_link_option_select_complete/-->
<div class="sel-btn"><a href="<!--/link_option_select_complete/-->"><img src="/images/d3/modern_simple/btn/btn_h18_select_complete.gif" title="옵션 선택 완료" alt="옵션 선택 완료" /></a></div>
<!--/end_if/-->
<!--/end_if/-->

4. 개별옵션 등록시 적용되는 소스 가상태그 뒤에 _add 붙여진 형태로 작성된 소스 <!--/if_is_unify_option/-->
<!--/if_multi_option_add/-->
<tr>
<td colspan="2">
<div class="opt-wrap">
<div class="tit"><strong>추가옵션</strong> (추가 구매를 원하시면 선택하세요)</div>
<dl>
<!--/loop_multi_option_add/-->
<dt><!--/multi_option_add@title/--></dt>
<dd><!--/multi_option_add@select/--></dd>
<!--/end_loop/-->
</dl>
</div>
</td>
</tr>
<!--/end_if/-->
<!--/end_if/-->

5. 멀티옵션 박스 가상태그 <!--/if_is_unify_option/-->
<!--/if_multi_option_box/-->
<tr>
<td colspan="2">
<div class="MK_optAddWrap">
<div id="MK_innerOptWrap">
<div id="MK_innerOptScroll">
<!--/multi_option_box/-->
<!--/multi_option_add_box/-->
</div>
<div id="MK_innerOptTotal">
<span class="MK_txt-total">총 상품 금액</span>
<strong class="MK_total" id="MK_p_total"><!--/multi_option_total_price/--></strong>
<span class="MK_txt-won">원</span>
</div>
</div>
</div>
</td>
</tr>
<!--/end_if/--> << 소스설명 >> 5-1 기본옵션에 대한 멀티옵션박스 가상태그 <!--/multi_option_box/--> 5-2 개별옵션에 대한 멀티옵션박스 가상태그 <!--/multi_option_add_box/--> 5-3 멀티옵션 상품가격 총 합계 가상태그 <!--/multi_option_total_price/-->

6. 멀티옵션 사용하지 않을 경우 수량 등을 노출하는 영역 <!--/if_not_multi_option/-->
<tr>
<td colspan="2">
<div class="opt-wrap">
<!--/if_option/-->
<div class="tit"><strong>기본옵션</strong></div>
<!--/loop_option/-->
<dl>
<dt><!--/option@title/--></dt>
<dd><!--/option@select/--></dd>
</dl>
<!--/end_loop/-->
<!--/end_if/-->

<!--/if_not_multi_option_box/-->
<dl>
<dt>수량</dt>
<dd>
<div class="opt-btns">
<!--/input_quantity/-->
<a href="<!--/link_quantity_up/-->"><img class="btn-up" src="/images/common/basket_up.gif" alt="수량증가" title="수량증가" /></a>
<a href="<!--/link_quantity_down/-->"><img class="btn-dw" src="/images/common/basket_down.gif" alt="수량감소" title="수량감소" /></a>
</div>
</dd>
</dl>
<!--/end_if/-->
</div>
</td>
</tr>
<!--/end_if/-->

※ 기본옵션 영역의 배경색 변경방법 CSS탭에서 아래와 같이 소스변경 #productDetail .thumb-info .info .table-opt .opt-wrap { width: 100%; margin-top: 10px; padding: 5px 0; background-color: #eee; border: 1px solid #ddd; } => #productDetail .thumb-info .info .table-opt .opt-wrap { width: 100%; margin-top: 10px; padding: 5px 0; background-color: #ff0000; border: 1px solid #ddd; }

목록 1:1 문의