I wrote this code with the aim of creating tabs with them. Built on someone else's code. The plan was to create blocks and then create tabs with those blocks. If you use Shopify then you know what I mean but I'll post the full code here for you to see. Currently out of ideas on how to create the tabs...thinking of a for loop to put them into a list but can't seem to wrap my head around making that work, perhaps that's even a wrong way to go...?
Here's the section code:
{% comment %}
** Single featured collection - homepage partial **
- Draggable section
{% endcomment %}
{% include 'include-featured-collection-custom' %}
{% schema %}
{
"name": "Featured collection Cust",
"class": "featured-collection-section",
"max_blocks": 6,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Custom Featured collection"
}
],
"blocks": [
{
"type": "collection",
"name": "Tabbed Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "text",
"id": "tabtitle",
"label": "Tab Title",
"default": "Tab Title"
},
{
"type": "radio",
"id": "collection_style",
"label": "Collection layout",
"default": "slider",
"options": [
{
"value": "slider",
"label": "Slider"
},
{
"value": "grid",
"label": "Grid"
}
]
},
{
"type": "range",
"id": "products_per",
"label": "Products per row",
"min": 2,
"max": 7,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "products_limit",
"label": "Limit products",
"min": 3,
"max": 20,
"step": 1,
"default": 5
}
]
}
],
"presets": [{
"name": "Featured collection Cust",
"category": "Collection",
"settings": {
},
"blocks": [
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
}
]
}]
}
{% endschema %}Here's the snippet code:
{% assign title = section.settings.title %}
<div class="container featured_products product-{{ collection_style }}">
<div class="sixteen columns center homepage_content">
{% if title != blank %}
<a href="{{ collections[settingCollection].url }}"><h2 class="title">{{ title }}</h2></a>
<div class="feature_divider"></div>
{% endif %}
{% if collection_description and collections[settingCollection].description != blank %}
<div class="section clearfix">
{{ collections[settingCollection].description }}
</div>
{% endif %}
</div>
</div>
{% for block in section.blocks %}
{% assign settingCollection = block.settings.collection %}
{% assign collection_style = block.settings.collection_style %}
{% assign collection_description = block.settings.collection_description %}
{% assign products_per = block.settings.products_per %}
{% assign products_limit = block.settings.products_limit %}
{% if settingCollection == blank %}
{%- assign section_onboarding = true -%}
{% comment %}assign product length to be selected limit for onboarding{% endcomment %}
{% assign products_length = products_limit | plus: 0 %}
{% else %}
{%- assign section_onboarding = false -%}
{% endif %}
{% assign limit = products_limit %}
{% if collection_style == 'slider' %}
{% assign col = settingCollection %}
{% assign products = collections[settingCollection].products %}
{% assign per_slide = products_per %}
<div class="container js-product-slider homepage-product-slider full-width--true {% if per_slide == 2 or per_slide == 4 or per_slide == 6 %}even-num-slides{% endif %}">
<a href=""><h3 class="title" style="text-align: center;font-size: 20px;border: 1px solid;width: 200px;padding: 5px;"> {{ block.settings.tabtitle }} </h3></a>
{% if section_onboarding == false %}
{% if col and collections[col].all_products_count > 0 %}
{% include 'product-slider', per_slide: products_per, featured_collection: col %}
{% endif %}
{% else %}
<div class="slider-gallery products-slider products-length-{{ products_length }}"
data-products-per-slide="{{ per_slide }}"
data-products-limit="{{ limit }}"
data-products-available="{{ products_length }}">
{% for i in (1..limit) %}
{% assign per_slide_num = products_per | plus: 0 %}
<div class="gallery-cell thumbnail
{% if products_length > per_slide_num %}visible-{{ per_slide }}{% else %}visible-{{ products_length }}{% endif %}
">
<div class="product-wrap">
<div class="relative product_image">
<a href="#" itemprop="url">
<object class="placeholder-image">
{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
</object>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% else %}
{% if section_onboarding == false %}
{% assign limit = products_limit %}
{% assign collection = collections[settingCollection] %}
{% assign products = collections[settingCollection].products %}
{% assign products_per_row = products_per %}
<div class="container">
<div class="sixteen columns">
{% include 'product-loop' %}
</div>
</div>
{% else %}
{% assign products_per_row = products_per %}
<div class="container equal-columns--outside-trim">
<div class="sixteen columns">
{% capture new_row %}
<br class="clear product_clear" />
{% endcapture %}
<div itemtype="http://schema.org/ItemList" class="product-list collection-matrix clearfix">
{% for i in (1..limit) %}
{% comment %}{% assign collection_group = products | map: 'id' %}{% endcomment %}
{% assign collection_group_thumb = collection_group | append : 'thumb' %}
{% assign collection_group_mobile = collection_group | append : 'mobile' %}
<div class="
{% if products_per_row == 2 %}
eight columns {% cycle collection_group_thumb: 'alpha', 'omega' %}
{% elsif products_per_row == 3 %}
one-third column {% cycle collection_group_thumb: 'alpha', '', 'omega' %}
{% elsif products_per_row == 4 %}
four columns {% cycle collection_group_thumb: 'alpha', '', '', 'omega' %}
{% elsif products_per_row == 5 %}
one-fifth column {% cycle collection_group_thumb: 'alpha', '', '', '', 'omega' %}
{% elsif products_per_row == 6 %}
one-sixth column {% cycle collection_group_thumb: 'alpha', '', '', '', '', 'omega' %}
{% else %}
one-seventh column {% cycle collection_group_thumb: 'alpha', '', '', '', '', '', 'omega' %}
{% endif %} thumbnail {% cycle collection_group_mobile: 'even', 'odd' %}
{% if settings.mobile_products_per_row == '1' %}
medium-down--one-half
small-down--one-whole
{% else %}
medium-down--one-half
small-down--one-half
{% endif %}">
<div class="product-wrap">
<div class="relative product_image swap-{{ settings.collection_secondary_image }}">
<a href="#" itemprop="url">
{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
</a>
</div>
</div>
</div>
{% if products_per_row == 2 %}
{% cycle collection_group: '', new_row %}
{% elsif products_per_row == 3 %}
{% cycle collection_group: '', '', new_row %}
{% elsif products_per_row == 4 %}
{% cycle collection_group: '', '', '', new_row %}
{% elsif products_per_row == 5 %}
{% cycle collection_group: '', '', '', '', new_row %}
{% elsif products_per_row == 6 %}
{% cycle collection_group: '', '', '', '', '', new_row %}
{% elsif products_per_row == 7 %}
{% cycle collection_group: '', '', '', '', '', '', new_row %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}And here's the front end result so far.
