'Using Shopify Product AJAX API on Checkout.Liquid

Goal: To create a product upsell section within checkout.liquid in a Shopify Plus store by checking the cart's products metafields for the appropriate upsell product.

Issue: The main issue I am running into is retrieving any response from the Product AJAX API. I retrieve the handles which are stored in the metafields using this liquid code:

  var recommendation_handle = [];
  {% for line_item in checkout.line_items %}
  {% if {{line_item.product.metafields.details.recommendation}} != "" %}
  recommendation_handle.push("{{line_item.product.metafields.details.recommendation}}");
 
  {% endif %}
  {% endfor %}

I then try to get the product data from the Shopify Product API, but I just receive a 404 error.

    var storeURL = "https://www.examplestore.com";
    jQuery.getJSON(storeURL + "/products/"+ recommendation_handle[0], function( product ){
      productTitle = product.title;
      console.log(productTitle);
    });

It looks to be that the url redirects to a unique checkout url. Is there a different way I can call the Product AJAX API within checkout.liquid?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source