Display Similar Items on Product Page Based on Product Tag, on Brooklyn Theme

Tourist
14 0 0

I've tried a few different codes but it has not worked. I'm hoping to show similar items on a product page, where the products are picked based on the same tag as that of the product that the user is viewing.

 

Each solution offers something slightly different and I'm not too sure how to edit the code now but I think the closest I am is here - 

 

<style>
  .product-card {
    box-sizing: border-box;
    float: left;
    min-height: 1em;
    padding-left: 2em;
    vertical-align: top;
    width: 25%;
  }

  .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
</style>

{%- assign counter = 0 -%}
{%- assign break_at = section.settings.number_of_products | plus: 0 -%}
{%- assign current_product = product -%}

{%- capture related_items -%}
  {%- for product in collections.all.products -%}
    {%- unless product.handle == current_product.handle -%}

      {%- if product.tags contains section.settings.related_tag -%}
        <a href="{{ product.url | within: collection }}" class="product-card">
          <img src="{{ product.featured_image.src | img_url: '1024x' }}" alt="">
          {{ product.title }}
          <p>
            <span aria-hidden="true">—</span>
            {%- if product.price_varies -%}
              <span class="visuallyhidden">Starting at</span>
              {{ product.price_min | money_without_trailing_zeros }}
              <span aria-hidden="true">+</span>
            {%- else -%}
              {{ product.price | money_without_trailing_zeros }}
            {%- endif -%}
          </p>
          <p>
            <span class="visuallyhidden">by</span>
            {{ product.vendor }}
          </p>
        </a>

        {%- assign counter = counter | plus: 1 -%}

        {%- if counter == break_at -%}
          {%- break -%}
        {%- endif -%}

      {%- endif -%}

    {%- endunless -%}
  {%- endfor -%}
{%- endcapture -%}

{%- assign related_items = related_items | trim -%}
{%- unless related_items == blank -%}
  <aside>
    {%- if section.settings.heading -%}
      <h2>{{ section.settings.heading }}</h2>
    {%- endif -%}

    {{ related_items }}
  </aside>
{%- endunless -%}

{% schema %}
{
  "name": "Recommended products",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Recommended products"
    },
    {
      "type": "text",
      "id": "related_tag",
      "label": "Tag",
      "info" : "The tag determines which products show as related products."
    },
    {
      "type": "select",
      "id": "number_of_products",
      "label": "Number of products to show",
      "default": "4",
      "options": [
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "8",
          "label": "8"
        },
        {
          "value": "12",
          "label": "12"
        }
      ]
    }
  ]
}
{% endschema %}

Instead of creating the tag as a field, how can I simply define that the related_tag basically needs to match a tag within the product range for it to be displayed? Here's the link to the site https://www.hagargifts.com 

 

I tried the Related Products code, but it picks up only items from within the same collection, which doesn't work. Any help would be greatly appreciated please. Thank you.

0 Likes