Related Products using metafields - to add to product.liquid

gistfile1.html

<!-- 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.metafields.recommendations.productHandles %}

<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>

{% endif %}

<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 = [];
  {% if product.metafields.recommendations.productHandles %}
  recommendations = jQuery.trim({{ product.metafields.recommendations.productHandles | json }}).split(/[\s,;]+/);
  {% endif %}
  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.related-products');
    for (var i=0; i<recommendations.length; i++) {
      jQuery.getJSON('/products/' + 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>

Hi Caroline. Thanks for this code - it works great. The only problem is I can't work out how to add it to the product.liquid in the coutoure theme. Everytime I do, it kicks the "recently veiwed" section out and then sends all the string info of recently viewed items to the browser as info - basically it doesn't know what to do with the recently viewed productHandles - and puts them out there for us us messages. How do I add a section on the product.liquid page that allows three to work together "related products" "more from this collection" and "recently viewed". Sorry - I'm a novice here. Thanks. Please reply to [email protected]

Send an email to [email protected], we will help you out.

This is a really awesome plugin/method for relating products. Thank you. MUCH smoother and safer than the 'Product Tags' method.

One question: In chrome, when the JSON feed brings back (any) results, I get alerts for each product that's been returned. I've searched the wiki and Google-At-Large to see if this is something I should be configuring, and cannot make heads or tails of it.

Am I missing something obvious for supressing these alerts?

Thanks in advance for any response.

Justin

Very possible that I just solved this...and by 'Solved' I mean excluding the api.jquery.js script call. Totally unsure of what this is or why, however. Any (however brief) explanation is appreciated.

Hey @carolineschnapp question here.

Just noticed the following error on my product pages (scroll down to the recommended products section just above the footer):
Liquid error: Expected collection handle (String) but got NilClass

We are using the MetaFields2 product to display all this.

Wondering if there has been some deprecation that I can't find as it relates to the following code:

{% if product.metafields.recommendations.productHandles %}

any thoughts would be great.

Hi @carolineschnapp I'm using this in my store, but it is generating duplicate recommendations even though i only have 3 values in the recommendations metafield. I think there might be something wrong with the js code that generates the recommendations, can you help me out?

Hi @carolineschnapp I wondered if you could help... I know this is a really old thread but I found it via Shopify. I've added the code via the instructions here:
http://docs.shopify.com/support/your-store/products/can-i-recommend-related-products#Using_Product_Tags
Using the "Use product metafields to recommend products" bit...

Anyway, my related products look FAB! ... But, I have a huge issue and it has been caused by adding this code. All my products that have a dropdown (say for size etc in shopify) now have screwed up currencies. They show $ instead of £ (but with the £ value), and the currency switcher dropdown doesn't work now either. If I remove the code {% include 'related-products' %} from my product.liquid file then the currencies are fine again, but obviously I then have no related products :'( Can anyone help? Shopify support can't figure it out, I've contacted the theme builders but I can't imagine this is something they'll help with! Would love to use this way of adding related products instead of an app! Thanks :)

Hi Caroline, thanks for the code. but i m trying to make it work on my cart page. but there is no luck. could you please help me how can i obtain my related products on the cart page. i have checked that collections are not called in the cart page. waiting for reply Thank you!

Hi @carolineschnapp , could this work on a variant level if I changed "product.metafields.recommendations.productHandles" to "product.variants.metafields.recommendations.productHandles"?