상세 컨텐츠

본문 제목

[메이크샵] 디자인 스킨의 디자인편집하기(상품분류페이지) 가상태그

쇼핑몰 코딩정보/메이크샵

by Web lover 2020. 1. 31. 11:23

본문

디자인 편집하기 화면에서 상품분류페이지의 중요한 부분을 설명해드릴게요^^

 

상품분류페이지

디자인편집 좌측영역

디자인편집창 > 좌측 화면 > 중앙디자인 > 상품관련 > 상품분류페이지(기본분류페이지)

 

상품분류페이지에서 상품태그소스는 메인상품진열 소스와 비슷한데 차이점을 설명해드릴게요~

디자인 스킨의 디자인편집하기(메인상품진열)에서  메인상품진열 가상태그 설명글이 있지만 보기 쉽게  신상품 관련 가상태그옆에 설명글을 써넣을게요~

( ) : 설명글

 

 

A. 메인상품진열(신상품)

 

<!-- 신상품 영역 -->

<!--/if_new_product/--> (신상품이 있을때 진열 시작)

<div class="product-wrap">

<div class="item-wrap">

<div class="cateTit">

<h3>NEW ARRIVAL</h3>

<p class="line"></p>

</div>

<div class="item-cont">

<!--/loop_new_product(6)/--> (신상품진열상품 6개 반복진열)

<dl class="item-list">

<dt class="thumb"><a href="<!--/new_product@link/-->"><img src="<!--/new_product@image_m/-->" /></a></dt> (신상품상세페이지 주소링크, 신상품 중간사이즈 상품이미지)

<dd class="prd-info">

<ul>   

<li class="prd-ico"><!--/new_product@icons/--></li> (신상품 아이콘들)

<li class="prd-name"><a href="<!--/new_product@link/-->"><!--/new_product@name/--></a></li> (신상품상세페이지 주소링크, 신상품 상품명)

<li class="prd-price">

<!--/if_new_product@price_replace/--> (신상품 가격 대체문구가 있다면)

<!--/new_product@price_replace/--> (신상품 가격 대체문구 출력)

<!--/else_if_new_product@is_soldout/--> (신상품 품절이 됐다면)

Sold Out

<!--/else/--> (앞의 두부분이 해당사항없다면 출력)

<!--/if_new_product@price_discount/--> (신상품 할인가격이 있다면)

<strike><!--/number/new_product@price_sell/--></strike> (신상품 판매가격)

<span class="price"><!--/number/new_product@price_discount/--></span> (신상품 할인가격)

<!--/else/--> (신상품 할인가격이 없다면 출력)

<!--/if_new_product@price_consumer(+1)/--> (신상품의 소비자가격이 1원이라도 있다면)

<strike><!--/number/new_product@price_consumer/--></strike> (신상품 소비자가격)

<!--/end_if/--> (신상품 소비자가격 끝)

<span class="price"><!--/number/new_product@price_sell/--></span> (신상품 판매가격 출력)

<!--/end_if/--> (신상품 할인가격 끝)

<!--/end_if/--> (신상품 가격대체문구 끝)

</li>

<!--/if_new_product@color/--> (신상품 색상목록이 있다면)

<li class="prd-color">

<!--/loop_new_product@color/--> (색상 목록 반복출력)

<font color="<!--/new_product@color@code/-->"></font> (신상품 색상코드)

<!--/end_loop/--> (색상목록 반복출력 끝)

</li>

<!--/end_if/--> (신상품 색상목록 끝)

<!--/if_new_product@link_preview/--> (신상품 미리보기 버튼링크가 있다면)

<li class="prd-preview">

<a href="<!--/new_product@link_preview/-->"><img src="<!--/new_product@preview_icon/-->" alt="미리보기" /></a> (미리보기링크주소, 미리보기 아이콘)

</li>

<!--/end_if/--> (신상품 미리보기 버튼링크 끝)

<li class="prd-subname"><!--/new_product@subname/--></li> (신상품 추가상품명)

</ul>

</dd>

</dl>

<!--/if_step(3)/--> (상품목록의 3개출력후 다음 소스 출력)

</div><div class="item-cont"> 

<!--/end_if/--> (상품목록의 3개출력후 끝)

<!--/end_loop/--> (신상품 진열상품 6개 반복 진열 끝)

</div>

</div>

</div>

<!--/end_if/--> (신상품 진열 끝)

<!-- 신상품 영역 -->

 

 

B. 상품분류페이지(기본분류페이지)

 

<!--/if_product/-->

<div class="item-cont">

<!--/loop_product(15)/-->

<dl class="item-list">

<dt class="thumb"><a href="<!--/product@link/-->"><img src="<!--/product@image_m/-->" /></a></dt>

<dd class="prd-info">

<ul>   

<li class="prd-ico"><!--/product@icons/--></li>

<li class="prd-name"><a href="<!--/product@link/-->"><!--/product@name/--></a></li>

<li class="prd-price">

<!--/if_product@price_replace/-->

<!--/product@price_replace/-->

<!--/else_if_product@is_soldout/-->

Sold Out

<!--/else/-->

<!--/if_product@price_discount/-->

<strike><!--/number/product@price_sell/--></strike>

<span class="price"><!--/number/product@price_discount/--></span>

<!--/else/-->

<!--/if_product@price_consumer(+1)/-->

<strike><!--/number/product@price_consumer/--></strike>

<!--/end_if/-->

<span class="price"><!--/number/product@price_sell/--></span>

<!--/end_if/-->

<!--/end_if/-->

</li>

<!--/if_product@color/-->

<li class="prd-color">

<!--/loop_product@color/-->

<font color="<!--/product@color@code/-->"></font>

<!--/end_loop/-->

</li>

<!--/if_product@link_preview/-->

<li class="prd-preview">

<a href="<!--/product@link_preview/-->"><img src="<!--/product@preview_icon/-->" alt="미리보기" /></a>

</li>

<!--/end_if/-->

<!--/end_if/-->

<!--/if_product@btn_option_preview/-->

<li class="prd-preview">

<!--/product@btn_option_preview/-->

</li>

<!--/end_if/-->

</ul>

</dd>

</dl>

<!--/if_step(3)/-->

</div><div class="item-cont">

<!--/end_if/-->

<!--/end_loop/-->

</div>

 

<!-- 상품목록 하단 페이징 영역 -->

<div class="paging">

<!--/if_pager_product::first@link/-->

<a href="<!--/pager_product::first@link/-->" class="first">&lt;&lt;</a>

<!--/end_if/-->

<!--/if_pager_product::prev@link/-->

<a href="<!--/pager_product::prev@link/-->" class="prev">&lt;</a>

<!--/end_if/-->

<!--/loop_pager_product::page/-->

<!--/if_pager_product::page@current/-->

<a href="<!--/pager_product::current@link/-->" class="now"><!--/pager_product::current/--></a>

<!--/else/-->

<a href="<!--/pager_product::page@link/-->"><!--/pager_product::page/--></a>

<!--/end_if/-->

<!--/end_loop/-->

<!--/if_pager_product::next@link/-->

<a href="<!--/pager_product::next@link/-->" class="next">&gt;</a>

<!--/end_if/-->

<!--/if_pager_product::last@link/-->

<a href="<!--/pager_product::last@link/-->"  class="last">&gt;&gt;</a>

<!--/end_if/-->

</div>

<!-- //상품목록 하단 페이징 영역 -->

<!--/end_if/-->

 

HTML과 가상태그가 많죠 ㅎㅎ; 

이렇게 써놓은 이유는 비교분석때문이죠 ㅋㅋ.. 

 

눈치채셨을지 모르겠지만 일부분을 빼놓고 비슷한 소스죠 ㅋ

 

<신상품 가상태그>

<!--/if_new_product/-->

<!--/loop_new_product(6)/--> : 6개 반복출력

<!--/new_product@link/-->

 

<상품분류페이지 가상태그>

<!--/if_product/-->

<!--/loop_product(15)/--> : 15개 반복출력

<!--/product@link/-->

 

***POINT***

1) new_ 을 빼시면 상품분류페이지 가상태그가 됩니다~

가상태그에 대한 설명도 똑같아요~

 

2) 상품목록페이지에서 상품이 15개이상이 되면 하단부분에  <<  1 2 3  >> 페이징이 따로 존재해요 

관련글 더보기

댓글 영역