Help Center

카페24 소식

[상점관리] 독립선택형 옵션 상품의 경우 목록에서 장바구니 및 옵션보기 기능 안내

2015-01-21


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

상품목록화면에서 제공되는 장바구니 담기와 옵션 미리보기 기능이

독립선택형 옵션 상품의 경우에도 제공되도록 업그레이드 되었습니다.

자세한 내용은 아래 내용을 참고해 주세요.


※ 본 기능은 뉴상품관리를 사용하는 몰에서만 이용 가능합니다.

    (뉴상품관리로의 업그레이드는 고객지원센터로 문의주세요.)




■ 적용일자 : 2015-01-21 (수)

■ 업데이트 내용

 상품목록 화면에서 "장바구니 담기"와 "옵션 미리보기" 기능이

 조함일체선택형 옵션과 조합분리선택형 옵션 상품에만 제공되었으나,

 독립선택형 옵션 상품에 대해서도 사용이 가능하도록 기능이 업그레이드 되었습니다.

 
 [개선 전] :
조합일체선택형 / 조합분리선택형 옵션 상품에만 기능 제공

 [개선 후] : 독립선택형 옵션 상품에도 기능 제공되도록 개선



1. 설정 방법

 1) 목록에서 장바구니 담기 기능 설정 방법

 - 위치 :  상점관리 > 운영관리 > 운영방식설정 > 장바구니 설정 > 카테고리별 장바구니 담기 기능 설정


 2) 목록에서 옵션보기 기능 설정 방법

 - 위치 : 상품관리 > 상품표시관리 > 편의기능설정 > 옵션미리보기 기능



2. 디자인 설정하기


 목록에서 장바구니 담기 기능의 경우 기존 소스를 일부 수정하셔야 정상적으로 사용 가능합니다.

 - 위치 : 상품 > 장바구니 담기 옵션 (product/basket_option.html)


▼ 아래와 같이 파란색 소스를 추가, 빨간색 소스는 삭제 합니다.

※ 한국어 외, 영어, 일본어, 중국어(간체), 중국어(번체), 스페인어, 포루투갈어 스킨 모두 동일 적용

<style type="text/css">

/**

 익스플로어계열의 브라우져에서 ajax로 가져온 페이지의 외부 css호출 링크가 작동하지 않아서 직접 css를 입력합니다.

 디자인 수정시에도 확인 해주세요.

 */

.xans-product-basketoption { position:fixed; top:50%; left:50%; z-index:1000; width:420px; margin:-149px 0 0 -211px; font-family:Verdana, "돋움", Dotum, sans-serif; }

.xans-product-basketoption h1 { height:35px; padding:0 35px 0 19px; color:#fff; font-size:14px; line-height:35px; background:#495164; }

.xans-product-basketoption .content { overflow:auto; overflow-x:hidden; height:174px; padding:20px 25px; border-right:1px solid #757575; border-left:1px solid #757575; background:#fff; }

.xans-product-basketoption .close { position:absolute; right:20px; top:10px; }

.xans-product-basketoption .close img { cursor:pointer; }

.xans-product-basketoption .btnArea { padding:9px 0; border:1px solid #757575; border-top:1px solid #d7d5d5; text-align:center; background:#fbfafa; }

.xans-product-basketoption .btnArea img:first-child { margin:0 1px 0 0; }

.xans-product-basketoption .content p { padding:0 0 4px; color:#2e2e2e; }

.xans-product-basketoption .content p strong { color:#495164; }

.xans-product-basketoption table { border:1px solid #d7d5d5; color:#353535; font-size:11px; }

.xans-product-basketoption table th { padding:13px 0 11px; border-left:1px solid #e9e9e9; font-weight:normal; vertical-align:middle; background:#fbfafa; }

.xans-product-basketoption table th:first-child { border-left:0; }

.xans-product-basketoption table td { padding:12px 9px 9px; border-top:1px solid #e9e9e9; line-height:1.5; text-align:center; vertical-align:middle; }

.xans-product-basketoption table td.left { text-align:left; }

.xans-product-basketoption table td.quantity input { width:40px; padding:2px; border:1px solid #d5d5d5; font-size:12px; color:#353535; font-family:Verdana, "돋움", Dotum, sans-serif; text-align:center; background:none; }

.xans-product-basketoption table td .required { color:#f00; }

</style>

<!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->

<div module="Product_BasketOption">

    {$form.delvtype}

    <h1>장바구니 담기</h1>

    <div class="content">

        <p>상품명: <strong>{$name}</strong></p>

        <table border="1" summary="">

            <caption>상품 옵션입력</caption>

            <colgroup>

                <col style="width:40px;" "width:60px;" />

                <col style="width:auto;" />

                <col style="width:60px;" />

            </colgroup>

            <thead>

                <tr>

                    <th scope="col">선택</th>

                    <th scope="col">옵션</th>

                    <th scope="col">수량</th>

                </tr>

            </thead>

            <tbody>

                <tr module="Product_OptionList">

                    <td>{$form.check}</td>

                    <td class="left">{$option_name}</td>

                    <td class="quantity">{$form.quantity}</td>

                </tr>

                <tr module="Product_OptionList">

                    <td>{$form.check}</td>

                    <td class="left" {$name_colspan}>{$option_name}</td>

                    <td class="quantity {$quantity_display|display}">{$form.quantity}</td>

                </tr>

            </tbody>

        </table>

    </div>


### 하단 생략 ###



※ 이 기능은 순차 배포이므로, 쇼핑몰마다 적용 시기가 약간 다를 수 있습니다. 이 점 양해 바랍니다.




카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.

더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

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