templates/bundles/BitBagSyliusElasticsearchPlugin/Shop/Product/index.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% form_theme form with ['@SyliusUi/Form/theme.html.twig', 'Context/Shop/ProductCategory/formTheme.html.twig'] %}
  5. {% import '@SyliusUi/Macro/messages.html.twig' as messages %}
  6. {% import '@SyliusUi/Macro/pagination.html.twig' as pagination %}
  8. {% block content %}
  9.     {{ form_start(form, {'method': 'GET', 'attr': {'class': 'ui loadable form', 'id': 'category-filters-form'}}) }}
  11.     {# Mobile Filter Toggle Button #}
  12.     {% include 'bundles/BitBagSyliusElasticsearchPlugin/Shop/Filters/mobileFilters.twig' with {'filterForm': form} %}
  14.     <div class="ui stackable grid">
  15.         <div class="four wide column">
  16.             {% embed 'bundles/BitBagSyliusElasticsearchPlugin/Shop/Filters/filters.twig' with {
  17.                 'filterForm': form,
  18.                 'resetUrl': path('bitbag_sylius_elasticsearch_plugin_shop_list_products', {'slug': taxon.slug, 'products': 'products'|trans, 'product_category': 'product_category'|trans, '_locale': app.request.locale})
  19.             } %}
  20.                 {% block formContent %}
  21.                     {% include '@BitBagSyliusElasticsearchPlugin/Shop/Product/Index/_filterForm.html.twig' %}
  22.                 {% endblock %}
  23.                 {% block extraFilters %}
  24.                     <div class="ui accordion filters-accordion">
  25.                         <div class="title no-padding">
  26.                             <div class="header item">
  27.                                 {{ 'app.ui.price_range'|trans }}
  28.                                 <i class="dropdown icon" style="margin-inline-start: auto;"></i>
  29.                             </div>
  30.                         </div>
  31.                         <div class="content no-padding">
  32.                             {% include '@BitBagSyliusElasticsearchPlugin/Shop/Product/Index/_filterPrice.html.twig' %}
  33.                         </div>
  34.                     </div>
  35.                 {% endblock %}
  36.             {% endembed %}
  37.         </div>
  38.         <div class="twelve wide column">
  39.             <h1 class="ui header category-page-header">
  40.                 {{ taxon.name }}
  41.             </h1>
  42.             {{ bitbag_cms_render_banner('Context/Shop/Blog/banner.html.twig') }}
  43.             {% include 'Context/Common/Banner/_categoryBanner.html.twig' %}
  44.             <div class="sub header expandable-content-container">
  45.                 <span class="expandable-content text-sm">{{ taxon.description }}</span>
  46.             </div>
  48.             <div class="ui divider"></div>
  49.             <div class="ui segment product-listing-sorting-bar no-border no-background no-shadow">
  50.                 <div class="ui stackable grid">
  51.                     <div class="eleven wide column no-padding no-border">
  52.                         {# Product search disabled due to performance issues - needs optimization before re-enabling
  53.                         {# <div class="ui search max-width-350" id="products-search">
  54.                             <div class="ui fluid left icon input input-bg">
  55.                                 {{ form_widget(form.name, {'attr': {'placeholder': 'sylius.ui.search', 'class': 'prompt'}}) }}
  56.                                 <i class="search icon"></i>
  57.                             </div>
  58.                         </div> #}
  59.                     </div>
  60.                     <div class="five wide column no-padding no-border sorting-buttons">
  61.                         {% include '@BitBagSyliusElasticsearchPlugin/Shop/Product/Index/_sorting.html.twig' %}
  62.                         {% include '@BitBagSyliusElasticsearchPlugin/Shop/Product/Index/_pagination.html.twig' %}
  63.                     </div>
  64.                 </div>
  65.             </div>
  67.             {% if products|length > 0 %}
  68.                 <div class="category-products-grid" id="products">
  69.                     {% for product in products %}
  70.                         {% include '@SyliusShop/Product/_box.html.twig' %}
  71.                     {% endfor %}
  72.                 </div>
  73.                 <div class="ui hidden divider"></div>
  75.                 {{ pagination.simple(products) }}
  76.             {% else %}
  77.                 {{ messages.info('sylius.ui.no_results_to_display') }}
  78.             {% endif %}
  79.         </div>
  80.     </div>
  81.     <button type="submit" style="display: none">
  82.         <i class="search icon"></i>
  83.         {{ 'bitbag_sylius_elasticsearch_plugin.ui.filter'|trans }}
  84.     </button>
  85.     {{ form_end(form, {'render_rest': false}) }}
  87.     <script>
  88.         window.translations = {
  89.             readMore: "{{ 'app.ui.read_more'|trans|lower }}",
  90.             readLess: "{{ 'app.ui.read_less'|trans|lower }}"
  91.         };
  93.         document.addEventListener('DOMContentLoaded', () => {
  94.             const form = document.getElementById('category-filters-form');
  95.             if (!form) {
  96.                 return;
  97.             }
  99.             const shouldDisable = (el) => {
  100.                 if (el.disabled) {
  101.                     return false;
  102.                 }
  104.                 if (el.type === 'checkbox' || el.type === 'radio') {
  105.                     return !el.checked;
  106.                 }
  108.                 if (el.tagName === 'SELECT' && el.multiple) {
  109.                     return el.selectedOptions.length === 0;
  110.                 }
  112.                 return el.value === '' || el.value === null;
  113.             };
  115.             form.addEventListener('submit', () => {
  116.                 form.querySelectorAll('input, select, textarea').forEach((el) => {
  117.                     if (shouldDisable(el)) {
  118.                         el.disabled = true;
  119.                     }
  120.                 });
  121.             });
  122.         });
  123.     </script>
  124. {% endblock %}