주 콘텐츠로 건너뛰기

[스마트디자인] 모바일 쇼핑몰에서의 금액 표시 관련 디자인 적용 TIP

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

자세히 알아보기

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

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

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

## 상단생략 ##
<div module="product_relation">
<!--@css(/css/module/product/relation_swipe.css)-->
<!--
$count = 3
$swipe = no
$line = 1
$grid = 3
-->
 <h2>관련상품</h2>
 <ul class="grid3" module="product_relationlist">
  <li class="item">
   <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img_small}" alt="{$seo_alt_tag}" class="thumb" /></a></div>
   <div class="information">
    <p class="name"><a href="/product/detail.html{$param}">{$name}</a></p>
    <p class="price {$product_sale_strike}">{$price_unit_head}{$product_price}{$price_unit_tail}</p>
    <p class="price {$product_sale_strike}">{$disp_product_price}</p>
    <p class="price {$sale_price_display|display}">{$disp_sale_price}</p>

   </div>
  </li>
  <li class="item">
   <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img_small}" alt="{$seo_alt_tag}" class="thumb" /></a></div>
   <div class="information">
    <p class="name"><a href="/product/detail.html{$param}">{$name}</a></p>
    <p class="price {$product_sale_strike}">{$price_unit_head}{$product_price}{$price_unit_tail}</p>
    <p class="price {$product_sale_strike}">{$disp_product_price}</p>
    <p class="price {$sale_price_display|display}">{$disp_sale_price}</p>

   </div>
  </li>
 </ul>
</div>
## 하단생략 ##

 

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

## 상단생략 ##
.xans-product-relation .strike { font-weight:normal; text-decoration:line-through; }

 

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

1) 위치 : 마이쇼핑(myshop) > 최근본상품(recent_list.html)

## 상단생략 ##
 <ul module="product_listitem">
  <li>
   <div class="description">
    <p class="prdImg">
     <a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" width="72" height="72" class="thumb"></a>
     <span class="wishIcon">{$list_wish_icon}</span>
    </p>
    <strong class="prdName"><a href="/product/detail.html{$param}">{$product_name}</a></strong>
    <ul module="product_setproduct" class="item">
     <li>{$product_name}</li>
     <li>{$product_name}</li>
    </ul>
    <p class="price">{$price}</p>
    <p class="{$strike_custom_price} {$custom_price_display|display}"><strong>{$product_custom}</strong></p>
    <p class="price {$discount}"><strong>{$price}</strong></p>
    <p class="{$product_sale_price_display|display}">{$product_sale_price}</p>

   </div>
## 하단생략 ##

 

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

## 상단생략 ##
.xans-product-recentlist .strike { text-decoration:line-through; }
.xans-product-recentlist .strike strong { font-weight:normal; }

 

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

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

## 상단생략 ##
 <div module="myshop_wishlistitem">
  <div class="prdInfo">
   {$checkbox}
   <div class="description">
    ## 중단생략 ##
    <li class="price">
     <strong class="{$discount}" title="판매가">{$product_price}</strong><span class="{$product_price_display|display}">({$product_price_ref})</span>
     <strong class="{$discount}" title="판매가">{$product_price}</strong>
     <strong class="{$product_sale_price_display|display}" title="할인판매가">{$product_sale_price}</strong>

    </li>
## 하단생략 ##

 

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

## 상단생략 ##
.xans-myshop-wishlist .description .info .price .strike { font-weight:normal; text-decoration:line-through; }

 

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

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

<style type="text/css">
 ## 중단생략 ##
 .xans-order-layerbasket .price { color:#434447; font-weight:bold; }
 .xans-order-layerbasket .price strong { color:#ff6600; font-family:verdana; font-size:12px; }
 .xans-order-layerbasket .strike { text-decoration:line-through; }
 .xans-order-layerbasket .strike strong { font-weight:normal; }
 .xans-order-layerbasket .grid4 li { width:25%; }
</style>
 <div module="Order_LayerBasket" class="ec-base-layer typeModal">
  <h1>장바구니 담기 (총 {$item_total}개)</h1>
  <div class="wrap">
   <ul class="grid4" module="Order_list">
    <li>
     <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></div>
     <div class="information">
      <p class="name">{$product_name_link}{$icon}</p>
      <p class="option">{$option_str}</p>
      <p class="price {$product_price_strike}">{$purchase_price}</p>
      <p class="{$product_price_strike} {$purchase_price_ref_display|display}"><strong>{$purchase_price_ref}</strong></p>
      <p class="{$discount_price_display|display}"><strong class="txtWarn">-{$discount_price}</strong></p>
      <p class="{$discount_price_ref_display|display}"><strong class="txtWarn">{$discount_price_ref}</strong></p>
      <p class="amount">수량 : {$quantity}</p>
      <p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p>
     </div>
    </li>
    <li>
     <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></div>
     <div class="information">
      <p class="name">{$product_name_link}{$icon}</p>
      <p class="option">{$option_str}</p>
      <p class="price {$product_price_strike}">{$purchase_price}</p>
      <p class="{$product_price_strike} {$purchase_price_ref_display|display}"><strong>{$purchase_price_ref}</strong></p>
      <p class="{$discount_price_display|display}"><strong class="txtWarn">-{$discount_price}</strong></p>
      <p class="{$discount_price_ref_display|display}"><strong class="txtWarn">{$discount_price_ref}</strong></p>
      <p class="amount">수량 : {$quantity}</p>
      <p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p>
     </div>
    </li>
   </ul>
## 하단생략 ##

 

'슬라이드 목록'에 '할인판매가ㆍ판매가 취소선' 표시

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

## 상단생략 ##
 <div class="zoomList">
  <div class="inner">
   ## 중단생략 ##
   <div class="information">
    <p class="name"><a href="#none"><!-- 상품명 --></a></p>
    <p class="price"><a href="#none"><span class="price_value"></span> <span class="price_ref"></span></a></p>
    <p class="{$class_price}"><a href="#none"><span class="{$class_price_value}"></span> <span class="{$class_price_ref}"></span></a></p>
    <p class="{$class_sale_price} price"><a href="#none"><span class="{$class_sale_value}"></span></a></p>

    <p class="detail"><a href="#none" class="btnStrong">상세보기</a></p>
   </div>
  </div>
## 하단생략 ##

 

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

## 상단생략 ##
.xans-product-listnormal.typeZoom .zoomList { position:absolute; top:0; right:0; bottom:65px; left:0; }
.xans-product-listnormal.typeZoom .zoomList { position:absolute; top:0; right:0; bottom:0; left:0; }
.xans-product-listnormal.typeZoom .zoomList .inner { position:relative; height:100%; }
.xans-product-listnormal.typeZoom .zoomList ul { position:relative; height:100%; }
.xans-product-listnormal.typeZoom .zoomList ul:after { content:""; display:block; clear:both; }
.xans-product-listnormal.typeZoom .zoomList li { position:relative; float:left; width:100%; height:100%; }
.xans-product-listnormal.typeZoom .zoomList li .thumbnail { display:table; width:100%; height:100%; table-layout:fixed; text-align:center; }
.xans-product-listnormal.typeZoom .zoomList li .thumbnail span { display:table-cell; vertical-align:middle; }
.xans-product-listnormal.typeZoom .zoomList li .thumbnail img { max-width:100%; max-height:100%; width:auto; }
.xans-product-listnormal.typeZoom .zoomList .information { position:absolute; left:0; bottom:-65px; overflow:hidden; width:100%; height:63px; border-top:1px solid rgba(206,206,206,0.8); font-size:15px; font-weight:bold; background:rgba(227,227,227,0.8); }
.xans-product-listnormal.typeZoom .zoomList .information { overflow:hidden; position:absolute; left:0; bottom:0; padding:10px 14px; width:100%; border-top:1px solid rgba(206,206,206,0.8); font-size:15px; font-weight:bold; background:rgba(227,227,227,0.8); box-sizing:border-box; }
.xans-product-listnormal.typeZoom .zoomList .information .name { overflow:hidden; height:20px; margin:12px 110px 0 14px; word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .name,
.xans-product-listnormal.typeZoom .zoomList .information .price { margin:0 110px 3px 0; }
.xans-product-listnormal.typeZoom .zoomList .information .name { overflow:hidden; height:20px; word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .name a { display:inline-block; width:100%; color:#1b1b1b; font-weight:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xans-product-listnormal.typeZoom .zoomList .information .price { margin:2px 110px 0 14px; word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .price { word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .price a { color:#508bed; }
.xans-product-listnormal.typeZoom .zoomList .information .price .strike { color:#000; font-weight:normal; text-decoration:line-through; }
.xans-product-listnormal.typeZoom .zoomList .information .detail { position:absolute; right:14px; top:15px; }
## 하단생략 ##
이 페이지가 도움이 되었나요?
현재 콘텐츠