[스마트디자인] PC 쇼핑몰에서의 금액 표시 관련 디자인 적용 TIP – 카페24 Help Center

PC 쇼핑몰에서의 금액 표시 관련 디자인 적용 TIP

자세히 알아보기

[관리자] 디자인 > 디자인 보관함에서 '편집'을 클릭하여 표시되는 스마트디자인 편집창에서
'전체 화면 보기'의 아래와 같은 위치에 빨간색 소스는 삭제하고 파란색 소스를 추가하세요.

'상품상세 > 관련상품'에 '참조금액ㆍ할인판매가ㆍ판매가 취소선' 표시

1) 위치 : 상품(product) > 상품상세(detail.html)

## 상단생략 ##
<div class="relation">
 <h3>관련상품</h3>
  <div module="product_relationlist">
   <ul class="prdList">
    <li class="item">
     <div class="box">
      <a href="/product/detail.html{$param}"><img src="{$img_small}" alt="" class="thumb" /></a>
      <p><a href="/product/detail.html{$param}">{$name}</a></p>
      <strong>{$price_unit_head}{$product_price}{$price_unit_tail}</strong>
        <ul>
        <li><strong class="{$product_sale_strike}">{$disp_product_price}</strong></li>
        <li class="salePrice {$sale_price_display|display}">{$disp_sale_price}</li>
       </ul>
      </div>
    </li>
    <li class="item">
     <div class="box">
      <a href="/product/detail.html{$param}"><img src="{$img_small}" alt="" class="thumb" /></a>
      <p><a href="/product/detail.html{$param}">{$name}</a></p>
      <strong>{$price_unit_head}{$product_price}{$price_unit_tail}</strong>
       <ul>
       <li><strong class="{$product_sale_strike}">{$disp_product_price}</strong></li>
       <li class="salePrice {$sale_price_display|display}">{$disp_sale_price}</li>
      </ul>
      </div>
    </li>
   </ul>
  </div>
 </div>
## 하단생략 ##

2) 위치 : css > 모듈(module) > 상품(product) > relation.css

## 상단생략 ##
.xans-product-relation .relation ul.prdList li.item .box strong { display:block; margin:3px 0 0; color:#008bcc; }
.xans-product-relation .relation ul.prdList li.item .box .salePrice strong { color:#000; }
.xans-product-relation .relation ul.prdList li.item .box .strike { font-weight:normal; text-decoration:line-through; }
.xans-product-relation .relation ul.prdList li.item .thumb { width:187px; height:255px; margin:0 0 16px; border:1px solid #ececec; }

'최근 본 상품'에 '할인판매가ㆍ판매가 취소선' 표시

1) 위치 : 상품(product) > 최근본상품(recent_view_product.html)

<tbody module="product_listitem">
 <tr>
  ## 중단생략 ##
  <td class="price">{$product_custom}<strong class="custom">{$price}</strong></td>
  <td class="price">
   <p class="{$strike_custom_price} {$custom_price_display|display}"><strong>{$product_custom}</strong></p>
   <p class="{$discount}"><strong class="custom">{$price}</strong></p>
   <p class="{$product_sale_price_display|display} salePrice"><strong>{$product_sale_price}</strong> </p>
  </td>
  <td class="button">
   <a href="#none" onclick="{$act_basket}" class="{$disp_basket|display}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/myshop/btn_wish1.gif" alt="담기" /></a>
   <a href="#none" onclick="{$act_order}" class="{$disp_order|display}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/myshop/btn_wish2.gif" alt="주문" /></a>
   <a href="#none" class="{$class_del}" rel="{$rel_del}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/myshop/btn_wish3.gif" alt="삭제" /></a>
  </td>
 </tr>
 <tr>
  ## 중단생략 ##
  <td class="price">{$product_custom}<strong class="custom">{$price}</strong></td>
  <td class="price">
   <p class="{$strike_custom_price} {$custom_price_display|display}"><strong>{$product_custom}</strong></p>
   <p class="{$discount}"><strong class="custom">{$price}</strong></p>
   <p class="{$product_sale_price_display|display} salePrice"><strong>{$product_sale_price}</strong></p>
  </td>
  <td class="button">
   <a href="#none" onclick="{$act_basket}" class="{$disp_basket|display}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/myshop/btn_wish1.gif" alt="담기" /></a>
   <a href="#none" onclick="{$act_order}" class="{$disp_order|display}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/myshop/btn_wish2.gif" alt="주문" /></a>
   <a href="#none" class="{$class_del}" rel="{$rel_del}"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/myshop/btn_wish3.gif" alt="삭제" /></a>
  </td>
 </tr>
</tbody>

2) 위치 : css > 모듈(module) > 상품(product) > relation.css

## 상단생략 ##;
.xans-product-recentlist table td.button img { margin:1px 0; };
 .xans-product-recentlist table td .salePrice { color:#008bcc; };
.xans-product-recentlist table td .strike { text-decoration:line-through; };
.xans-product-recentlist table td .strike strong { color:#353535; font-weight:normal; };
 .xans-product-recentlist table td .xans-product-setproduct { margin:5px 0 0; };
.xans-product-recentlist table td .xans-product-setproduct li { margin:2px 0 0; color:#757575; };
.xans-product-recentlist .noData { margin:15px 0 0; font-weight:bold; color:#008bcc; line-height:100px; text-align:center; };

'관심 상품'에 '할인판매가ㆍ판매가 취소선' 표시

1) 위치 : 마이쇼핑(myshop) > 나의 관심상품(wish_list.html)

## 상단생략 ##
 <tbody module="myshop_wishlistitem">
  <tr>
  ## 중단생략 ##
   <td class="price"><strong>{$product_price}</strong></td>
   <td class="price"><strong class="{$discount}">{$product_price}</strong><strong class="{$product_sale_price_display|display}">{$product_sale_price}</strong></td>
  ## 중단생략 ##
  </tr>
  <tr>
  ## 중단생략 ##
   <td class="price"><strong>{$product_price}</strong></td>
   <td class="price"><strong class="{$discount}">{$product_price}</strong><strong class="{$product_sale_price_display|display}">{$product_sale_price}</strong></td>
  ## 중단생략 ##
  </tr>
 </tbody>
## 하단생략 ##

1) 위치 : css > 모듈(module) > 마이쇼핑(myshop) > wishlist.css

## 상단생략 ##
.xans-myshop-wishlist table td .strike { display:block; font-weight:normal; text-decoration:line-through; }

'담긴 상품 확인창'에 '할인판매가ㆍ판매가 취소선' 표시

1) 위치 : 상품(product) > add_basket2.html

## 상단생략 ##
 <li class="item">
  <div class="box">
   <a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" class="thumb" /></a>
   <p class="name">{$product_name_link}{$icon}</p>
   <p class="option">{$option_str}</p>
   <ul>
    <li class="price {$product_price_strike}">{$purchase_price}</li>
    <li class="{$product_price_strike} {$purchase_price_ref_display|display}"><strong>{$purchase_price_ref}</strong></li>
    <li class="{$discount_price_display|display}"><strong class="txtWarn">-{$discount_price}</strong></li>
    <li class="{$discount_price_ref_display|display}"><strong class="txtWarn">{$discount_price_ref}</strong></li>
    <li>수량 : {$quantity}</li>
   </ul>
   <p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p>
  </div>
 </li>
 <li class="item">
  <div class="box">
   <a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" class="thumb" /></a>
   <p class="name">{$product_name_link}{$icon}</p>
   <p class="option">{$option_str}</p>
   <ul>
    <li class="price {$product_price_strike}">{$purchase_price}</li>
    <li class="{$product_price_strike} {$purchase_price_ref_display|display}"><strong>{$purchase_price_ref}</strong></li>
    <li class="{$discount_price_display|display}"><strong class="txtWarn">-{$discount_price}</strong></li>
    <li class="{$discount_price_ref_display|display}"><strong class="txtWarn">{$discount_price_ref}</strong></li>
    <li>수량 : {$quantity}</li>
   </ul>
   <p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p>
  </div>
 </li>
## 하단생략 ##

2) 위치 : css > 모듈(module) > 상품(product) > basketAdd2.css

## 상단생략 ##
.xans-order-layerbasket.content ul.prdList .strike { text-decoration:line-through; }
.xans-order-layerbasket.content ul.prdList .strike strong { font-weight:normal; }