본문 바로가기

현재 위치
  1. HOME
  2. 쇼핑몰 TIP

쇼핑몰 TIP

온라인 쇼핑몰 제작부터 운영, 마케팅까지! 유용한 정보를 제공합니다.

카테고리 상세
번호 문의유형 제목
2351 소비자가 대비 판매가에 적용된 할인율/할인 금액 표시하기 조회수 8420
  • 작성일 2020-02-18 14:26:05
  • 추천 추천하기
  • 조회수 8420

할인된 금액보다는

얼마나 할인되었는지가 중요하다!



할인은 고객을 끌어들이는 좋은 방법의 하나입니다.


하지만 무조건 싼 것보다는

얼마나 할인된 것인지가 더 중요할 수 있다는 사실!


할인이 얼마큼 적용되었는지 보여준다면

고객들의 구매 욕구를 더 높일 수 있겠죠?


고객들이 처음으로 상품을 마주하는 메인과 상품 분류 페이지는 물론

상품 확대 보기 및 상세 페이지에서 할인율/할인 금액을 표시하는 방법을 소개해드립니다.



※ 단, 메인이나 상품 목록에 노출되는 상품이 많을 경우 할인율 계산으로 인해 페이지 로딩이 느려질 수 있습니다.




공통 사항

1. 스마트디자인 편집장에서 신규 js 파일 추가 후 아래 소스 삽입
- 위치: /js/module/product/sale_price.js

 ※ 해당 가이드는 기본 스킨을 기준으로한 js 이므로 표시가 안 될 경우 페이지에 맞게  커스터마이징해 사용하기 바랍니다.
예시) 상품목록 페이지에서 body id="JD_MAIN" 이고 상품분류 페이지에서 body id="COMMON" 일 경우
해당 파일에 var mainEl = $("#JD_MAIN, #COMMON"); 로 변경

$(document).ready(function() {
var filter = "win16|win32|win64|mac|macintel"; var device = "pc"; if (navigator.platform) { if (filter.indexOf(navigator.platform.toLowerCase()) < 0) { device = "mobile"; } } /** * 상품상세, 상품 확대보기(팝업) - 소비자가 할인표시 */ var oPriceInfoEl = $('#ec-product-price-info'); if (oPriceInfoEl.length > 0) { var salePriceEl = $('#span_product_price_text'); percentageCul(oPriceInfoEl, salePriceEl); } /** * 상품목록/메인진열 - 소비자가 할인표시*/ var mainEl = $("#main"); if (mainEl.length > 0) {
var productListEl = $('.xans-product-listmain, .xans-product-listrecommend, .xans-product-listnew, .xans-product-listnormal'); for (var i = 0; i < productListEl.length; i++) { var prdListEl = productListEl.eq(i).find('.prdList > li'); for (var j = 0; j < prdListEl.length; j++) { var priceEl = prdListEl.eq(j).find('.description'), salePriceEl = priceEl.find('.xans-product > li').eq(1).find('span:eq(1)'); if (device == "mobile") { salePriceEl = priceEl.find('.spec >li.price'); } percentageCul(priceEl, salePriceEl); } } } function percentageCul(target, salePriceEl) { var iCustomPrice = parseInt(target.attr('ec-data-custom')), iPrice = parseInt(target.attr('ec-data-price')), sDisplayAmount = 'p', // p:할인율, w:할인금액 iOfftoFixed = 1, // 할인율 소수점자릿수 sSaleText = '', regexp = /\B(?=(\d{3})+(?!\d))/g; if (iCustomPrice > 0 && iPrice > 0 && iPrice != iCustomPrice) { if (sDisplayAmount == 'p') { sSaleText = (((iCustomPrice - iPrice) / iCustomPrice) * 100).toFixed(iOfftoFixed) + '% OFF'; } else if (sDisplayAmount == 'w') { sSaleText = parseInt(iCustomPrice - iPrice).toString().replace(regexp, ',') + '원 OFF'; } salePriceEl.append('<span class="ec-sale-rate"> ' + sSaleText + '</span>'); } } });



메인 페이지에 노출하기




1. 상품 메인 파일에 있는 빨간색 소스파란색 소스모두 교체

- 상품 메인: /product/index.html


 <div class="description">
<div class="description" ec-data-custom="{$product_custom}" ec-data-price="{$product_price}">
<strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}">
<span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
<ul module="product_ListItem" class="spec">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>

2. 해당 파일 최하단에 아래 소스 추가

<!--@js(/js/module/product/sale_price.js)--> 



상품 분류 페이지에 노출하기



1. 상품 분류 파일에 있는 빨간색 소스파란색 소스모두 교체

- 상품 분류: /product/list.html


<중략>
<div class="description">
<div class="description" ec-data-custom="{$product_custom}" ec-data-price="{$product_price}">
<strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}">
<span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
<ul module="product_ListItem" class="spec">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<중략>

2. 해당 파일 최하단에 아래 소스 추가

<!--@js(/js/module/product/sale_price.js)--> 



상품 상세 페이지에 노출하기



1. 상품 상세 파일에 파란색 코드 삽입
- 상품 상세: /product/detail.html

<div module="product_action">
<div id="ec-product-price-info" class="displaynone" ec-data-custom="{$product_custom}"ec-data-price="{$product_price}"></div>
<div class="ec-base-button gColumn">
<a href="#none" class="btnSubmit sizeL {$buy_display|display}" onclick="{$action_buy}">
<span id="{$btn_buy_id}">바로 구매하기</span>

2. 해당 파일 최하단에 아래 소스 추가

<!--@js(/js/module/product/sale_price.js)--> 



상품 이미지 확대 페이지에 노출하기



1. 상품 이미지 확대 파일에 파란색 코드 삽입
- 상품 이미지 확대: /product/image_zoom.html

<div module="product_action">
<div id="ec-product-price-info" class="displaynone" ec-data-custom="{$product_custom}"ec-data-price="{$product_price}"></div>
<div class="ec-base-button gColumn">
<a href="#none" class="btnSubmit sizeL {$buy_display|display}" onclick="{$action_buy}">
<span id="{$btn_buy_id}">바로 구매하기</span>

2. 해당 파일 최하단에 아래 소스 추가

<!--@js(/js/module/product/sale_price.js)--> 


디자인 TIP



원하는 css 파일 최하단에 아래 소스를 삽입하면 위 이미지 속 디자인으로 노출되며
별도로 제작한 디자인을 적용할 수 있습니다.

<적용 가능 위치 예시>
/css/module/product/detail.css
/css/module/product/menupackage.css
/css/module/product/zoomPackage.css

/* 소비자가 기준 할인가 */
.xans-product-detail .ec-sale-rate { display:inline-block; margin-left:10px; border:1px solid #df6c6c;
border-radius:3px; color:#fff; background:#df6c6c; text-align:center; padding:4px 6px; font-weight:normal; font-size:10px;}