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

 

봄이 오는 듯 매서운 추위가 풀리는가 싶더니 다시 동장군이 오려는 것 같습니다.
감기 조심하시고 오늘 하루도 저희 카페24와 함께 행복한 하루 되세요.

 

오늘 소개해 드릴 기능은 쇼핑몰에서 상품상세페이지까지 가지 않더라도
조합형 옵션을 사용중인 상품일 경우 옵션을 미리 볼 수 있는 기능입니다.

 

혹시 고객이 옵션만 보고 나가면 어떻게 하느냐며 걱정하시는 운영자분이 계실 수 있는데요
장바구니 담기도 함께 노출이 가능하니 활용을 하여주시면 됩니다.

■ 사용방법
1. 어드민 > 상점관리 > 상점운영방식 설정 > 옵션 미리보기 사용설정을 체크하여 주시면 됩니다.
2. 또한 바로 아래에 상세설정 기능이 있는데 마우스 오버를 해서 볼지와 클릭해서 볼지를 선택할 수 있습니다.

■ 디자인 설정

1. 화면추가 > 상품(product) 선택해서 저장경로 /product에 option_preview.html 라는 이름으로 html파일을 생성하고 아래 소스를 붙여넣기 하고 저장합니다.

<div module='Product_OptionPreview'>

    <!--@css(/css/module/product/optionPreview.css)-->

    <div id="{$opt_preview_id}" class="prdOption">

        <p class="ico"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/ico_option_arrow.gif" alt="" /></p>

        <div class="inner">

            <p class="close"><a href="#none" onclick="{$opt_preview_close}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/ico_option_close.gif" alt="닫기" /></a></p>

            <ul module="Product_optionPreviewList">

                <li>{$option}</li>

                <li>{$option}</li>

            </ul>

        </div>

    </div>

</div>

2. (/css/module/product/optionPreview.css) 이 경로에 optionPreview.css라는 css 파일도 생성해서 아래 소스를 붙여넣기 하고 저장합니다.

.xans-product-optionpreview { display:inline; }

.xans-product-optionpreview .prdOption { position:absolute; left:0; top:26px; z-index:100; width:300px; margin:0 0 0 -141px; }

.xans-product-optionpreview .prdOption .inner { padding:34px 24px 14px; border:1px solid #565960; color:#2e2e2e; background:#fff; }

.xans-product-optionpreview .prdOption li { padding:6px 0 7px; border-top:1px solid #d6d4d4; text-align:left; line-height:16px; font-size:12px; }

.xans-product-optionpreview .prdOption li:first-child { border:0; }

.xans-product-optionpreview .prdOption .close { position:absolute; right:14px; top:14px; }

.xans-product-optionpreview .prdOption .ico { position:absolute; left:50%; top:-5px; width:9px; height:6px; margin:0 0 0 -5px; }

3. 상품이 진열된 페이지 (main.html(메인), /product/list.html(상품분류)) 에 원하는 위치에 옵션 미리보기 아이콘을 추가합니다.

<div class="option">{$option_preview_icon}</div>

 

■ 적용된 화면
1. 어드민에서 설정이 완료되면 아래와 같이 Option View 아이콘이 생성됩니다.
2. 기본 이미지를 수정할 경우 어드민 > 디자인관리 > 이미지관리 > 아이콘이미지에서 수정을 해주세요.

   

 

■ 주의사항
1. 본 기능은 옵션항목이 활성화 되어 있을 경우에만 사용이 가능합니다.(조합형 옵션일 경우에만 가능)
2. 보여지는 옵션은 옵션 별 품절된 상품과 숨김 처리한 상품을 제외하고 재고가 존재하는 상품만 보여줍니다.
3. 클릭 시 보여지는 레이어창은 디자인 수정이 불가하나 곧 수정이 될 수 있도록 수정 배포할 예정입니다.

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

 

카페24 드림
2010-02-04