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>
## 하단생략 ##
<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; }
.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>
<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; };
.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>
## 하단생략 ##
<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; }
.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>
## 하단생략 ##
<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; }
.xans-order-layerbasket.content ul.prdList .strike { text-decoration:line-through; }
.xans-order-layerbasket.content ul.prdList .strike strong { font-weight:normal; }