Related Products showing vertical instead of horizontal

New Member
5 0 0

Hi there,

I have used this method and modified it a bit in order to show different colors from a specific product (Detailed description of what i want to accomplish). The implementation i did does select the right products to display, however for some products it does not show an image whatsoever (see images below) only the productname and price of the suggested products. 

Also the related products are displayed among each other, instead of next to each other (vertical instead of horizontal). EDIT: this is fixed! only problem is not showing image of some products... See images below

Help would be really appreciated!
Code below:

In sections --> related-products-by-tag.liquid:

{% if section.settings.show_related_products == true %}
<hr>
<div class="product-template__container 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">
 
{% comment %}
  Number of related items per row,
  and number of rows.
{% endcomment %}

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

{% comment %}
  Heading.
  Leave blank if you don't need one.
{% endcomment %}

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

{% comment %}
  Set either or both to true, if you want
  to limit yourself to items with same vendor, and/or type.
{% endcomment %}

{% assign same_vendor = true %}
{% assign same_type = true %}

{% comment %}
  Collections to ignore.
  Never pick related items from those.
{% endcomment %}

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

{% comment %}
  Looking for a relevant collection.
{% endcomment %}

{% 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 = 50 -%}
        {%- assign max_height = 50 -%}
    {% when '2' %}
     {%- assign grid_item_width = 50 -%}
      {%- assign max_height = 50 -%}
    {% when '3' %}
 	 {%- assign grid_item_width = 50 -%}
      {%- assign max_height = 50 -%}
    {% when '4' %}
     {%- assign grid_item_width = 50 -%}
      {%- assign max_height = 50 -%}
    {% when '5' %}
     {%- assign grid_item_width = 50 -%}
      {%- assign max_height = 50 -%}
    {% when '6' %}
     {%- assign grid_item_width = 50 -%}
      {%- assign max_height = 50 -%}
    {% else %}
     {%- assign grid_item_width = 50 -%}
      {%- assign max_height = 50 -%}
  {% endcase %}


  {% capture related_items %}
<div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
  
  {% for product in collections.all.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 %}
  {% comment %} 
    Replace 'test' below with prefered tag 
  {% endcomment %}
  {% if product.type == current_product.type %} 
  <div class="grid__item {{ grid_item_width }}">
    {% include 'product-grid-item', max_height: max_height%}
  </div>
  {% assign counter = counter | plus: 1 %}
  {% if counter == break_at %}
  {% break %}
  {% endif %}
  {% endif %}
  {% endunless %}
  {% endunless %} 
  {% endunless %}
  {% endfor %}
  
</div>
  {% endcapture %}

  {% assign related_items = related_items | trim %}

  {% unless related_items == blank %}

  <aside class="grid">
    <div class="grid__item">
      {% unless heading == blank %}
      <header class="section-header">
        <h3>{{ heading }}</h3>
      </header>
      {% 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 %}

 

I have tested it with this product (a suitcase) which has three different colors (Black/Blue/Red)
below are the results.


Image with result (Black)
Image with result (Blue) (I did hide the product title and price myself here)
Image with result (Red)

PS: Im using the supply theme

 

 

0 Likes
New Member
1 0 0

How did you fix it then?

0 Likes