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. #}
  12. {# ============================================================
  13. カテゴリナビゲーション（SP版）
  15. 機能:
  16. - カテゴリ一覧をツリー構造で表示
  17. - 在庫切れカテゴリの表示/非表示切り替え対応
  18. - カウント表示の動的切り替え対応（全商品数/在庫あり商品数）
  19. ============================================================ #}
  21. {# データ取得 #}
  22. {% set Categories = repository('Eccube\\Entity\\Category').getList() %}
  23. {% set CategoriesCount = repository('Eccube\\Entity\\Product').findProductsWithCategoriesCount() %}
  24. {% set CategoriesCountInStock = repository('Eccube\\Entity\\Product').findProductsWithCategoriesCountInStock() %}
  25. {% set Makers = repository('Plugin\\Maker42\\Entity\\Maker').findBy({}, {sort_no: 'desc' }, 5) %}
  27. {# ============================================================
  28. マクロ: hasStockInTree
  30. 目的: カテゴリまたはその子孫カテゴリに在庫あり商品があるか判定
  32. 引数:
  33. - Category: 判定対象のカテゴリエンティティ
  34. - CategoriesCountInStock: カテゴリごとの在庫あり商品数の配列
  36. 戻り値: 'true' または 'false' （文字列）
  38. ロジック:
  39. 1. 該当カテゴリ自体に在庫あり商品があれば 'true'
  40. 2. なければ子カテゴリを再帰的にチェック
  41. 3. 子孫のどこかに在庫があれば 'true'、なければ 'false'
  42. ============================================================ #}
  43. {% macro hasStockInTree(Category, CategoriesCountInStock) %}
  44.     {%- if CategoriesCountInStock[Category.id] is defined and CategoriesCountInStock[Category.id] > 0 -%}
  45.         true
  46.     {%- else -%}
  47.         {%- set found = 'false' -%}
  48.         {%- for ChildCategory in Category.children -%}
  49.             {%- if _self.hasStockInTree(ChildCategory, CategoriesCountInStock)|trim == 'true' -%}
  50.                 {%- set found = 'true' -%}
  51.             {%- endif -%}
  52.         {%- endfor -%}
  53.         {{ found }}
  54.     {%- endif -%}
  55. {% endmacro %}
  57. {# ============================================================
  58. マクロ: hasProductInTree
  60. 目的: カテゴリまたはその子孫カテゴリに商品があるか判定
  62. 引数:
  63. - Category: 判定対象のカテゴリエンティティ
  64. - CategoriesCount: カテゴリごとの全商品数の配列
  66. 戻り値: 'true' または 'false' （文字列）
  68. ロジック:
  69. 1. 該当カテゴリ自体に商品があれば 'true'
  70. 2. なければ子カテゴリを再帰的にチェック
  71. 3. 子孫のどこかに商品があれば 'true'、なければ 'false'
  72. ============================================================ #}
  73. {% macro hasProductInTree(Category, CategoriesCount) %}
  74.     {%- if CategoriesCount[Category.id] is defined and CategoriesCount[Category.id] > 0 -%}
  75.         true
  76.     {%- else -%}
  77.         {%- set found = 'false' -%}
  78.         {%- for ChildCategory in Category.children -%}
  79.             {%- if _self.hasProductInTree(ChildCategory, CategoriesCount)|trim == 'true' -%}
  80.                 {%- set found = 'true' -%}
  81.             {%- endif -%}
  82.         {%- endfor -%}
  83.         {{ found }}
  84.     {%- endif -%}
  85. {% endmacro %}
  87. {# ============================================================
  88. マクロ: tree
  90. 目的: カテゴリを再帰的にツリー表示
  92. 引数:
  93. - Category: 表示対象のカテゴリエンティティ
  94. - CategoriesCount: カテゴリごとの全商品数の配列
  95. - CategoriesCountInStock: カテゴリごとの在庫あり商品数の配列
  97. 出力するHTML属性:
  98. - data-count-all: 全商品数（JS用）
  99. - data-count-stock: 在庫あり商品数（JS用）
  100. - data-has-stock: 在庫有無フラグ（JS用）
  101. - no-stock-category: 在庫なしカテゴリのCSSクラス
  102. ============================================================ #}
  103. {% macro tree(Category, CategoriesCount, CategoriesCountInStock) %}
  104.     {% from _self import tree, hasStockInTree, hasProductInTree %}
  106.     {# カウント値を取得（未定義の場合は0） #}
  107.     {% set countAll = CategoriesCount[Category.id] is defined ? CategoriesCount[Category.id] : 0 %}
  108.     {% set countStock = CategoriesCountInStock[Category.id] is defined ? CategoriesCountInStock[Category.id] : 0 %}
  110.     {# カテゴリリンク
  111.     - data-count-all: JSで全商品数表示に切り替える際に使用
  112.     - data-count-stock: JSで在庫あり商品数表示に切り替える際に使用
  113.     - js-category-count: JSでカウント表示を更新するためのクラス #}
  114.     <a class="fs-6 js-category-link-sp" href="{{ url('product_list') }}?category_id={{ Category.id }}" data-count-all="{{ countAll }}" data-count-stock="{{ countStock }}">
  115.         {% if (Category.Parent == "") %}
  116.             <img class="menu-icon" src="/html/user_data/assets/img/category/{{ Category.id }}.png" alt="{{ Category.name }}">
  117.         {% endif %}
  118.         <span class="category-text">{{ Category.name }} (<span class="js-category-count">{{ countAll|number_format }}</span>)</span>
  119.     </a>
  120.     {% if Category.children|length > 0 %}
  121.         <ul>
  122.             {% for ChildCategory in Category.children %}
  123.                 {# 子カテゴリの在庫判定（子孫含む） #}
  124.                 {% set childHasStock = hasStockInTree(ChildCategory, CategoriesCountInStock)|trim %}
  125.                 {# 子カテゴリの商品有無判定（子孫含む） #}
  126.                 {% set childHasProduct = hasProductInTree(ChildCategory, CategoriesCount)|trim %}
  127.                 {# no-stock-category: 在庫なしカテゴリを非表示にするためのクラス
  128.                 no-product-category: 商品なしカテゴリを常に非表示にするためのクラス
  129.                 data-has-stock: JSで在庫状態を判定するための属性 #}
  130.                 <li class="{% if childHasStock == 'false' %}no-stock-category {% endif %}{% if childHasProduct == 'false' %}no-product-category{% endif %}" data-has-stock="{{ childHasStock }}">
  131.                     {{ tree(ChildCategory, CategoriesCount, CategoriesCountInStock) }}
  132.                 </li>
  133.             {% endfor %}
  134.         </ul>
  135.     {% endif %}
  136. {% endmacro %}
  138. {# マクロのインポート @see https://github.com/bolt/bolt/pull/2388 #}
  139. {% from _self import tree, hasStockInTree, hasProductInTree %}
  141. {# ============================================================
  142. カテゴリナビゲーション本体
  143. ============================================================ #}
  144. <div class="ec-headerCategoryArea">
  145.     <div class="ec-headerCategoryArea__heading">
  146.         <p>{{ 'カテゴリ一覧'|trans }}</p>
  147.     </div>
  148.     <div class="ec-itemNav">
  149.         <ul class="ec-itemNav__nav">
  150.             {% for Category in Categories %}
  151.                 {# 在庫判定（子孫含む） #}
  152.                 {% set hasStock = hasStockInTree(Category, CategoriesCountInStock)|trim %}
  153.                 {# 商品有無判定（子孫含む） #}
  154.                 {% set hasProduct = hasProductInTree(Category, CategoriesCount)|trim %}
  156.                 {# トップレベルカテゴリのli要素
  157.                 - no-stock-category: 在庫なしの場合に付与（JSで表示/非表示制御）
  158.                 - no-product-category: 商品なしの場合に付与（常に非表示）
  159.                 - data-has-stock: 在庫状態フラグ #}
  160.                 <li class="{% if hasStock == 'false' %}no-stock-category {% endif %}{% if hasProduct == 'false' %}no-product-category{% endif %}" data-has-stock="{{ hasStock }}">
  161.                     {{ tree(Category, CategoriesCount, CategoriesCountInStock) }}
  162.                 </li>
  163.             {% endfor %}
  164.         </ul>
  165.     </div>
  166.     <div class="ec-headerCategoryArea__heading">
  167.         <p>{{ 'メーカー一覧'|trans }}</p>
  168.     </div>
  169.     <div class="ec-itemNav maker_list">
  170.         <ul class="ec-itemNav__nav">
  171.             {% for Maker in Makers %}
  172.                 <li><a class='fs-6' href="{{ url('product_list') }}?maker_id={{ Maker.id }}">{{ Maker.name }}</a></li>
  173.             {% endfor %}
  174.         </ul>
  175.         <div class='py-2 px-2'>
  176.             <a href="{{ url('maker') }}"><button class='metroFamilyOrder-button01' type='button'>一覧を見る</button></a>
  177.         </div>
  178.     </div>
  179. </div>