Related Products by Tag in Shopify - tags

Question

I've built out a liquid template to compare the tags of a current products with the tags of all the other products in the store and display four as related products at the bottom of the page.
It works, but I think I've done it quite inefficiently. Is there a way to make this work a little better?
{% if settings.products_per_row == "4" %}
{% assign number_of_related_products_to_show = 4 %}
{% elsif settings.products_per_row == "3" %}
{% assign number_of_related_products_to_show = 3 %}
{% else %}
{% assign number_of_related_products_to_show = 2 %}
{% endif %}
{% assign number_of_related_products_to_fetch = number_of_related_products_to_show | plus: 1 %}
{% assign current_product_tags = product.tags %}
{% for c in collections %}
{% if c.handle == 'all' %}
{% assign collection_all = c %}
{% endif %}
{% endfor %}
{% assign found_first_match = false %}
{% assign found_second_match = false %}
{% paginate collection_all.products by 1000 %}
{% for product in collection_all.products %}
{% for tag in product.tags %}
{% if current_product_tags contains tag and found_first_match == false and tag != 'Made in USA' %}
{% assign found_first_match = true %}
{% assign first_match = tag %}
{% endif %}
{% if current_product_tags contains tag and found_first_match == true and tag != first_match and tag != 'Made in USA' %}
{% assign found_second_match = true %}
{% assign second_match = tag %}
{% endif %}
{% endfor %}
{% endfor %}
{% endpaginate %}
{% assign matches_found = false %}
{% assign current_product = product %}
{% assign current_product_found = false %}
{% paginate collection_all.products by 1000 %}
{% for product in collection_all.products %}
{% if product.handle == current_product.handle %}
{% assign current_product_found = true %}
{% else %}
{% if product.tags contains first_match %}
{% unless current_product_found == false and forloop.last %}
{% assign matches_found = true %}
{% endunless %}
{% endif %}
{% if product.tags contains second_match and matches_found == false %}
{% unless current_product_found == false and forloop.last %}
{% assign matches_found = true %}
{% endunless %}
{% endif %}
{% endif %}
{% endfor %}
{% endpaginate %}
{% if matches_found == true %}
<div class="row">
<div class="span12">
<h3 class="collection-title">Related products</h3>
</div>
</div>
<div class="row products">
{% paginate collection_all.products by 1000 %}
{% for product in collection_all.products %}
{% if product.handle == current_product.handle %}
{% assign current_product_found = true %}
{% else %}
{% if product.tags contains first_match %}
{% unless current_product_found == false and forloop.last %}
{% include 'related-product-loop' with collection.handle %}
{% assign matched_product = product.title %}
{% endunless %}
{% endif %}
{% if product.tags contains second_match %}
{% unless current_product_found == false and forloop.last or matched_product == product.title %}
{% include 'related-product-loop' with collection.handle %}
{% endunless %}
{% endif %}
{% endif %}
{% endfor %}
{% endpaginate %}
</div>
{% endif %}
{{ 'jquery.pick.js' | asset_url | script_tag }}
<script type="text/javascript" charset="utf-8">
//<![CDATA[
var howMany = {{ number_of_related_products_to_show }};
jQuery(function() {
jQuery('.products .product').pick(howMany);
});
//]]>
</script>
I'm using jquery.pick.js to randomly display four of the products.
Thoughts?

Answer 1

I would suggest taking a look at this article on the Shopify wiki: Related Products.
Perhaps the approach used in section 3. Finding a relevant collection would be a cleaner way to implement related products. However if you need to use product tags, there's an explanation on how to do that as well in section 4. Using product tags.
EDIT: Perhaps your code could be simplified a bit to something like this. It's very similar to what you have above, but just reduces it down to one loop through all the products instead of three.
{% if settings.products_per_row == "3" or settings.products_per_row == "4" %}
{% assign number_of_related_products_to_show = settings.products_per_row | times: 1 %}
{% else %}
{% assign number_of_related_products_to_show = 2 %}
{% endif %}
{% assign current_product = product %}
{% assign current_product_tags = product.tags %}
{% assign found_first_match = false %}
{% assign found_second_match = false %}
{% assign first_related_product = true %}
{% paginate collections.all.products by 1000 %}
{% for product in collections.all.products %}
{% unless product.handle == current_product.handle %}
{% for tag in product.tags %}
{% if current_product_tags contains tag and tag != 'Made in USA' %}
{% if found_first_match == false %}
{% assign found_first_match = true %}
{% assign first_match = tag %}
{% elsif found_second_match == false %}
{% assign found_second_match = true %}
{% assign second_match = tag %}
{% endif %}
{% endif %}
{% endfor %}
{% if found_first_match == true %}
{% if first_related_product == true %}
{% assign first_related_product == false %}
<div class="row">
<div class="span12">
<h3 class="collection-title">Related products</h3>
</div>
</div>
<div class="row products">
{% endif %}
{% if product.tags contains first_match or product.tags contains second_match %}
{% include 'related-product-loop' with collection.handle %}
{% endif %}
{% endif %}
{% endunless %}
{% endfor %}
{% if first_related_product == false %} </div> {% endif %}
{% endpaginate %}
{{ 'jquery.pick.js' | asset_url | script_tag }}
<script type="text/javascript" charset="utf-8">
//<![CDATA[
var howMany = {{ number_of_related_products_to_show }};
jQuery(function() {
jQuery('.products .product').pick(howMany);
});
//]]>
</script>
This code is in a gist here. I included 2 files, the second option uses 2 loops through the products but is perhaps a little more readable. (I couldn't decide between the two, so I included both.)