related-items-supply-theme.liquid

{% assign number_of_products = 5 %}
{% assign number_of_products_to_fetch = number_of_products | plus: 1 %}

<!-- so this code seems to just check if a product is in a collection to use that 
collection for related items-->
{% 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 %}

{% if collection and collection.products_count > 1 %}
<!-- above code prob won't be of use given we check for existence of XS and not collections --> 

  <hr>
  <h2 class="h1">{{ 'products.general.related_products' | t }}</h2>
  <div class="grid-uniform">
    {% assign current_product = product %}
    {% assign current_product_found = false %}
    {% for product in collection.products limit: number_of_products_to_fetch %}
      {% if product.handle == current_product.handle %}
        {% assign current_product_found = true %}
      {% else %}
        {% unless current_product_found == false and forloop.last %}
          {% unless grid_item_width %}
            {% assign grid_item_width = 'large--one-quarter medium-down--one-half' %}
          {% endunless %}

          {% unless image_size %}
            {%- assign image_size = '600x600' -%}
          {% endunless %}

          {% unless current_collection %}
            {% assign current_collection = collection %}
          {% endunless %}

          {% assign on_sale = false %}
          {% if product.compare_at_price > product.price %}
            {% assign on_sale = true %}
          {% endif %}

          {% assign sold_out = true %}
          {% if product.available  %}
            {% assign sold_out = false %}
          {% endif %}

          <div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">

            <a href="{{ product.url | within: current_collection }}" class="product-grid-item">
              <div class="product-grid-image">
                <div class="product-grid-image--centered">
                  {% if sold_out %}
                    <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
                  {% endif %}
                  {% if product.featured_image %}
                  {% capture img_id %}productFeaturedImage-{{ section.id }}--{{ product.featured_image.id }}{% endcapture %}
                  {% capture img_id_class %}productImage--{{ product.featured_image.id }}{% endcapture %}
                  {% capture wrapper_id %}productImageWrapper-{{ product.featured_image.id }}{% endcapture %}
                    {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                    <div id="{{ wrapper_id }}" class="lazyload__image-wrapper no-js" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%;">
                      <img id="{{ img_id }}"
                        class="lazyload no-js {{ img_id_class }}"
                        data-src="{{ img_url }}"
                        data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                        data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                        data-sizes="auto"
                        alt="{{ product.featured_image.alt | escape }}"
                        {% comment %}style="max-height: {{ height }}px;">{% endcomment %}>
                    </div>
                    <noscript>
                     <img src="{{ product.featured_image | img_url: '580x' }}"
                       srcset="{{ product.featured_image | img_url: '580x' }} 1x, {{ product.featured_image | img_url: '580x', scale: 2 }} 2x"
                       alt="{{ product.featured_image.alt }}" style="opacity:1;">
                   </noscript>
                  
                  {% else %}
                  {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
                  <div>
                  {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>
                {% endif %}
                </div>
              </div>

              <p>{{ product.title }}</p>

              <div class="product-item--price">
                <span class="h1 medium--left">
                  {% if on_sale %}
                    <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
                  {% else %}
                    <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
                  {% endif %}
                  {% include 'price' with product.price %}
                  {% if on_sale and section.settings.product_show_compare_at_price %}
                    <small>
                      <s>
                        <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
                        {% include 'price' with product.compare_at_price %}
                      </s>
                    </small>
                  {% endif %}
                </span>

                {% if on_sale and section.settings.product_show_saved_amount %}
                  <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
                    {% assign compare_price = product.compare_at_price %}
                    {% assign product_price = product.price %}
                    {% include 'price-sale' %}
                  </span>
                {% endif %}
              </div>

              {% if section.settings.product_reviews_enable %}
                <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
              {% endif %}
            </a>

          </div>

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