Debut Theme - collection-template.liquid

{% case section.settings.grid %}
  {% when 2 %}
    {%- assign max_height = 530 -%}
  {% when 3 %}
    {%- assign max_height = 345 -%}
  {% when 4 %}
    {%- assign max_height = 250 -%}
  {% when 5 %}
    {%- assign max_height = 195 -%}
{% endcase %}

{% if section.settings.layout == 'grid' %}
  {%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% else %}
  {%- assign limit = 16 -%}
{% endif %}

{% paginate collection.products by limit %}

<div data-section-id="{{ section.id }}" data-section-type="collection-template">
  <header class="collection-header">
    {%- assign is_filter_by_available = false -%}
    {%- if section.settings.tags_enable and collection.all_tags.size > 0 -%}
      {%- assign is_filter_by_available = true -%}
    {%- endif -%}

    {% if section.settings.show_collection_image and collection.image %}
      <div class="collection-hero">
        <div class="collection-hero__image ratio-container lazyload js"
             data-bgset="{% include 'bgset', image: collection.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-image: url('{{ collection.image | img_url: '300x300' }});"></div>
        <noscript>
          <div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '2048x600', crop: 'top' }});"></div>
        </noscript>
        <div class="collection-hero__title-wrapper">
          <h1 class="collection-hero__title page-width">
              <span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
              {{ collection.title }}
          </h1>
        </div>
      </div>
      {% if is_filter_by_available == false and section.settings.sort_enable == false %}
        <div class="page-width">
          <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
        </div>
      {% endif %}
      {% if collection.description != blank %}
        <div class="rte collection-description page-width">
          {{ collection.description }}
        </div>
      {% endif %}
    {% else %}
      <div class="page-width">
        <div class="section-header text-center">
          <h1>
              <span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
              {{ collection.title }}
          </h1>
          {% if collection.description != blank %}
            <div class="rte">
              {{ collection.description }}
            </div>
          {% endif %}
          {% if is_filter_by_available == false and section.settings.sort_enable == false %}
            <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
          {% endif %}
        </div>
      </div>
    {% endif %}

    {% if is_filter_by_available or section.settings.sort_enable %}
      <div class="filters-toolbar-wrapper{% if is_filter_by_available %} filters-toolbar--has-filter{% endif %}">
        <div class="page-width">
          <div class="filters-toolbar">
            <div class="filters-toolbar__item-wrapper">
              {% if section.settings.tags_enable %}
                {% unless collection.all_tags.size == 0 %}
                  <div class="filters-toolbar__item-child">
                    <label class="filters-toolbar__label select-label" for="FilterTags">{{ 'collections.filters.title_tags' | t }}</label>
                    <div class="filters-toolbar__input-wrapper select-group">
                      <select class="filters-toolbar__input hidden" name="FilterTags" id="FilterTags" aria-describedby="a11y-refresh-page-message a11y-selection-message">
                        <option value="{{ collection.url }}">{{ 'collections.filters.all_tags' | t }}</option>
                        {% for tag in collection.all_tags %}
                          {%- assign new_url = tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first -%}
                          <option value="{{ new_url }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
                        {% endfor %}
                      </select>
                      {% include 'icon-chevron-down' %}
                    </div>
                  </div>
                {% endunless %}
              {% endif %}

              {% if section.settings.sort_enable %}
                <div class="filters-toolbar__item-child">
                  {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                  <label class="filters-toolbar__label select-label" for="SortBy">{{ 'collections.sorting.title' | t }}</label>
                  <div class="filters-toolbar__input-wrapper select-group">
                    <select name="sort_by" id="SortBy"
                      class="filters-toolbar__input hidden"
                      aria-describedby="a11y-refresh-page-message a11y-selection-message"
                      data-default-sortby="{{ collection.default_sort_by }}"
                    >
                      {%- for option in collection.sort_options -%}
                        <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
                      {%- endfor -%}
                    </select>
                    {% include 'icon-chevron-down' %}
                  </div>
                </div>
              {% endif %}
            </div>

            <div class="filters-toolbar__item filters-toolbar__item--count">
              <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </header>

  <div class="page-width" id="Collection">
    {% if section.settings.layout == 'grid' %}
      {% case section.settings.grid %}
      {% when 2 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
      {% when 3 %}
        {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
      {% when 4 %}
        {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
      {% when 5 %}
        {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
      {% endcase %}

      <ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        {% for product in collection.products %}
          {% assign color_active = false %}
          {% for option in product.options %}
            {% if option == 'Color' %}
               {% assign color_active = true %}
            {% endif %}
          {% endfor %}
          {% if product.variants.size > 1 and color_active == true %}
          {% for option in product.options %}
             {% if option == 'Color' %}
             {% assign index = forloop.index0 %}
             {% assign colorlist = '' %}
             {% assign color = '' %}
             {% for variant in product.variants %}
             {% capture color %}
             {{ variant.options[index] }}
             {% endcapture %}

               {% unless colorlist contains color %}
                  <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
                    {% include 'product-card-grid-variant', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
                  </li>
               {% capture tempList %}
            {{colorlist | append: color | append: " " }}
            {% endcapture %}
            {% assign colorlist = tempList %}
            {% endunless %}
            {% endfor %}
          {% endif %}
        {% endfor %}
        {% else %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
          </li>
        {% endif %}
        {% else %}
          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
            <li class="grid__item">
              <div class="grid grid--uniform">
                {% for i in (1..limit) %}
                  <div class="grid__item {{ grid_item_width }}">
                    <div class="grid-view-item">
                      <a href="#" class="grid-view-item__link">
                        <div class="grid-view-item__image">
                          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                        </div>
                        <div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                        <div class="grid-view-item__meta">
                          <span class="product-price__price">$19.99</span>
                        </div>
                      </a>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </li>
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      </ul>
    {% else %}
      <ul class="list-view-items">
        {% for product in collection.products %}
          {% assign color_active = false %}
          {% for option in product.options %}
            {% if option == 'Color' %}
               {% assign color_active = true %}
            {% endif %}
          {% endfor %}
          {% if product.variants.size > 1 and color_active == true %}
          {% for option in product.options %}
             {% if option == 'Color' %}
             {% assign index = forloop.index0 %}
             {% assign colorlist = '' %}
             {% assign color = '' %}
             {% for variant in product.variants %}
             {% capture color %}
             {{ variant.options[index] }}
             {% endcapture %}

               {% unless colorlist contains color %}
                  <li class="list-view-item">
                    {% include 'product-card-list-variant', product: product, show_vendor: section.settings.show_vendor %}
                  </li>
               {% capture tempList %}
            {{colorlist | append: color | append: " " }}
            {% endcapture %}
            {% assign colorlist = tempList %}
            {% endunless %}
            {% endfor %}
          {% endif %}
        {% endfor %}
        {% else %}
          <li class="list-view-item">
            {% include 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
          </li>
        {% endif %}
        {% else %}

          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
            {% for i in (1..4) %}
              <li class="list-view-item">
                <a href="#" class="list-view-item__link">
                  <div class="list-view-item__image-column">
                    <div class="list-view-item__image-wrapper">
                      <div class="list-view-item__image">
                        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
                        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      </div>
                    </div>
                  </div>

                  <div class="list-view-item__title-column">
                    <div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                  </div>

                  <div class="list-view-item__price-column">
                    <span class="product-price__price">$19.99</span>
                  </div>
                </a>
              </li>
            {% endfor %}
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}

    {% if is_empty_collection %}
      <div class="grid__item small--text-center">
        <p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
      </div>
    {% endif %}

    {%- if paginate.pages > 1 -%}
      {% include 'pagination', paginate: paginate %}
    {%- endif -%}
  </div>
</div>

{% endpaginate %}



{% schema %}
{
  "name": {
    "da": "Kollektionssider",
    "de": "Kategorie-Seiten",
    "en": "Collection pages",
    "es": "Páginas de colección",
    "fi": "Kokoelman sivut",
    "fr": "Pages de collections",
    "hi": "कलेक्शन पेज",
    "it": "Pagine di collezioni",
    "ja": "コレクションページ",
    "ko": "컬렉션 페이지",
    "nb": "Samlingssider",
    "nl": "Collectiepagina's",
    "pt-BR": "Páginas de coleções",
    "pt-PT": "Páginas de coleções",
    "sv": "Produktseriesidor",
    "th": "หน้าคอลเลกชัน",
    "zh-CN": "产品系列页面",
    "zh-TW": "商品系列頁面"
  },
  "settings": [
    {
      "type": "select",
      "id": "layout",
      "label": {
        "da": "Layout",
        "de": "Layout",
        "en": "Layout",
        "es": "Diseño",
        "fi": "Asettelu",
        "fr": "Mise en page",
        "hi": "लेआउट",
        "it": "Layout",
        "ja": "レイアウト",
        "ko": "레이아웃",
        "nb": "Oppsett",
        "nl": "Opmaak",
        "pt-BR": "Layout",
        "pt-PT": "Esquema",
        "sv": "Layout",
        "th": "เลย์เอาต์",
        "zh-CN": "布局",
        "zh-TW": "版面配置"
      },
      "default": "grid",
      "options": [
        {
          "value": "grid",
          "label": {
            "da": "Gitter",
            "de": "Raster",
            "en": "Grid",
            "es": "Cuadrícula",
            "fi": "Ruudukko",
            "fr": "Grille",
            "hi": "ग्रिड",
            "it": "Griglia",
            "ja": "グリッド",
            "ko": "그리드",
            "nb": "Rutenett",
            "nl": "Raster",
            "pt-BR": "Grade",
            "pt-PT": "Grelha",
            "sv": "Rutnät",
            "th": "กริด",
            "zh-CN": "网格",
            "zh-TW": "網格"
          }
        },
        {
          "value": "list",
          "label": {
            "da": "Liste",
            "de": "Liste",
            "en": "List",
            "es": "Lista",
            "fi": "Luettelo",
            "fr": "Liste",
            "hi": "सूची",
            "it": "Elenco",
            "ja": "リスト",
            "ko": "목록",
            "nb": "Liste",
            "nl": "Lijst",
            "pt-BR": "Lista",
            "pt-PT": "Lista",
            "sv": "Lista",
            "th": "รายการ",
            "zh-CN": "列表",
            "zh-TW": "清單"
          }
        }
      ]
    },
    {
      "type": "range",
      "id": "grid",
      "label": {
        "da": "Produkter pr. række (kun gitter)",
        "de": "Produkte per Reihe (nur Raster)",
        "en": "Products per row (grid only)",
        "es": "Productos por fila (solo cuadrícula)",
        "fi": "Tuotteita per rivi (vain ruudukko)",
        "fr": "Produits par rangée (grille uniquement)",
        "hi": "उत्पाद प्रति पंक्ति (केवल ग्रिड)",
        "it": "Prodotti per riga (solo griglia)",
        "ja": "行あたりの商品数（グリッドのみ）",
        "ko": "열 별 제품 (그리드 전용)",
        "nb": "Produkter per rad (kun rutenett)",
        "nl": "Producten per rij (alleen raster)",
        "pt-BR": "Produtos por linha (somente grade)",
        "pt-PT": "Produtos por linha (somente grelha)",
        "sv": "Produkter per rad (endast rutnät)",
        "th": "สินค้าต่อแถว (กริดเท่านั้น)",
        "zh-CN": "每行产品数（仅限网格）",
        "zh-TW": "每列產品數 (僅限網格)"
      },
      "default": 4,
      "min": 2,
      "max": 5,
      "step": 1
    },
    {
      "type": "range",
      "id": "rows",
      "label": {
        "da": "Rækker pr. side (kun gitter)",
        "de": "Reihen per Seite (nur Raster)",
        "en": "Rows per page (grid only)",
        "es": "Filas por página (solo cuadrícula)",
        "fi": "Rivejä per sivu (vain ruudukko)",
        "fr": "Rangées par page (grille uniquement)",
        "hi": "प्रति पृष्ठ पंक्तियां (केवल ग्रिड)",
        "it": "Righe per pagina (solo griglia)",
        "ja": "ページあたりの行数（グリッドのみ）",
        "ko": "페이지 별 열 (그리드 전용)",
        "nb": "Rader per side (kun rutenett)",
        "nl": "Rijen per pagina (alleen raster)",
        "pt-BR": "Linhas por página (somente grade)",
        "pt-PT": "Linhas por página (somente grelha)",
        "sv": "Rader per sida (endast rutnät)",
        "th": "แถวต่อหน้า (กริดเท่านั้น)",
        "zh-CN": "每行产品数（仅限网格）",
        "zh-TW": "每頁列數 (僅限網格)"
      },
      "default": 2,
      "min": 2,
      "max": 8,
      "step": 1
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "label": {
        "da": "Vis kollektionsbillede",
        "de": "Kategorie-Foto anzeigen",
        "en": "Show collection image",
        "es": "Mostrar imagen de la colección",
        "fi": "Näytä kokoelman kuva",
        "fr": "Afficher l'image de la collection",
        "hi": "कलेक्शन इमेज दिखाएं",
        "it": "Mostra immagine collezione",
        "ja": "コレクションの画像を表示する",
        "ko": "컬렉션 이미지 표시",
        "nb": "Vis samlingsbilde",
        "nl": "Collectieafbeelding weergeven",
        "pt-BR": "Exibir imagem da coleção",
        "pt-PT": "Mostrar imagem da coleção",
        "sv": "Visa produktseriebilder",
        "th": "แสดงรูปภาพคอลเลกชัน",
        "zh-CN": "显示产品系列图片",
        "zh-TW": "顯示商品系列圖片"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": {
        "da": "Vis produktleverandører",
        "de": "Produkt-Lieferanten anzeigen",
        "en": "Show product vendors",
        "es": "Mostrar proveedores del producto",
        "fi": "Näytä tuotteen myyjät",
        "fr": "Afficher les vendeurs",
        "hi": "उत्पाद विक्रेताओं को दिखाएं",
        "it": "Mostra fornitori prodotto",
        "ja": "商品の販売元を表示する",
        "ko": "제품 공급 업체 표시",
        "nb": "Vis produktleverandører",
        "nl": "Productleveranciers weergeven",
        "pt-BR": "Exibir fornecedores do produto",
        "pt-PT": "Mostrar fornecedores do produto",
        "sv": "Visa produktleverantörer",
        "th": "แสดงผู้ขายสินค้า",
        "zh-CN": "显示产品厂商",
        "zh-TW": "顯示產品廠商"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "sort_enable",
      "label": {
        "da": "Aktivér sortering",
        "de": "Sortieren erlauben",
        "en": "Enable sorting",
        "es": "Habilitar la función ordenar",
        "fi": "Ota lajittelu käyttöön",
        "fr": "Activer le tri",
        "hi": "क्रमबद्ध करना सक्षम करें",
        "it": "Permetti di ordinare",
        "ja": "並べ替えを有効にする",
        "ko": "정렬 사용",
        "nb": "Aktiver sortering",
        "nl": "Sortering inschakelen",
        "pt-BR": "Habilitar organização",
        "pt-PT": "Ativar ordenação",
        "sv": "Aktivera sortering",
        "th": "เปิดใช้งานการจัดเรียง",
        "zh-CN": "启用排序",
        "zh-TW": "啟用排序"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "tags_enable",
      "label": {
        "da": "Aktivér tagfiltrering",
        "de": "Tag-Filtern erlauben",
        "en": "Enable tag filtering",
        "es": "Habilitar filtro de etiquetas",
        "fi": "Ota tunnisteiden suodatus käyttöön",
        "fr": "Activer le filtrage par balises",
        "hi": "टैग फ़िल्टर करना सक्षम करें",
        "it": "Attiva filtro tag",
        "ja": "タグでの絞り込みを有効にする",
        "ko": "태그 필터링 사용",
        "nb": "Aktiver taggfiltrering",
        "nl": "Filteren op tags inschakelen",
        "pt-BR": "Habilitar filtragem de tags",
        "pt-PT": "Ativar filtragem por etiqueta",
        "sv": "Aktivera taggfiltrering",
        "th": "เปิดใช้การกรองแท็ก",
        "zh-CN": "启用标签筛选",
        "zh-TW": "啟用標籤篩選功能"
      },
      "default": true
    }
  ]
}
{% endschema %}