app/template/default/Block/category_nav_sp.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. {% set Categories = repository('Eccube\\Entity\\Category').getList() %}
  13. {% macro tree(Category) %}
  14.     {% from _self import tree %}
  15.     <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
  16.         {{ Category.name }}
  17.     </a>
  18.     {% if Category.children|length > 0 %}
  19.         <ul>
  20.             {% for ChildCategory in Category.children %}
  21.                 <li>
  22.                     {{ tree(ChildCategory) }}
  23.                 </li>
  24.             {% endfor %}
  25.         </ul>
  26.     {% endif %}
  27. {% endmacro %}
  29. {# @see https://github.com/bolt/bolt/pull/2388 #}
  30. {% from _self import tree %}
  31. <div class="ec-headerCategoryArea">
  32.     <div class="ec-headerCategoryArea__heading js-toggle-category" style="cursor:pointer;">
  33.         <p style="    font-family: 'Hannari', serif;">{{ 'カテゴリ一覧 ▼'|trans }}</p>
  34.     </div>
  36.     <div class="ec-itemNav js-category-list slide-toggle">
  37.         <ul class="ec-itemNav__nav">
  38.             {% for Category in Categories %}
  39.                 <li>
  40.                     {{ tree(Category) }}
  41.                 </li>
  42.             {% endfor %}
  43.         </ul>
  44.     </div>
  46.     <div class="ec-itemNav">
  47.         <ul class="ec-itemNav__nav">
  48.             <li><a href="{{ url('user_data', {'route': 'about'}) }}" style="font-weight:bold;padding: 1em 10px; color:#654231; background: #ffffe8;">伊せ屋について</a></li>
  49.             <li><a href="{{ url('user_data', {'route': 'eat'}) }}" style="font-weight:bold;padding: 1em 10px;color:#654231; background: #ffffe8;">美味しい食べ方</a></li>
  50.             <li><a href="{{ url('user_data', {'route': 'faq'}) }}" style="font-weight:bold;padding: 1em 10px;color:#654231; background: #ffffe8;">Q&A</a></li>
  51.         </ul>
  52.     </div>
  53. </div>
  54. <style>
  56. /* 初期状態：閉じている */
  57. .slide-toggle {
  58.     max-height: 0;
  59.     overflow: hidden;
  60.     transition: max-height 0.4s ease;
  61. }
  63. /* 開いている状態 */
  64. .slide-toggle.open {
  65.     max-height: 1000px; /* 十分に大きければOK */
  66. }
  67. </style>
  68. <script>
  69. document.addEventListener('DOMContentLoaded', function () {
  70.     const toggleHeading = document.querySelector('.js-toggle-category');
  71.     const categoryList = document.querySelector('.js-category-list');
  73.     if (toggleHeading && categoryList) {
  74.         toggleHeading.addEventListener('click', function () {
  75.             categoryList.classList.toggle('open');
  76.         });
  77.     }
  78. });
  79. </script>