Hi.
I have products with date metafields.
Can I sort products by date metafields on collection page?
Is it possible?
Thank You!
Hi!! Having the exactly same issue here! Can you resolve that??
Hi. Yes? I added sorting. My collection template with js
{%- comment -%}We start by creating a lot of useful variables !{%- endcomment -%}
{% style %}
.value-picker__choice-item[data-value="title-ascending"], .value-picker__choice-item[data-value="title-descending"] {display:none!Important;}
.collection__description {
padding: 10px 20px;
border-bottom: var(--footer-border);
}
#SortBy {
border:none!Important;
}
{% endstyle %}
{%- assign items_per_page = 100 -%}
{%- assign has_visible_tags = false -%}
{%- if section.settings.show_filters -%}
{%- if section.settings.filter_type == 'tag' -%}
{%- for tag in collection.all_tags -%}
{%- unless tag contains '__' -%}
{%- assign has_visible_tags = true -%}
{%- break -%}
{%- endunless -%}
{%- endfor -%}
{%- elsif section.settings.filter_type == 'group' -%}
{%- for tag in collection.all_tags -%}
{%- assign tag_parts = tag | split: '_' -%}
{%- if tag_parts.size >= 2 -%}
{%- assign has_visible_tags = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endif -%}
{%- assign quick_links_menu = linklists[section.settings.quick_links] -%}
{%- if quick_links_menu.links.size > 0 or has_visible_tags -%}
{%- assign has_filters = true -%}
{%- else -%}
{%- assign has_filters = false -%}
{%- endif -%}
{%- if has_filters -%}
{%- capture grid_classes -%}1/3--tablet-and-up 1/{{ section.settings.products_per_row }}--desk{%- endcapture -%}
{%- else -%}
{%- capture grid_classes -%}1/3--tablet 1/{{ section.settings.products_per_row }}--lap-and-up{%- endcapture -%}
{%- endif -%}
{%- assign view_mode = cart.attributes.collection_layout | default: section.settings.default_view_layout -%}
{%- capture section_settings -%}
{
"currentSortBy": {{ collection.sort_by | default: collection.default_sort_by | json }},
"currentTags": [{% for tag in current_tags %}{{ tag | handle | json }}{% unless forloop.last %},{% endunless %}{% endfor %}],
"filterType": {{ section.settings.filter_type | json }},
"defaultLayout": {{ section.settings.default_view_layout | json }},
"defaultProductsPerPage": {{ section.settings.default_products_per_page | json }},
"isAutomatic": {% if collection.current_vendor != blank %}true{% else %}false{% endif %},
"gridClasses": {{ grid_classes | json }}
}
{%- endcapture -%}
{% schema %}
{
"name": "Collection page",
"settings": [
{
"type": "checkbox",
"id": "show_collection_image",
"label": "Show collection image",
"default": true
},
{
"type": "checkbox",
"id": "collapse_collection_description",
"label": "Collapse long description",
"default": false
},
{
"type": "select",
"id": "collection_image_size",
"label": "Collection image size",
"options": [
{
"value": "preserve_ratio",
"label": "Original image ratio"
},
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "small"
},
{
"type": "select",
"id": "products_per_row",
"label": "Products per row (desktop)",
"options": [
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
}
],
"default": "4"
},
{
"type": "range",
"id": "default_products_per_page",
"label": "Default products per page",
"min": 24,
"max": 48,
"step": 12,
"default": 24
},
{
"type": "select",
"id": "default_view_layout",
"label": "Default view layout",
"options": [
{
"value": "grid",
"label": "Grid"
},
{
"value": "list",
"label": "List"
}
],
"default": "grid"
},
{
"type": "select",
"id": "show_quick_buy",
"label": "Show quick buy on...",
"options": [
{
"value": "list",
"label": "List view"
},
{
"value": "list_grid",
"label": "List and grid views"
}
],
"default": "list"
},
{
"type": "select",
"id": "show_quick_view",
"label": "Show quick view on...",
"options": [
{
"value": "list",
"label": "List view"
},
{
"value": "list_grid",
"label": "List and grid views"
}
],
"default": "list"
},
{
"type": "header",
"content": "Sidebar"
},
{
"type": "link_list",
"id": "quick_links",
"label": "Quick links"
},
{
"type": "checkbox",
"id": "quick_links_show_products_count",
"label": "Show products count",
"info": "Only for collection links",
"default": true
},
{
"type": "header",
"content": "Filtering"
},
{
"type": "checkbox",
"id": "show_filters",
"label": "Show filters",
"default": true
},
{
"type": "checkbox",
"id": "show_filter_color_swatch",
"label": "Show filter color swatch",
"info": "Requires filter type \"By group\" to be selected.",
"default": true
},
{
"type": "select",
"id": "filter_type",
"label": "Filter type",
"info": "Filters by group requires specific tag formatting. [Learn more](https://help.shopify.com/manual/using-themes/themes-by-shopify/supply#product-tips-tips-specific)",
"options": [
{
"value": "tag",
"label": "By tag"
},
{
"value": "group",
"label": "By group"
}
],
"default": "tag"
},
{
"type": "select",
"id": "open_group_filters_mode",
"label": "Filter opening mode (desktop)",
"options": [
{
"value": "all_closed",
"label": "All closed"
},
{
"value": "all_open",
"label": "All open"
},
{
"value": "first_open",
"label": "First open"
}
],
"default": "all_closed"
},
{
"type": "text",
"id": "filter_group_order",
"label": "Group order",
"info": "List items must be identical to the group name. If left empty, all groups will be displayed in alphabetical order. Example: Color, Brand, Size."
}
]
}
{% endschema %}
and product-item snippet
{%- comment -%}Color labels used to detect what is a color swatch{%- endcomment -%}
{%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín,barva' | split: ',' -%}
{%- capture product_labels -%}
{%- unless hide_labels -%}
{%- for tag in product.tags -%}
{%- if tag contains '__label:' -%}
{{ tag | split: '__label:' | last }}
{%- endif -%}
{%- if tag contains '__label1:' -%}
{{ tag | split: '__label1:' | last }}
{%- endif -%}
{%- if tag contains '__label2:' -%}
{{ tag | split: '__label2:' | last }}
{%- endif -%}
{%- endfor -%}
{%- if settings.show_discount and product.price < product.compare_at_price -%}
{%- if settings.discount_mode == 'percentage' -%}
{%- assign savings = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round | append: '%' -%}
{%- else -%}
{%- capture savings -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
{%- endif -%}
{{ 'collection.product.discount_html' | t: savings: savings }}
{%- endif -%}
{%- endunless -%}
{%- endcapture -%}
{%- if product_labels != blank -%}
{{- product_labels -}}
{%- endif -%}
{%- if settings.show_secondary_image and product.media.size > 1 -%}
{%- assign show_secondary_media = true -%}
{%- else -%}
{%- assign show_secondary_media = false -%}
{%- endif -%}
{%- assign filtered_variant = '' -%}
{%- if product.media.size > 0 -%}
{%- comment -%}
Are you ready for some Liquid crazyness? Let's start!
The idea here is that when we are on a collection page that is filtered using a color swatch, instead of showing the featured
image, we'd like to show a variant image that is attached to the selected color. Unfortunately, because filtering is done using
tag, there is no direct relationship between tags and variants. We therefore have to do some crazy processing to match a filter
with a variant. Because this code is within a collection page, it is executed for each product, so it's pretty performance
sensitive. Disabling this piece of code may slightly improve the performance if you have lot of variants.
{%- endcomment -%}
{%- assign primary_media = product.featured_media -%}
{%- if request.page_type == 'collection' and section.settings.show_filters and section.settings.filter_type == 'group' -%}
{%- assign matched_color_option = '' -%}
{%- for tag in current_tags -%}
{%- assign tag_parts = tag | split: '_' -%}
{%- assign tag_group_name = tag_parts | first | downcase -%}
{%- assign tag_group_value = tag_parts | last | downcase -%}
{%- if color_label contains tag_group_name -%}
{%- comment -%}We have found a matching color label, then we check if this product contains an option named the same{%- endcomment -%}
{%- for option in product.options -%}
{%- assign downcased_option = option | downcase -%}
{%- if downcased_option == tag_group_name -%}
{%- comment -%}We have found the index of the matching option, so we can iterate through the variants{%- endcomment -%}
{%- assign option_index = 'option' | append: forloop.index -%}
{%- for variant in product.variants -%}
{%- assign variant_option_value = variant[option_index] | downcase -%}
{%- if variant_option_value == tag_group_value and variant.featured_media -%}
{%- assign primary_media = variant.featured_media -%}
{%- assign filtered_variant = variant -%}
{%- break -%}
{%- endif %}
{%- endfor -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: primary_media.preview_image -%}{%- endcapture -%}
{%- assign image_url = primary_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- if show_secondary_media -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: product.media[1].preview_image -%}{%- endcapture -%}
{%- assign image_url = product.media[1] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- endif -%}
{%- capture price_list -%}
{%- if product.price < product.compare_at_price -%}
{%- if product.price_varies -%}
{%- capture price_min -%}{{ product.price_min | money }}{%- endcapture -%}
{%- capture price_max -%}{{ product.price_max | money }}{%- endcapture -%}
{{ 'product.general.sale_price' | t }}
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
{{ 'product.general.regular_price' | t }}
{{- product.compare_at_price_min | money -}}
{%- else -%}
{{ 'product.general.sale_price' | t }}
{{- product.price | money -}}
{{ 'product.general.regular_price' | t }}
{{- product.compare_at_price | money -}}
{%- endif -%}
{%- elsif product.price_varies -%}
{%- capture price_min -%}{{ product.price_min | money }}{%- endcapture -%}
{%- capture price_max -%}{{ product.price_max | money }}{%- endcapture -%}
{{ 'product.general.sale_price' | t }}
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
{%- else -%}
{{ 'product.general.sale_price' | t }}
{{- product.price | money -}}
{%- endif -%}
{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
{{ product.selected_or_first_available_variant.unit_price | money }}
/
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}
{% comment %}
{%- capture vendor -%}
{%- if settings.show_vendor -%}
{%- assign vendor_handle = product.vendor | handle -%}
{%- assign collection_for_vendor = collections[vendor_handle] -%}
{%- unless collection_for_vendor.empty? -%}
{{ product.vendor }}
{%- else -%}
{{ product.vendor }}
{%- endunless -%}
{%- endif -%}
{%- endcapture -%}
{% endcomment %}
Starts: {{ product.metafields.event_fields.event_date | date: "%b %d" }}
{%- if settings.product_price_position == 'before_title' -%}
{{ price_list }}
{%- endif -%}
{%- if settings.product_price_position == 'after_title' -%}
{{ vendor }}
{%- endif -%}
{{ product.title }}
{%- if settings.product_price_position == 'before_title' -%}
{{ vendor }}
{%- endif -%}
{%- if settings.show_color_swatch and template != 'blog' -%}
{%- capture color_swatch -%}
{%- capture color_name -%}{{ section.id }}-{{ product.id }}{%- endcapture -%}
{%- for option in product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}
{%- if color_label contains downcased_option -%}
{%- assign variant_option = 'option' | append: forloop.index -%}
{%- assign value_to_match = filtered_variant[variant_option] | default: option.selected_value -%}
{%- for value in option.values -%}
{%- assign downcased_value = value | downcase -%}
{%- capture color_id -%}{{ color_name }}-{{ forloop.index }}{%- endcapture -%}
{%- for variant in product.variants -%}
{%- if variant[variant_option] == value -%}
{%- assign variant_for_value = variant -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if variant_for_value.featured_media -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: variant_for_value.featured_media.preview_image -%}{%- endcapture -%}
{%- assign image_url = variant_for_value.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- assign color_swatch_name = value | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
+{{ option.values.size | minus: forloop.index0 }}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- if color_swatch != blank -%}
{{ color_swatch }}
{%- endif -%}
{%- endif -%}
{%- if settings.product_price_position == 'after_title' -%}
{{ price_list }}
{%- endif -%}
{%- if settings.show_reviews_badge -%}
{{ 'product.general.reviews' | t }}
{%- comment -%}Display a placeholder, to allocate space{%- endcomment -%}
{%- endif -%}
{%- if settings.show_inventory_quantity and product.template_suffix != 'pre-order' -%}
{%- if product.available -%}
{%- assign should_calculate_inventory = true -%}
{%- for variant in product.variants -%}
{%- comment -%}
If we have one variant that is set to "continue" or that do not have any inventory management, then we skip the calculation of inventory as this
means at least one of the variant is always purchasable
{%- endcomment -%}
{%- if variant.inventory_policy == 'continue' or variant.inventory_management == null -%}
{%- assign should_calculate_inventory = false -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if should_calculate_inventory and settings.low_inventory_threshold > 0 -%}
{%- assign all_inventory = 0 -%}
{%- for variant in product.variants -%}
{%- if variant.inventory_management -%}
{%- assign all_inventory = variant.inventory_quantity | at_least: 0 | plus: all_inventory -%}
{%- endif -%}
{%- endfor -%}
{%- if all_inventory <= settings.low_inventory_threshold -%}
{{ 'collection.product.low_stock_with_quantity_count' | t: count: all_inventory }}
{%- else -%}
{{ 'collection.product.in_stock_with_quantity_count' | t: count: all_inventory }}
{%- endif -%}
{%- else -%}
{%- if product.variants.first.inventory_policy == 'continue' and product.variants.first.inventory_quantity <= 0 and product.variants.first.requires_shipping -%}
{{ 'collection.product.oversell_stock' | t }}
{%- else -%}
{{ 'collection.product.in_stock' | t }}
{%- endif -%}
{%- endif -%}
{%- else -%}
{{ 'collection.product.sold_out' | t }}
{%- endif -%}
{%- endif -%}
{%- if request.page_type == 'collection' or request.page_type == 'search' or show_add_to_cart -%}
{%- if section.settings.show_quick_view == 'list_grid' or section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
{%- assign product_form_classes = 'product-item__action-list button-stack' -%}
{%- else -%}
{%- assign product_form_classes = 'product-item__action-list product-item__action-list--list-view-only button-stack' -%}
{%- endif -%}
{%- assign form_id = 'product_form_id_' | append: product.id | append: '_' | append: section.id -%}
{%- if product.template_suffix == 'contact' -%}
[
{{- 'product.form.contact_us' | t -}}
](mailto:{{ shop.email }})
{%- else -%}
{%- form 'product', product, id: form_id, class: product_form_classes -%}
{%- if section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
{%- assign quick_buy_classes = 'product-item__action-button button button--small button--primary' -%}
{%- else -%}
{%- assign quick_buy_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--primary' -%}
{%- endif -%}
{%- if product.available -%}
{%- if product.variants.size == 1 -%}
{%- else -%}
{{ 'collection.product.choose_options' | t }}
{%- endif -%}
{%- else -%}
{%- endif -%}
{%- if section.settings.show_quick_view == 'list_grid' -%}
{%- assign quick_view_classes = 'product-item__action-button button button--small button--ternary hidden-phone' -%}
{%- else -%}
{%- assign quick_view_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--ternary hidden-phone' -%}
{%- endif -%}
{%- endform -%}
{%- endif -%}
{%- endif -%}
{% render 'hextom_usb_coll', product: product %}
metafield value - data-date=“{{ product.metafields.event_fields.event_date }}” in tag with class=“product-item”
Hi. Yes. I added sorting. My collection collection template with js and
and product-item snippet..
metafield value here - data-date=“{{ product.metafields.event_fields.event_date }}” in snippet tag with class=“product-item”