app/template/default/Block/category_nav_pc.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% block javascript %}
  12. <script>
  13.     {% if category_id is defined %}
  14.     $(function() {
  15.         function getQueryString (url)
  16.         {
  17.             if (url !== undefined && url === '') {
  18.                 return [];
  19.             }
  21.             var vars = [], hash;
  22.             var path = url === undefined ? window.location.href : $('<a href="'+ url +'"/>').get(0).href;
  24.             if (path.indexOf('?') >= 0 && path.length != path.indexOf('?') + 1) {
  25.                 var hashes = path.indexOf('#') >= 0
  26.                 ? path.slice(path.indexOf('?') + 1, path.indexOf('#')).split('&')
  27.                 : path.slice(path.indexOf('?') + 1).split('&');
  29.                 for(var i = 0; i < hashes.length; i++) {
  30.                     hash = hashes[i].split('=');
  31.                     vars.push(hash[0]);
  32.                     vars[hash[0]] = hash[1];
  33.                 }
  34.             }
  35.             return vars;
  36.         }
  38.         function escapeRegExp (str)
  39.         {
  40.             return str.replace(/([.*+?^=!:${}()|[\]\/\\])/g, "\\$1");
  41.         }
  43.         let currentQueries = [];
  44.         currentQueries.push('category_id');
  45.         currentQueries['category_id'] = {{ category_id }};
  47.         $('.ec-itemNav__nav li a')
  48.             .removeClass('current')
  49.             .each(function(){
  50.                 var nav = $(this).attr('href');
  51.                 var navQueries = getQueryString(nav);  //ナビゲーションhrefのクエリストリングをパース
  53.                 console.log(nav, navQueries);
  54.                 console.log(currentQueries);
  56.             if (currentQueries.length > 0) {
  57.                 for (var i = 0; i < currentQueries.length; i++) {
  58.                     //最初のクエリストリングのみ調査
  59.                     if ($.inArray(currentQueries[i], navQueries) >= 0 &&
  60.                         currentQueries[currentQueries[i]] == navQueries[currentQueries[i]])
  61.                     {
  62.                         $(this).addClass('current');
  63.                         $(this).parents('.category_child').css('display','block');
  64.                         return false;  //break
  65.                     }
  66.                 }
  67.             } else {
  68.                 if (currentURI.match(new RegExp('^'+ escapeRegExp(nav) +'$', 'i'))) {
  69.                     $(this).addClass('current');
  70.                     $(this).parents('.category_child').css('display','block');
  71.                     return false;  //break
  72.                 }
  73.             }
  74.         });
  75.         $('.ec-headerCategoryArea .ec-itemNav__nav li a')
  76.             .removeClass('current')
  77.             .each(function(){
  78.                 var nav = $(this).attr('href');
  79.                 var navQueries = getQueryString(nav);  //ナビゲーションhrefのクエリストリングをパース
  81.                 if (currentQueries.length > 0) {
  82.                     for (var i = 0; i < currentQueries.length; i++) {
  83.                         //最初のクエリストリングのみ調査
  84.                         if ($.inArray(currentQueries[i], navQueries) >= 0 &&
  85.                             currentQueries[currentQueries[i]] == navQueries[currentQueries[i]])
  86.                         {
  87.                             $(this).addClass('current');
  88.                             $(this).parents('.category_child').css('display','block');
  89.                             return false;  //break
  90.                         }
  91.                     }
  92.                 } else {
  93.                     if (currentURI.match(new RegExp('^'+ escapeRegExp(nav) +'$', 'i'))) {
  94.                         $(this).addClass('current');
  95.                         $(this).parents('.category_child').css('display','block');
  96.                         return false;  //break
  97.                     }
  98.                 }
  99.             });
  100.         });
  101.     {% endif %}
  102. </script>
  103. <script>
  104.     $(function() {
  105.         $('.ec-categoryNaviRole .ec-itemNav__nav li > a').on('click', function() {
  106.             $categoryItem = $(this).parent('.haschild');
  107.             $categoryList = $categoryItem.children('.category_child');
  108.             $childrenIcon = $(this).children('.only-opend');
  109.             if ($categoryList.length > 0){
  110.                 if ($categoryList.css('display') == 'none') {
  111.                     $categoryList.slideDown(300);
  112.                     $childrenIcon.addClass('active');
  113.                 } else {
  114.                     $categoryList.slideUp(250);
  115.                     $childrenIcon.removeClass('active');
  116.                 }
  117.                 return false;
  118.             }
  119.         });
  120.     });
  121. </script>
  123. {% endblock %}
  124. {% set Categories = repository('Eccube\\Entity\\Category').getList() %}
  126. {% macro tree(Category) %}
  127.     {% from _self import tree %}
  128.     <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
  129.         {{ Category.name }}
  130.         {% if Category.children|length == 0 %}
  131.             <img src="{{ asset('assets/icon/icon_arrow_red.svg') }}" class="ec-itemNav__iconlink" alt="矢印アイコン">
  132.         {% else %}
  133.             <img src="{{ asset('assets/icon/icon_add.svg') }}" class="ec-itemNav__iconlink only-opend" alt="プラスアイコン">
  134.             <img src="{{ asset('assets/icon/icon_minus.svg') }}" class="ec-itemNav__iconlink" alt="マイナスアイコン">
  135.         {% endif %}
  136.     </a>
  137.     {% if Category.children|length > 0 %}
  138.         <ul style="display: none;" class="category_child">
  139.             <li>
  140.                 <a id="category_all" href="{{ url('product_list') }}?category_id={{ Category.id }}">
  141.                     <span>すべて</span>
  142.                     <img src="{{ asset('assets/icon/icon_arrow_red.svg') }}" class="ec-itemNav__iconlink" alt="矢印アイコン">
  143.                 </a>
  144.             </li>
  145.             {% for ChildCategory in Category.children %}
  146.                 <li>
  147.                     {{ tree(ChildCategory) }}
  148.                 </li>
  149.             {% endfor %}
  150.         </ul>
  151.     {% endif %}
  152. {% endmacro %}
  154. {# @see https://github.com/bolt/bolt/pull/2388 #}
  155. {% from _self import tree %}
  157. <div class="ec-categoryNaviRole">
  158.     <div class="ec-headerCategoryArea__heading">
  159.         <p>{{ 'カテゴリから探す'|trans }}</p>
  160.         <span class="ec-headerCategoryArea__toggle">すべて開く</span>
  161.     </div>
  162.     <div class="ec-itemNav">
  163.         <ul class="ec-itemNav__nav">
  164.             {% for Category in Categories %}
  165.                 <li>
  166.                     {{ tree(Category) }}
  167.                 </li>
  168.             {% endfor %}
  169.         </ul>
  170.     </div>
  171. </div>