주 콘텐츠로 건너뛰기

소비자가 대비 판매가에 적용된 할인율/할인 금액 표시하기

고객들이 처음으로 상품을 마주하는 메인과 상품 분류 페이지, 상품 확대 보기, 상세 페이지에서 할인율과 할인 금액을 표시할 수 있어요.
단, 메인이나 상품 목록에 노출되는 상품이 많다면, 할인율 계산으로 인해 페이지 로딩이 느려질 수 있으니 주의해 주세요.

자세히 알아보기

공통 사항

  • 스마트디자인 편집 창에서 신규 js 파일을 추가해 주세요.
    그다음 아래 소스를 삽입해 주세요.
    • 위치: /js/module/product/sale_price.js

 

Note

해당 가이드는 기본 스킨을 기준으로 한 js예요.
표시가 되지 않는다면 페이지에 맞게 커스터마이징해서 사용해 주세요.
예시. 상품 목록 페이지에서 body id="JD_MAIN" 이고, 상품 분류 페이지에서 body id="COMMON" 이라면, 해당 파일에 var mainEl = $("#JD_MAIN, #COMMON"); 으로 변경해 주세요.

 

EC$(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(' ' + sSaleText + '');
      }
    }
  });

 

1. 메인 페이지에 노출하기

copy-1582016941-EBA994EC9DB8.png

 

    1. 상품 메인 파일에 있는 빨간색 소스를 파란색 소스로 모두 교체해 주세요.
      • 위치: 상품 메인: 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)-->

       

 

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

copy-1582016955-EBAAA9EBA19D.png

 

  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)-->

     

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

copy-1582017487-EC8381EC84B8.png

 

  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)-->

 

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

ED9995EB8C80EBB3B4EAB8B0.png

 

  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

ED8C90EBA7A4EAB080.png

  • 원하는 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;}
이 페이지가 도움이 되었나요?
현재 콘텐츠