Section

section/
├── product-list/
│   └── default.twig
├── category-menu/
│   └── default.twig
├── header/
│   └── default.twig
└── ...

{% from 'layout/components/macros.twig' import grid_cols %}

{% set SELECTED_LAYOUT = cookie('selected_layout')|default(SETTING.PERVIEW.XL ?: 4) %}
{% set PERVIEW = SETTING.PERVIEW|merge({ XL: SELECTED_LAYOUT, XXL: SELECTED_LAYOUT }) %}

<div class="w-full mb-4 lg:mb-6">
  {% if IS_HOME_PAGE == 0 and TOTAL != 0 %}
    <div class="flex items-center gap-4 mb-4">
      {% if ALLOWED_SORTS|length > 0 %}
        <select name="sort" data-toggle="sort">
          {% for key, translation_key in ALLOWED_SORTS %}
            <option value="{{ key }}"
              {% if query('sort')|default('0') == key %} selected {% endif %}>
              {{ t[translation_key] }}
            </option>
          {% endfor %}
        </select>
      {% endif %}
    </div>
  {% endif %}

  {% if PRODUCTS|length > 0 %}
    <div id="catalog-{{ BLOCK.ID }}"
         class="grid gap-4 {{ grid_cols(PERVIEW, {xs: 2, md: 3}) }}">
      {% for key, P in PRODUCTS %}
        {{ snippet('product-list.product-card.default') }}
      {% endfor %}
    </div>
  {% else %}
    {% set COUNT = "<span class='text-primary font-bold'>" ~ TOTAL ~ "</span>" %}
    {% if SEARCH_WORD %}
      <div>{{ t.search_result_empty|replace({'%SEARCH_WORD%': SEARCH_WORD})|raw }}</div>
    {% else %}
      <div>{{ t.no_result|raw }}</div>
    {% endif %}
  {% endif %}
</div>

<h1 class="font-semibold text-base md:text-xl">{{ P.TITLE }}</h1>

{% if P.PRODUCT_CODE %}
  <span>{{ t.product_code }}: {{ P.PRODUCT_CODE }}</span>
{% endif %}

{% if P.DISPLAY_VAT == 1 or P.VAT == 0 %}
  <span>{{ vat(P.PRICE_SELL, P.VAT) }}</span> {{ P.TARGET_CURRENCY }}
{% else %}
  <span>{{ format(P.PRICE_SELL) }}</span> {{ P.TARGET_CURRENCY }} + {{ t.vat }}
{% endif %}

{% for M_D in P.MULTIPLE_DISCOUNT %}
  <tr data-min="{{ M_D.MIN }}" data-max="{{ M_D.MAX }}" data-percent="{{ M_D.PERCENT }}">
    <td>{{ t.amount_range|replace({'%MIN%': M_D.MIN, '%MAX%': M_D.MAX})|raw }}</td>
    <td>%{{ M_D.PERCENT }}</td>
  </tr>
{% endfor %}

{% from 'layout/components/macros.twig' import link_attributes, col_span %}

{% if SETTING.IMAGES|length > 0 %}
  <div class="grid grid-cols-12 gap-4">
    {% for key, IMAGE in SETTING.IMAGES %}
      <div class="{{ col_span(IMAGE.COL, {xs: 12}) }} relative group">
        <picture>
          {% if IMAGE.IMG2.PATH %}
            <source data-srcset="{{ IMAGE.IMG2.PATH }}"
                    width="{{ IMAGE.IMG2.WIDTH }}" height="{{ IMAGE.IMG2.HEIGHT }}"
                    media="(max-width:640px)">
          {% endif %}
          <img data-src="{{ IMAGE.IMG1.PATH }}"
               width="{{ IMAGE.IMG1.WIDTH }}" height="{{ IMAGE.IMG1.HEIGHT }}"
               alt="{{ IMAGE.TITLE|striptags }}"
               class="w-full h-full object-cover lazyload"
               loading="lazy">
        </picture>
        {% if IMAGE.URL.URL %}
          <a href="{{ IMAGE.URL.URL }}" {{ link_attributes(IMAGE) }}
             class="absolute inset-0" aria-label="{{ IMAGE.TITLE|striptags }}"></a>
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% endif %}

{% for key, TAB in SETTING.TABS %}
  <div id="showcase-{{ BLOCK.ID }}{{ TAB.INDEX }}"
       class="{% if key == 0 %}active tab-loaded{% endif %}">
    {% if key == 0 %}
      {{ snippet(SETTING.SUBFOLDER_SHOWCASE|default('showcase.slider')) }}
    {% else %}
      <template data-showcase-products></template>
    {% endif %}
  </div>
{% endfor %}