I'm trying to add this section to my cart drawer snippet but Im running into an issue where its not rendering out any products its getting the correct product ID but I have a feeling its down to the Section ID? I'm following this from the shopify dev docs
<div
class="product-recommendations"
data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ cart.items.first.product_id }}&limit=4&intent=related"
>
{%- if recommendations.products_count > 0 -%}
{% if recommendations.intent == 'related' %}
<h2>You may also like</h2>
{% elsif recommendations.intent == 'complementary' %}
<h2>Pair it with</h2>
{% endif %}
<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>
<script>
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);
</script>
