Displaying Products in Checkout by Fetching Data through API

Highlighted
Tourist
4 0 1

Purpose: Display certain products ( either by tags, by title or by recommendation ) in the Checkout Page.

I tried to create a list of products in the checkout page using the product object but it looks like it's not recognized in the checkout.liquid. So I tried the Ajax APIs which does not need authentication. I was able to fetch data from cart.js using this code: 

jQuery.ajax({ url: '/cart.js', dataType: 'json' })

 and while these codes are present inside the <head></head>:

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}

 

Issue: Now, I tried fetching from Products by using the codes found here: https://shopify.dev/docs/themes/ajax-api/reference/product-recommendations , however I can't make it work. I even replaced the product_id value to one of our products' in the fetch url code but still it's not fetching:

jQuery.getJSON("/recommendations/products.json?product_id={my product's id}&limit=4", function( response ) {
 var recommendedProducts = response.products;
 if (recommendedProducts.length > 0) {
   var firstRecommendedProduct = recommendedProducts[0];
   alert(
     "The title of the first recommended product is: " +
       firstRecommendedProduct.title
   );
 }
});

 

Thank you for your help.

0 Likes
Highlighted
Shopify Partner
41 5 13

Are you trying to do this in the checkout.liquid, or cart.liquid?

0 Likes
Highlighted
Tourist
4 0 1

Hi Ken, I'm trying to do this in the checkout.liquid

0 Likes
Highlighted
Shopify Partner
41 5 13

That should work. Are you replacing {my product's id} with an actual id of a product? Your code should look like the code below, with a numeric product id instead of {my product's id}.

 

jQuery.getJSON("/recommendations/products.json?product_id=334342160424&limit=4", function( response ) {
 var recommendedProducts = response.products;
 if (recommendedProducts.length > 0) {
   var firstRecommendedProduct = recommendedProducts[0];
   alert(
     "The title of the first recommended product is: " +
       firstRecommendedProduct.title
   );
 }
});

 

Replace 334342160424 with one of your shop's product's id. 

0 Likes
Highlighted
Tourist
4 0 1

Yes, I am replacing the {my product's id} with an actual product id but it's still not working. Where should I place the GET JSON script? Should it be within the <head> tag or can I place it in any line as long as it's inside the <script> tag?

0 Likes
Highlighted
Shopify Partner
41 5 13

@pepperj any chance that you can post the entire checkout.liquid code?

0 Likes
Highlighted
Tourist
4 0 1

Hi @kenput3r , I found the issue. I'm was using the wrong product id. The code was working but it's not fetching the data because the product id that I was using was actually the cart item's id ( data.items[0].id ). After using the actual product id ( data.items[0].product_id ) I am now able to receive API responses from the recommendation JSON. Thank you for your help. 

1 Like