Instantly share code, notes, and snippets.
Created
May 9, 2017 12:43
-
Save sadiesaurus/8157cf791d6e8945254ec0240b840dd2 to your computer and use it in GitHub Desktop.
related-products.liquid for sectioned themes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% if section.settings.show_related_products == true %} | |
<hr> | |
<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true"> | |
{% comment %} | |
Number of related items per row, | |
and number of rows. | |
{% endcomment %} | |
{% assign number_of_related_products_per_row = section.settings.related_grid_num %} | |
{% assign number_of_rows = section.settings.related_grid_row %} | |
{% comment %} | |
Heading. | |
Leave blank if you don't need one. | |
{% endcomment %} | |
{% assign heading = section.settings.related_title %} | |
{% comment %} | |
Set either or both to true, if you want | |
to limit yourself to items with same vendor, and/or type. | |
{% endcomment %} | |
{% assign same_vendor = false %} | |
{% assign same_type = false %} | |
{% comment %} | |
Collections to ignore. | |
Never pick related items from those. | |
{% endcomment %} | |
{% assign exclusions = 'frontpage,all' | split: ',' %} | |
{% comment %} | |
Looking for a relevant collection. | |
{% endcomment %} | |
{% if product.metafields.c_f['Related Products'] %} | |
{% assign collection = collections[product.metafields.c_f['Related Products']] %} | |
{% endif %} | |
{% assign found_a_collection = false %} | |
{% if collection and collection.all_products_count > 1 %} | |
{% unless exclusions contains collection.handle %} | |
{% assign found_a_collection = true %} | |
{% endunless %} | |
{% endif %} | |
{% unless found_a_collection %} | |
{% for c in product.collections %} | |
{% unless exclusions contains c.handle or c.all_products_count < 2 %} | |
{% assign found_a_collection = true %} | |
{% assign collection = c %} | |
{% break %} | |
{% endunless %} | |
{% endfor %} | |
{% endunless %} | |
{% comment %} | |
If we have a relevant collection. | |
{% endcomment %} | |
{% if found_a_collection %} | |
{% assign counter = 0 %} | |
{% assign break_at = number_of_rows | times: number_of_related_products_per_row %} | |
{% assign current_product = product %} | |
{% case number_of_related_products_per_row %} | |
{% when '1' %} | |
{% assign grid_item_width = '' %} | |
{% when '2' %} | |
{% assign grid_item_width = 'large--one-half medium--one-half' %} | |
{% when '3' %} | |
{% assign grid_item_width = 'large--one-third medium--one-half' %} | |
{% when '4' %} | |
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %} | |
{% when '5' %} | |
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %} | |
{% when '6' %} | |
{% assign grid_item_width = 'large--one-sixth medium--one-third small--one-half' %} | |
{% else %} | |
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %} | |
{% endcase %} | |
{% capture related_items %} | |
{% for product in collection.products %} | |
{% unless product.handle == current_product.handle %} | |
{% unless same_vendor and current_product.vendor != product.vendor %} | |
{% unless same_type and current_product.type != product.type %} | |
{% include 'product-grid-item' %} | |
{% assign counter = counter | plus: 1 %} | |
{% if counter == break_at %} | |
{% break %} | |
{% endif %} | |
{% endunless %} | |
{% endunless %} | |
{% endunless %} | |
{% endfor %} | |
{% endcapture %} | |
{% assign related_items = related_items | trim %} | |
{% unless related_items == blank %} | |
<aside class="grid"> | |
<div class="grid__item"> | |
{% unless heading == blank %} | |
<header class="section-header"> | |
<h2 class="section-header__title">{{ heading }}</h1> | |
</header> | |
{% endunless %} | |
<div class="grid-uniform"> | |
{{ related_items }} | |
</div> | |
</div> | |
</aside> | |
{% endunless %} | |
{% endif %} | |
</div> | |
{% endif %} | |
{% schema %} | |
{ | |
"name": "Related products", | |
"settings": [ | |
{ | |
"type": "checkbox", | |
"id": "show_related_products", | |
"label": "Show related products", | |
"default": false | |
}, | |
{ | |
"id": "related_title", | |
"type": "text", | |
"label": "Section title", | |
"default": "Other fine products" | |
}, | |
{ | |
"type": "select", | |
"id": "related_grid_num", | |
"label": "Products per row (Desktop)", | |
"default": "4", | |
"options": [ | |
{ | |
"value": "2", | |
"label": "2" | |
}, | |
{ | |
"value": "3", | |
"label": "3" | |
}, | |
{ | |
"value": "4", | |
"label": "4" | |
}, | |
{ | |
"value": "5", | |
"label": "5" | |
} | |
] | |
}, | |
{ | |
"type": "select", | |
"id": "related_grid_row", | |
"label": "Number of rows (Desktop)", | |
"default": "1", | |
"options": [ | |
{ | |
"value": "1", | |
"label": "1" | |
}, | |
{ | |
"value": "2", | |
"label": "2" | |
}, | |
{ | |
"value": "3", | |
"label": "3" | |
} | |
] | |
} | |
] | |
} | |
{% endschema %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey, Shopify won't let me save the file when I paste these contents into my related-products.liquid file. It Tells me there's an error in line 129; it says, "Liquid syntax error: Unknown tag 'schema' "
Screenshot:
I cleared out the file before pasting into it, (per the instructions I found here: https://help.shopify.com/en/themes/customization/products/features/recommend-related-products#sectioned-themes) and no luck. Maybe they updated their core and things aren't interacting the same as when you published this?
Any help you could provide would be amazing, but I realize that you may not be employed by Shopify and are just sharing your code out of the kindness of your heart. Either way, thank you for sharing. You've helped me and countless other Shopify nerds. :)