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. #}
  12. {# ============================================================
  13. カテゴリナビゲーション（PC版）
  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() %}
  26. {# ============================================================
  27. マクロ: hasStockInTree
  29. 目的: カテゴリまたはその子孫カテゴリに在庫あり商品があるか判定
  31. 引数:
  32. - Category: 判定対象のカテゴリエンティティ
  33. - CategoriesCountInStock: カテゴリごとの在庫あり商品数の配列
  35. 戻り値: 'true' または 'false' （文字列）
  37. ロジック:
  38. 1. 該当カテゴリ自体に在庫あり商品があれば 'true'
  39. 2. なければ子カテゴリを再帰的にチェック
  40. 3. 子孫のどこかに在庫があれば 'true'、なければ 'false'
  41. ============================================================ #}
  42. {% macro hasStockInTree(Category, CategoriesCountInStock) %}
  43.     {%- if CategoriesCountInStock[Category.id] is defined and CategoriesCountInStock[Category.id] > 0 -%}
  44.         true
  45.     {%- else -%}
  46.         {%- set found = 'false' -%}
  47.         {%- for ChildCategory in Category.children -%}
  48.             {%- if _self.hasStockInTree(ChildCategory, CategoriesCountInStock)|trim == 'true' -%}
  49.                 {%- set found = 'true' -%}
  50.             {%- endif -%}
  51.         {%- endfor -%}
  52.         {{ found }}
  53.     {%- endif -%}
  54. {% endmacro %}
  56. {# ============================================================
  57. マクロ: hasProductInTree
  59. 目的: カテゴリまたはその子孫カテゴリに商品があるか判定
  61. 引数:
  62. - Category: 判定対象のカテゴリエンティティ
  63. - CategoriesCount: カテゴリごとの全商品数の配列
  65. 戻り値: 'true' または 'false' （文字列）
  67. ロジック:
  68. 1. 該当カテゴリ自体に商品があれば 'true'
  69. 2. なければ子カテゴリを再帰的にチェック
  70. 3. 子孫のどこかに商品があれば 'true'、なければ 'false'
  71. ============================================================ #}
  72. {% macro hasProductInTree(Category, CategoriesCount) %}
  73.     {%- if CategoriesCount[Category.id] is defined and CategoriesCount[Category.id] > 0 -%}
  74.         true
  75.     {%- else -%}
  76.         {%- set found = 'false' -%}
  77.         {%- for ChildCategory in Category.children -%}
  78.             {%- if _self.hasProductInTree(ChildCategory, CategoriesCount)|trim == 'true' -%}
  79.                 {%- set found = 'true' -%}
  80.             {%- endif -%}
  81.         {%- endfor -%}
  82.         {{ found }}
  83.     {%- endif -%}
  84. {% endmacro %}
  86. {# ============================================================
  87. マクロ: tree
  89. 目的: カテゴリを再帰的にツリー表示
  91. 引数:
  92. - Category: 表示対象のカテゴリエンティティ
  93. - CategoriesCount: カテゴリごとの全商品数の配列
  94. - CategoriesCountInStock: カテゴリごとの在庫あり商品数の配列
  96. 出力するHTML属性:
  97. - data-count-all: 全商品数（JS用）
  98. - data-count-stock: 在庫あり商品数（JS用）
  99. - data-has-stock: 在庫有無フラグ（JS用）
  100. - no-stock-category: 在庫なしカテゴリのCSSクラス
  101. ============================================================ #}
  102. {% macro tree(Category, CategoriesCount, CategoriesCountInStock) %}
  103.     {% from _self import tree, hasStockInTree, hasProductInTree %}
  105.     {# カウント値を取得（未定義の場合は0） #}
  106.     {% set countAll = CategoriesCount[Category.id] is defined ? CategoriesCount[Category.id] : 0 %}
  107.     {% set countStock = CategoriesCountInStock[Category.id] is defined ? CategoriesCountInStock[Category.id] : 0 %}
  109.     {# カテゴリリンク
  110.     - data-count-all: JSで全商品数表示に切り替える際に使用
  111.     - data-count-stock: JSで在庫あり商品数表示に切り替える際に使用
  112.     - js-category-count: JSでカウント表示を更新するためのクラス #}
  113.     <a class="left-menu-link js-category-link" href="{{ url('product_list') }}?category_id={{ Category.id }}" data-count-all="{{ countAll }}" data-count-stock="{{ countStock }}">
  114.     {# トップレベルカテゴリのみアイコン表示 #}
  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>
  121.     {# 子カテゴリがある場合、サブメニューを表示 #}
  122.     {% if Category.children|length > 0 %}
  123.         {% set childCount = Category.children|length %}
  125.         {# 子カテゴリ数に応じてカラム表示クラスを設定
  126.         - 16個以上: 3列表示
  127.         - 8-15個: 2列表示
  128.         - 7個以下: 1列表示
  129.         ※ 孫カテゴリ以降は常に1列 #}
  130.         {% if Category.Parent == "" %}
  131.             {# トップレベルカテゴリの子（1階層目） #}
  132.             {% if childCount >= 16 %}
  133.                 {% set submenuClass = 'js-submenu-three-column' %}
  134.             {% elseif childCount >= 8 %}
  135.                 {% set submenuClass = 'js-submenu-two-column' %}
  136.             {% else %}
  137.                 {% set submenuClass = '' %}
  138.             {% endif %}
  139.         {% elseif Category.Parent.Parent == "" %}
  140.             {# 2階層目（孫カテゴリ）は常に1列 #}
  141.             {% set submenuClass = '' %}
  142.         {% else %}
  143.             {# 3階層目以降も常に1列 #}
  144.             {% set submenuClass = '' %}
  145.         {% endif %}
  147.         <ul class="{{ submenuClass }}" data-child-count="{{ childCount }}">
  148.             {% for ChildCategory in Category.children %}
  149.                 {# 子カテゴリの在庫判定（子孫含む） #}
  150.                 {% set childHasStock = hasStockInTree(ChildCategory, CategoriesCountInStock)|trim %}
  151.                 {# 子カテゴリの商品有無判定（子孫含む） #}
  152.                 {% set childHasProduct = hasProductInTree(ChildCategory, CategoriesCount)|trim %}
  153.                 {# no-stock-category: 在庫なしカテゴリを非表示にするためのクラス
  154.                 no-product-category: 商品なしカテゴリを常に非表示にするためのクラス
  155.                 data-has-stock: JSで在庫状態を判定するための属性 #}
  156.                 <li class="{% if childHasStock == 'false' %}no-stock-category {% endif %}{% if childHasProduct == 'false' %}no-product-category{% endif %}" data-has-stock="{{ childHasStock }}">
  157.                 {{ tree(ChildCategory, CategoriesCount, CategoriesCountInStock) }}
  158.             </li>
  159.         {% endfor %}
  160.         </ul>
  161.     {% endif %}
  162. {% endmacro %}
  164. {# マクロのインポート @see https://github.com/bolt/bolt/pull/2388 #}
  165. {% from _self import tree, hasStockInTree, hasProductInTree %}
  167. {# ============================================================
  168. カテゴリナビゲーション本体
  169. ============================================================ #}
  170. <div class="category_list">
  171.     <dl>
  172.         <dt>カテゴリ一覧</dt>
  173.     </dl>
  174. </div>
  175. <div class="ec-categoryNaviRole">
  176.     <div class="ec-itemNav">
  177.         <ul class="ec-itemNav__nav">
  178.             {% for Category in Categories %}
  179.                 {# トップレベルカテゴリの子カテゴリ数に応じてクラスを設定 #}
  180.                 {% set topChildCount = Category.children|length %}
  181.                 {% if topChildCount >= 16 %}
  182.                     {% set topLevelClass = 'js-has-very-many-children' %}
  183.                 {% elseif topChildCount >= 8 %}
  184.                     {% set topLevelClass = 'js-has-many-children' %}
  185.                 {% else %}
  186.                     {% set topLevelClass = '' %}
  187.                 {% endif %}
  189.                 {# 在庫判定（子孫含む） #}
  190.                 {% set hasStock = hasStockInTree(Category, CategoriesCountInStock)|trim %}
  191.                 {# 商品有無判定（子孫含む） #}
  192.                 {% set hasProduct = hasProductInTree(Category, CategoriesCount)|trim %}
  194.                 {# トップレベルカテゴリのli要素
  195.                 - no-stock-category: 在庫なしの場合に付与（JSで表示/非表示制御）
  196.                 - no-product-category: 商品なしの場合に付与（常に非表示）
  197.                 - data-has-stock: 在庫状態フラグ #}
  198.                 <li class="{{ topLevelClass }}{% if hasStock == 'false' %} no-stock-category{% endif %}{% if hasProduct == 'false' %} no-product-category{% endif %}" data-child-count="{{ topChildCount }}" data-has-stock="{{ hasStock }}">
  199.                     {{ tree(Category, CategoriesCount, CategoriesCountInStock) }}
  200.                 </li>
  201.             {% endfor %}
  202.         </ul>
  203.     </div>
  204. </div>