※ 컬러 쇼핑이란?

상품에 컬러 속성을 주어, 해당 컬러에 해당하는 상품을 검색하여 고객이 볼 수 있도록 하는 기능입니다.
아래의 목록을 보면 목록 옆에 컬러 이미지가 있습니다. 각각의 이미지를 선택하면 해당 이미지에 맞는 색상의 상품만 나열 됩니다.

 이와 같은 모습을 포인트샵 솔루션으로 쉽게 구현 할 수가 있습니다.

 관리자 화면 상점관리 》 운영정보설정 》 상품정보설정 로 들어가서 [상품스타일] 부분을 확인해 봅니다.

이제 컬러 준비는 어느정도 완료 했습니다.

사용할 이미지를 준비해야합니다.

각각의 이미지는 스타일코드값을 기준으로 만드십시오.

예를 들어 black 인 경우, 위에 보시면 0번 입니다.

그럼, cr_n0.png 와 같은 형식으로 만드시면 됩니다.

이와 같은 방법으로 색상수 만큼  원하는 이미지를 만드십시오.

기본값 설정으로 하신 경우에는 이 게시물의 첨부파일에 있는 이미지를 사용하시면 됩니다.

이렇게 준비가 되었으면, 상품에 컬러 속성을 지정해 주셔야 합니다.

원하는 상품을 편집하기로 들어가시면 아래와 같은 항목이 추가된 것을 확인 할 수 있습니다. 

하나의 상품에 여러개의 컬러 속성을 지정할 수 있습니다.

상품이 black 과 Gold 두개의 컬러로 판매되고 있다면 이 2가지를 모두 선택하셔도 됩니다.

각각 검색시 출력됩니다.

이렇게 상품수정을 끝냈다면?

상품 출력 템플릿에 컬러 선택을 추가해야합니다.

먼저 상품목록 페이지(본 설명서의 가장 위에 있는 이미지와 같은 목록이 출력되기 위한)를 작업합니다.

기존에 사용중인 상품 출력 템플릿(iGoodsList)에서 사용자 정의 템플릿 하나를 생성하신 후, 아래와 같은 코드를 추가합니다.

{{* ------------------------------------------------ *}}
{{* 이 분류에 속한 상품이 갖고 Style#2 관련 출력     *}}
{{* ------------------------------------------------ *}}
{{if $IGoodsList.IStyle1List}}
<tr>
 <td>
<div id="__ps_Style2__">
 <div style="background-color:#dcdcdc;padding:2px 2px 2px 2px;margin-top:2px;margin-bottom:4px;">
  <div style="background-color:white;width:100%;padding-left:5px;">
<table cellpadding=2>
<tr height=30>
 <td>
 <span style="">
 <img align=absmiddle class="psStyle2Image" src="/shop/imgs/colors/cr_nx.png" nattr="" title="선택안함">
 </span>
 </td>
{{foreach name=iStyle1List item=arStyle2 from=$IGoodsList.IStyle1List}}
 <td>
 <span style="{{if $arStyle2.IChecked}}border: 2px solid #d3d3d3;{{/if}}text-align:center;padding:2px;"><img align=absmiddle class="psStyle2Image" id="{{$arStyle2.IdomID}}" src="/shop/imgs/colors/cr_n{{$arStyle2.ID}}.png" nattr="{{$arStyle2.ID}}" title="{{$arStyle2.IName}}"></span>
 </td>
{{/foreach}}
</tr>
</table>
  </div>
 </div>
</div>
 </td>
</tr>
{{/if}}
{{* ------------------------------- *}}
{{* 출력할 상품이 있는가?           *}}
{{* ------------------------------- *}}
{{if $IGoodsList.IGoodsCount lt 1    }}
  <TR>
   <TD HEIGHT=200>
   <CENTER>
   등록된 상품이 없습니다.
   </CENTER>
   </TD>
  </TR>
{{else}}

위 소스를 반영하면 아래와 같은 컬러 쇼핑을 위한 준비가 완료 됩니다.

위 그림을 보면 오렌지 색이 선택되어 있는것을 확인 할 수 있습니다. (외각에 박스로 강조했습니다.)

디자인을 수정하려는 경우, 위 소스를 적절히 수정하십시오.

다만, div에 있는 class명, id명은 절대 수정하시면 안됩니다.

또한, img 테그의 클래스 psStyle2Image 도 수정하시면 안됩니다.

즉, 가급적 기본형태를 유지하는 방향에서 수정을 하신다면 얼마든지 자유롭게 수정 가능합니다.