app/template/default/Product/list.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. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'product_page' %}
  15. {# style #}
  16. {% block stylesheet %}
  17.     <link rel="stylesheet" href="{{ asset('assets/css/product-list.css') }}">
  18. {% endblock %}
  20. {% block javascript %}
  21. <script>
  22. (function() {
  23.     // Lấy URL hiện tại và tạo URLSearchParams
  24.     function getCurrentUrlParams() {
  25.         const urlParams = new URLSearchParams(window.location.search);
  26.         return urlParams;
  27.     }
  29.     // Cập nhật URL với category filters và reload
  30.     function updateCategoryFilters() {
  31.         const checkboxes = document.querySelectorAll('.filter-option__checkbox');
  32.         const urlParams = getCurrentUrlParams();
  34.         // Xóa tất cả category_filter[] cũ (có thể có nhiều giá trị)
  35.         const keysToDelete = [];
  36.         urlParams.forEach(function(value, key) {
  37.             if (key === 'category_filter[]' || key.startsWith('category_filter')) {
  38.                 keysToDelete.push(key);
  39.             }
  40.         });
  41.         keysToDelete.forEach(function(key) {
  42.             urlParams.delete(key);
  43.         });
  45.         // Thu thập category theo từng block tiêu chí.
  46.         // Trong cùng block là OR, giữa các block sẽ được backend xử lý là AND.
  47.         const selectedCategoriesByGroup = {};
  48.         checkboxes.forEach(function(checkbox) {
  49.             if (checkbox.checked) {
  50.                 const groupId = checkbox.dataset.groupId;
  51.                 if (!selectedCategoriesByGroup[groupId]) {
  52.                     selectedCategoriesByGroup[groupId] = [];
  53.                 }
  54.                 selectedCategoriesByGroup[groupId].push(checkbox.value);
  55.             }
  56.         });
  58.         Object.keys(selectedCategoriesByGroup).forEach(function(groupId) {
  59.             selectedCategoriesByGroup[groupId].forEach(function(categoryId) {
  60.                 urlParams.append('category_filter[' + groupId + '][]', categoryId);
  61.             });
  62.         });
  64.         // Reset về trang 1 khi filter
  65.         urlParams.set('pageno', '1');
  67.         // Tạo URL mới
  68.         const queryString = urlParams.toString();
  69.         const newUrl = queryString
  70.             ? window.location.pathname + '?' + queryString
  71.             : window.location.pathname;
  73.         // Reload page với query params mới
  74.         window.location.href = newUrl;
  75.     }
  77.     // Khôi phục trạng thái checkbox từ URL và xử lý nút search
  78.     document.addEventListener('DOMContentLoaded', function() {
  79.         const checkboxes = document.querySelectorAll('.filter-option__checkbox');
  80.         const searchButton = document.querySelector('.btn-search');
  82.         // Khôi phục trạng thái checkbox từ URL
  83.         const urlParams = getCurrentUrlParams();
  84.         const selectedCategories = [];
  85.         urlParams.forEach(function(value, key) {
  86.             if (key.startsWith('category_filter[')) {
  87.                 selectedCategories.push(value);
  88.             }
  89.         });
  91.         checkboxes.forEach(function(checkbox) {
  92.             // Set checked nếu category ID có trong URL
  93.             if (selectedCategories.includes(checkbox.value)) {
  94.                 checkbox.checked = true;
  95.             }
  96.             // Không lắng nghe sự kiện change trên checkbox nữa
  97.         });
  99.         // Lắng nghe sự kiện click trên nút search
  100.         if (searchButton) {
  101.             searchButton.addEventListener('click', function() {
  102.                 updateCategoryFilters();
  103.             });
  104.         }
  105.     });
  106. })();
  107. </script>
  108. {% endblock %}
  110. {% block main %}
  112.  <body>
  113.   <!-- breadcrumb section -->
  114.   <div class="breadcrumb-section">
  115.     <div class="container-1360 border-box px-40">
  116.       <nav class="breadcrumb">
  117.         <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  118.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  119.         <a href="{{ url('product_list') }}" class="breadcrumb__item text-black">商品一覧</a>
  120.       </nav>
  121.     </div>
  122.   </div>
  124.   <!-- product list section -->
  125.   <div class="container-1200">
  126.     <div class="product-list-wrapper">
  127.       <div class="product-list-left">
  128.         {% if searchable_categories is defined and searchable_categories|length > 0 %}
  129.           {% for group in searchable_categories %}
  130.             <div class="filter-group">
  131.               <div class="filter-group__header">{{ group.parent.name }}</div>
  132.               <div class="filter-group__options">
  133.                 {% if group.children|length > 0 %}
  134.                   {% for child in group.children %}
  135.                     <label class="filter-option">
  136.                       <input type="checkbox"
  137.                              class="filter-option__checkbox"
  138.                              name="category_filter[{{ group.parent.id }}][]"
  139.                              value="{{ child.id }}"
  140.                              data-category-id="{{ child.id }}"
  141.                              data-group-id="{{ group.parent.id }}">
  142.                       <span class="filter-option__label">{{ child.name }}</span>
  143.                     </label>
  144.                   {% endfor %}
  145.                 {% else %}
  146.                   {# Nếu parent category cũng có is_searchable và không có children, hiển thị parent #}
  147.                   <label class="filter-option">
  148.                     <input type="checkbox"
  149.                            class="filter-option__checkbox"
  150.                            name="category_filter[{{ group.parent.id }}][]"
  151.                            value="{{ group.parent.id }}"
  152.                            data-category-id="{{ group.parent.id }}"
  153.                            data-group-id="{{ group.parent.id }}">
  154.                     <span class="filter-option__label">{{ group.parent.name }}</span>
  155.                   </label>
  156.                 {% endif %}
  157.               </div>
  158.             </div>
  159.           {% endfor %}
  160.         {% endif %}
  161.         <button class="btn-primary btn-search w-100">
  162.             <span>検索する</span>
  163.             <svg class="btn-search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  164.             <rect width="24" height="24" rx="12" fill="black"/>
  165.             <path d="M16.252 12.001L16.249 12.0039L16.252 12.0068L11.7266 16.5312L10.5957 15.4004L13.1943 12.8027H7.72852V11.2031H13.1924L10.5957 8.60742L11.7266 7.47656L16.252 12.001Z" fill="#FBE800"/>
  166.             </svg>
  167.         </button>
  168.       </div>
  169.       <!-- bottom line -->
  170.       <div class="bottom-line container-mobile"></div>
  171.       <!-- Product List Right -->
  172.       <div class="product-list-right">
  173.         <div class="product-grid" id="product-grid">
  174.           {% if pagination.totalItemCount > 0 %}
  175.             {% for Product in pagination %}
  176.               <div class="product-item">
  177.                 <a href="{{ url('product_detail', {'id': Product.id}) }}" class="product-card-small">
  178.                   <div class="product-card-small__image">
  179.                     <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  180.                     <div class="product-card-small__arrow">
  181.                         <img src="{{ asset('assets/img/default/icons/icon-heart.svg') }}" alt="Favorite" loading="lazy">
  182.                     </div>
  183.                   </div>
  184.                 </a>
  185.                 <div class="product-item__info">
  186.                   <a href="{{ url('product_detail', {'id': Product.id}) }}">
  187.                     <h4 class="product-item__title" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ Product.name }}">{{ Product.name }}</h4>
  188.                   </a>
  189.                   <div class="product-item__price">
  190.                     <span class="price-symbol">¥</span>
  191.                     <span class="price-amount">
  192.                       {% if Product.hasProductClass %}
  193.                         {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  194.                           {{ Product.getPrice02IncTaxMin|number_format }}
  195.                         {% else %}
  196.                           {{ Product.getPrice02IncTaxMin|number_format }} ～ {{ Product.getPrice02IncTaxMax|number_format }}
  197.                         {% endif %}
  198.                       {% else %}
  199.                         {{ Product.getPrice02IncTaxMin|number_format }}
  200.                       {% endif %}
  201.                     </span>
  202.                     <span class="price-tax">(税込)</span>
  203.                   </div>
  204.                 </div>
  205.               </div>
  206.             {% endfor %}
  207.           {% else %}
  208.             <span>{{ 'front.product.search__product_not_found'|trans }}</span>
  209.           {% endif %}
  210.         </div>
  211.         <!-- Pagination -->
  212.         <div class="pagination-product-list-wrapper">
  213.           <div class="pagination-product-list" style="margin: 0 auto;">
  214.             {% include "Block/_pagination.twig" with {'pages': pagination.paginationData} %}
  215.           </div>
  216.         </div>
  217.       </div>
  218.     </div>
  219.   </div>
  222.  </body>
  224. {% endblock %}