comment afficher les produits connexes par tag - shopify

Question

J'ai une section "Produits connexes" sur ma page de produit, basée sur le thème "Vatage". Maintenant, il montre des produits qui sont liés par "collection". Est-il possible de montrer les produits connexes qui ont le même Balise? j'ai essayé avec d'autres codes, mais j'ai échoué .. s'il vous plaît quelqu'un m'aider.

Ceci est mon code related-products.liquid.

Merci.

{% capture number_of_related_products_to_fetch %}{{ number_of_related_products_to_show | plus: 1 }}{% endcapture %} 

{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %} 
{% assign found_a_collection = false %} 
{% for c in product.collections %} 
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 %} 
{% assign found_a_collection = true %} 
{% assign collection = c %} 
{% endif %} 
{% endfor %} 
{% endif %} 


<div class="desktop-12 mobile-3"> 


    <h4 class="section-title">{{ 'products.product.related_products' | t }}</h4> 

    <div id="product-loop"> 
    {% assign current_product_found = false %} 
    {% for prod in collection.products limit: 7 %} 
    {% if prod.title == product.title %} 
    {% assign current_product_found = true %} 
    {% else %} 
    {% unless current_product_found == false and forloop.last %} 
    <div class="product-index desktop-2 tablet-2 mobile-half" id="prod-{{ product.id }}" data-alpha="{{ prod.title }}" data-price="{{ prod.price }}"> 
     <a href="{{ prod.url | within: collection }}" title="{{ prod.title | escape }}"> 
     <img src="{{ prod.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" /> 
     </a> 

     <div class="product-info"> 

     <div class="product-info-inner"> 
      <a href="{{ prod.url | within: collection }}"> 
      <h3>{{ prod.title }}</h3> 
      </a>   
      <div class="price"> 
      {% if product.price < prod.compare_at_price %} 
      <div class="onsale">{{ prod.price | money }}</div> 
      <div class="was">{{ prod.compare_at_price | money }}</div> 
      {% else %} 
      <div class="prod-price">{% if prod.price_varies %} {{ 'products.general.from' | t }} {{ prod.price_min | money }} - {{ prod.price_max | money }} {% else %}{{ prod.price | money }}{% endif %}</div> 
      {% endif %} 
      </div> 

     </div> 
     </div> 
    </div> 
    {% endunless %} 
    {% endif %} 
    {% endfor %} 
    </div>  
</div> 

Answer 1

<!-- 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 %} 

Référence: https://gist.github.com/carolineschnapp/1002949

ou l'utilisation des applications payés du magasin.