|
<!-- Solution brought to you by Caroline Schnapp --> |
|
<!-- See this: https://docs.shopify.com/support/your-store/products/can-i-recommend-related-products#finding-a-relevant-collecitons --> |
|
|
|
{% comment %} |
|
Number of related items per row, |
|
and number of rows. |
|
{% endcomment %} |
|
|
|
{% assign number_of_related_products_per_row = 4 %} |
|
{% assign number_of_rows = 1 %} |
|
|
|
{% comment %} |
|
Heading. |
|
Leave blank if you don't need one. |
|
{% endcomment %} |
|
|
|
{% assign heading = 'Other fine products' %} |
|
|
|
{% 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 %} |
Hi Caroline,
I was wondering if this would work with the current theme I have?
www.shopskiesareblue.com
Thank you