Greetings.
For the life of me I cannot get this tabbed collection section working on my veena themed site.
I’m convinced one of the selectors is wrong in the javascript, but I lack the javascript knowledge to track down the issue.
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'product-tabs.css' | asset_url | stylesheet_tag }}
{{ 'slick.min.css' | asset_url | stylesheet_tag }}
{{ 'slick-theme.min.css' | asset_url | stylesheet_tag }}
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
assign slides = section.settings.columns_desktop
assign slides1 = section.settings.columns_mobile_1
assign slides2 = section.settings.columns_mobile_2
assign slides3 = section.settings.columns_mobile_3
assign slides4 = section.settings.columns_mobile_4
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
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
-%}
{%- 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;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
{%- endstyle -%}
{% if section.blocks.size > 0 %}
{% if section.settings.title != blank %}
## {{ section.settings.title }}
{% endif %}
{% assign tabContent = '' %}
{% for block in section.blocks %}
{% assign collection = collections[block.settings.collection] %}
- {{ collection.title }}
{% capture content %}
{{ 'sections.featured_collection.view_all' | t }}
{% endcapture %}
{% assign tabContent = tabContent | append: content %}
{% endfor %}
{{ tabContent }}
{% endif %}
{% schema %}
{
"name": "Featured Collection Tabs",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "background-1"
},
{
"type": "range",
"id": "products_to_show",
"min": 1,
"max": 25,
"step": 1,
"default": 4,
"label": "Products To Show"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 5,
"label": "Number of Columns (Desktop)"
},
{
"type": "range",
"id": "columns_mobile_1",
"min": 1,
"max": 4,
"step": 1,
"default": 3,
"label": "Number of columns at 1024px"
},
{
"type": "range",
"id": "columns_mobile_2",
"min": 1,
"max": 4,
"step": 1,
"default": 2,
"label": "Number of columns 768px"
},
{
"type": "range",
"id": "columns_mobile_3",
"min": 1,
"max": 3,
"step": 1,
"default": 2,
"label": "Number of columns at 480px"
},
{
"type": "range",
"id": "columns_mobile_4",
"min": 1,
"max": 3,
"step": 1,
"default": 2,
"label": "Number of columns at 375px"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full Width",
"default": false
},
{
"type": "select",
"id": "view_all_style",
"label": "View All Style",
"options": [
{
"value": "link",
"label": "Link"
},
{
"value": "outline",
"label": "Outline"
},
{
"value": "solid",
"label": "Solid"
}
],
"default": "solid"
},
{
"type": "header",
"content": "Image Ratio"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "Adapt"
},
{
"value": "portrait",
"label": "Portrait"
},
{
"value": "square",
"label": "Square"
}
],
"default": "adapt",
"label": "Adapt"
},
{
"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
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"limit": 4,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Tabs",
"blocks": []
}
]
}
{% endschema %}
If i append .active to the class manually it works perfectly.
