자세히 알아보기

쇼핑 큐레이션 검색 필터값에 이미지 적용하기

1. [관리자] 디자인 > 디자인 보관함 으로 이동하여 수정할 디자인의 '편집' 버튼을 눌러주세요.
2. 디자인 편집창의 /layout/basic/layout.html 페이지로 이동하여 아래 소스 중 파란색 소스를 추가해 주세요.
   
   ##상단 생략##
   <!--@css(/css/image_buttonize.css)-->
   <!--@js(/js/image_buttonize.js)-->
   <div module="Layout_conversionPc">
       <!--@css(/css/module/layout/conversionpc.css)-->
       <a href="{$mobile_url}">모바일 화면보기</a>
   </div>
   </div>
   </html>
3. 디자인 편집창 왼쪽의 '화면 추가' 버튼을 눌러 'js' 저장 경로를 선택해 주세요.
   파일명에 'image_buttonize.js' 을 입력하여 파일 생성 후, 아래의 파란색 소스를 추가해 주세요.
   
   ;(function($) {

       //(상단형)한번에 표시할 기본 검색 필터 수
       var MAX_SEARCH_FILTER_SIZE = 5;

       // 이미지 필터 설정
       var target = [
           {
               name: 'custom_1', // 이미지 변경 대상
               image: 'jpg', // 업로드 이미지 확장자
               width: '95px', // 이미지 가로 크기
               height: '50px' // 이미지 세로 크기
           }
           ,
           {
               name: 'custom_3', // 이미지 변경 대상
               image: 'jpg', // 업로드 이미지 확장자
               width: '95px', // 이미지 가로 크기
               height: '95px' // 이미지 세로 크기
           }
           /*
           // 추가로 적용할 경우 주석을 풀고 이미지 변경 대상을 지정하면 됩니다.
           ,
           {
               name: 'custom_N', // 이미지 변경 대상
               image: 'jpg', // 업로드 이미지 확장자
               width: '95px', // 이미지 가로 크기
               height: '95px' // 이미지 세로 크기
           }
           */
       ];

       ////////////////////////////////
       // 아래 부분은 수정하지 마세요
       ////////////////////////////////
       $.each(target, function(index, data) {
           var make_button = $('button[svalue^="' + data.name + '="]');

           make_button.parents('li').css('min-width', 'inherit');
           make_button.parents('.cell').css('height', 'inherit');

           make_button.each(function() {
               var custom_value = $(this).attr('svalue').replace(data.name + '=', '');

               $(this).addClass('shopping_curation_image_button');
               $(this).css({'background-image': 'url("/web/button/' + custom_value + '.' + data.image + '")', 'width': data.width, 'height': data.height, 'background-size': data.width + ' ' + data.height});
               $(this).text('').attr('title', custom_value);
           });
       });

       resetFilterMoreIcon();

    

       function resetFilterMoreIcon() {
           if ($('#searchContent').length > 0 ) {
               setTimeout(function() {
                   $('.xans-product.xans-product-searchfilterlist').each(function(index) {
                       var target = $(this).find('.xans-product-filterform');

                       var children_height = target.children().first().height();
                       var children_margin = parseInt(target.children().first().css('margin-top')) + parseInt(target.children().first().css('margin-bottom'));
                       var children_padding = parseInt(target.children().first().css('padding-top')) + parseInt(target.children().first().css('padding-bottom'));
                       var children = children_height + children_margin + children_padding;

                       if (typeof(children) === 'number') {
                           if (target.height() <= children) {
                               target.parent().find('.extend').hide();
                           } else {
                               target.parent().find('.ec-searchdata-option-title').attr('filterNumber', index);
                           }
                       }
                   });
               }, 10);
           }
       }

       $('.btnAllExtend').bind('click', function() {
           resetFilterMoreIcon();

           if ($(this).hasClass('open') === true) {
               setTimeout(function() {
                   $('.xans-product-searchfilterlist').hide();
                   $('.xans-product-searchfilterlist').each(function(index) {
                       if (index >= MAX_SEARCH_FILTER_SIZE) {
                           return;
                       }

                       $(this).show();
                   });
               }, 10);
           }
       });

       if ($('.xans-product-searchfilterlist').length <= MAX_SEARCH_FILTER_SIZE) {
           $('.btnAllExtend').hide();
       }

       $('.xans-product-searchfilterlist').hide();
       $('.xans-product-searchfilterlist').each(function(index) {
           if (index >= MAX_SEARCH_FILTER_SIZE) {
               return;
           }

           $(this).show();
       });

       $('#searchContent').show();
   
       if ($('.xans-product-searchfilterlist').length > MAX_SEARCH_FILTER_SIZE) {
           setTimeout(function() {
               $('.btnAllExtend').removeClass('open');
           }, 10);
       }
   })(jQuery);

4. 디자인 편집창 왼쪽의 '화면 추가' 버튼을 눌러 'css' 저장 경로를 선택해 주세요.
   파일명에 'image_buttonize.css' 을 입력하여 파일 생성 후, 아래의 파란색 소스를 추가해 주세요.
   
   #searchContent { display: none; }
   .ec_search_selected.shopping_curation_image_button { box-sizing: border-box; border: 1px solid #508bed; border-radius: 0 !important; }
   .disabled .shopping_curation_image_button { opacity: 0.4; -webkit-filter: grayscale(100%); filter: gray; }
5. [관리자] 쇼핑몰 설정 > 상품 설정 > '상품 정책 설정 > 쇼핑 큐레이션 검색 설정' 으로 이동해 주세요.
   '상품 필터 기능 설정' 의 '필터 조건 추가' 버튼을 눌러 필터값을 이미지로 적용하고 싶은 필터를 추가해 주세요.
6. 해당 필터의 '검색 정보' 에 입력한 값과 동일한 이미지명의 'jpg' 파일을 준비해 주세요.
   예시) 검색 정보에 'circle, diamond, star' 을 입력했다면 'circle.jpg', 'diamond.jpg', 'star.jpg' 파일 준비
7. [관리자] 디자인 에서 '웹 FTP > 파일 업로더' 를 눌러 이동해 주세요.
   '/web' 하위 폴더로 '/web/button' 폴더를 만들고(경로: /web/button), 동일한 이미지명을 가진 'circle.jpg', 'diamond.jpg', 'star.jpg' 파일을 업로드해 주세요.