-
-
Save carolineschnapp/1002949 to your computer and use it in GitHub Desktop.
| <!-- Solution brought to you by Caroline Schnapp --> | |
| <!-- See this: http://wiki.shopify.com/Related_Products --> | |
| {% assign image_size = 'compact' %} | |
| {% assign heading = 'Other fine products' %} | |
| {% if product.tags.size > 0 %} | |
| <h3>{{ heading }}</h3> | |
| <ul class="related-products"></ul> | |
| <style type="text/css"> | |
| .related-products { list-style-type:none } | |
| {% case image_size %} | |
| {% when 'small' %} | |
| .related-products * { font-size:12px; text-align:center; padding:0 } | |
| .related-products h4 { border:none; margin:10px 0 0 0; line-height:1.3 } | |
| .related-products div.image { height:100px } | |
| .related-products li { float:left; width:120px; height:160px; margin-right:20px } | |
| {% when 'compact' %} | |
| .related-products * { font-size:13px; text-align:center; padding:0 } | |
| .related-products h4 { border:none; margin:5px 0 0 0; line-height:1.5 } | |
| .related-products div.image { height:160px } | |
| .related-products li { float:left; width:180px; height:220px; margin-right:25px } | |
| {% when 'medium' %} | |
| .related-products * { font-size:14px; text-align:center; padding:0 } | |
| .related-products h4 { border:none; margin:10px 0 0 0; line-height:1.8 } | |
| .related-products div.image { height:240px } | |
| .related-products li { float:left; width:260px; height:300px; margin-right:25px } | |
| {% endcase %} | |
| .related-products { overflow:hidden } | |
| .related-products span.money { font-size:0.8em } | |
| .related-products li:last-child { margin-right:0 } | |
| </style> | |
| <script>!window.jQuery && document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><\/script>')</script> | |
| {{ 'api.jquery.js' | shopify_asset_url | script_tag }} | |
| <script type="text/javascript" charset="utf-8"> | |
| //<![CDATA[ | |
| var recommendations = []; | |
| {% for tag in product.tags %} | |
| recommendations.push('{{ tag | handle }}'); | |
| {% endfor %} | |
| if (recommendations.length) { | |
| var list = jQuery('ul.related-products'); | |
| for (var i=0; i<recommendations.length; i++) { | |
| jQuery.getJSON(recommendations[i] + '.js', function(product) { | |
| list.append('<li><div class="image"><a href="' + product.url +'"><img src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_{{ image_size }}$1') + '" /></a></div><h4><a href="' + product.url + '">' + product.title + '</a></h4><span class="money">' + Shopify.formatMoney(product.price, "{{ shop.money_format }}") + '</span></li>'); | |
| }); | |
| } | |
| } | |
| //]]> | |
| </script> | |
| {% endif %} |
This approach involves a series of ajax requests, which can lead to the rendering of products in a semi-random order (depending on the sequence in which the responses come back from the server). An alternate liquid-only approach, where each tag that references a related product is prefixed with related:, could be:
{% assign recommendations = '' %}
{% for tag in product.tags %}
{% assign split_tag = tag | split: ':' %}
{% if split_tag[0] == 'related' %}
{% if recommendations != '' %}
{% assign recommendations = recommendations | append: ',' %}
{% endif %}
{% assign related_handle = split_tag[1] | handle %}
{% assign recommendations = recommendations | append: related_handle %}
{% endif %}
{% endfor %}
{% assign recommendations = recommendations | split: ',' %}
<!-- `recommendations` liquid variable now holds an array of product handles -->
{% for product_handle in recommendations %}
{% assign product = all_products[product_handle] %}
<!-- Normal HTML & Liquid here, using `product` as reference to iteratee -->
{% endfor %}
Hi, is there a way to make this responsive? for example, add in an "@include at-query" so that it maintains 3 across for tablet?
thx!
You can make it responsive using CSS and limit the container width so it only carries a fixed amount of items.
Great tutorial! And thank you mariananobre for the tip using the tags!
please anyone help me
i want to show related product on single product page, but i could'nt. there is my code and also website link
https://luscious-cosmetics-p.myshopify.com/products/double-dazzle-lip-gloss
<script type="text/javascript" charset="utf-8"> //<![CDATA[ var recommendations = []; {% for tag in product.tags %} recommendations.push('{{ tag | handle }}'); {% endfor %} if (recommendations.length) { var list = jQuery('ul.related-products'); for (var i=0; i<recommendations.length; i++) { jQuery.getJSON(recommendations[i] + '.js', function(product) { list.append('<li><div class="image"><a href="' + product.url +'"><img src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_{{ image_size }}$1') + '" /></a></div><h4><a href="' + product.url + '">' + product.title + '</a></h4><span class="prod-price">' + Shopify.formatMoney(product.price, "{{ shop.money_format }}") + '</span></li>'); }); } } //]]> </script> {% endif %}
@Caroline this works great on a products page... But I want this to work on the cart page. How can I get this same functionality on the cart page, while still using the tag approach. Simply placing the same code on the cart page DOES NOT work since the cart could have several(more than one) item.
PLEASE CAN YOU HELP?
Again to re-specify, I need the related items to be based off the items within the cart, using their tags, and shuffle at random the 4 results. Any help would be greatly appreciated.
Thanks Caroline and Michael!
I added a check to see if the product has recommendation tags, and if not, display a default collection, so that this section is never empty. This is based off of @michaelrshannon's code above:
{% assign recommendations = '' %}
{% for tag in product.tags %}
{% assign split_tag = tag | split: ':' %}
{% if split_tag[0] == 'related' %}
{% if recommendations != '' %}
{% assign recommendations = recommendations | append: ',' %}
{% endif %}
{% assign related_handle = split_tag[1] | handle %}
{% assign recommendations = recommendations | append: related_handle %}
{% endif %}
{% endfor %}
{% assign recommendations = recommendations | split: ',' %}
<!-- `recommendations` liquid variable now holds an array of product handles -->
{% if recommendations != empty %}
{% for product_handle in recommendations %}
{% assign product = all_products[product_handle] %}
<!-- Normal HTML & Liquid here, using `product` as reference to iteratee -->
{% endfor %}
{% else %}
{% for product in collections.collection-title.products limit:3 %}
<!-- Normal HTML & Liquid here, using `product` as reference to iteratee -->
{% endfor %}
{% endif %}
Hi Caroline!
Thanks so much for this snippet of code! It works perfectly but my the resolution of my images are becoming super low quality and I'm not sure why it looks like that. Can you please help me?
For security reason, the link in line 36 should be changed to "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
Followed all the guidelines to add this to a Debut theme, unfortunately the title is displayed but the images are not. Is there a way I can go about this?
@mwiru I have the same issue on Debut Theme
I have the same issue with the Debut theme, and I followed the instructions to delete image max height, which worked, following this: https://ecommerce.shopify.com/c/ecommerce-design/t/related-products-theme-debut-little-problem-448491
The images show up now which is good. However, the grid height is still restricted and there appears an annoying scroll. Any ideas on how to remove this?
does this script comptable with sectioned theme?
not showing up in brooklyn theme.
@ivandurst I know this is a really old post but exactly what I'm looking for. Can you tell me where to put your piece of code within Caroline's?
For me it is not rendering in safari, does anyone have this issue?
@carolineschnapp Thanks, I have tried this and it worked perfeclty for me
@carolineschnapp This is clearly a VERY useful piece of code. Unfortunately, I can't figure out how to make it work because the Product.Liquid file no longer exists in the Online Store 2.0 themes (see https://community.shopify.com/c/technical-q-a/product-liquid-disappeared-in-new-dawn-theme/td-p/1307879). Any idea on how to tweak this to work in this new architecture?
{% if product.tags contains prod.title %} is not working. If I pass the string with quote like- {% if product.tags contains '467455' %} ,
its working but pass the variable, not working. Please guide.
Hi
Great piece of code. Thank you very much. Just having one problem:
How do I stop the products with the tags in them coming up when I use the search function for the product tagged?
Example. White Shirt is tagged with the handle beige-shorts because I want Beige Shorts to come up underneath as a related product. However, when I search for Beige Shorts I don't want White Shirt to come up.