How to make Product recommendation for cart drawer and cart page in dawn theme

[amisha-29]

i want to make product recommendation for my cart page and cart drawer please let me know. If anyone know the video for better understanding then please let me know

[devcoder · Accepted solution]

Hii @amisha-29 ,

You can add recommendations product for cart page and drawer, use below steps.

1.Add below code in your cart.liquid file(depending on your theme)

<script>
  document.addEventListener('DOMContentLoaded', () => {
    fetch('/cart.js')
      .then(response => response.json())
      .then(cart => {
        if (cart.items.length > 0) {
          const productId = cart.items[0].product_id;
          fetch(`/recommendations/products.json?product_id=${productId}&limit=4`)
            .then(res => res.json())
            .then(data => {
              const container = document.getElementById('recommendation-products');
              if (data.products.length > 0) {
                data.products.forEach(product => {
                  const productHtml = `
                    <div class="recommended-product">
                      <a href="${product.url}">
                        <img src="${product.featured_image}" alt="${product.title}" height="114" width="150"/>
                        <p>${product.title}</p>
                        <p>${product.price}</p>
                      </a>
                    </div>`;
                  container.innerHTML += productHtml;
                });
              } else {
                container.innerHTML = '<p>No recommendations found.</p>';
              }
            });
        }
      });
  });
</script>

2.add below html code where you want to show recommendations products

 <div id="cart-recommendations" class="cart-recommendations">
    <h2>Recommended for you</h2>
    <div id="recommendation-products"></div>
  </div>

3. See example below implemented in my store

If Helpful?  Like & Accept solution!

Shopify Expert | Apps & Embedded App SDK | Custom Storefront | Headless & Storefront API| Liquid, JS, Shopify CLI
Email at - devcoderexpert@gmail.com