{%- if section.settings.show_layout_switch -%} {%- assign desktop_items_per_row = cart.attributes.collection_desktop_items_per_row | default: section.settings.grid_desktop_items_per_row | times: 1 -%} {%- assign mobile_items_per_row = cart.attributes.collection_mobile_items_per_row | default: section.settings.grid_mobile_items_per_row | times: 1 -%}
{%- if desktop_items_per_row >= 3 and desktop_items_per_row != section.settings.grid_desktop_items_per_row -%} {%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row -%} {%- endif -%} {%- else -%} {%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row | times: 1 -%} {%- assign mobile_items_per_row = section.settings.grid_mobile_items_per_row | times: 1 -%} {%- endif -%}
{%- if desktop_items_per_row == 4 -%} {%- assign tablet_items_per_row = 3 -%} {%- else -%} {%- assign tablet_items_per_row = 2 -%} {%- endif -%}
{%- capture collection_inner -%} {%- comment -%}This is the common part to both template{%- endcomment -%}
{%- if collection.products_count > 0 -%} {%- paginate collection.products by section.settings.grid_items_per_page -%}
{%- render 'pagination', paginate: paginate -%}
{%- endpaginate -%}
{%- else -%}
{{ 'collection.general.no_products' | t }}
{%- if template == 'collection.ajax' -%}
{%- comment -%}
CONTENT FOR AJAX ALTERNATE TEMPLATE
{%- endcomment -%}
{{- collection_inner -}}
{%- else -%}
{%- comment -%}
CONTENT FOR NORMAL TEMPLATE
{%- endcomment -%}
{%- assign active_tags = '' -%}
{%- for tag in current_tags -%} {%- assign tag_as_handle = tag | replace: ''', '' | replace: '"', '' | handle -%} {%- assign active_tags = active_tags | append: tag_as_handle -%}
{%- unless forloop.last -%}
{%- assign active_tags = active_tags | append: '+' -%}
{%- endunless -%}
{%- endfor -%}
{%- capture section_settings -%} { "collectionUrl": {{ collection.url | default: '/collections/all' | json }}, "currentTags": {% if active_tags != blank %}{{ active_tags | split: '+' | json }}{% else %}[]{% endif %}, "sortBy": {{ collection.sort_by | default: collection.default_sort_by | json }}, "filterPosition": {{ section.settings.filter_position | json }} } {%- endcapture -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
COLLECTION INFO
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
<!-- step -->
{% if section.settings.filter_mode == 'vendor' %}
<div class="Step">
{{ 'Home' | link_to: 'https://the-clinica.myshopify.com' }}
<span>></span>
{{ 'All' | link_to: '/collections/all' }}
{% if collection.title != 'Products' %}
<span>></span>
{% if collection.title != 'Hi-Tech Skincare' and collection.title != 'Medical Grade Skincare' and collection.all_types.size == 1 %}
{% if collection.all_types contains 'Hi-Tech Skincare' %}
{{ 'Hi-Tech Skincare' | link_to: '/collections/hi-tech-skincare' }}
{% else %}
{{ 'Medical Grade Skincare' | link_to: '/collections/medical-grade-skincare' }}
{% endif %}
<span>></span>
<span> {{ collection.title }} </span>
{% elsif collection.all_types.size == 1 %}
{% if collection.title == 'Hi-Tech Skincare' %}
{{ 'Hi-Tech Skincare' | link_to: '/collections/hi-tech-skincare' }}
{% else %}
{{ 'Medical Grade Skincare' | link_to: '/collections/medical-grade-skincare' }}
{% endif %}
{% else %}
<span> {{ collection.title }} </span>
{% endif %}
{% endif %}
</div>
{% endif %}
{%- if section.settings.show_collection_info and collection.all_products_count > 0 -%}
{%- if section.settings.show_collection_image and collection.image and collection.template_suffix != 'no-image' -%}
<div class="FlexboxIeFix">
<header class="PageHeader PageHeader--withBackground {% if section.settings.collection_image_size != 'normal' %}PageHeader--{{ section.settings.collection_image_size }}{% endif %}" style="background: url({{ collection.image | img_url: '1x1', format: 'jpg' }})">
<div class="PageHeader__ImageWrapper Image--lazyLoad Image--fadeIn {% if section.settings.apply_overlay %}Image--contrast{% endif %}"
data-optimumx="1.2"
data-bgset="{{ collection.image | img_url: 'x600' }} 600w, {{ collection.image | img_url: '800x' }} 800w, {{ collection.image | img_url: '1200x' }} 1200w, {{ collection.image | img_url: '1400x' }} 1400w, {{ collection.image | img_url: '1600x' }} 1600w">
</div>
<noscript>
<div class="PageHeader__ImageWrapper {% if section.settings.apply_overlay %}Image--contrast{% endif %}" style="background-image: url({{ collection.image | img_url: '800x' }})"></div>
</noscript>
<div class="Container">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1">{{ collection.title }}</h1>
{%- if collection.description != blank -%}
<div class="SectionHeader__Description Rte">
{{- collection.description -}}
</div>
{%- endif -%}
</div>
</div>
</header>
</div>
{%- else -%}
<!-- 不显示collection的名称 -->
{% comment %} <header class="PageHeader">
<div class="Container">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1">{{ collection.title }}</h1>
{%- if collection.description != blank -%}
<div class="SectionHeader__Description Rte">
{{- collection.description -}}
</div>
{%- endif -%}
</div>
</div>
</header> {% endcomment %}
{%- endif -%}
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
COLLECTION TOOLBAR
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if collection.all_products_count > 0 -%}
{%- comment -%}
In order to provide more predictable results (for instance not showing filters by tag even if the option is checked in settings,
but that there are no tags for the given collection to show), we are doing some more logic here. Basically, we try to check if there
are tags to show by stripping internal tags (those that start by "__")
{%- endcomment -%}
{%- assign has_visible_tags = false -%}
{%- case section.settings.filter_mode -%}
{%- when 'tag' -%}
{%- for tag in collection.all_tags -%}
{%- unless tag contains '__' -%}
{%- assign has_visible_tags = true -%}
{%- break -%}
{%- endunless -%}
{%- endfor -%}
{%- when 'group' -%}
{%- for tag in collection.all_tags -%}
{%- assign tag_parts = tag | split: '_' -%}
{%- if tag_parts.size >= 2 -%}
{%- assign has_visible_tags = true -%}
{%- endif -%}
{%- endfor -%}
{%- when 'vendor' -%}
{%- for vendor in collection.all_vendors -%}
{%- unless vendor contains '__' -%}
{%- assign has_visible_tags = true -%}
{%- break -%}
{%- endunless -%}
{%- endfor -%}
{%- endcase -%}
{%- assign show_filters = false -%}
{%- assign quick_links = linklists[section.settings.filter_menu] -%}
{%- if quick_links != blank or has_visible_tags -%}
{%- assign show_filters = true -%}
{%- endif -%}
{%- capture collection_toolbar -%}
{%- if show_filters or section.settings.show_sort_by or section.settings.show_layout_switch -%}
<div class="CollectionToolbar CollectionToolbar--{{ section.settings.toolbar_position }} {% unless section.settings.show_layout_switch and show_filters == false and section.settings.show_sort_by == false %}CollectionToolbar--reverse{% endunless %}">
{%- if show_filters or section.settings.show_sort_by -%}
<div class="CollectionToolbar__Group">
{%- if show_filters -%}
<button class="CollectionToolbar__Item CollectionToolbar__Item--filter Heading {% unless current_tags %}Text--subdued{% endunless %} u-h6 {% if section.settings.filter_position != 'drawer' %}hidden-lap-and-up{% endif %}"
data-action="open-drawer"
data-drawer-id="collection-filter-drawer"
aria-label="{{ 'collection.filter.show_filter' | t }}">
{{ 'collection.filter.title' | t }} {% if current_tags %}<span class="Text--subdued">({{ current_tags.size }})</span>{% endif %}
</button>
{%- endif -%}
{%- if section.settings.show_sort_by -%}
<button class="CollectionToolbar__Item CollectionToolbar__Item--sort Heading Text--subdued u-h6"
aria-label="{{ 'collection.sorting.show_sort' | t }}"
aria-haspopup="true"
aria-expanded="false"
aria-controls="collection-sort-popover">
{{ 'collection.sorting.title' | t }} {% render 'icon' with 'select-arrow' %}
</button>
{%- endif -%}
</div>
{%- endif -%}
{%- if section.settings.show_layout_switch -%}
<div class="CollectionToolbar__Item CollectionToolbar__Item--layout">
<div class="CollectionToolbar__LayoutSwitch hidden-tablet-and-up">
<button aria-label="{{ 'collection.layout.show_one_per_row' | t }}" class="CollectionToolbar__LayoutType {% if mobile_items_per_row == 1 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="mobile" data-count="1">{% render 'icon' with 'wall-1' %}</button>
<button aria-label="{{ 'collection.layout.show_two_per_row' | t }}" class="CollectionToolbar__LayoutType {% if mobile_items_per_row == 2 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="mobile" data-count="2">{% render 'icon' with 'wall-2' %}</button>
</div>
<div class="CollectionToolbar__LayoutSwitch hidden-phone">
<button aria-label="{{ 'collection.layout.show_two_per_row' | t }}" class="CollectionToolbar__LayoutType {% if desktop_items_per_row == 2 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="desktop" data-count="2">{% render 'icon' with 'wall-2' %}</button>
<button aria-label="{{ 'collection.layout.show_four_per_row' | t }}" class="CollectionToolbar__LayoutType {% if desktop_items_per_row >= 3 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="desktop" data-count="{{ section.settings.grid_desktop_items_per_row }}">{% render 'icon' with 'wall-4' %}</button>
</div>
</div>
{%- endif -%}
</div>
{%- endif -%}
{%- endcapture -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
FILTERS AND SORT BY POPOVER
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if show_filters -%}
{%- comment -%}
Implementation note: the filters can be displayed in two different ways: in a sidebar menu, always visible, or in a drawer. Due to that, we are
setting the general code here, and then we will output it twice.
{%- endcomment -%}
{%- assign quick_links = linklists[section.settings.filter_menu] -%}
{%- capture filters_content -%}
{%- if quick_links != empty -%}
<div class="Collapsible Collapsible--padded Collapsible--autoExpand">
<button type="button" class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
{{-quick_links.title | escape -}} <span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner">
<div class="Collapsible__Content">
<ul class="Linklist">
{%- for link in quick_links.links -%}
<li class="Linklist__Item {% if link.active %}is-selected{% endif %}">
<a href="{{ link.url }}" class="Link Link--primary Text--subdued {% if link.active %}is-active{% endif %}">{{ link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
</div>
{%- endif -%}
{%- if has_visible_tags -%}
{%- if section.settings.filter_mode == 'tag' -%}
<div class="Collapsible Collapsible--padded Collapsible--autoExpand">
<button type="button" class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
{{- 'collection.filter.all' | t -}} <span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner">
<div class="Collapsible__Content">
<ul class="Linklist">
{%- for tag in collection.all_tags -%}
{%- if tag contains '__' -%}
{%- continue -%}
{%- endif -%}
<li class="Linklist__Item {% if current_tags contains tag %}is-selected{% endif %}">
<button type="button" class="Link Link--primary Text--subdued {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag">
{{- tag -}}
</button>
</li>
{%- endfor -%}
</ul>
</div>
</div>
</div>
{%- else if section.settings.filter_mode == 'vendor' -%}
<!-- 根据vendor来做过滤 -->
<div class="Collapsible Collapsible--padded Collapsible--autoExpand">
<button type="button" class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
BRANDS <span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner">
<div class="Collapsible__Content">
<ul class="Linklist">
{%- for vendor in collection.all_vendors -%}
{%- if vendor contains '__' -%}
{%- continue -%}
{%- endif -%}
{% assign foo = "bar" %}
<li class="Linklist__Item {% if current_vendors contains vendor %}is-selected{% endif %}">
<button type="button" class="Link Link--primary Text--subdued {% if current_vendors contains vendor %}is-active{% endif %}" data-vendor="{{ vendor | handle }}" data-action="toggle-vendor">
{% capture link_to_url %} /collections/{{vendor | replace: " ", "-"}} {% endcapture %}
{{- vendor | link_to: link_to_url -}}
</button>
</li>
{%- endfor -%}
</ul>
</div>
</div>
</div>
{%- else -%}
{%- assign groups = '' -%}
{%- for tag in collection.all_tags -%}
{%- assign tag_parts = tag | split: '_' -%}
{%- if tag_parts.size < 2 or tag contains '__' -%}
{%- continue -%}
{%- endif -%}
{%- assign groups = groups | append: tag_parts.first | append: ',' -%}
{% endfor %}
{%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}
{%- assign groups = groups | split: ',' | compact | uniq -%}
{%- for group in groups -%}
{%- assign group_downcase = group | downcase -%}
{%- if color_label contains group_downcase and section.settings.show_filter_color_swatch -%}
{%- assign show_color_swatch = true -%}
{%- else -%}
{%- assign show_color_swatch = false -%}
{%- endif -%}
<div class="Collapsible Collapsible--padded Collapsible--autoExpand">
<button type="button" class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
{{- group | escape -}} <span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner">
<div class="Collapsible__Content">
<ul class="{% if show_color_swatch %}ColorSwatchList HorizontalList HorizontalList--spacingTight{% else %}Linklist{% endif %}">
{%- for tag in collection.all_tags -%}
{%- assign tag_parts = tag | split: '_' -%}
{%- if tag_parts.size < 2 or tag_parts.first != group or tag contains '__' -%}
{%- continue -%}
{%- endif -%}
{%- if show_color_swatch -%}
<li class="HorizontalList__Item">
{%- assign color_swatch_name = tag_parts.last | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
<button type="button" class="ColorSwatch {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag" data-tooltip="{{ tag_parts.last | escape }}" style="background-color: {{ tag_parts.last | replace: ' ', '' | downcase }}; {% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}">
<span class="u-visually-hidden">{{ tag_parts.last }}</span>
</button>
</li>
{%- else -%}
<li class="Linklist__Item {% if current_tags contains tag %}is-selected{% endif %}">
<button type="button" class="Text--subdued Link Link--primary {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag">
{{- tag_parts.last -}}
</button>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
</div>
</div>
{%- endfor -%}
{%- endif -%}
{%- endif -%}
{%- endcapture -%}
<div id="collection-filter-drawer" class="CollectionFilters Drawer Drawer--secondary Drawer--fromRight" aria-hidden="true">
<header class="Drawer__Header Drawer__Header--bordered Drawer__Header--center Drawer__Container">
<span class="Drawer__Title Heading u-h4">{{ 'collection.filter.all' | t }}</span>
<button class="Drawer__Close Icon-Wrapper--clickable" data-action="close-drawer" data-drawer-id="collection-filter-drawer" aria-label="{{ 'header.navigation.close_sidebar' | t }}">
{%- render 'icon' with 'close' -%}
</button>
</header>
<div class="Drawer__Content">
<div class="Drawer__Main" data-scrollable>
{{ filters_content }}
</div>
<div class="Drawer__Footer Drawer__Footer--padded" data-drawer-animated-bottom>
<div class="ButtonGroup">
<button type="button" class="ButtonGroup__Item Button Button--secondary" data-action="reset-tags" {% if current_tags == blank %}style="display: none"{% endif %}>{{ 'collection.filter.reset' | t }}</button>
<button type="button" class="ButtonGroup__Item ButtonGroup__Item--expand Button Button--primary" data-action="apply-tags">{{ 'collection.filter.apply' | t }}</button>
</div>
</div>
</div>
</div>
{%- endif -%}
{%- if section.settings.show_sort_by -%}
<div id="collection-sort-popover" class="Popover" aria-hidden="true">
<header class="Popover__Header">
<button class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover" aria-label="{{ 'general.popup.close' | t }}">{% render 'icon' with 'close' %}</button>
<span class="Popover__Title Heading u-h4">{{ 'collection.sorting.title' | t }}</span>
</header>
<div class="Popover__Content">
<div class="Popover__ValueList " data-scrollable>
{% assign collection_sort_by = collection.sort_by | default: collection.default_sort_by %}
<!-- 只保留两个排序条件，原来是collection.sort_options -->
{%- for option in settings.sort_options -%}
<button class="Popover__Value {% if option.value == collection_sort_by %}is-selected{% endif %} Heading Link Link--primary u-h6" data-value="{{ option.value }}" data-action="select-value">
{{ option.name }}
</button>
{%- endfor -%}
</div>
</div>
</div>
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
COLLECTION PRODUCTS
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
<div class="CollectionMain">
{% comment %} {%- if section.settings.toolbar_position == 'top' -%}
{{- collection_toolbar -}}
{%- endif -%} {% endcomment %}
<div class="CollectionInner">
{%- if show_filters and section.settings.filter_position == 'sidebar' -%}
<div class="CollectionInner__Sidebar {% if collection_toolbar != blank and section.settings.toolbar_position == 'top' %}CollectionInner__Sidebar--withTopToolbar{% endif %} hidden-pocket">
<div class="CollectionFilters">
{%- if section.settings.toolbar_position == 'top' -%}
{{- collection_toolbar -}}
{%- endif -%}
{{ filters_content }}
<button type="button" class="Button Button--secondary" data-action="reset-tags" {% if current_tags == blank %}style="display: none"{% endif %}>{{ 'collection.filter.reset' | t }}</button>
{%- if section.settings.toolbar_position == 'bottom' -%}
{{- collection_toolbar -}}
{%- endif -%}
</div>
</div>
{%- endif -%}
<div class="CollectionInner__Products">
{{ collection_inner }}
</div>
</div>
<div class="mobile_show">
{{- collection_toolbar -}}
</div>
</div>
{%- else -%}
<div class="EmptyState">
<div class="Container">
<h3 class="EmptyState__Title Heading u-h5">{{ 'collection.general.empty' | t: collection_title: collection.title }}</h3>
<a href="{{ routes.root_url }}" class="EmptyState__Action Button Button--primary">{{ 'collection.general.empty_button' | t }}</a>
</div>
</div>
{%- endif -%}
{%- endif -%}
{%- capture hack -%} {%- comment -%}This is just an ugly hack to make those variables appear as part of the theme editor in the General Settings{%- endcomment -%} {{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }} {%- endcapture -%}
{% schema %} { "name": "Collection page", "class": "shopify-section--bordered", "settings": [ { "type": "checkbox", "id": "show_collection_info", "label": "Show collection info", "default": true }, { "type": "checkbox", "id": "show_collection_image", "label": "Show collection image", "default": false }, { "type": "checkbox", "id": "apply_overlay", "label": "Apply overlay on image", "info": "This can improve text visibility.", "default": true }, { "type": "checkbox", "id": "show_color_swatch", "label": "Show color swatch", "info": "Some colors appear white? Learn more.", "default": false }, { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": false }, { "type": "checkbox", "id": "show_add_to_cart", "label": "Show add to cart", "default": true }, { "type": "select", "id": "collection_image_size", "label": "Collection image size", "options": [ { "value": "small", "label": "Small" }, { "value": "normal", "label": "Normal" }, { "value": "large", "label": "Large" } ], "default": "normal" }, { "type": "header", "content": "Toolbar" }, { "type": "checkbox", "id": "show_sort_by", "label": "Show sort by", "default": true }, { "type": "checkbox", "id": "show_layout_switch", "label": "Show layout switch" }, { "type": "select", "id": "toolbar_position", "label": "Position", "options": [ { "value": "top", "label": "Top" }, { "value": "bottom", "label": "Bottom" } ], "default": "top" }, { "type": "header", "content": "Filters" }, { "type": "select", "id": "filter_position", "label": "Desktop position", "options": [ { "value": "sidebar", "label": "Sidebar" }, { "value": "drawer", "label": "Drawer" } ], "default": "sidebar" }, { "type": "select", "id": "filter_mode", "label": "Mode", "info": "Filters by group requires specific tag formatting. Learn more", "options": [ { "value": "hidden", "label": "Hidden" }, { "value": "tag", "label": "By tag" }, { "value": "group", "label": "By group" }, { "value": "vendor", "label": "By vendor" } ], "default": "tag" }, { "type": "checkbox", "id": "show_filter_color_swatch", "label": "Show filter color swatch", "info": "This is only used if filters by group is enabled.", "default": true }, { "type": "link_list", "id": "filter_menu", "label": "Quick links", "info": "This menu won't show dropdown items." }, { "type": "header", "content": "Grid" }, { "type": "range", "id": "grid_items_per_page", "label": "Products per page", "min": 4, "max": 48, "step": 4, "default": 16 }, { "type": "select", "id": "grid_mobile_items_per_row", "label": "Products per row (mobile)", "options": [ { "value": "1", "label": "1" }, { "value": "2", "label": "2" } ], "default": "2" }, { "type": "range", "min": 2, "max": 4, "id": "grid_desktop_items_per_row", "label": "Products per row (desktop)", "default": 4 } ] } {% endschema %}