Solved

Featured collection slider arrows stopped working

kukolukyyy
Visitor
2 0 1

Hey, I have a featured collection slider on my homepage. I wanted to reposition the view all button and the arrows to the line of the title, so I edited the featured-collection.liquid file. It now looks as I wanted but the arrows which control the slider stopped working. I don't know anything about JavaScript so I would really appreciate your help.

Here's my featured-collection.liquid file.

 

website: svettenisiek.sk

pass: tomasboss

 

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
{%- if section.settings.enable_quick_add -%}
  <link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
  <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
.extra-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.extra-code h2 {
    margin: 0 !important;
}
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign products_to_display = section.settings.collection.all_products_count

  if section.settings.collection.all_products_count > section.settings.products_to_show
    assign products_to_display = section.settings.products_to_show
    assign more_in_collection = true
  endif

  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
    assign show_mobile_slider = true
  endif

  assign show_desktop_slider = false
  if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
    assign show_desktop_slider = true
  endif
-%}

<div class="color-{{ section.settings.color_scheme }} isolate gradient">
  <div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
      <div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
        <div class="extra-code">
        {%- if section.settings.title != blank -%}
          <h2 class="title {{ section.settings.heading_size }}">{{ section.settings.title | escape }}</h2>
        {%- endif -%}



          
          <div class="slider_info">

      {%- if section.settings.show_view_all and more_in_collection -%}
      <div class="center collection__view-all">
        <a href="{{ section.settings.collection.url }}"
          class="{% if section.settings.view_all_style == 'link' %}link underlined-link{% elsif section.settings.view_all_style == 'solid' %}button{% else %}button button--secondary{% endif %}"
          aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
        >
          {{ 'sections.featured_collection.view_all' | t }}
        </a>
      </div>
      {%- endif -%}
  
        {%- if show_mobile_slider or show_desktop_slider -%}
        <div class="slider-buttons no-js-hidden">
          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ products_to_display }}</span>
          </div>
          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
        </div>
      {%- endif -%}
      
      
    </div>


          
        </div>
        {%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty -%}
          <div class="collection__description {{ section.settings.description_style }}">{%- if section.settings.show_description -%}{{ section.settings.collection.description }}{%- else -%}{{ section.settings.description }}{% endif %}</div>
        {%- endif -%}
      </div>

    <slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
      <ul id="Slider-{{ section.id }}" class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'general.slider.name' | t }}">
        {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
          <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
            {% render 'card-product',
              card_product: product,
              media_aspect_ratio: section.settings.image_ratio,
              show_secondary_image: section.settings.show_secondary_image,
              show_vendor: section.settings.show_vendor,
              show_rating: section.settings.show_rating,
              show_quick_add: section.settings.enable_quick_add,
              section_id: section.id
            %}
          </li>
        {%- else -%}
          {%- for i in (1..4) -%}
            <li class="grid__item">
              {% render 'card-product', show_vendor: section.settings.show_vendor %}
            </li>
          {%- endfor -%}
        {%- endfor -%}
      </ul>







      
    </slider-component>




    
    
  </div>
</div>

{% schema %}
{
  "name": "t:sections.featured-collection.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Featured collection",
      "label": "t:sections.featured-collection.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "t:sections.featured-collection.settings.description.label"
    },
    {
      "type": "checkbox",
      "id": "show_description",
      "label": "t:sections.featured-collection.settings.show_description.label",
      "default": false
    },
    {
      "type": "select",
      "id": "description_style",
      "label": "t:sections.featured-collection.settings.description_style.label",
      "options": [
        {
          "value": "body",
          "label": "t:sections.featured-collection.settings.description_style.options__1.label"
        },
        {
          "value": "subtitle",
          "label": "t:sections.featured-collection.settings.description_style.options__2.label"
        },
        {
          "value": "uppercase",
          "label": "t:sections.featured-collection.settings.description_style.options__3.label"
        }
      ],
      "default": "body"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 18,
      "step": 1,
      "default": 4,
      "label": "t:sections.featured-collection.settings.products_to_show.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "t:sections.featured-collection.settings.columns_desktop.label"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "t:sections.featured-collection.settings.full_width.label",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-collection.settings.show_view_all.label"
    },
    {
      "type": "select",
      "id": "view_all_style",
      "label": "t:sections.featured-collection.settings.view_all_style.label",
      "options": [
        {
          "value": "link",
          "label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
        },
        {
          "value": "outline",
          "label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
        },
        {
          "value": "solid",
          "label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
        }
      ],
      "default": "solid"
    },
    {
      "type": "checkbox",
      "id": "enable_desktop_slider",
      "label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
      "default": false
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "header",
      "content": "t:sections.featured-collection.settings.header.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.featured-collection.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_rating.label",
      "info": "t:sections.featured-collection.settings.show_rating.info"
    },
    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "t:sections.featured-collection.settings.enable_quick_buy.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-collection.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.featured-collection.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-collection.presets.name"
    }
  ]
}
{% endschema %}

Snímka obrazovky 2024-03-31 o 13.56.41.png 

Accepted Solution (1)
Xipirons
Shopify Partner
136 24 29

This is an accepted solution.

Hi @kukolukyyy 

 

To fix the issue with the slider arrows not working, you need to move the slider buttons back inside the <slider-component> element. Here's the step-by-step solution:

 

 

  1. Locate the <slider-component> element in your featured-collection.liquid file.
  2. Find the following code block that contains the slider buttons:

 

 

{%- if show_mobile_slider or show_desktop_slider -%}
  <div class="slider-buttons no-js-hidden">
    <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
    <div class="slider-counter caption">
      <span class="slider-counter--current">1</span>
      <span aria-hidden="true"> / </span>
      <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
      <span class="slider-counter--total">{{ products_to_display }}</span>
    </div>
    <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
  </div>
{%- endif -%}

 

 

3. Cut this code block from its current location.
4. Paste the code block inside the <slider-component> element, just before the closing </slider-component> tag. The updated code should look like this:

<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
  <ul id="Slider-{{ section.id }}" class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'general.slider.name' | t }}">
    {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
      <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
        {% render 'card-product',
          card_product: product,
          media_aspect_ratio: section.settings.image_ratio,
          show_secondary_image: section.settings.show_secondary_image,
          show_vendor: section.settings.show_vendor,
          show_rating: section.settings.show_rating,
          show_quick_add: section.settings.enable_quick_add,
          section_id: section.id
        %}
      </li>
    {%- else -%}
      {%- for i in (1..4) -%}
        <li class="grid__item">
          {% render 'card-product', show_vendor: section.settings.show_vendor %}
        </li>
      {%- endfor -%}
    {%- endfor -%}
  </ul>

  {%- if show_mobile_slider or show_desktop_slider -%}
    <div class="slider-buttons no-js-hidden">
      <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
      <div class="slider-counter caption">
        <span class="slider-counter--current">1</span>
        <span aria-hidden="true"> / </span>
        <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
        <span class="slider-counter--total">{{ products_to_display }}</span>
      </div>
      <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
    </div>
  {%- endif -%}
</slider-component>

 

By moving the slider buttons inside the <slider-component> element, they will be properly associated with the slider functionality.

 

The JavaScript code that controls the slider behavior expects the buttons to be direct children of the <slider-component> element. With this change, your slider arrows should start working again, and you can keep the repositioned "view all" button and title as desired.

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

View solution in original post

Replies 2 (2)

Sweet_Savior_3
Shopify Partner
1054 84 93

Hello @kukolukyyy 

 

Welcome to Shopify Community.

 

The slider stopped working because you added the arrows outside the <slider-component> element. 

Sweet_Savior_3_0-1711887250648.png

 

Also you have messed with the layout and now the slider is broken. The code needs to be fixed.

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
Xipirons
Shopify Partner
136 24 29

This is an accepted solution.

Hi @kukolukyyy 

 

To fix the issue with the slider arrows not working, you need to move the slider buttons back inside the <slider-component> element. Here's the step-by-step solution:

 

 

  1. Locate the <slider-component> element in your featured-collection.liquid file.
  2. Find the following code block that contains the slider buttons:

 

 

{%- if show_mobile_slider or show_desktop_slider -%}
  <div class="slider-buttons no-js-hidden">
    <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
    <div class="slider-counter caption">
      <span class="slider-counter--current">1</span>
      <span aria-hidden="true"> / </span>
      <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
      <span class="slider-counter--total">{{ products_to_display }}</span>
    </div>
    <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
  </div>
{%- endif -%}

 

 

3. Cut this code block from its current location.
4. Paste the code block inside the <slider-component> element, just before the closing </slider-component> tag. The updated code should look like this:

<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
  <ul id="Slider-{{ section.id }}" class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'general.slider.name' | t }}">
    {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
      <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
        {% render 'card-product',
          card_product: product,
          media_aspect_ratio: section.settings.image_ratio,
          show_secondary_image: section.settings.show_secondary_image,
          show_vendor: section.settings.show_vendor,
          show_rating: section.settings.show_rating,
          show_quick_add: section.settings.enable_quick_add,
          section_id: section.id
        %}
      </li>
    {%- else -%}
      {%- for i in (1..4) -%}
        <li class="grid__item">
          {% render 'card-product', show_vendor: section.settings.show_vendor %}
        </li>
      {%- endfor -%}
    {%- endfor -%}
  </ul>

  {%- if show_mobile_slider or show_desktop_slider -%}
    <div class="slider-buttons no-js-hidden">
      <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
      <div class="slider-counter caption">
        <span class="slider-counter--current">1</span>
        <span aria-hidden="true"> / </span>
        <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
        <span class="slider-counter--total">{{ products_to_display }}</span>
      </div>
      <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
    </div>
  {%- endif -%}
</slider-component>

 

By moving the slider buttons inside the <slider-component> element, they will be properly associated with the slider functionality.

 

The JavaScript code that controls the slider behavior expects the buttons to be direct children of the <slider-component> element. With this change, your slider arrows should start working again, and you can keep the repositioned "view all" button and title as desired.

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed