products.liquid

{%- assign blocks     = section.blocks -%}
{%- assign collection = section.settings.collection -%}

{%- if collection != blank -%}
  {%- assign items         = collection.items -%}
  {%- assign items_type    = "collection" -%}
  {%- assign size          = collection.items_count -%}
{%- else -%}
  {%- assign items         = blocks -%}
  {%- assign items_type    = "blocks" -%}
  {%- assign product_items = "" -%}

  {%- for item in items -%}
    {%- if product_items == "" -%}
      {%- assign product_items = item.id -%}
    {%- else -%}
      {%- assign product_items = product_items | append: ", " | append: item.id -%}
    {%- endif -%}
  {%- endfor -%}

  {%- assign product_items_arr = product_items | split: ", " -%}
  {%- assign size = product_items_arr | size -%}
{%- endif -%}

{%- if size > 0 -%}
  {{ "products.css" | asset_url | stylesheet_tag }}
  {{ "product-card.css" | asset_url | stylesheet_tag }}

  {%- assign button_outline_label  = section.settings.button_outline_label -%}
  {%- assign button_outline_url    = section.settings.button_outline_url -%}
  {%- assign color_scheme          = section.settings.color_scheme -%}
  {%- assign image                 = section.settings.image -%}
  {%- assign limit                 = 8 -%}
  {%- assign padding_top           = section.settings.padding_top -%}
  {%- assign padding_bottom        = section.settings.padding_bottom -%}
  {%- assign padding_top_mobile    = section.settings.padding_top_mobile -%}
  {%- assign padding_bottom_mobile = section.settings.padding_bottom_mobile -%}
  {%- assign show_navigation       = section.settings.show_navigation -%}
  {%- assign show_pagination       = section.settings.show_pagination -%}
  {%- assign tag                   = section.settings.tag -%}
  {%- assign tag_image             = section.settings.tag_image -%}
  {%- assign timer                 = section.settings.timer -%}
  {%- assign title                 = section.settings.title -%}

  {%- assign carousel = false -%}

  {%- if size > 1 -%}
    {{ "carousel.css" | asset_url | stylesheet_tag }}

    {%- assign carousel = true -%}

    {% unless show_pagination %}
      {%- assign limit = nil -%}
    {% endunless %}
  {%- endif -%}

  {% comment %} CSS variables start {% endcomment %}
  {%- capture variables -%}
    {%- case padding_top -%}
      {%- when 'small' -%}
        --padding-top: 40px;
      {%- when 'medium' -%}
        --padding-top: 80px;
      {%- when 'large' -%}
        --padding-top: 112px;
    {%- endcase -%}

    {%- case padding_bottom -%}
      {%- when 'small' -%}
        --padding-bottom: 40px;
      {%- when 'medium' -%}
        --padding-bottom: 80px;
      {%- when 'large' -%}
        --padding-bottom: 112px;
    {%- endcase -%}

    {%- case padding_top_mobile -%}
      {%- when 'small' -%}
        --padding-top-mobile: 18px;
      {%- when 'medium' -%}
        --padding-top-mobile: 40px;
      {%- when 'large' -%}
        --padding-top-mobile: 60px;
    {%- endcase -%}

    {%- case padding_bottom_mobile -%}
      {%- when 'small' -%}
        --padding-bottom-mobile: 18px;
      {%- when 'medium' -%}
        --padding-bottom-mobile: 40px;
      {%- when 'large' -%}
        --padding-bottom-mobile: 60px;
    {%- endcase -%}
  {%- endcapture -%}
  {% comment %} CSS variables end {% endcomment %}

  <div
    class="products__wrapper color-{{ color_scheme.id }}{% if padding_top != blank or padding_top_mobile != blank %} products__wrapper--padding-top{% endif %}{% if padding_bottom != blank or padding_bottom_mobile != blank %} products__wrapper--padding-bottom{% endif %}{% if image.url != blank %} products__wrapper--with-background{%- endif -%}"
    style="{{- variables | escape -}}"
  >
    <div class="products__container container">
      {%- if title != blank or tag != blank or tag_image.url != blank -%}
        <div class="products__top">
          {%- if tag_image.url != blank -%}
            <div class="products__tag-image-wrapper">
              {%- render 'image',
                image: tag_image,
                loading: 'lazy',
                class: 'products__tag-image',
                custom_width: '100',
                custom_size: '100px'
              -%}
            </div>
          {%- endif -%}

          {%- if tag != blank -%}
            <strong class="products__tag tagline">{{- tag -}}</strong>
          {%- endif -%}

          {%- if title != blank -%}
            <h2 class="products__title h4">{{- title -}}</h2>
          {%- endif -%}
        </div>
      {%- endif -%}

      <div class="products__list{% if carousel %} carousel carousel__pause{%- endif -%}"{% if carousel %} aria-role="Gallery"{% endif %}>
        {%- if carousel -%}
          <input class="carousel__timer" type="hidden" name="hidden" value="{{- timer -}}" aria-hidden="true">
          <div class="carousel__wrapper">
        {%- endif -%}

            {%- for item in items limit: limit -%}
              {% case items_type %}
                {% when "blocks" %}
                  {% assign product = item.settings.product %}
                {% when "collection" %}
                  {% assign product = item %}
              {% endcase %}

              {%- if carousel -%}
                <div class="carousel__item">
                  <div class="carousel__inner">
              {%- endif -%}
                    {%- render 'product-card',
                        product: product,
                        settings: settings
                    -%}
              {%- if carousel -%}
                  </div>
                </div>
              {%- endif -%}
            {%- endfor -%}

        {%- if carousel -%}
          </div>

          {%- if show_navigation -%}
            <div class="carousel__navigation hidden" aria-role="Carousel navigation">
              <span class="carousel__btn prev" aria-label="Prev slide">
                Previous slide
                {%- render 'icon-arrow-right-full' -%}
              </span>
              <span class="carousel__btn next" aria-label="Next slide">
                Next slide
                {%- render 'icon-arrow-right-full' -%}
              </span>
            </div>
          {%- endif -%}

          {%- if show_pagination -%}
            <div class="carousel__pagination hidden" aria-role="Carousel navigation">
              {%- for item in items limit: limit -%}
                {%- assign first = forloop.first -%}
                {%- assign index = forloop.index -%}

                <span class="carousel__dot{% if first %} active{%- endif -%}" data-index="{{- index -}}" aria-label="Jump to slide {{ index }}">
                  Go to slide {{ index }}
                </span>
              {%- endfor -%}
            </div>
          {%- endif -%}
        {%- endif -%}
      </div>

      {%- if button_outline_label != blank and button_outline_url != blank -%}
        <div class="products__buttons">
          <a href="{{ button_outline_url }}" class="products__button button button--outlined button--large">
            {{- button_outline_label -}}
          </a>
        </div>
      {%- endif -%}
    </div>

    {%- if image.url != blank -%}
      <div class="products__background-wrapper">
        {%- render 'image',
          image: image,
          loading: 'lazy',
          class: 'products__background',
          size: 'xxl'
        -%}
      </div>
    {%- endif -%}
  </div>
{%- endif -%}

{% schema %}
  {
    "name": "Products",
    "description": "Display individual products or items from a collection in a grid or sliding carousel",
    "tag": "section",
    "class": "products",
    "settings": [
      {
        "type": "header",
        "content": "General settings"
      },
      {
        "type": "color_scheme",
        "id": "color_scheme",
        "label": "Color scheme",
        "default": "set-1"
      },
      {
        "type": "text",
        "id": "tag",
        "label": "Tagline",
        "default": "This week"
      },
      {
        "type": "image_picker",
        "id": "tag_image",
        "label": "Tagline image (optional)",
        "info": "Shown above the tagline text"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Title",
        "default": "Popular products"
      },
      {
        "type": "image_picker",
        "id": "image",
        "label": "Background image"
      },
      {
        "type": "header",
        "content": "Collection (optional)"
      },
      {
        "type": "paragraph",
        "content": "When you select a collection, any product blocks will be ignored"
      },
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "header",
        "content": "Buttons settings"
      },
      {
        "type": "text",
        "id": "button_outline_label",
        "label": "Button label",
        "default": "See all products",
        "info": "Leave blank to hide the button"
      },
      {
        "type": "url",
        "id": "button_outline_url",
        "label": "Button link",
        "default": "boqable://products"
      },
      {
        "type": "header",
        "content": "Carousel settings"
      },
      {
        "type": "checkbox",
        "id": "show_navigation",
        "default": true,
        "label": "Show navigation buttons"
      },
      {
        "type": "checkbox",
        "id": "show_pagination",
        "default": true,
        "label": "Show page bullets"
      },
      {
        "type": "number",
        "id": "timer",
        "label": "Rotation time",
        "min": 0,
        "max": 100,
        "default": 5,
        "info": "In seconds. Set to 0 to disable auto rotation"
      },
      {
        "type": "header",
        "content": "Desktop settings"
      },
      {
        "type": "select",
        "id": "padding_top",
        "label": "Padding top",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "large"
      },
      {
        "type": "select",
        "id": "padding_bottom",
        "label": "Padding bottom",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "large"
      },
      {
        "type": "header",
        "content": "Mobile settings"
      },
      {
        "type": "select",
        "id": "padding_top_mobile",
        "label": "Padding top",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "medium"
      },
      {
        "type": "select",
        "id": "padding_bottom_mobile",
        "label": "Padding bottom",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "medium"
      }
    ],
    "max_blocks": 8,
    "blocks": [
      {
        "type": "product",
        "name": "Product",
        "settings": [
          {
            "type": "product",
            "id": "product",
            "label": "Product"
          }
        ]
      }
    ]
  }
{% endschema %}