관리자 페이지 쇼핑몰관리 > 상품관리 > 상품 옵션 관리에 접속을 하신뒤 위에 탭부분에서 색상옵션 관**부분에 항목을 추가를 합니다.

 

이렇게 추가를 하면 관리자 페이지 검색부분에도 노출이 됩니다. 

 

 

상품 각 등록 및 수정페이지에 가셔서 원하시는 색상을 선택을 해서 저장을 합니다.

 

 

 

이렇게 하면 옵션부분에 대한 연동처리가 완료가 되며 주문시에 같이 따라가게 됩니다. 

 

 

 

단 재고연동에 대한 부분은 현재 따로 처리가 되어있지 않습니다.

 

 

마지막으로 리스트 페이지에 색상출력하는 부분은 설명드리기 어려워 저희쪽에서 서포터를 해드리도록 하겠습니다. 

 

색상표 작업을 하신뒤에 상품에 등록을 하시고 저희쪽에 해당 상품을 알려주시면 작업처리를 해드리도록 하겠습니다.

 

 

그럼 상품상세 페이지에 자동으로 노출이 됩니다. 

상품 색상이 목록에 출력되도록 상품 목록 페이지와 메인 그룹디자인에 추가 작업이 완료 되었습니다.

목록 화면에서 상품 색상 추가 방법은 아래 이미지를 참고해 주세요.

참고 이미지에 사용된 소스는 이미지 밑에 추가해 놓았으니 필요시 해당 소스를 복사해 주시면 됩니다.

 

출력 소스

<span class="goods_color_list" cond="$v[option_color_list]">
    <!--@foreach($v[option_color_list] as $k2 => $v2)-->
        {@
            $bg_color = '';
            if($v2[color] == '#FFFFFF'){
                $bg_color = 'border:1px solid #dddddd; background:'.$v2[color];
            } else {
                $bg_color = 'background:'.$v2[color];
            }
        @}
        <span class="goods_color_box" style="{$bg_color}"></span>
    <!--@end-->
</span>

 

 

CSS 소스

.farm-A-goods-list ul li > div span.farm-A-goods-color {margin-bottom:6px; font-size:0;}
.farm-A-goods-list ul li > div span.farm-A-goods-color .farm-A-color-box {box-sizing:border-box; display:inline-block; width:16px; height:16px; margin-left:4px; font-size:12px;}
.farm-A-goods-list ul li > div span.farm-A-goods-color .farm-A-color-box:first-child {margin-left:0;}

 

출력 소스

<span class="farm-A-goods-color" cond="$v[option_color_list]">
    <!--@foreach($v[option_color_list] as $k2 => $v2)-->
        
        <span class="farm-A-color-box" style="{$bg_color}"></span>
    <!--@end-->
</span>

 

 

CSS 소스

.pm-goods_album1_{$this_group_code} span.goods_color_list {margin-bottom:6px; font-size:0;}
.pm-goods_album1_{$this_group_code} span.goods_color_list .goods_color_box {box-sizing:border-box; display:inline-block; width:16px; height:16px; margin-left:4px; font-size:12px;}
.pm-goods_album1_{$this_group_code} span.goods_color_list .goods_color_box:first-child {margin-left:0;}