Show product recommendations in Shopify

In this snippet, the section content builds the general display by looping through each product returned through the products attribute of the recommendations object.

Add this code to sections/product-recommendations.liquid

<div
  class="product-recommendations"
  data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=4"
>
  {%- if recommendations.performed and recommendations.products_count > 0 -%}
    <h2>You may also like</h2>

    <ul>
      {%- for product in recommendations.products -%}
        <li class="product">
          <a href="{{ product.url }}">
            <img
              class="product__img"
              src="{{ product.featured_image | image_url: width: 300, height: 300 }}"
              alt="{{ product.featured_image.alt }}"
            />

            <p class="product__title">{{ product.title }}</p>
            <p class="product__price">{{ product.price | money}}</p>
          </a>
        </li>
      {%- endfor -%}
    </ul>
  {%- endif -%}
</div>

{% javascript %}
  const handleIntersection = (entries, observer) => {
    if (!entries[0].isIntersecting) return;

    observer.unobserve(productRecommendationsSection);

    const url = productRecommendationsSection.dataset.url;

    fetch(url)
      .then(response => response.text())
      .then(text => {
        const html = document.createElement('div');
        html.innerHTML = text;
        const recommendations = html.querySelector('.product-recommendations');

        if (recommendations && recommendations.innerHTML.trim().length) {
          productRecommendationsSection.innerHTML = recommendations.innerHTML;
        }
      })
      .catch(e => {
        console.error(e);
      });
  };

  const productRecommendationsSection = document.querySelector('.product-recommendations');
  const observer = new IntersectionObserver(handleIntersection, {rootMargin: '0px 0px 200px 0px'});

  observer.observe(productRecommendationsSection);
{% endjavascript %}

{% schema %}
  {
    "name": "Product recommendations",
    "settings": []
  }
{% endschema %}
ruesch_salley rydolph-kamilah@mailxu.com