How do I access the auto-generated "Related products" from the Search and Discovery app in liquid?

[greg-gkr]

I was able to access the Complementary Products from Search and Discovery using this object in my liquid template file:

{% product.metafields.shopify--discovery--product_recommendation.complementary_products.value %}

I can view the product and see the Complementary products metafield value set in the product admin.

The auto-generated Related products values are NOT set in the metafields on the product so I have no idea how to access them :s

Any help would really be appreciated. I really wish Shopify and other app developers who use metafields would just assume that some users know what they're doing and want to make adjustments to template files. Having to dig around to find this info is unbelievably frustrating especially as a contract dev who doesn't want to charge their client to find this info.

[Deathmel0n]

Accessed with the product recommendations API, where the intent is deciding wether you want returned complimentary or related products.

https://shopify.dev/docs/api/ajax/reference/product-recommendations

[greg-gkr]

Stupid question, but is there a way to do this through a liquid template file? I've worked with the Shopify Rest and GraphQL API in the past but haven't tried to access the API through a Shopify template. Thanks for the info, I'll keep digging in the meantime.

[Deathmel0n · Accepted solution]

Something like this should probably work. I tested it and it returned 10 recommendations, both manual and auto-generated. The limit=10 in the fetch-url is what defines the amount of products returned. 

The script below makes a parent div and renders an <a>-element inside for each element with url and id as label.

<div id="recommended-products"></div>

<script>
  fetch(window.Shopify.routes.root + "recommendations/products.json?product_id={{product.id}}&limit=10&intent=related")
    .then((response) => response.json())
    .then(({ products }) => {
      const container = document.getElementById("recommended-products");

      if (products.length > 0) {
        for (const product of products) {
          const a = document.createElement("a");
          a.href = product.url;
          a.textContent = product.id;
          a.style.display = "block";
          container.appendChild(a);
        }
      }
    });
</script>

 
Mind you, I'm not very much of a js-guy, so there might be a better way of doing this, but this is what I came up with based on the Shopify-documentation and it seems to work. 

[greg-gkr]

Thank you so much for your help! It was the window.Shopify.routes.root that seemed to be tripping me up. For some reason it seemed to be coming through as an empty string, must have been a copy/pasta error on my part. I really appreciate your help on this.

The official documentation on this feels overly complicated (https://shopify.dev/docs/storefronts/themes/product-merchandising/recommendations/related-products). Your solution is nice and concise!