`pending-approval/toolbar-consolidation-assets/sections__collection.liquid`

239 lines
<script
  type="application/json"
  data-section-id="{{ section.id }}"
  data-section-type="static-collection"
>
</script>

{% liquid
  assign products_per_page = section.settings.products_per_row | times: section.settings.number_of_rows
  assign use_masonry = false

  if section.settings.layout == 'masonry'
    assign use_masonry = true
  endif

  assign show_filters = false
  if section.settings.show_filters
    assign show_filters = true
  endif

  assign show_sorting = false
  if section.settings.sorting
    assign show_sorting = true
  endif

  assign show_collection_image = false
  if collection.image and section.settings.show_collection_image
    assign show_collection_image = true
  endif
%}

<div>
  {% unless use_masonry %}
    <h1 class="page-title">{{ collection.title }}</h1>
    {% render 'breadcrumbs' %}
  {% endunless %}

  {% paginate collection.products by products_per_page %}
    <section
      class="collection collection-image--{{ show_collection_image }}"
      data-product-hover="{{ settings.product_hover }}"
      {% if use_masonry %}data-collection-masonry{% endif %}
      data-section-id="{{ section.id }}"
      data-section-type="collection">

      {% if use_masonry or show_collection_image or collection.description != blank or show_sorting or show_filters %}
        <div
          class="
          collection-header
          {% if use_masonry %}
            collection-header-alternate
          {% endif %}
          {% if show_filters and show_sorting %}
            collection-header--filters-sort-enabled
          {% endif %}
          "
        >
          {% if show_collection_image %}
            <div class="collection-featured-image">
              {%
                render 'rimg',
                img: collection.image,
                size: '1024x1024',
                lazy: true,
              %}
            </div>
          {% endif %}

          <div class="collection-header-content">
            {% if use_masonry %}
              {% render 'breadcrumbs' %}
              <h1 class="page-title">{{ collection.title }}</h1>
            {% endif %}

            {% if collection.description != blank and section.settings.show_description %}
              <div class="collection-description rte">
                {{ collection.description }}
              </div>
            {% endif %}

            {% if show_filters or show_sorting %}
              <div class="collection-filters">
                {% if show_filters and collection.filters.size > 0 %}
                  <!-- Approach B: Horizontal filter bar (proxies to Boost's hidden controls) -->
                  {% render 'collection-filters-horizontal' %}

                  <!-- Boost native filters (hidden by Approach B CSS, powers the filtering) -->
                  <div class="faceted-filters" data-faceted-filter>
                    {%
                      render "faceted-filters",
                      filters: collection.filters,
                      class_prefix: 'collection',
                    %}
                  </div>
                {% endif %}
                {%- comment -%}
                  Native #sort-by dropdown removed 2026-06-23: sorting is now owned
                  exclusively by the canonical collection-toolbar snippet (#collectionSort)
                  rendered below, which carries the full DW sort set
                  (Newest/Color/Style/SKU/Title/Price). Keeping two sort controls
                  duplicated the UI.
                {%- endcomment -%}
              </div>
            {% endif %}
          </div>

          {% if show_filters and collection.filters.size > 0 %}
            {% for filter in collection.filters %}
              {% if filter.active_values.size > 0 or filter.min_value.value or filter.max_value.value %}
                  {%-
                    render 'faceted-filters-active',
                    show_sorting: show_sorting,
                    filter: filter,
                    filters: collection.filters,
                    class_prefix: 'collection',
                    clear_url: collection.url,
                  %}
                {% break %}
              {% endif %}
            {% endfor %}
          {% endif %}
        </div>
      {% endif %}

      <!-- Full Collection Toolbar: Sort + Grid Density Slider -->
      {% include 'collection-toolbar' %}

      <div
        class="collection-products rows-of-{{ section.settings.products_per_row }} grid-cols-3"
        data-collection-grid
        {% if use_masonry %}data-masonry-grid{% endif %}
      >
        {%- if use_masonry -%}
          <div class="product-grid-masonry-sizer" data-masonry-sizer></div>
        {%- endif -%}

        {%- if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 -%}
          {%- for i in (1..section.settings.products_per_row) -%}
            {%- capture productImage -%}
              {%- cycle 'product-1', 'product-2', 'product-3' -%}
            {%- endcapture -%}
            {%- assign image = productImage | placeholder_svg_tag: 'placeholder-svg' -%}

            {%- render 'home-onboard-product', image: image -%}
          {%- endfor -%}
        {%- else -%}
          {% for product in collection.products %}
            {%
              render 'product-list-item',
              product: product,
            %}
          {% else %}
            {% capture continueLink %}
              <a href="{{ routes.all_products_collection_url }}">{{ 'collections.collection.continue_link' | t }}</a>
            {% endcapture %}
             <p class="empty">{{ 'collections.collection.empty_html' | t: continue_link: continueLink }}</p>
          {% endfor %}
        {%- endif -%}
      </div>
    </section>

    {%
      render 'pagination',
      paginate: paginate,
    %}
  {% endpaginate %}
</div>

{%- comment -%}
  collection-grid-density.js include removed 2026-06-23: it queried
  [data-collection-grid-slider] / [data-grid-density-value], which the current
  toolbar markup never renders, so it was dead code. Grid density is now owned
  solely by the canonical collection-toolbar snippet (#densitySlider).
{%- endcomment -%}

{% schema %}
{
  "name": "Collection pages",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "label": "Show collection image"
    },
    {
      "type": "checkbox",
      "id": "show_description",
      "label": "Show description"
    },
    {
      "type": "checkbox",
      "id": "sorting",
      "label": "Enable sorting",
      "info": "Parameters include: best selling, A-Z, newest to oldest, etc."
    },
    {
      "type": "checkbox",
      "id": "show_filters",
      "label": "Enable filtering",
      "default": true
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        {
          "value": "default",
          "label": "Default"
        },
        {
          "value": "masonry",
          "label": "Masonry"
        }
      ],
      "default": "default"
    },
    {
      "type": "range",
      "id": "products_per_row",
      "label": "Products per row",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "number_of_rows",
      "label": "Rows",
      "min": 1,
      "max": 12,
      "step": 1,
      "default": 3
    }
  ]
}

{% endschema %}