src/Eccube/Resource/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 type="text/javascript">
  13. const sidebarSetting = () => {
  14.     const header = document.querySelector('header');
  15.     const headerHeight = header.clientHeight;
  17.     var sidebar = new StickySidebar('.sidebar-sticky', { // 追従させる要素
  18.         containerSelector: '.ec-layoutRole__contents', // 親要素
  19.         innerWrapperSelector: '.sidebar', // 追従させる要素のインナー要素
  20.         topSpacing: 0
  21.     });
  22. }
  24. window.addEventListener('resize', sidebarSetting);
  25. window.addEventListener('load', sidebarSetting);
  26. </script> #}
  27. {% endblock %}
  29. {% set Categories = repository('Eccube\\Entity\\Category').getList() %}
  31. {% macro tree(Category) %}
  32.     {% from _self import tree %}
  33.     <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
  34.         {{ Category.name }}
  35.     </a>
  36.     {% if Category.children|length > 0 %}
  37.         <ul>
  38.             {% for ChildCategory in Category.children %}
  39.                 <li>
  40.                     {{ tree(ChildCategory) }}
  41.                 </li>
  42.             {% endfor %}
  43.         </ul>
  44.     {% endif %}
  45. {% endmacro %}
  47. {# @see https://github.com/bolt/bolt/pull/2388 #}
  48. {% from _self import tree %}
  50. {# <div class="sidebar">
  51.     <div class="sidebar_inner">
  52.         <p class="sidebar_lead">カテゴリから探す</p>
  53.         <ul class="">
  54.             {% for Category in Categories %}
  55.                 <li>
  56.                     {{ tree(Category) }}
  57.                 </li>
  58.             {% endfor %}
  59.         </ul>
  60.     </div>
  61. </div> #}
  63. <div class="sidebar">
  64.     <div class="sidebar_inner">
  65.         <p class="sidebar_lead">カテゴリから探す</p>
  66.         <ul class="sidebar_list">
  67.             <li class="sidebar_list_item">
  68.                 <a href="" class="sidebar_list_target">BP商材その他</a>
  69.                 <div class="sidebar_box">
  70.                     <div class="sidebar_box_navi">
  71.                         <a href="" class="sidebar_box_link">BP商材その他</a>
  72.                         <ul class="sidebar_box_child">
  73.                             <li class="sidebar_box_child_item">
  74.                                 <a href="" class="sidebar_box_link">その他</a>
  75.                             </li>
  76.                         </ul>
  77.                     </div>
  78.                     <picture class="sidebar_box_image">
  79.                         <img src="{{ asset('assets/img/common/category/sample01.jpg', 'user_data') }}" alt="">
  80.                     </picture>
  81.                 </div>
  82.             </li>
  83.             <li class="sidebar_list_item">
  84.                 <a href="" class="sidebar_list_target">電装その他</a>
  85.                 <div class="sidebar_box">
  86.                     <div class="sidebar_box_navi">
  87.                         <a href="" class="sidebar_box_link">電装その他</a>
  88.                         <ul class="sidebar_box_child">
  89.                             <li class="sidebar_box_child_item">
  90.                                 <a href="" class="sidebar_box_link">電装その他</a>
  91.                             </li>
  92.                         </ul>
  93.                     </div>
  94.                     <picture class="sidebar_box_image">
  95.                         <img src="{{ asset('assets/img/common/category/sample02.jpg', 'user_data') }}" alt="">
  96.                     </picture>
  97.                 </div>
  98.             </li>
  99.             <li class="sidebar_list_item">
  100.                 <a href="" class="sidebar_list_target">電装バルブ</a>
  101.                 <div class="sidebar_box">
  102.                     <div class="sidebar_box_navi">
  103.                         <a href="" class="sidebar_box_link">電装バルブ</a>
  104.                         <ul class="sidebar_box_child">
  105.                             <li class="sidebar_box_child_item">
  106.                                 <a href="" class="sidebar_box_link">バルブ</a>
  107.                             </li>
  108.                         </ul>
  109.                     </div>
  110.                     <picture class="sidebar_box_image">
  111.                         <img src="{{ asset('assets/img/common/category/sample03.jpg', 'user_data') }}" alt="">
  112.                     </picture>
  113.                 </div>
  114.             </li>
  115.             <li class="sidebar_list_item">
  116.                 <a href="" class="sidebar_list_target">電装ヒューズ</a>
  117.                 <div class="sidebar_box">
  118.                     <div class="sidebar_box_navi">
  119.                         <a href="" class="sidebar_box_link">電装ヒューズ</a>
  120.                         <ul class="sidebar_box_child">
  121.                             <li class="sidebar_box_child_item">
  122.                                 <a href="" class="sidebar_box_link">ヒューズ</a>
  123.                             </li>
  124.                         </ul>
  125.                     </div>
  126.                     <picture class="sidebar_box_image">
  127.                         <img src="{{ asset('assets/img/common/category/sample04.jpg', 'user_data') }}" alt="">
  128.                     </picture>
  129.                 </div>
  130.             </li>
  131.             <li class="sidebar_list_item">
  132.                 <a href="" class="sidebar_list_target">工具類その他</a>
  133.                 <div class="sidebar_box">
  134.                     <div class="sidebar_box_navi">
  135.                         <a href="" class="sidebar_box_link">工具類その他</a>
  136.                         <ul class="sidebar_box_child">
  137.                             <li class="sidebar_box_child_item">
  138.                                 <a href="" class="sidebar_box_link">その他</a>
  139.                             </li>
  140.                         </ul>
  141.                     </div>
  142.                     <picture class="sidebar_box_image">
  143.                         <img src="{{ asset('assets/img/common/category/sample05.jpg', 'user_data') }}" alt="">
  144.                     </picture>
  145.                 </div>
  146.             </li>
  147.             <li class="sidebar_list_item">
  148.                 <a href="" class="sidebar_list_target">整備商材その他</a>
  149.                 <div class="sidebar_box">
  150.                     <div class="sidebar_box_navi">
  151.                         <a href="" class="sidebar_box_link">整備商材その他</a>
  152.                         <ul class="sidebar_box_child">
  153.                             <li class="sidebar_box_child_item">
  154.                                 <a href="" class="sidebar_box_link">その他</a>
  155.                             </li>
  156.                         </ul>
  157.                     </div>
  158.                     <picture class="sidebar_box_image">
  159.                         <img src="{{ asset('assets/img/common/category/sample06.jpg', 'user_data') }}" alt="">
  160.                     </picture>
  161.                 </div>
  162.             </li>
  163.             <li class="sidebar_list_item">
  164.                 <a href="" class="sidebar_list_target">その他その他</a>
  165.                 <div class="sidebar_box">
  166.                     <div class="sidebar_box_navi">
  167.                         <a href="" class="sidebar_box_link">その他その他</a>
  168.                         <ul class="sidebar_box_child">
  169.                             <li class="sidebar_box_child_item">
  170.                                 <a href="" class="sidebar_box_link">その他</a>
  171.                             </li>
  172.                         </ul>
  173.                     </div>
  174.                     <picture class="sidebar_box_image">
  175.                         <img src="{{ asset('assets/img/common/category/sample01.jpg', 'user_data') }}" alt="">
  176.                     </picture>
  177.                 </div>
  178.             </li>
  179.             <li class="sidebar_list_item">
  180.                 <a href="" class="sidebar_list_target">その他部材</a>
  181.                 <div class="sidebar_box">
  182.                     <div class="sidebar_box_navi">
  183.                         <a href="" class="sidebar_box_link">その他部材</a>
  184.                         <ul class="sidebar_box_child">
  185.                             <li class="sidebar_box_child_item">
  186.                                 <a href="" class="sidebar_box_link">部材</a>
  187.                             </li>
  188.                         </ul>
  189.                     </div>
  190.                     <picture class="sidebar_box_image">
  191.                         <img src="{{ asset('assets/img/common/category/sample02.jpg', 'user_data') }}" alt="">
  192.                     </picture>
  193.                 </div>
  194.             </li>
  195.             <li class="sidebar_list_item">
  196.                 <a href="" class="sidebar_list_target">その他用品</a>
  197.                 <div class="sidebar_box">
  198.                     <div class="sidebar_box_navi">
  199.                         <a href="" class="sidebar_box_link">その他用品</a>
  200.                         <ul class="sidebar_box_child">
  201.                             <li class="sidebar_box_child_item">
  202.                                 <a href="" class="sidebar_box_link">用品</a>
  203.                             </li>
  204.                         </ul>
  205.                     </div>
  206.                     <picture class="sidebar_box_image">
  207.                         <img src="{{ asset('assets/img/common/category/sample03.jpg', 'user_data') }}" alt="">
  208.                     </picture>
  209.                 </div>
  210.             </li>
  211.             <li class="sidebar_list_item">
  212.                 <a href="" class="sidebar_list_target">タイヤ</a>
  213.                 <div class="sidebar_box">
  214.                     <div class="sidebar_box_navi">
  215.                         <a href="" class="sidebar_box_link">タイヤ</a>
  216.                         <ul class="sidebar_box_child">
  217.                             <li class="sidebar_box_child_item">
  218.                                 <a href="" class="sidebar_box_link">夏タイヤ</a>
  219.                             </li>
  220.                             <li class="sidebar_box_child_item">
  221.                                 <a href="" class="sidebar_box_link">スタッドレス</a>
  222.                             </li>
  223.                             <li class="sidebar_box_child_item">
  224.                                 <a href="" class="sidebar_box_link">オールシーズン</a>
  225.                             </li>
  226.                             <li class="sidebar_box_child_item">
  227.                                 <a href="" class="sidebar_box_link">スタッドレスホイルセット</a>
  228.                             </li>
  229.                         </ul>
  230.                     </div>
  231.                     <picture class="sidebar_box_image">
  232.                         <img src="{{ asset('assets/img/common/category/sample04.jpg', 'user_data') }}" alt="">
  233.                     </picture>
  234.                 </div>
  235.             </li>
  236.             <li class="sidebar_list_item">
  237.                 <a href="" class="sidebar_list_target">タイヤ周辺機材</a>
  238.                 <div class="sidebar_box">
  239.                     <div class="sidebar_box_navi">
  240.                         <a href="" class="sidebar_box_link">タイヤ周辺機材</a>
  241.                         <ul class="sidebar_box_child">
  242.                             <li class="sidebar_box_child_item">
  243.                                 <a href="" class="sidebar_box_link">貼り付けウエイト</a>
  244.                             </li>
  245.                             <li class="sidebar_box_child_item">
  246.                                 <a href="" class="sidebar_box_link">袋ナット</a>
  247.                             </li>
  248.                         </ul>
  249.                     </div>
  250.                     <picture class="sidebar_box_image">
  251.                         <img src="{{ asset('assets/img/common/category/sample05.jpg', 'user_data') }}" alt="">
  252.                     </picture>
  253.                 </div>
  254.             </li>
  255.             <li class="sidebar_list_item">
  256.                 <a href="" class="sidebar_list_target">電装品</a>
  257.                 <div class="sidebar_box">
  258.                     <div class="sidebar_box_navi">
  259.                         <a href="" class="sidebar_box_link">電装品</a>
  260.                         <ul class="sidebar_box_child">
  261.                             <li class="sidebar_box_child_item">
  262.                                 <a href="" class="sidebar_box_link">ドラレコ</a>
  263.                             </li>
  264.                             <li class="sidebar_box_child_item">
  265.                                 <a href="" class="sidebar_box_link">ETC</a>
  266.                             </li>
  267.                         </ul>
  268.                     </div>
  269.                     <picture class="sidebar_box_image">
  270.                         <img src="{{ asset('assets/img/common/category/sample06.jpg', 'user_data') }}" alt="">
  271.                     </picture>
  272.                 </div>
  273.             </li>
  274.             <li class="sidebar_list_item">
  275.                 <a href="" class="sidebar_list_target">ワイパーブレード</a>
  276.                 <div class="sidebar_box">
  277.                     <div class="sidebar_box_navi">
  278.                         <a href="" class="sidebar_box_link">ワイパーブレード</a>
  279.                         <ul class="sidebar_box_child">
  280.                             <li class="sidebar_box_child_item">
  281.                                 <a href="" class="sidebar_box_link">トーナメントワイパー</a>
  282.                             </li>
  283.                             <li class="sidebar_box_child_item">
  284.                                 <a href="" class="sidebar_box_link">リヤ専用ワイパーブレード</a>
  285.                             </li>
  286.                             <li class="sidebar_box_child_item">
  287.                                 <a href="" class="sidebar_box_link">デザインワイパーブレード</a>
  288.                             </li>
  289.                             <li class="sidebar_box_child_item">
  290.                                 <a href="" class="sidebar_box_link">撥水フラットワイパーブレード</a>
  291.                             </li>
  292.                             <li class="sidebar_box_child_item">
  293.                                 <a href="" class="sidebar_box_link">スノーワイパーブレード</a>
  294.                             </li>
  295.                         </ul>
  296.                     </div>
  297.                     <picture class="sidebar_box_image">
  298.                         <img src="{{ asset('assets/img/common/category/sample01.jpg', 'user_data') }}" alt="">
  299.                     </picture>
  300.                 </div>
  301.             </li>
  302.             <li class="sidebar_list_item">
  303.                 <a href="" class="sidebar_list_target">ワイパー替えゴム</a>
  304.                 <div class="sidebar_box">
  305.                     <div class="sidebar_box_navi">
  306.                         <a href="" class="sidebar_box_link">ワイパー替えゴム</a>
  307.                         <ul class="sidebar_box_child">
  308.                             <li class="sidebar_box_child_item">
  309.                                 <a href="" class="sidebar_box_link">TW替えゴム</a>
  310.                             </li>
  311.                             <li class="sidebar_box_child_item">
  312.                                 <a href="" class="sidebar_box_link">TN替えゴム</a>
  313.                             </li>
  314.                             <li class="sidebar_box_child_item">
  315.                                 <a href="" class="sidebar_box_link">デザイン替えゴム</a>
  316.                             </li>
  317.                             <li class="sidebar_box_child_item">
  318.                                 <a href="" class="sidebar_box_link">AS替えゴム</a>
  319.                             </li>
  320.                             <li class="sidebar_box_child_item">
  321.                                 <a href="" class="sidebar_box_link">MF替えゴム</a>
  322.                             </li>
  323.                             <li class="sidebar_box_child_item">
  324.                                 <a href="" class="sidebar_box_link">MB替えゴム</a>
  325.                             </li>
  326.                         </ul>
  327.                     </div>
  328.                     <picture class="sidebar_box_image">
  329.                         <img src="{{ asset('assets/img/common/category/sample02.jpg', 'user_data') }}" alt="">
  330.                     </picture>
  331.                 </div>
  332.             </li>
  333.             <li class="sidebar_list_item">
  334.                 <a href="" class="sidebar_list_target">エアコンケミカル</a>
  335.                 <div class="sidebar_box">
  336.                     <div class="sidebar_box_navi">
  337.                         <a href="" class="sidebar_box_link">エアコンケミカル</a>
  338.                         <ul class="sidebar_box_child">
  339.                             <li class="sidebar_box_child_item">
  340.                                 <a href="" class="sidebar_box_link">ガス回収機</a>
  341.                             </li>
  342.                             <li class="sidebar_box_child_item">
  343.                                 <a href="" class="sidebar_box_link">エアコン洗浄</a>
  344.                             </li>
  345.                             <li class="sidebar_box_child_item">
  346.                                 <a href="" class="sidebar_box_link">車内洗浄</a>
  347.                             </li>
  348.                             <li class="sidebar_box_child_item">
  349.                                 <a href="" class="sidebar_box_link">その他</a>
  350.                             </li>
  351.                         </ul>
  352.                     </div>
  353.                     <picture class="sidebar_box_image">
  354.                         <img src="{{ asset('assets/img/common/category/sample03.jpg', 'user_data') }}" alt="">
  355.                     </picture>
  356.                 </div>
  357.             </li>
  358.             <li class="sidebar_list_item">
  359.                 <a href="" class="sidebar_list_target">下廻りケミカル</a>
  360.                 <div class="sidebar_box">
  361.                     <div class="sidebar_box_navi">
  362.                         <a href="" class="sidebar_box_link">下廻りケミカル</a>
  363.                         <ul class="sidebar_box_child">
  364.                             <li class="sidebar_box_child_item">
  365.                                 <a href="" class="sidebar_box_link">下廻り防錆剤</a>
  366.                             </li>
  367.                         </ul>
  368.                     </div>
  369.                     <picture class="sidebar_box_image">
  370.                         <img src="{{ asset('assets/img/common/category/sample04.jpg', 'user_data') }}" alt="">
  371.                     </picture>
  372.                 </div>
  373.             </li>
  374.             <li class="sidebar_list_item">
  375.                 <a href="" class="sidebar_list_target">クーラントケミカル</a>
  376.                 <div class="sidebar_box">
  377.                     <div class="sidebar_box_navi">
  378.                         <a href="" class="sidebar_box_link">クーラントケミカル</a>
  379.                     </div>
  380.                     <picture class="sidebar_box_image">
  381.                         <img src="{{ asset('assets/img/common/category/sample05.jpg', 'user_data') }}" alt="">
  382.                     </picture>
  383.                 </div>
  384.             </li>
  385.             <li class="sidebar_list_item">
  386.                 <a href="" class="sidebar_list_target">洗車ケミカル</a>
  387.                 <div class="sidebar_box">
  388.                     <div class="sidebar_box_navi">
  389.                         <a href="" class="sidebar_box_link">洗車ケミカル</a>
  390.                         <ul class="sidebar_box_child">
  391.                             <li class="sidebar_box_child_item">
  392.                                 <a href="" class="sidebar_box_link">虫取り除去剤</a>
  393.                             </li>
  394.                         </ul>
  395.                     </div>
  396.                     <picture class="sidebar_box_image">
  397.                         <img src="{{ asset('assets/img/common/category/sample06.jpg', 'user_data') }}" alt="">
  398.                     </picture>
  399.                 </div>
  400.             </li>
  401.             <li class="sidebar_list_item">
  402.                 <a href="" class="sidebar_list_target">シートクリーナー</a>
  403.                 <div class="sidebar_box">
  404.                     <div class="sidebar_box_navi">
  405.                         <a href="" class="sidebar_box_link">シートクリーナー</a>
  406.                     </div>
  407.                     <picture class="sidebar_box_image">
  408.                         <img src="{{ asset('assets/img/common/category/sample01.jpg', 'user_data') }}" alt="">
  409.                     </picture>
  410.                 </div>
  411.             </li>
  412.             <li class="sidebar_list_item">
  413.                 <a href="" class="sidebar_list_target">フィルター</a>
  414.                 <div class="sidebar_box">
  415.                     <div class="sidebar_box_navi">
  416.                         <a href="" class="sidebar_box_link">フィルター</a>
  417.                         <ul class="sidebar_box_child">
  418.                             <li class="sidebar_box_child_item">
  419.                                 <a href="" class="sidebar_box_link">エアコンフィルター</a>
  420.                             </li>
  421.                         </ul>
  422.                     </div>
  423.                     <picture class="sidebar_box_image">
  424.                         <img src="{{ asset('assets/img/common/category/sample02.jpg', 'user_data') }}" alt="">
  425.                     </picture>
  426.                 </div>
  427.             </li>
  428.             <li class="sidebar_list_item">
  429.                 <a href="" class="sidebar_list_target">その他</a>
  430.                 <div class="sidebar_box">
  431.                     <div class="sidebar_box_navi">
  432.                         <a href="" class="sidebar_box_link">その他</a>
  433.                     </div>
  434.                     <picture class="sidebar_box_image">
  435.                         <img src="{{ asset('assets/img/common/category/sample03.jpg', 'user_data') }}" alt="">
  436.                     </picture>
  437.                 </div>
  438.             </li>
  439.         </ul>
  440.     </div>
  441. </div>