Help Center

카페24 소식

공지사항업데이트스토어소식

[모바일쇼핑몰] 장바구니 옵션 변경 기능 추가

2013-04-30

안녕하세요, 카페24 운영도우미 입니다.

모바일쇼핑몰 장바구니 화면에서 상품 옵션을 변경할 수 있도록 기능 업그레이드 되었습니다.

자세한 내용은 아래를 참조해 주세요.


■ 적용일자 : 2013-04-30 (화)

■ 업데이트 내용


아래의 안내에 따라 html 및 javascript 파일을 수정하시면 업그레이드 된 기능이 적용됩니다.
- 위치 : 쇼핑몰어드민 > 모바일쇼핑몰 > HTML디자인

 

1. 주문(order) > 장바구니(basket.html)


1) 옵션변경 버튼 추가
  - 아래와 같이 파란색 소스 부분을 추가해주세요.

<p class="descriptions">
    <strong><a href="/product/detail.html{$param}">{$name}</a></strong>
    <span class="option" module="Order_option">
        <span>{$opt}</span>
        <span>{$opt}</span>
    </span>
    <span class="option" module="Order_optionadd">
        <span>{$name} : {$opt}</span>
        <span>{$name} : {$opt}</span>
    </span>
    <!-- 새로 추가된 부분 -->
    <span class="button" style="display:{$optBtnDisp};">
        <a class="tButton type1" href="#none" onclick="Basket.showLayer('{$optModify_id}');"><span>옵션변경</span></a>
    </span>
    <!-- //새로 추가된 부분 -->
    <span class="price"><strong>합계</strong> <em>{$sum_price}</em></span>
    <span class="delete"><a href="#none" onclick="selBasketDel('{$chk_id}');"><img alt="삭제" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_delete.png" width="21" height="20"></a></span>
</p>


2) 옵션변경 레이어 팝업 추가

[수정 전]
<ul>
        <li><strong>판매가</strong> <span><em>{$product_price}</em></span></li>
        <li class="mileage"><strong>적립금</strong> <span>{$mileage}</span></li>
        <li><strong>수량</strong> <span>{$form.quantity} <a href="#none" class="tButton type2" onclick="{$action_modify}"><span>수정</span></a></span></li>
    </ul>
</section>

 ------------------------------------------------------------------------------------

[수정 후]
<ul class="information" >

        <li><strong>판매가</strong><span><em>{$product_price}</em></span></li>

        <li class="mileage"><strong>적립금</strong><span>{$mileage}</span></li>

        <li><strong>수량</strong><span>{$form.quantity} <a href="#none" class="tButtontype2" onclick="{$action_modify}"><span>수정</span></a></span></li>

    </ul>

    <div class="layerOptionModify" id="{$optModify_id}" style="top:0px;display:none;">
        <div class="gTitle">
            <h2>옵션변경</h2>
        </div>

        <ul module="Order_optchange">

            <li>

                <label>{$option_name}</label>

                <span class="frm">{$layer.option}</span>

            </li>

        </ul>

        <ul module="Order_optaddchange">

            <li>

                <label>{$add_option_name}</label>

                <span class="frm">{$layer.add_option}</span>

            </li>

        </ul>

        <div class="mButton type2">

            <p>

                <a href="#none" class="tSubmit2" onclick="Basket.modifyOption('{$sBasketIdx}');"><span>적용하기</span></a>

                <a href="#none" class="tSubmit1" onclick="Basket.closeLayer('{$optModify_id}');"><span>닫기</span></a>

            </p>

        </div>

        <a href="#none" class="btnClose" onclick="Basket.closeLayer('{$optModify_id}');">레이어 닫기</a>

    </div>

</section>



2. css > common.css
- 아래와 같이 소스를 수정해주세요


[수정 전]
.mBasket { }
.mBasket .gItem { margin:10px 0 0; padding:5px; border:1px solid rgb(161,161,163); }
.mBasket .prdEmpty { padding:30px; color:rgb(33,37,48); font-size:12px; text-align:center; border-bottom:1px solid rgb(161,161,163); }
.mBasket .prdInfo { position:relative; z-index:1; margin:-1px 5px 0; padding:5px 0 0; border-top:1px dotted rgb(161,161,163); border-bottom:1px dotted rgb(161,161,163); }
.mBasket .prdInfo p.prdImg { position:absolute; z-index:10; }
.mBasket .prdInfo p.prdImg input { vertical-align:top; }
.mBasket .prdInfo p.descriptions { position:relative; padding:0 35px 0 112px; min-height:95px; font-size:12px; }
.mBasket .prdInfo p .name { display:block; }
.mBasket .prdInfo p .option { display:block; margin:5px 0; }
.mBasket .prdInfo p .price { display:block; margin:10px 0 0; }
.mBasket .prdInfo p .delete { position:absolute; z-index:10; right:3px; top:3px; cursor:pointer; }
.mBasket .prdInfo p.trigger { text-align:center; background:rgb(223,223,224); }
.mBasket .prdInfo p.trigger img { line-height:20px; vertical-align:middle; cursor:pointer; }
.mBasket .prdInfo ul { display:none; padding:0 15px 5px; background:rgb(245,245,246); font-size:11px; line-height:26px; }
.mBasket .prdInfo ul li { overflow:hidden; padding:0 0 0 8px; background:url(http://img.echosting.cafe24.com/mobileWeb/common/bg_rowType2Th.png) 0 8px no-repeat; background-size:3px 7px; }
.mBasket .prdInfo ul li.mileage span { float:left; }
.mBasket .prdInfo ul li strong { float:left; width:60px; }
.mBasket .prdInfo ul li a { vertical-align:middle; }
.mBasket .prdInfo ul li a span { vertical-align:middle; position:relative; }

 ------------------------------------------------------------------------------------

[수정 후]
.mBasket .result { padding:15px 0; font-size:12px; text-align:center; background-color:#f5f5f6; }
.mBasket .result span { display:inline-block; padding:0 0 0 23px; background:url(http://img.echosting.cafe24.com/mobileWeb/common/ico_basket_result.png) no-repeat 0px 0px; background-size:19px 18px; }
.mBasket .result strong { color:#ff6600; }
.mBasket .gItem { margin:0 0 10px; padding:5px; border:1px solid rgb(161,161,163); }
.mBasket .prdEmpty { padding:30px; color:rgb(33,37,48); font-size:12px; text-align:center; border-bottom:1px solid rgb(161,161,163); }
.mBasket .prdInfo { position:relative; z-index:1; margin:-1px 5px 0; padding:5px 0 0; border-top:1px dotted rgb(161,161,163); border-bottom:1px dotted rgb(161,161,163); }
.mBasket .prdInfo p.prdImg { position:absolute; z-index:10; }
.mBasket .prdInfo p.prdImg input { vertical-align:top; }
.mBasket .prdInfo p.descriptions { position:relative; padding:0 35px 0 112px; min-height:95px; font-size:12px; }
.mBasket .prdInfo p .name { display:block; }
.mBasket .prdInfo p .option { display:block; margin:5px 0; }
.mBasket .prdInfo p .price { display:block; margin:10px 0 0; }
.mBasket .prdInfo p .delete { position:absolute; z-index:10; right:3px; top:3px; cursor:pointer; }
.mBasket .prdInfo p.trigger { text-align:center; background:rgb(223,223,224); }
.mBasket .prdInfo p.trigger img { line-height:20px; vertical-align:middle; cursor:pointer; }
.mBasket .prdInfo ul.information { display:none; padding:0 15px 5px; background:rgb(245,245,246); font-size:11px; line-height:26px; }
.mBasket .prdInfo ul.information li { overflow:hidden; padding:0 0 0 8px; background:url(http://img.echosting.cafe24.com/mobileWeb/common/bg_rowType2Th.png) 0 8px no-repeat; background-size:3px 7px; }
.mBasket .prdInfo ul.information li.mileage span { float:left; }
.mBasket .prdInfo ul.information li strong { float:left; width:60px; }
.mBasket .prdInfo ul.information li a { vertical-align:middle; }
.mBasket .prdInfo ul.information li a span { vertical-align:middle; position:relative; }


- 아래의 소스를 추가해주세요.


 /* 옵션변경 레이어 */
.layerOptionModify { z-index:1000; position:absolute; left:50%; width:280px; top:0px; margin:0 0 0 -150px; padding:10px; border:1px solid #999; background-color:#f5f5f7; border-radius:3px; }
.layerOptionModify ul { font-size:12px; }
.layerOptionModify li { position:relative; margin:5px 0 0; }
.layerOptionModify li:first-child { margin-top:10px; }
.layerOptionModify label { display:inline-block; padding:0 5px 0 10px; line-height:24px; vertical-align:middle; background:url("http://img.echosting.cafe24.com/mobileWeb/common/bg_rowType2Th.png") 0 50% no-repeat; background-size:3px 7px; }
.layerOptionModify .fText { width:160px; }
.layerOptionModify .mButton { margin:20px 0 0; }
.layerOptionModify .btnClose { position:absolute; right:10px; top:10px; overflow:hidden; width:18px; height:18px; text-indent:-9999px; background:url("http://img.echosting.cafe24.com/mobileWeb/common/btn_close.png") no-repeat 50% 50%; background-size:9px 8px; }



 

▼ 장바구니 화면




카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]

이전글

[모바일쇼핑몰] 메인화면 이벤트 배너 기능 추가

2013-04-30

다음글

[모바일쇼핑몰] 상품상세화면 기능 업그레이드!

2013-05-02