디자인 편집하기 화면에서 상품분류페이지의 중요한 부분을 설명해드릴게요^^
디자인편집창 > 좌측 화면 > 중앙디자인 > 상품관련 > 상품분류페이지(기본분류페이지)
상품분류페이지에서 상품태그소스는 메인상품진열 소스와 비슷한데 차이점을 설명해드릴게요~
디자인 스킨의 디자인편집하기(메인상품진열)에서 메인상품진열 가상태그 설명글이 있지만 보기 쉽게 신상품 관련 가상태그옆에 설명글을 써넣을게요~
( ) : 설명글
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"><<</a>
<!--/end_if/-->
<!--/if_pager_product::prev@link/-->
<a href="<!--/pager_product::prev@link/-->" class="prev"><</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">></a>
<!--/end_if/-->
<!--/if_pager_product::last@link/-->
<a href="<!--/pager_product::last@link/-->" class="last">>></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 >> 페이징이 따로 존재해요
[메이크샵] 관리자화면 설정(운영자/부운영자관리, 후기게시판관리, 평생회원가입서비스) (0) | 2020.02.05 |
---|---|
[메이크샵] 디자인 스킨의 디자인편집하기(상품상세페이지) (0) | 2020.02.03 |
[메이크샵] 디자인 스킨의 디자인편집하기(메인상품진열) (0) | 2020.01.28 |
[메이크샵] 디자인 스킨의 디자인편집하기(개별디자인TIP보기, 가상태그, 사용자태그, 페이지주소) (0) | 2020.01.27 |
[메이크샵] 분류별 상품관리(프로모션,추천상품,베스트) (0) | 2020.01.23 |
댓글 영역