[카페24] 컬러칩 탭 기능 / 컬러별로 상품 보여주기

최근 의뢰를 받아 했던 카페24 작업.

왼쪽에서 어느 컬러를 하나 클릭하면 그 컬러 제품만 볼 수 있도록 하는 기능을 작업하였다.

자동으로 분류되는건 아니고 약간의 소스 노가다가 필요한 작업이다.

 

 

[예시화면]

 

 

[작동 방식]

상품 등록시, 자체 코드에 컬러명을 영문으로 입력하면

별도의 페이지에서 컬러칩 클릭시 자체코드가 해당 컬러명을 가진 상품만 탭방식으로 show, hide 해주는 방식이다.

 

 

 

[작업소스]

- 일반페이지를 하나 생성한 후 아래의 소스 추가

- ul.colorchip부분에 쓴 영문명을 자체코드에 동일하게 입력해주면 됨.

 

<div id="pl_01" class="pl"> 

   <!-- left 영역-->
	<div class="title scroll-fade pl-viewport motion1 pull-left">
    
        <!--컬러칩-->
        <ul class="colorchip">
                <li class="white active" rel="white"></li>
                <li class="lightpurple" rel="lightpurple"></li>
                <li class="babypink" rel="babypink"></li>
                <li class="orange" rel="orange"></li>
                <li class="emerald" rel="emerald"></li>
                <li class="red" rel="red"></li>
        </ul>
        <!--컬러칩-->
         
 	</div>    
    
    
    <!-- right 영역-->
	<div class="pull-right tab_container">              
          <div class="pl-product pl-main-product tab_content" module="product_listmain_6">
              <!--
              $count = 50
              $basket_result = /product/add_basket.html
              $basket_option = /product/basket_option.html
              -->   
              <ul class="prdList grid3">               
              <!--@import(/pl/item_list.html)-->
              <!--@import(/pl/item_list.html)-->
              <!--@import(/pl/item_list.html)-->
              </ul>
          </div>                
	</div>

</div>
    
    
<script>
 $(function () {        
        $("#pl_01 .item_list").hide();
        $("#pl_01 .item_white").show();  //가장 첫번째 컬러칩 상품은 보여주기

        $("#pl_01 .colorchip li").click(function () {        
            $("#pl_01 .colorchip li").removeClass("active").css("background-image", "transparent;");
            $(this).addClass("active").css("background-image", "url('/web/pl/check_icon.png');");
            $("#pl_01 .item_list").hide();
            var activeTab = $(this).attr("rel");
            $("#pl_01 .item_" + activeTab).fadeIn();
        });
 });
</script>  
    

 

 

/pl/item_list.html

- 여기서 중요한 점은 상품리스트(li) class에 {$ma_product_code}를 넣어주는것. 해당 컬러를 클래스로 가진 li만 보여주는 방식이다.

- 다른 부분은 기존에 사용하고 있는 리스트 소스 그대로 사용해도 됨.

  <li id="anchorBoxId_13" class="item_list {$ma_product_code}">
       <div class="item_list_box">       
            <div class="listImg" module="product_addimage">
                <ul>
                    <li>{$add_img}</li>
                    <li>{$add_img}</li>
                </ul>
            </div>                           
                
           <div class="prdImg scroll-fade dj-viewport">
                <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}">
                <img src="{$image_medium}" id="{$image_medium_id}" class="thumb_Img" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></span>
                </a>              
           </div>           
     </div>
     
     ..생략..

</li>

 

 

.css파일

.pl {position:relative;float:left;display:inline-block;*display:inline;width:100%;}

.colorchip {position:relative;display:inline-block;*display:inline;margin:20px 0;}
.colorchip li {float:left;width:45px;height:45px;background:#ddd;border-radius:50%;font-size:0;margin-right:5px;margin-bottom:5px;display:inline;list-style:none;}
.colorchip li:hover {cursor:pointer;}

/*컬러지정*/
.colorchip li.pink {background:#bb6572}
.colorchip li.babypink {background:#ffa2b7;}
.colorchip li.yellow {background:#f18507;}
.colorchip li.khaki {background:#393a28;}
.colorchip li.purple {background:#897b9e;}
.colorchip li.lightpurple {background:#e2d4e3;}
.colorchip li.beige {background:#bd968f;}
.colorchip li.burgundy {background:#841924;}
.colorchip li.brown {background:#672d15}
.colorchip li.deepbrown {background:#59453a}
.colorchip li.deepgreen {background:#0c2220}
.colorchip li.aqua {background:#013743}
.colorchip li.black {background:#110f10}