Commercial Mat Solutions

Commercial Mat Solutions

Commercial Mat Solutions

{% comment %} Shopify OS 2.0 Enhanced Collection Page with Multi-Filter & Smart Grouping 位置: sections/main-collection-product-grid.liquid {% endcomment %} {{ 'section-main-collection.css' | asset_url | stylesheet_tag }} {%- liquid assign products_per_page = section.settings.products_per_page {%- comment -%} 检查客户当前是否激活了任何筛选条件 {%- endcomment -%} assign has_active_filters = false for filter in collection.filters if filter.active_values.size > 0 assign has_active_filters = true break endif endfor -%} {%- paginate collection.products by products_per_page -%}

{{ collection.title | escape }}

{%- comment -%} 左上角多选筛选器 (Multi-Select Filters) 基于 Shopify 标准 collection.filters 架构，后台配置的自定义属性（如面料、底部材质）会自动渲染在这里 {%- endcomment -%}
{%- for filter in collection.filters -%}
{{ filter.label }} ▾
    {%- for value in filter.values -%}
    • {%- endfor -%}
{%- endfor -%}
{%- if has_active_filters -%}
清除所有筛选
{%- endif -%}
{%- comment -%} 商品展示核心逻辑 {%- endcomment -%}
{%- if collection.products.size == 0 -%}

没有找到符合条件的商品。

{%- else -%} {%- if has_active_filters -%} {%- comment -%} 情景 A：客户点击了筛选 -> 正常扁平化平铺显示筛选后的结果 {%- endcomment -%}
    {%- for product in collection.products -%}
  • {% render 'product-card', product_card_product: product, media_aspect_ratio: section.settings.image_ratio, show_vendor: section.settings.show_vendor %}
    • {%- endfor -%}
{%- else -%} {%- comment -%} 情景 B：客户【没有】点击筛选 -> 按照材质/工艺进行自动化分类聚合展示 这里我们通过提取商品的 tags 或后台的材质 Metafield 来做虚拟分组 {%- endcomment -%} {%- liquid {%- comment -%} 定义你想聚合展示的核心分类群组 {%- endcomment -%} assign group_tags = "尼龙,丙纶,橡胶,PVC,硬丝,混合,圈绒,割绒,机织" | split: "," -%}
{%- for group in group_tags -%} {%- liquid {%- comment -%} 检查当前页面的产品里有没有属于这个分类的 {%- endcomment -%} assign has_group_products = false for product in collection.products if product.tags contains group or product.type == group assign has_group_products = true break endif endfor -%} {%- if has_group_products -%}

{{ group }} 系列

    {%- for product in collection.products -%} {%- if product.tags contains group or product.type == group -%}
  • {% render 'product-card', product_card_product: product, media_aspect_ratio: section.settings.image_ratio, show_vendor: section.settings.show_vendor %}
    • {%- endif -%} {%- endfor -%}
{%- endif -%} {%- endfor -%}
{%- endif -%} {%- endif -%}
{%- comment -%} 分页 {%- endcomment -%} {%- if paginate.pages > 1 -%} {%- endif -%}
{%- endpaginate -%} {% schema %} { "name": "多选筛选与分组网格", "settings": [ { "type": "range", "id": "products_per_page", "min": 12, "max": 48, "step": 4, "default": 24, "label": "每页显示商品数" }, { "type": "range", "id": "columns_desktop", "min": 2, "max": 5, "step": 1, "default": 4, "label": "桌面端每行显示列数" } ] } {% endschema %}

Let's Work Together

Whether you're a designer, contractor, or property owner, we look forward to building a lasting partnership with you.

Contact Us →