Help Center
카페24 소식
[스마트디자인] 정기배송(정기결제) 서비스 디자인 적용 방법 - HTML/CSS (국문)
2019-07-31
안녕하세요. 카페24 운영도우미 입니다.
자세한 내용은 아래를 참조해주세요.
※ 정기배송(정기결제) 서비스 디자인 개선 이력
1. 정기배송 서비스 오픈 (적용일 : 2019년 7월 31일) : [HTML 수정 방법 바로가기▶]
2. 결제카드 등록/변경/삭제 버튼 개선 (적용일 : 2019년 11월 6일) : [HTML 수정 방법 바로가기▶]
3. 정기배송 할인, 배송주기 옵션, 정기배송 신청정보 변경 기능 개선 (적용일 : 2020년 4월 1일) : [HTML 수정 방법 바로가기▶]
4. 정기배송 수령자 정보 개선 (적용일 : 2021년 9월 1일) : [PC - HTML 수정방법 바로가기▶], [Mobile - HTML 수정방법 바로가기▶]
5. 정기배송 상품 1회구매 설정기능 추가 (적용일 : 2021년 11월 3일) : [PC - HTML 수정방법 바로가기▶], [Mobile - HTML 수정방법 바로가기▶]
6. 옵션선택 팝업으로 쇼핑몰 모든 영역에서 정기배송 신청하도록 개선 (적용일 : 2022년 1월 5일) : [PC - HTML 수정방법 바로가기▶], [Mobile - HTML 수정방법 바로가기▶]
7. 정기배송(결제) 일시정지 및 재개 기능 개선(적용일 : 2023년 1월 11일) : [PC - HTML 수정방법 바로가기▶], [Mobile - HTML 수정방법 바로가기▶]
■ PC 쇼핑몰
1. 상품상세
1) 위치 : product/detail.html
▼ 아래와 같이 파란색 부분을 추가합니다.
## 상단 생략 ## </tbody> |
2) 위치 : product/add_basket2.html
▼ 아래와 같이 파란색 부분을 추가합니다.
## 상단 생략 ##
<li class="{$sale_price_ref_display|display}"><strong>{$disp_sale_price_ref}</strong></li>
<li>수량 : {$quantity}</li>
</ul>
<p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p>
</div>
</li>
<li class="item">
## 중간 생략 ##
<li class="{$sale_price_ref_display|display}"><strong>{$disp_sale_price_ref}</strong></li>
<li>수량 : {$quantity}</li>
</ul>
<p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p>
</div>
</li>
</ul>
3) 위치 : css/module/product/detail.css
▼ 아래와 같이 파란색 부분을 추가합니다.
## 상단 생략 ## /* 정기배송 */ |
2. 장바구니
- 위치 : order/basket.html
▼ 아래와 같이 빨간색 부분을 삭제, 파란색 부분을 추가합니다.
| ## 상단 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td rowspan="{$delv_cnt}" class="{$delv_cnt_display|display}"><p class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="{$delv_ref_display|display}"><br />{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span><br /></p>{$delv_type}</td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td rowspan="{$delv_cnt}" class="{$delv_cnt_display|display}"><p class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="{$delv_ref_display|display}"><br />{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span><br /></p>{$delv_type}</td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td rowspan="{$delv_cnt}" class="{$delv_cnt_display|display}"><p class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="{$delv_ref_display|display}"><br />{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span><br /></p>{$delv_type}</td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td rowspan="{$delv_cnt}" class="{$delv_cnt_display|display}"><p class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="{$delv_ref_display|display}"><br />{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span><br /></p>{$delv_type}</td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td rowspan="{$delv_cnt}" class="{$delv_cnt_display|display}"><p class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="{$delv_ref_display|display}"><br />{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span><br /></p>{$delv_type}</td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td rowspan="{$delv_cnt}" class="{$delv_cnt_display|display}"><p class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="{$delv_ref_display|display}"><br />{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span><br /></p>{$delv_type}</td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td><span class="txtInfo">해외배송</span></td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td><span class="txtInfo">해외배송</span></td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td rowspan="{$delv_cnt}" class="{$delv_cnt_display|display}"><p class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="{$delv_ref_display|display}"><br />{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span><br /></p>{$delv_type}</td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td rowspan="{$delv_cnt}" class="{$delv_cnt_display|display}"><p class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="{$delv_ref_display|display}"><br />{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span><br /></p>{$delv_type}</td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td rowspan="{$delv_cnt}" class="{$delv_cnt_display|display}"><p class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="{$delv_ref_display|display}"><br />{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span><br /></p>{$delv_type}</td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td rowspan="{$delv_cnt}" class="{$delv_cnt_display|display}"><p class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="{$delv_ref_display|display}"><br />{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span><br /></p>{$delv_type}</td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td><span class="txtInfo">해외배송</span></td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> ## 중간 생략 ## <span class="{$nplusevent_hide_display|display}"><a href="#none" onclick="{$action_option_change}" class="btnNormal gBlank5 {$option_change_display|display}">옵션변경</a></span> </li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </td> <td class="right"> <div id="{$product_price_div_id}" class="{$discount}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong><p class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</p></div> ## 중간 생략 ## <td><span class="txtInfo">해외배송</span></td> <td class="right"><strong>{$sum_price_front_head}<span id="{$sum_price_front_id}">{$sum_price_front}</span>{$sum_price_front_tail}</strong><div class="{$sum_price_display|display}">{$sum_price_back_head}{$sum_price_back}{$sum_price_back_tail}</div></td> <td class="button"> <a href="javascript:;" class="btnSubmit" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_hide_display|display}" onclick="{$action_buy_item}">주문하기</a> <a href="javascript:;" class="btnSubmit {$subscription_show_display|display}" onclick="{$action_buy_item}">정기배송 신청</a> <a href="javascript:;" class="btnNormal" onclick="{$action_wish_item}">관심상품등록</a> <a href="javascript:;" class="btnNormal" onclick="{$action_move_item}"><i class="icoDelete"></i> 삭제</a> </td> |
3. 주문서작성
1) 위치 : order/orderform.html
▼ 아래와 같이 빨간색 부분을 삭제, 파란색 부분을 추가합니다.
| ## 상단 생략 ## <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> <p class="gBlank5 {$allotment_display|display}">무이자할부 상품</p> <p class="gBlank5 {$expiration_date_display|display}">유효기간 : {$expiration_date}</p> </td> ## 중간 생략 ## <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> <p class="gBlank5 {$allotment_display|display}">무이자할부 상품</p> <p class="gBlank5 {$expiration_date_display|display}">유효기간 : {$expiration_date}</p> </td> ## 중간 생략 ## <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> <p class="gBlank5 {$allotment_display|display}">무이자할부 상품</p> <p class="gBlank5 {$expiration_date_display|display}">유효기간 : {$expiration_date}</p> </td> ## 중간 생략 ## <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> <p class="gBlank5 {$allotment_display|display}">무이자할부 상품</p> <p class="gBlank5 {$expiration_date_display|display}">유효기간 : {$expiration_date}</p> </td> ## 중간 생략 ## <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> <p class="gBlank5 {$allotment_display|display}">무이자할부 상품</p> <p class="gBlank5 {$expiration_date_display|display}">유효기간 : {$expiration_date}</p> </td> ## 중간 생략 ## <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> <p class="gBlank5 {$allotment_display|display}">무이자할부 상품</p> <p class="gBlank5 {$expiration_date_display|display}">유효기간 : {$expiration_date}</p> </td> ## 중간 생략 ## <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> <p class="gBlank5 {$allotment_display|display}">무이자할부 상품</p> <p class="gBlank5 {$expiration_date_display|display}">유효기간 : {$expiration_date}</p> </td> ## 중간 생략 ## <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> <li><strong>{$product_name}</strong>{$option_str} ({$qty}개)</li> </ul> <p class="gBlank5 {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> <p class="gBlank5 {$allotment_display|display}">무이자할부 상품</p> <p class="gBlank5 {$expiration_date_display|display}">유효기간 : {$expiration_date}</p> </td> ## 중간 생략 ## </div> </div> <div class="orderArea {$subscription_show_display|display}"> <div class="title"> <h3>정기배송 정보</h3> </div> <div class="ec-base-table typeWrite"> <table border="1" summary=""> <caption>정기배송 정보 입력</caption> <colgroup> <col style="width:139px;" /> <col style="width:auto;" /> </colgroup> <tbody> <tr> <th scope="row">배송시작일</th> <td> {$form.subscription_start_date} <span class="txtWarn">(결제일 : 주기별 배송시작일의 1일 전)</span> </td> </tr> </tbody> </table> </div> </div> <div class="orderArea {$ordadd.display|display}"> <div class="title"> <h3>추가 정보</h3> ## 중간 생략 ## <h4>고유식별정보수집 동의</h4> {$form.privacy_agreement_for_identification}{$form.privacy_agreement_for_identification_checkbox} </div> <!-- 정기결제 서비스 이용 동의 약관 추가 --> <div class="box {$subscription_show_display|display}"> <h4>정기결제 서비스 이용 동의</h4> {$form.subscription_info_content}{$form.subscription_info_checkbox} </div> <div class="box {$nm_display|display} {$information_agreement_display|display}" id="ec-orderform-informationAgreementRow"> <h4>개인정보 제3자 제공 동의 (선택)</h4> {$form.information_agreement}{$form.information_agreement_checkbox} ## 중간 생략 ## <h4><strong id="{$current_pay_name}">{$current_pay_name_default}</strong> <span>최종결제 금액</span></h4> <p class="price"><span>{$price_unit_head}</span>{$form.total_price}<span>{$price_unit_tail}</span></p> <p class="paymentAgree" id="{$chk_purchase_agreement}">{$form.chk_purchase_agreement}</p> <div class="ec-base-button gColumn"><a href="#none" id="{$btn_payment_id}" class="btnSubmit sizeL">결제하기</a></div> <p class="regularDeliveryComment {$subscription_show_display|display}">상기 금액은 결제 시점의 금액과 <br>다를 수 있습니다.</p> <div class="ec-base-button gColumn"> <a href="#none" id="{$btn_payment_id}" class="btnSubmit sizeL"><span class="{$subscription_hide_display|display}">결제하기</span><span class="{$subscription_show_display|display}">정기배송 신청하기</span></a> </div> <div class="mileage {$total_save_mileage_display|display}"> <dl class="ec-base-desc gLarge right"> <dt><strong>총 적립예정금액</strong></dt> |
2) 위치 : css/module/order/form.css
▼ 아래와 같이 빨간색 부분을 삭제, 파란색 부분을 추가합니다.
## 상단 생략 ## .xans-order-form .ec-base-table.typeWrite .ui-datepicker-trigger { margin:0 10px 0 5px; } |
4. 마이쇼핑 - 메인
1) 위치 : myshop/index.html
▼ 아래와 같이 파란색 부분을 추가합니다.
| ## 상단 생략 ## <h3><a href="/board/inquiry/list.html"><strong>Inquiry</strong><span>대량구매 문의 관리</span></a></h3> <p><a href="/board/inquiry/list.html">요청한 대량구매문의 내역을<br /> 확인하고 관리하실 수 있습니다.</a></p> </li> <li class="shopMain regularDelivery {$regular_delivery_display|display}"> <h3><a href="/myshop/regular_delivery.html"><strong>Subscription</strong><span>정기배송 관리</span></a></h3> <p><a href="/myshop/regular_delivery.html">고객님께서 신청하신 정기배송의<br>신청 정보 및 내역을 확인하실 수 있습니다.</a></p> </li> </ul> </div> |
2) 위치 : css/module/myshop/main.css
▼ 아래와 같이 파란색 부분을 추가합니다.
## 상단 생략 ## #myshopMain .shopMain.regularDelivery h3:before { background-position:-292px -200px; } |
5. 마이쇼핑 - 주문(상세)조회
1) 위치 : myshop/order/list.html
▼ 아래와 같이 파란색 부분을 추가합니다.
| ## 상단 생략 ## <tbody class="center {$list_display|display}"> <tr> <td {$rowspan} class="number {$display_column|display}"> <p>{$order_icon}</p> {$order_date} <p><a href="detail.html{$param_detail}" class="line">[{$order_id}]</a></p> <a href="#none" class="btnNormal {$direct_cancel_display|display}" onclick="{$action_direct_cancel}">주문취소</a> ## 중간 생략 ## </tr> <tr> <td {$rowspan} class="number {$display_column|display}"> <p>{$order_icon}</p> {$order_date} <p><a href="detail.html{$param_detail}" class="line">[{$order_id}]</a></p> <a href="#none" class="btnNormal {$direct_cancel_display|display}" onclick="{$action_direct_cancel}">주문취소</a> |
2) 위치 : myshop/order/detail.html
▼ 아래와 같이 빨간색 부분을 삭제, 파란색 부분을 추가합니다.
## 상단 생략 ##
<tbody>
<tr>
<th scope="row">주문번호</th>
<td>{$order.order_id}</td>
<td>{$order.order_id} <span>{$order.order_icon}</span></td>
</tr>
<tr>
<th scope="row">주문일자</th>
6. 마이쇼핑 - 정기배송 관리 (신규)
1) 위치 및 파일명 : myshop/regular_delivery.html
▼ 신규 파일을 추가합니다.
<!--@layout(/layout/basic/layout.html)-->
<div class="path">
<span>현재 위치</span>
<ol><li><a href="/">홈</a></li>
<li><a href="/myshop/index.html">마이쇼핑</a></li>
<li title="현재 위치"><strong>정기배송 관리</strong></li>
</ol></div>
<div class="titleArea">
<h2>정기배송 관리</h2>
</div>
<div class="regularDeliveryPayInfo" module="MyShop_OrderRegularPg">
<!--@css(/css/module/myshop/regularDeliveryPayInfo.css)-->
<!--@js(/js/module/myshop/regularDeliveryPayInfo.js)-->
<h3 class="title">결제카드 정보</h3>
<div class="ec-base-box">
<div class="information">
<h3 class="title">정기배송 결제카드</h3>
<p class="status {$unregistCard_display|display}">미등록</p>
<p class="status {$registCard_display|display}">등록완료</p>
</div>
<div class="button">
<a href="#" id="{$lookupCardInfoId}" class="btnEm cardSearch">등록카드 정보조회</a>
<a href="#" id="{$registModifyCardId}" class="btnEm ">결제카드 등록/변경</a>
</div>
<div class="ec-base-tooltip wrap" id="{$registerdCardInfoLayer}">
<h3>등록카드 정보조회</h3>
<div class="content">
<p>결제 업체(PG사) 조회 결과 고객님의<br/>정기배송(결제)을 위해 등록된 카드 정보는 다음과 같습니다.</p>
<p class="txtEm" id="{$registedCardNumberId}"></p>
<p>※ 위 카드 정보는 PG사에 안전하게 보관되며,<br>이후 배송주기별 결제 시점에 결제를 위한 정보로 사용됩니다.</p>
</div>
<a href="#" class="btnClose close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close_tip.gif" alt="닫기"/></a>
<span class="edge"></span>
</div>
</div>
<ul><li>결제예정일 (주기별 배송시작일 하루 전)에 위의 카드 정보로 정기배송 상품이 결제됩니다.</li>
</ul>
</div>
<div class="ec-base-tab" module="Myshop_OrderRegularManageHead">
<ul class="menu">
<li class="{$issueListTabSelected}"><a href="#" id="{$issueListTabId}" >신청내역 ({$issueInvoiceCount})</a></li>
<li class="{$cancelListTabSelected}"><a href="#" id="{$cancelListTabId}" >해지내역 ({$cancelItemCount})</a></li>
</ul>
</div>
<div class="ec-base-table typeList" module="myshop_OrderRegularManageList">
<!--@css(/css/module/myshop/regularDeliveryListItem.css)-->
<table border="1" summary="주문 상품 정보">
<colgroup>
<col style="width:160px;"/>
<col style="width:111px;"/>
<col style="width:111px;"/>
<col style="width:93px;"/>
<col style="width:auto;"/>
<col style="width:61px;"/>
<col style="width:111px;"/>
<col style="width:111px;"/>
</colgroup>
<thead>
<tr>
<th scope="col">신청일자<br/>[신청번호]</th>
<th scope="col">배송주기</th>
<th scope="col" class="{$issueList_display|display}">결제예정일<br/>[회차]</th>
<th scope="col" class="{$cancelList_display|display}">해지일자</th>
<th scope="col">이미지</th>
<th scope="col">상품정보</th>
<th scope="col">수량</th>
<th scope="col" class="{$issueList_display|display}">상품구매금액</th>
<th scope="col" class="{$issueList_display|display}">선택</th>
<th scope="col" class="{$cancelList_display|display}">해지사유</th>
</tr>
</thead>
<tbody class="center {$list_display|display}">
<tr>
<td class="number {$display_column|display}" rowspan="{$row_span}">
{$ins_timestamp}
<p>[{$invoice_no}]</p>
</td>
<td>{$subscription_cycle_info}</td>
<td class="{$issueList_display|display}">
{$expected_pay_date}
<p>[{$expected_pay_seq}회차]</p>
</td>
<td class="{$cancelList_display|display}">{$cancel_timestamp}</td>
<td class="thumb"><a href="/product/detail.html{$param}"><img src="{$product_image}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" alt=""/></a></td>
<td class="product left top">
<strong class="name">{$product_name_link}</strong>
<div class="option {$option_display|display}">{$option_str}</div>
</td>
<td>{$item_qty}</td>
<td class="right {$issueList_display|display}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong>
<div class="{$product_price_ref_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</div>
</td>
<td class="{$issueList_display|display}">
<p><a href="#none" class="btnNormal {$cancelScriptionItemClass}" data-cancel_action_json="{$cancel_action_json}" data-has_temporder="{$temp_order}">신청 해지</a></p>
</td>
<td class="{$cancelList_display|display}">
<p class="{$customerCancel_display|display}">구매자 해지</p>
<p class="{$systemCancel_display|display}">시스템 자동 해지</p>
</td>
</tr>
<tr>
<td class="number {$display_column|display}" rowspan="{$row_span}">
{$ins_timestamp}
<p>[{$invoice_no}]</p>
</td>
<td>{$subscription_cycle_info}</td>
<td class="{$issueList_display|display}">
{$expected_pay_date}
<p>[{$expected_pay_seq}회차]</p>
</td>
<td class="{$cancelList_display|display}">{$cancel_timestamp}</td>
<td class="thumb"><a href="/product/detail.html{$param}"><img src="{$product_image}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" alt=""/></a></td>
<td class="product left top">
<strong class="name">{$product_name_link}</strong>
<div class="option {$option_display|display}">{$option_str}</div>
</td>
<td>{$item_qty}</td>
<td class="right {$issueList_display|display}"><strong>{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</strong>
<div class="{$product_price_ref_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</div>
</td>
<td class="{$issueList_display|display}">
<p><a href="#none" class="btnNormal {$cancelScriptionItemClass}" data-cancel_action_json="{$cancel_action_json}" data-has_temporder="{$temp_order}">신청 해지</a></p>
</td>
<td class="{$cancelList_display|display}">
<p class="{$customerCancel_display|display}">구매자 해지</p>
<p class="{$systemCancel_display|display}">시스템 자동 해지</p>
</td>
</tr>
</tbody>
</table>
<p class="message {$empty_display|display}">신청 내역이 없습니다.</p>
</div>
<div module="Myshop_OrderRegularManagePage" class="ec-base-paginate">
<a href="{$param_first}" class="first"><img src="//img.echosting.cafe24.com/skin/base/common/btn_page_first.gif" alt="첫 페이지"></a>
<a href="{$param_prev}"><img src="//img.echosting.cafe24.com/skin/base/common/btn_page_prev.gif" alt="이전 페이지"></a>
<ol>
<li><a href="{$param_page}">{$page_no}</a></li>
<li><a href="{$param_page}">{$page_no}</a></li>
</ol>
<a href="{$param_next}"><img src="//img.echosting.cafe24.com/skin/base/common/btn_page_next.gif" alt="다음 페이지"></a>
<a href="{$param_last}" class="last"><img src="//img.echosting.cafe24.com/skin/base/common/btn_page_last.gif" alt="마지막 페이지"></a>
</div>
2) 위치 및 파일명 : css/module/myshop/regularDeliveryPayInfo.css
▼ 신규 파일을 추가합니다.
.regularDeliveryPayInfo { position:relative; margin:0 0 30px; }
.regularDeliveryPayInfo > .title { margin:0 0 20px; font-size:12px; color:#353535; }
.regularDeliveryPayInfo .ec-base-box .information { float:left; }
.regularDeliveryPayInfo .ec-base-box .information .title { display:table-cell; height:24px; padding:0 15px 0 0; line-height:24px; font-size:12px; background:url(//img.echosting.cafe24.com/skin/base/common/ico_bar.gif) no-repeat 100% 6px; }
.regularDeliveryPayInfo .ec-base-box .information .status { display:table-cell; padding:0 15px; color:#008bcc; }
.regularDeliveryPayInfo .ec-base-box .button { float:right; }
.regularDeliveryPayInfo .ec-base-box:after { content:''; display:block; clear:both; }
.regularDeliveryPayInfo ul { margin:10px 0 0; color:#939393; line-height:1.5; }
.regularDeliveryPayInfo ul li { padding:0 0 0 9px; background: url(//img.echosting.cafe24.com/skin/base/common/ico_square2.gif) no-repeat 4px 7px; }
.regularDeliveryPayInfo .ec-base-tooltip { top:90px; right:25px; }
.regularDeliveryPayInfo .ec-base-tooltip p + p { margin:10px 0 0; }
3) 위치 및 파일명 : css/module/myshop/regularDeliveryListItem.css
▼ 신규 파일을 추가합니다.
.xans-myshop-orderregularmanagelist .title { margin:40px 0 10px 10px; }
.xans-myshop-orderregularmanagelist .title h3 { color:#353535; font-size:12px; }
.xans-myshop-orderregularmanagelist.ec-base-table td .line { text-decoration:underline; }
.xans-myshop-orderregularmanagelist.ec-base-table td.number { letter-spacing:-1px; }
.xans-myshop-orderregularmanagelist.ec-base-table td.thumb img { width:80px; }
.xans-myshop-orderregularmanagelist.ec-base-table .name .ec-set-product-name { display:block; }
.xans-myshop-orderregularmanagelist.ec-base-table td.product div.option,
.xans-myshop-orderregularmanagelist.ec-base-table td.product ul.option > li { margin:9px 0 0; color:#757575; line-height:16px; }
.xans-myshop-orderregularmanagelist.ec-base-table td.product ul.option > li > strong { display:block; color:#353535; }
.xans-myshop-orderregularmanagelist.ec-base-table td.product div.option span.file a,
.xans-myshop-orderregularmanagelist.ec-base-table td.product ul.option > li > span.file a { margin:0 0 0 4px; padding:0 0 0 11px; color:#757575; text-decoration:underline; background:url("//img.echosting.cafe24.com/skin/base/common/ico_file.gif") no-repeat 0 2px; }
.xans-myshop-orderregularmanagelist.ec-base-table td.number [class^="btn"],
.xans-myshop-orderregularmanagelist.ec-base-table td.state [class^="btn"] { margin:1px 0; }
4) 위치 및 파일명 : js/module/myshop/regularDeliveryPayInfo.js
▼ 신규 파일을 추가합니다.
$(document).ready(function(){
// 등록카드 정보조회
$('.ec-base-tooltip .close').live('click', function() {
$(this).parent().hide();
$(this).parent().parent().find('span.arrow').hide();
return false;
});
});
■ 모바일 쇼핑몰
1. 상품상세
1) 위치 : /product/detail.html
▼ 아래와 같이 빨간색 부분을 삭제, 파란색 부분을 추가합니다.
| ## 상단 생략 ## </table> </div> <div class="ec-base-table gClearCell {$regular_delivery_display|display}"> <table border="1"> <colgroup> <col style="width:100px;"> <col style="width:auto;"> </colgroup> <tbody> <tr> <th scope="row">구매방법</th> <td> <label>{$regular_deliveryF}1회구매</label> <label>{$regular_deliveryT}정기배송</label> </td> </tr> <tr class="{$regular_cycle_period|display}" id="{$regular_cycle_period_id}"> <td colspan="2" class="shippingCycle"> <strong class="title">배송주기</strong> <div class="button" module="product_regularPeriod"> <label class="gLabel">{$item_form}<span class="txt">{$item_content}</span></label> <label class="gLabel">{$item_form}<span class="txt">{$item_content}</span></label> </div> </td> </tr> </tbody> </table> </div> <div class="ec-base-table typeWrite gClearCell"> <table border="1" module="product_option"> ## 중간 생략 ## <div class="ec-base-button gColumn {$action_display|display}"> <button type="button" class="btnNormal {$basket_display|display}" onclick="{$action_basket}" id="actionCart">장바구니</button> <button type="button" class="btnNormal {$wishlist_display|display}" onclick="{$action_wishlist}" id="actionWish">관심상품</button> <a href="#none" class="btnStrong {$buy_display|display}" onclick="{$action_buy}"><span id="{$btn_buy_mobile_id}">구매하기</span><span class="{$btn_reserve_class|display}" id="{$btn_reserve_mobile_id}">예약주문</span></a> <a href="#none" class="btnStrong {$buy_display|display}" onclick="{$action_buy}"><span id="{$btn_buy_mobile_id}">구매하기</span><span class="{$btn_reserve_class|display}" id="{$btn_reserve_mobile_id}">예약주문</span><span id="{$btn_regular_delivery_id}" class="{$btn_regular_delivery|display}">정기배송 신청하기</span></a> </div> ## 중간 생략 ## <div class="ec-base-button gColumn soldout {$action_soldout_display|display}"> <button type="button" class="btnStrong {$soldout_display|display}">SOLD OUT</button> <div class="ec-base-button gColumn {$action_display|display}"> <button type="button" class="btnNormal {$basket_display|display}" id="actionCartClone">장바구니</button> <button type="button" class="btnNormal {$wishlist_display|display}" id="actionWishClone">관심상품</button> <a href="#none" class="btnStrong {$buy_display|display}"><span id="{$btn_buy_mobile_clone_id}">구매하기</span><span class="{$btn_reserve_class|display}" id="{$btn_reserve_mobile_clone_id}">예약주문</span></a> <a href="#none" class="btnStrong {$buy_display|display}"><span id="{$btn_buy_mobile_clone_id}">구매하기</span><span class="{$btn_reserve_class|display}" id="{$btn_reserve_mobile_clone_id}">예약주문</span><span id="{$btn_regular_delivery_clone_id}" class="{$btn_regular_delivery|display}">정기배송 신청하기</span></a> </div> <div class="ec-base-button gColumn {$action_soldout_display|display}"> <button type="button" class="btnStrong {$soldout_display|display}">SOLD OUT</button> |
2) 위치 : mobile/product/layer_option.html
▼ 아래와 같이 빨간색 부분을 삭제, 파란색 부분을 추가합니다.
| ## 상단 생략 ## <div module="product_action"> <div class="ec-base-button gColumn {$action_display|display}"> <a href="#none" class="btnSubmit {$buy_display|display}" onclick="{$action_buy}"><span id="{$btn_buy_mobile_id}">구매하기</span><span class="{$btn_reserve_class|display}" id="{$btn_reserve_mobile_id}">예약주문</span></a> <a href="#none" class="btnSubmit {$buy_display|display}" onclick="{$action_buy}"><span id="{$btn_buy_mobile_id}">구매하기</span><span class="{$btn_reserve_class|display}" id="{$btn_reserve_mobile_id}">예약주문</span><span id="{$btn_regular_delivery_id}" class="{$btn_regular_delivery|display}">정기배송 신청하기</span></a> <button type="button" class="btnEm {$basket_display|display}" onclick="{$action_basket}">장바구니</button> <button type="button" class="btnEm {$wishlist_display|display}" onclick="{$action_wishlist}">관심상품</button> </div> |
3) 위치 : mobile/product/add_basket2.html
▼ 아래와 같이 파란색 부분을 추가합니다.
| ## 상단 생략 ## <p class="{$sale_price_display|display}"><strong>{$disp_sale_price}</strong></p> <p class="{$sale_price_ref_display|display}"><strong>{$disp_sale_price_ref}</strong></p> <p class="amount">수량 : {$quantity}</p> <p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </div> </li> <li> @@ -41,6 +42,7 @@ <p class="{$sale_price_display|display}"><strong>{$disp_sale_price}</strong></p> <p class="{$sale_price_ref_display|display}"><strong>{$disp_sale_price_ref}</strong></p> <p class="amount">수량 : {$quantity}</p> <p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p> </div> </li> </ul> |
4) 위치 : /css/module/product/detail.css
▼ 아래와 같이 파란색 부분을 추가합니다.
| ## 상단 생략 ## /* 정기결제 */ .shippingCycle { background:#f1f1f1; } .shippingCycle .title { display:inline-block; padding:5px 3px; font-size:12px; font-weight:bold; color:#1b1b1b; } .shippingCycle .button { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; } .shippingCycle .button .gLabel { position:relative; overflow:hidden; width:25%; margin:0; padding:3px; box-sizing:border-box; } .shippingCycle .button .gLabel .txt { display:inline-block; width:100%; height:32px; line-height:30px; text-align:center; border:1px solid #d7d5d5; background:#fff; cursor:pointer; box-sizing:border-box; } .shippingCycle .button .gLabel input { position:absolute; top:0; left:-9999em; } .shippingCycle .button .gLabel input:checked + .txt { line-height:28px; border:2px solid #008bcc; } |
2. 장바구니
- 위치 : /order/basket.html
▼ 아래와 같이 빨간색 부분을 삭제, 파란색 부분을 추가합니다.
| ## 상단 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span> [{$delv_type}] / 기본배송 {$product_delv_str} </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -83,7 +84,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span> [{$delv_type}] / 기본배송 {$product_delv_str} </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -138,7 +141,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 기본배송 {$product_delv_str} </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -208,7 +213,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 기본배송 {$product_delv_str} </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -262,7 +269,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 개별배송 {$product_delv_str} </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> ## 중간 생략 ## <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 개별배송 {$product_delv_str} </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> ## 중간 생략 ## <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 해외배송 </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -464,7 +477,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 해외배송 </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -518,7 +533,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 기본배송 {$product_delv_str} </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -591,7 +608,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 기본배송 {$product_delv_str} </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -645,7 +664,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 개별배송 {$product_delv_str} </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -717,7 +738,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 개별배송 {$product_delv_str} </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -771,7 +794,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 해외배송 </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> @@ -844,7 +869,8 @@ <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> ## 중간 생략 ## <li>배송 : <span class="{$delv_price_display|display}">{$delv_price_front_head}{$delv_price_front}{$delv_price_front_tail}<span class="refer {$delv_ref_display|display}">{$delv_price_back_head}{$delv_price_back}{$delv_price_back_tail}</span></span>[{$delv_type}] / 해외배송 </li> <li class="{$subscription_show_display|display}">배송주기 <span class="txtEm">{$subscription_option_str}</span></li> <li title="적립금" id="{$product_mileage_id}" class="mileage">{$mileage}</li> <li class="price"> <span id="{$product_price_div_id}" class="{$discount}" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail} <span class="{$product_price_display|display}">{$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span> ## 중간 생략 ## <a href="#none" onclick="{$action_move_item}" class="btnNormal">삭제</a> <a href="#none" onclick="{$action_wish_item}" class="btnNormal">관심상품</a> </div> <a href="#none" onclick="{$action_buy_item}" class="btnStrong">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_hide_display|display}">주문하기</a> <a href="#none" onclick="{$action_buy_item}" class="btnStrong {$subscription_show_display|display}">정기배송 신청</a> </div> </div> </div> |
3. 주문서작성
※ '주문서작성'의 경우 원터치 주문서에 한해 가이드 되오니 원터치 주문서로 전환 후 적용하시기 바랍니다.
1) 위치 : mobile/order/orderform.html
▼ 아래와 같이 빨간색 부분을 삭제, 파란색 부분을 추가합니다.
| ## 상단 생략 ## <div class="ec-base-button gFull" id="orderFixItem"> <button type="button" class="btnSubmit" id="{$btn_payment_id}"> {$total_order_price_front_head}<span id="{$total_order_price_front_id}">{$total_order_price_front}</span>{$total_order_price_front_tail} 결제하기 {$total_order_price_front_head}<span id="{$total_order_price_front_id}">{$total_order_price_front}</span>{$total_order_price_front_tail} <span class="{$subscription_hide_display|display}">결제하기</span><span class="{$subscription_show_display|display}">정기배송 신청하기</span> ## 중간 생략 ## <div class="helpArea"> <ul class="ec-base-help typeDash"> <li class="{$subscription_show_display|display}"><span class="txtEm">상기 금액은 결제 시점의 금액과 다를 수 있습니다.</span></li> <li>무이자할부가 적용되지 않은 상품과 무이자할부가 가능한 상품을 동시에 구매할 경우 전체 주문 상품 금액에 대해 무이자할부가 적용되지 않습니다. 무이자할부를 원하시는 경우 장바구니에서 무이자할부 상품만 선택하여 주문하여 주시기 바랍니다.</li> <li>최소 결제 가능 금액은 결제금액에서 배송비를 제외한 금액입니다.</li> </ul> |
2) 위치 : mobile/js/module/order/order_form.js
▼ 아래와 같이 파란색 부분을 추가합니다.
| ## 상단 생략 ## $(document).ready(function(){ |
4. 주문서작성 - 약관 (신규)
※ '주문서작성'의 경우 원터치 주문서에 한해 가이드 되오니 원터치 주문서로 전환 후 적용하시기 바랍니다.
1) 위치 및 파일명 : mobile/order/agreement/regular_delivery.html
▼ 신규 파일을 추가합니다.
<!--@layout(/layout/basic/popup.html)-->
<div module="Order_form" class="ec-base-layer">
<!--@css(/css/module/order/agreementRegularDelivery.css)-->
<h1>정기결제 서비스 이용 동의</h1>
<div class="wrap">{$form.subscription_info_content}</div>
<div class="ec-base-button gFull">
<button type="button" class="btnEm" onclick="{$action_insurance_agree}">닫기</button>
</div>
<button type="button" class="btnClose" onclick="window.close()">닫기</button>
</div>
2) 위치 및 파일명 : mobile/css/module/order/agreementRegularDelivery.css
▼ 신규 파일을 추가합니다.
.popup form#frm_order_act { height:100%; }
.xans-order-form .wrap { margin:7px 7px 0; border:none; }
.xans-order-form.ec-base-layer .wrap { padding:7px; }
.xans-order-form .wrap h2 { margin:5px 10px; font-size:13px; }
.xans-order-form .wrap textarea { width:100%; height:100%; }
5. 마이쇼핑 - 메인
1) 위치 : mobile/myshop/index.html
▼ 아래와 같이 파란색 부분을 추가합니다.
| ## 상단 생략 ## <li class="coupon {$coupon_display|display}"><a href="/myshop/coupon/coupon.html">쿠폰 <span class="count {$coupon_count_display|display}">({$coupon_count})</span></a></li> <li class="board"><a href="/myshop/board_list.html">게시물관리</a></li> <li class="address"><a href="/myshop/addr/list.html">배송 주소록 관리</a></li> <li class="regularDelivery {$regular_delivery_display|display}"><a href="/myshop/regular_delivery.html">정기배송 관리</a></li> </ul> </div> </div> |
2) 위치 : mobile/css/module/myshop/main.css
▼ 아래와 같이 파란색 부분을 추가합니다.
.xans-myshop-main li.regularDelivery { background-image:url("//img.echosting.cafe24.com/skin/mobile/myshop/ico_regular_delivery.png"); }
6. 마이쇼핑 - 주문상세조회
- 위치 : /myshop/order/detail.html
▼ 아래와 같이 빨간색 부분을 삭제, 파란색 부분을 추가합니다.
| ## 상단 생략 ## <tbody> <tr> <th scope="row">주문번호</th> <td>{$order.order_id}</td> <td>{$order.order_id} <span>{$order.order_icon}</span></td> </tr> <tr> <th scope="row">주문일자</th> |
7. 마이쇼핑 - 정기배송 관리 (신규)
1) 위치 및 파일명 : /myshop/regular_delivery.html
▼ 신규 파일을 추가합니다.
<!--@layout(/layout/basic/layout.html)-->
<div id="titleArea">
<h2>정기배송 관리</h2>
<span module="Layout_MobileAction">
<a href="#none" onclick="{$go_back}"><img src="//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_back.gif" width="33" alt="뒤로가기"></a>
</span>
</div>
<div class="regularDeliveryPayInfo" module="MyShop_OrderRegularPg">
<!--@css(/css/module/myshop/regularDeliveryPayInfo.css)-->
<!--@js(/js/module/myshop/regularDeliveryPayInfo.js)-->
<h3 class="title">결제카드 정보</h3>
<div class="ec-base-box">
<div class="information">
<h4 class="title">정기배송 결제카드</h4>
<p class="status {$unregistCard_display|display}">미등록</p>
<p class="status {$registCard_display|display}">등록완료</p>
</div>
<div class="button">
<a href="#" id="{$lookupCardInfoId}" class="btnStrong cardSearch">등록카드 정보조회</a>
<a href="#" id="{$registModifyCardId}" class="btnStrong">결제카드 등록/변경</a>
</div>
<div class="ec-base-tooltip wrap" id="{$registerdCardInfoLayer}">
<h3>등록카드 정보조회</h3>
<div class="content">
<p>결제 업체(PG사) 조회 결과 고객님의<br/>정기배송(결제)을 위해 등록된 카드 정보는 다음과 같습니다.</p>
<p class="txtEm" id="{$registedCardNumberId}"></p>
<p>※ 위 카드 정보는 PG사에 안전하게 보관되며,<br>이후 배송주기별 결제 시점에 결제를 위한 정보로 사용됩니다.</p>
</div>
<button type="button" class="close btnClose">닫기</button>
<a href="#" class="btnClose close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close_tip.gif" alt="닫기"></a>
<span class="edge"></span>
</div>
</div>
<ul class="ec-base-help">
<li class="">결제예정일 (주기별 배송시작일 하루 전)에 위의 카드 정보로 정기배송 상품이 결제됩니다.</li>
</ul>
</div>
<div class="ec-base-tab gBlank7" module="Myshop_OrderRegularManageHead">
<ul>
<li class="{$issueListTabSelected}"><a href="#none" id="{$issueListTabId}"><span>신청내역<span class="number">({$issueInvoiceCount}건)</span></span></a></li>
<li class="{$cancelListTabSelected}"><a href="#none" id="{$cancelListTabId}" ><span>해지내역<span class="number">({$cancelItemCount}건)</span></span></a></li>
</ul>
</div>
<div module="myshop_OrderRegularManageList">
<!--@css(/css/module/myshop/regularDeliveryListItem.css)-->
<div class="orderList {$list_display|display}">
<div class="order">
<h3 class="{$display_column|display}">
<span class="date" title="주문일자">{$ins_timestamp}</span>
<span class="number" title="주문번호">({$invoice_no})</span>
</h3>
<div class="ec-base-prdInfo">
<div class="prdBox">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$product_image}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" width="71" height="71" alt=""></a></div>
<div class="description">
<strong class="prdName" title="상품명">{$product_name_link}</strong>
<ul class="info">
<li>
<span class="price" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail}<span class="refer {$product_price_ref_display|display}"> {$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span>
<span class="ec-base-qty" title="수량"><strong>{$item_qty}</strong>개</span>
</li>
<li>
<span class="txtEm">{$subscription_cycle_info}</span>
</li>
</ul>
</div>
</div>
<p class="option {$option_display|display}">{$option_str}</p>
<div class="prdFoot" title="주문처리상태">
<div class="gLeft {$issueList_display|display}">
{$expected_pay_date} [{$expected_pay_seq}회차] 결제 예정
</div>
<div class="gRight {$issueList_display|display}">
<a href="#none" class="btnNormal mini {$cancelScriptionItemClass}" data-cancel_action_json="{$cancel_action_json}" data-has_temporder="{$temp_order}">신청 해지</a>
</div>
<div class="gLeft {$cancelList_display|display}">
{$cancel_timestamp} 해지 완료
<span class="{$customerCancel_display|display}">(구매자 해지)</span>
<span class="{$systemCancel_display|display}">(시스템 자동 해지)</span>
</div>
</div>
</div>
</div>
<div class="order">
<h3 class="{$display_column|display}">
<span class="date" title="주문일자">{$ins_timestamp}</span>
<span class="number" title="주문번호">({$invoice_no})</span>
</h3>
<div class="ec-base-prdInfo">
<div class="prdBox">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$product_image}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" width="71" height="71" alt=""></a></div>
<div class="description">
<strong class="prdName" title="상품명">{$product_name_link}</strong>
<ul class="info">
<li>
<span class="price" title="판매가">{$product_price_front_head}<strong>{$product_price_front}</strong>{$product_price_front_tail}<span class="refer {$product_price_ref_display|display}"> {$product_price_back_head}{$product_price_back}{$product_price_back_tail}</span></span>
<span class="ec-base-qty" title="수량"><strong>{$item_qty}</strong>개</span>
</li>
<li>
<span class="txtEm">{$subscription_cycle_info}</span>
</li>
</ul>
</div>
</div>
<p class="option {$option_display|display}">{$option_str}</p>
<div class="prdFoot" title="주문처리상태">
<div class="gLeft {$issueList_display|display}">
{$expected_pay_date} [{$expected_pay_seq}회차] 결제 예정
</div>
<div class="gRight {$issueList_display|display}">
<a href="#none" class="btnNormal mini {$cancelScriptionItemClass}" data-cancel_action_json="{$cancel_action_json}" data-has_temporder="{$temp_order}">신청 해지</a>
</div>
<div class="gLeft {$cancelList_display|display}">
{$cancel_timestamp} 해지 완료
<span class="{$customerCancel_display|display}">(구매자 해지)</span>
<span class="{$systemCancel_display|display}">(시스템 자동 해지)</span>
</div>
</div>
</div>
</div>
</div>
<p class="empty {$empty_display|display}">신청 내역이 없습니다.</p>
</div>
<div class="ec-base-paginate typeList" module="Myshop_OrderRegularManagePage">
<a href="{$param_prev}" class="btnPrev">이전 페이지</a>
<ol>
<li><a href="{$param_page}" >{$page_no}</a></li>
<li><a href="{$param_page}" >{$page_no}</a></li>
</ol>
<a href="{$param_next}" class="btnNext">다음 페이지</a>
</div>
2) 위치 및 파일명 : mobile/css/module/myshop/regularDeliveryPayInfo.css
▼ 신규 파일을 추가합니다.
.regularDeliveryPayInfo { margin:7px 7px 14px; }
.regularDeliveryPayInfo > h3.title { padding:14px; border:1px solid #d5d5d5; border-bottom:none; background:#f1f1f1; }
.regularDeliveryPayInfo .ec-base-box { margin:0; padding:0; }
.regularDeliveryPayInfo .information { padding:14px; }
.regularDeliveryPayInfo .information .title { display:table-cell; width:140px; }
.regularDeliveryPayInfo .information .status { display:table-cell; vertical-align:middle; font-weight:bold; color:#008bcc; }
.regularDeliveryPayInfo .button { padding:8px; text-align:center; border-top:1px solid #ececec; }
/* 카드정보 조회 */
.regularDeliveryPayInfo .wrap { display:none; z-index:999; position:fixed; left:2% !important; width:96%; top:100px; margin:0; padding:0; border:1px solid #d5d5d5; background:#fff; border-radius:5px; box-sizing:border-box;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);
}
.regularDeliveryPayInfo .wrap h3 { padding:0 14px; font-size:13px; line-height:36px; background-color:#f0f0f0; border-bottom:1px solid #d5d5d5; border-radius:5px 5px 0 0; }
.regularDeliveryPayInfo .wrap .content { padding:14px; }
.regularDeliveryPayInfo .wrap h4 { position:relative; margin:0 7px 7px; }
.regularDeliveryPayInfo .wrap h4:before { display:inline-block; content:""; margin:0 5px 0 0; width:3px; height:3px; background:#666; vertical-align:middle; }
.regularDeliveryPayInfo .wrap .txtEm { color:#008bcc; }
.regularDeliveryPayInfo .wrap .info { margin:0; color:#757575; font-size:11px; }
.regularDeliveryPayInfo .wrap .btnClose { overflow:hidden; position:absolute; right:0; top:0; width:36px; height:36px; font-size:0; border:none; background:transparent url("//img.echosting.cafe24.com/skin/mobile/common/btn_close.png") center center no-repeat; background-size:14px 14px; }
3) 위치 및 파일명 : /css/module/myshop/regularDeliveryListItem.css
▼ 신규 파일을 추가합니다.
/* 타이틀 */
.xans-myshop-orderregularmanagelist .title h3 { line-height:43px; margin:7px 0 0; padding:0 0 0 14px; font-size:13px; color:#fff; background-color:#4a5164; }
.xans-myshop-orderregularmanagelist .order h3 { overflow:hidden; margin:7px 0 0; padding:0 0 0 14px; line-height:43px; color:#fff; font-size:13px; font-weight:normal; background-color:#737781; }
.xans-myshop-orderregularmanagelist .order h3:after { content:""; display:block; clear:both; }
.xans-myshop-orderregularmanagelist .order h3 a { color:#fff; }
/* 상품 리스트 */
.xans-myshop-orderregularmanagelist { margin:0 7px 0; }
.xans-myshop-orderregularmanagelist .order { position:relative; border-left:1px solid #d5d5d5; border-right:1px solid #d5d5d5; background-color:#fff; }
.xans-myshop-orderregularmanagelist .order .date { font-weight:bold; }
.xans-myshop-orderregularmanagelist a.btnDetail { position:absolute; top:14px; right:14px; padding:0 14px 0 0; font-size:11px; color:#fff; background:url("//img.echosting.cafe24.com/skin/mobile_ko_KR/order/btn_arrow_right.jpg") right center no-repeat; background-size:8px 13px; }
.xans-myshop-orderregularmanagelist .empty { text-align:center; padding:30px 0 30px; }
.xans-myshop-orderregularmanagelist .request { position:relative; overflow:hidden; margin:0 -14px -6px; padding:0 14px; border-bottom:1px solid #d5d5d5; font-weight:bold; color:#508bed; background-color:#f1f1f1; text-align:center; }
.xans-myshop-orderregularmanagelist .prdFoot { border-bottom:1px solid #d5d5d5; }
.xans-myshop-orderregularmanagelist .prdFoot + .request { margin-top:6px; }
.xans-myshop-orderregularmanagelist .prdFoot + .request:before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:#d5d5d5; }
.xans-myshop-orderregularmanagelist .request [class*='btn'] { margin:6px 0; }
4) 위치 및 파일명 : mobile/js/module/myshop/regularDeliveryPayInfo.js
▼ 신규 파일을 추가합니다.
| $(document).ready(function(){ // 등록카드 정보조회 $('.ec-base-tooltip .close').live('click', function() { $(this).parent().hide(); $(this).parent().parent().find('span.arrow').hide(); return false; }); }); |
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]