64 lines
2.3 KiB
Plaintext
64 lines
2.3 KiB
Plaintext
{% stylesheet %}
|
|
{{ '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 }}
|
|
{% endstylesheet %}
|
|
|
|
{%- liquid
|
|
assign tag_to_filter = 'your-tag'
|
|
assign columns_desktop = 4
|
|
assign full_width = false
|
|
assign image_ratio = 'adapt'
|
|
assign image_shape = 'default'
|
|
assign show_secondary_image = false
|
|
assign show_vendor = false
|
|
assign show_rating = false
|
|
assign enable_quick_add = false
|
|
-%}
|
|
|
|
{%- for collection in collections -%}
|
|
{%- assign filtered_products = collection.products | where: 'tags', tag_to_filter -%}
|
|
|
|
{%- if filtered_products.size > 0 -%}
|
|
<div class="color-scheme isolate gradient">
|
|
<div class="collection section-padding{% if full_width %} collection--full-width{% endif %}">
|
|
<div class="collection__title title-wrapper title-wrapper--no-top-margin page-width">
|
|
<h2 class="title inline-richtext h1">
|
|
{{ collection.title }}
|
|
</h2>
|
|
</div>
|
|
|
|
<slider-component class="slider-mobile-gutter page-width-desktop">
|
|
<ul
|
|
id="Slider-{{ collection.id }}"
|
|
class="grid product-grid contains-card contains-card--product grid--{{ columns_desktop }}-col-desktop grid--2-col-tablet-down"
|
|
role="list"
|
|
aria-label="{{ 'general.slider.name' | t }}"
|
|
>
|
|
{%- for product in filtered_products -%}
|
|
<li
|
|
id="Slide-{{ collection.id }}-{{ forloop.index }}"
|
|
class="grid__item scroll-trigger animate--slide-in"
|
|
data-cascade
|
|
style="--animation-order: {{ forloop.index }};"
|
|
>
|
|
{% render 'card-product',
|
|
card_product: product,
|
|
media_aspect_ratio: image_ratio,
|
|
image_shape: image_shape,
|
|
show_secondary_image: show_secondary_image,
|
|
show_vendor: show_vendor,
|
|
show_rating: show_rating,
|
|
show_quick_add: enable_quick_add,
|
|
section_id: collection.id
|
|
%}
|
|
</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
</slider-component>
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
{%- endfor -%}
|