Shopify Question posted in
The Shopify help center can be found here.

Shopify / Liquid – inserting product recommendations onto cart page

I want to add product recommendations on my shopify cart page.

I have added:
{% section 'product-recommendations' %} in the cart.liquid file.

This file consists of:

{%- if section.settings.show_product_recommendations -%}
  {%- if recommendations.performed -%}
{%- if recommendations.products_count > 0 -%}
      <div class="product-recommendations__inner">
        {%- if section.settings.heading != blank -%}
        
          <div class="section-header">
            <h2>{{ section.settings.heading | escape }}</h2>
          </div>
        {%- endif -%}
        <ul data-slides="8" id='product-slider' class="grid grid--uniform grid--view-items product-slider">
          {%- for product in recommendations.products -%}
            <li class="grid__item small--one-half medium-up--one-quarter">
              {% include 'product-card-grid', max_height: 250, product: product, show_vendor: section.settings.show_vendor %}
            </li>
          {%- endfor -%}
        </ul>
      </div>
    {%- endif -%}
  {%- else  -%}
    <div class="page-width recommendations-container" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations"></div>
  {%- endif -%}
{%- endif -%}

It is being inserted into the page (I can see the container), but nothing actually renders other than the container margin/padding. I suspect its because I’m not on a product page.

How would I make this work on the cart page?

Tags:

2

Answers


  1. 0

    The reason why it did not work was same that you concluded, that it was not a product page. However, given the product ID we can get the recommendations of any product. The Shopify Docs for Recommendations object state

    The recommendations object returns products only if it’s used in a
    theme section that’s rendered through an HTTP request to
    <base_url>?section_id=<section_id>&product_id=<product_id>. section_id
    is the ID of the section where the recommendations object is being
    used, and product_id is the ID of the product you want to show
    recommended products for. To determine the base_url, use the
    routes.product_recommendations_url attribute. Using the routes object
    rather than a hardcoded URL ensures that the product recommendations
    load in the correct locale.

    So, unlike Shopify product page, where product object is globally available, you have to pass product ID from Shopify cart items. To do so, add a new section named product-recommendations-cart and include it in your cart template.

    {% comment %}
  The contents of the cart.liquid template can be found in /sections/cart-template.liquid
{% endcomment %}

{% section 'cart-template' %}
{% section 'product-recommendations-cart' %}

    Then inside product-recommendations-cart section

    {%- if section.settings.show_product_recommendations and cart.item_count > 0 -%}

{%- for item in cart.items -%}
    {%- assign product_rec = item.product -%}
{%- endfor -%}

  {%- if recommendations.performed -%}
    {%- if recommendations.products_count > 0 -%}
      <div class="product-recommendations__inner">
        {%- if section.settings.heading != blank -%}
          <div class="section-header text-center">
            <h2>{{ section.settings.heading | escape }}</h2>
          </div>
        {%- endif -%}
        <ul class="grid grid--uniform grid--view-items">
          {%- for product in recommendations.products -%}
          
           {%- assign display = true -%}
            
            {%- for item in cart.items -%}
                {%- if item.product.id == product.id -%}
                    {%- assign display = false -%}
                {%- endif -%}
            {%- endfor -%}
          
          {%- if display == true -%}
            <li class="grid__item small--one-half medium-up--one-quarter">
              {% include 'product-card-grid', max_height: 250, product: product, show_vendor: section.settings.show_vendor %}
            </li>
          {%- endif -%}
          
          {%- endfor -%}
        </ul>
      </div>
    {%- endif -%}
  {%- else  -%}
    <div class="page-width" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product_rec.id }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations"></div>
  {%- endif -%}
{%- endif -%}
{% schema %}
{
  "name": {
    "en": "Product Recommend Cart"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "show_product_recommendations",
      "label": {
        "en": "Show dynamic recommendations"
      },
      "info": {      
        "en": "Dynamic recommendations change and improve with time. [Learn more](https://help.shopify.com/en/themes/development/recommended-products)"
      },
      "default": true
    },
    {
      "type": "text",
      "id": "heading",
      "label": {
        "en": "Heading"
      },
      "default": {
        "en": "You may also like"
      }
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": {
        "en": "Show vendor"
      },
      "default": false
    }
  ]
}
{% endschema %}

    Here, I added the condtion to display only if cart has some items and used the last product in cart to get recommendations.

    As per your comment, I have added the condition to skip products that are already in cart. You can improve this using a string of product ids in cart instead of looping all cart items again and again.

    If you need more control, use Product recommendations with the Product Recommendations API products response.

    Login or Signup to reply.
  2. 0 
    jQuery.getJSON("/recommendations/products.json?product_id=" + item.product_id + "&limit=6&section_id=custom-cart", function(response) {
  var recommendedProducts = response.products;
  $.each(recommendedProducts, function(index,recommended){
    console.log(recommended)
  });
});

    You can also create a cart recommendations using jQuery.

    Here I added the jQuery code. In this ajax call response you will get the recommendations product JSON.

    Instead of item.product_id you can use your cart item id and instead of custom-cart you can add you section name where you html is created.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search