Created
June 1, 2011 21:10
-
-
Save carolineschnapp/1003334 to your computer and use it in GitHub Desktop.
Related Products using metafields - to add to product.liquid
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
<!-- 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 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"?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 :)