related-products.liquid for narrative theme

related-products.liquid

{% if section.settings.show_related_products == true %}

<div class="page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
 
  
  


{% assign heading = section.settings.related_title %}


{% assign same_vendor = false %}
{% assign same_type = false %}


{% assign exclusions = 'frontpage,all' | split: ',' %}


{% if product.metafields.c_f['Related Products'] %}
  {% assign collection = collections[product.metafields.c_f['Related Products']] %}
{% endif %}

{% assign found_a_collection = false %}
{% if collection and collection.all_products_count > 1 %}
  {% unless exclusions contains collection.handle %}
    {% assign found_a_collection = true %}
  {% endunless %}
{% endif %}
{% unless found_a_collection %}
  {% for c in product.collections %}
    {% unless exclusions contains c.handle or c.all_products_count < 2 %}
      {% assign found_a_collection = true %}
      {% assign collection = c %}
      {% break %}
    {% endunless %}
  {% endfor %}
{% endunless %}

{% comment %}
  If we have a relevant collection.
{% endcomment %}

{% if found_a_collection %}

  {% assign counter = 0 %}
  {% assign break_at = number_of_rows | times: number_of_related_products_per_row %}
  {% assign current_product = product %}

    {% case number_of_related_products_per_row %}
    {% when '1' %}
      {% assign grid_item_width = '' %}
    {% when '2' %}
      {% assign grid_item_width = 'large--one-half medium--one-half' %}
    {% when '3' %}
      {% assign grid_item_width = 'large--one-third medium--one-third' %}
    {% when '4' %}
      {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
    {% when '5' %}
      {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
    {% when '6' %}
      {% assign grid_item_width = 'large--one-sixth medium--one-third small--one-half' %}
    {% else %}
      {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
  {% endcase %}


  {% capture related_items %}
    {% for product in collection.products %}
      {% unless product.handle == current_product.handle %}
         {% unless same_vendor and current_product.vendor != product.vendor %}
           {% unless same_type and current_product.type != product.type %}
              <div class="card-list__column grid grid__item medium-up--one-third">
                {% include 'product-card', product: product, grid_style: section.settings.grid_style %}
              </div>
             {% assign counter = counter | plus: 1 %}
             {% if counter == break_at %}
               {% break %}
             {% endif %}
           {% endunless %}
        {% endunless %}
      {% endunless %}
    {% endfor %}
  {% endcapture %}

  {% assign related_items = related_items | trim %}

  {% unless related_items == blank %}

  <aside class="grid">
    <div class="grid__item">
      {% unless heading == blank %}
      
        <h2 class="section-header__title">{{ heading }}</h1>
      
      {% endunless %}
      <div class="grid-uniform">
        {{ related_items }}
      </div>
    </div>
  </aside>

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

{% schema %}
{
  "name": "Related products",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_related_products",
      "label": "Show related products",
      "default": false
    },
    {
      "id": "related_title",
      "type": "text",
      "label": "Section title",
      "default": "Other fine products"
    },
    {
      "type": "select",
      "id": "related_grid_num",
      "label": "Products per row (Desktop)",
      "default": "4",
      "options": [
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        }
      ]
    },
    {
      "type": "select",
      "id": "related_grid_row",
      "label": "Number of rows (Desktop)",
      "default": "1",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        }
      ]
    }
  ]
}
{% endschema %}



<style>
  #ProductSection-related-products .card {opacity:1;overflow:auto;}
  #ProductSection-related-products {margin-bottom:30px;}
  #shopify-section-related-products .medium-up--one-third {float:left;padding-right:30px;}
  .card.even h3.card__name.h4, .card.even .card__name.h4.h3 {text-align:left !IMportant;}
  .card{padding-bottom:20px;}
  

</style>

Thanks for sharing. But...

1. all related products are shown though i set 4 per row and 2 row.
2. how to set all related products at grid style (not collage style)?
   Thanks

Thanks for sharing. But...

1. all related products are shown though i set 4 per row and 2 row.
2. how to set all related products at grid style (not collage style)?
   Thanks

There was code missing from the original, place this back in around line 5 and you can pick and chose the per row settings:

{% assign number_of_related_products_per_row = section.settings.related_grid_num %}
{% assign number_of_rows = section.settings.related_grid_row %}

Hi :)

Thanks for sharing!

Can you please tell me how to have the related products based on a collection / tag?

I'm offering only one collection at a time (the rest of the collections are just for archive purposes), so I'm trying to have the navigation between items only within it.

Many Thanks!

And just another question: can I change / remove the limit number of the related products?

Thanks a lot!

@hankpalan, maybe you can assist?

Hi, after i apply the code, it is only reflecting on the editor mode but not showing on the storefront.
anyone help.
Narrative 10.5.0

@levister-onyx
i don't think they won't render unless you have some sales

hi @joe-dempsey
what you mean sales? if someone already bought on my store? the answer is yes. we have some sales already

@levister-onyx
i don't think they won't render unless you have some sales