[메이크샵] 모바일에서 메인화면에서 메인 더보기 적용하는 방법

안녕하세요.

오늘은 메이크샵을 통해서 쇼핑몰을 운영하시는 분들에게 좋은 팁을 하나 알려 드리겠습니다.

모바일 샵을 보시면, 더보기 버튼을 볼 수 있는데요.

다른 샵에서는 보이는데 우리샵에서 왜 안보이지 할 수 있습니다.

오늘은 우리샵에서도 더보기 버튼을 클릭할 경우, 더 많은 상품이 노출 될 수 있는 방법에 대해서 알아보겠습니다.

1. 메인화면 (중앙디자인 > 메인 > 메인 )

기존에 제공되는 기본소스상에서 아래 빨간색 영역만 추가해주시면 됩니다.

< 디자인 편집탭 > 1. 신상품 영역 <a href="#none"><button type="button" class="btn_moreGray">더보기<span class="new_product_current"></span>/<span class="new_product_total"></span> ▼</button></a> 2. 추천상품 영역 <a href="#none"><button type="button" class="btn_moreGray">더보기 <span class="recmd_product_current"></span>/<span class="recmd_product_total"></span> ▼</button></a> 3. 특별상품 영역 <a href="#none"><button type="button" class="btn_moreGray">더보기<span class="special_product_current"></span>/<span class="special_product_total"></span> ▼</button></a> 4. 메인 추가상품1 영역 <a href="#none"><button type="button" class="btn_moreGray">더보기<span class="add1_product_current"></span>/<span class="special_product_total"></span> ▼</button></a> ※ 추가상품 2~5의 경우 위의 소스에서 1을 각각 2~5로 변경해주시면 됩니다.

< JS탭 > function get_main_list(_t_name, _page, _element, _page_html, _row) { var _get_type = _t_name.substring(6, _t_name.length);     if ($(_element).length > 0 ) {     $.ajax({         url: '/m/product_list.action.html?r=' + Math.random(),         type: 'GET',         dataType: 'json',         data: {             action_mode: 'GET_MAIN_PRODUCT_LIST',             tag_name: _t_name,             page: _page         },          success: function(res) { if ($('.' + _get_type + '_current').length > 0) {     $('.' + _get_type + '_current').html(_page); } if ($('.' + _get_type + '_total').length > 0) {     $('.' + _get_type + '_total').html(res.total_page); }             var dom = $('<div>').html(res.html);                  if ($('ul.items:only-child', $(_element)).length == 0) {        $(_element).append($('<ul class="items"></ul>'));    }             $('ul.items', _element).append($('ul.items', dom).html());             if (res.is_page_end == true) {                $('.' + _page_html).hide();             } else {                 _page++;                 $('.' + _page_html + ' > a').prop('href', "javascript:get_main_list('"+_t_name+"', " + _page + ", '" + _element + "', '" + _page_html + "', '" + _row + "');");             }               dom = null;            }     });   } } $(function() {     get_main_list('block_special_product', 1, '.MK_block_special_product', 'btn-special_product', '1'); //스페셜 상품     get_main_list('block_recmd_product', 1, '.MK_block_recmd_product', 'btn-recmd_product', '1');  //추천 상품     get_main_list('block_new_product', 1, '.MK_block_new_product', 'btn-new_product', '1');  //신규상품     get_main_list('block_add1_product', 1, '.MK_block_add1_product', 'btn-add1_product', '1');  //추가상품1     get_main_list('block_add2_product', 1, '.MK_block_add2_product', 'btn-add2_product', '1');  //추가상품2     get_main_list('block_add3_product', 1, '.MK_block_add3_product', 'btn-add3_product', '1');  //추가상품3     get_main_list('block_add4_product', 1, '.MK_block_add4_product', 'btn-add4_product', '1');  //추가상품4     get_main_list('block_add5_product', 1, '.MK_block_add5_product', 'btn-add5_product', '1');  //추가상품5 });

2. 메인화면 이외의 화면

메인 이외의 화면은 더욱 간단하게 작업이 가능합니다. 더보기 영역에 아래의 빨간 소스만 추가해주시면 됩니다. <a href="<!--/link_more_product_list/-->" class="btn_moreGray"><span class="more-title">더보기 <!--/block_current_page_cnt/--><!--/end_block/-->/<!--/block_total_page_cnt/--><!--/end_block/-->▼</span></a> ※ 작업가능한 페이지 - 상품관련 > 상품 분류 페이지(분류상품) - 상품관련 > 상품 프로모션 > 베스트 상품 50 - 상품관련 > 상품 프로모션 > 베스트 리뷰 50 - 상품관련 > 상품 프로모션 > 기획전 - 상품관련 > 상품 검색 결과 화면 - 상품관련 > 브랜드 상품 페이지(브랜드 상품) - 주문관련 > 장바구니(카트프리 상품) - 마이페이지 > 관심 상품

이렇게 작업하시면 됩니다.

해보시고 안되면 댓글 남겨주세요.

감사합니다.