Why does my cart show empty line item after adding new product variant via Ajax API?

Technical Q&A
1

We are creating on the fly variant of product on the product page. Right after creating this new variant, we add it to the cart with Shopify Ajax API (/cart/add.js). But at the same time when we go to the cart page, it shows an empty line item without properties of the newly created variant like zero price, no image just show quantity as below in the screenshot.

cart-image2.png
cart-image2.png1150Ă—414 14.4 KB

Sometimes it shows correct but sometimes this way. After refreshing a couple of times cart page, it brings complete properties.
Here is the video covering this issue and of API responses.
https://drive.google.com/file/d/1b2YGcyEYEZU7IA4s7eNqHTdfahT8HCDN/view

We have investigated this issue and these are the evaluations:

  1. We are running 3 Ajax APIs.
    As you can see, before AJAX API calls we are creating a new variant with admin API having price “36.79” and its id is “40160393625751”.
  2. In the 1st Ajax API call (/cart/add.js), we are adding the newly created variant in the cart with the id “40160393625751”, in response, we are getting the added variant with its complete data including price, total price, image path, and quantity. Add.js response:
{id: 40160393625751, properties: null, quantity: 1, variant_id: 40160393625751,…}
discounted_price: 3679
discounts: []
featured_image: {aspect_ratio: 1, alt: "Canvas Lunch Bag", height: 1000,…}
final_line_price: 3679
final_price: 3679
gift_card: false
grams: 454
handle: "canvas-lunch-bag"
id: 40160393625751
image: "https://cdn.shopify.com/s/files/1/0520/4954/3319/products/Lunchbag_Khaki_Front_8ae0e1f4-407d-4ac0-89e6-961b306ef351.jpg?v=1620449416"
key: "40160393625751:8f7aed7a54ec9390d98246a56d3f7405"
line_level_discount_allocations: []
line_level_total_discount: 0
line_price: 3679
options_with_values: [{name: "Color", value: "Khaki - Your Price Rs.36.79"}]
original_line_price: 3679
original_price: 3679
price: 3679
product_description: "This is a demonstration store. You can purchase products like this from United By Blue.↵Reusable, durable, and roomy. Our lunchbag has a snap-closure top that rolls down to perfect for trail snacks and lunches. Small enough to throw in any of our bags.↵↵100% Organic Cotton↵Leather Trim↵Lifetime Guarantee↵↵"
product_has_only_default_variant: false
product_id: 6839736664215
product_title: "Canvas Lunch Bag"
product_type: "Bags"
properties: null
quantity: 1
requires_shipping: false
sku: ""
taxable: false
title: "Canvas Lunch Bag - Khaki - Your Price Rs.36.79"
total_discount: 0
url: "/products/canvas-lunch-bag?variant=40160393625751"
variant_id: 40160393625751
variant_options: ["Khaki - Your Price Rs.36.79"]
variant_title: "Khaki - Your Price Rs.36.79"
vendor: "United By Blue"
  • In the 2nd Ajax API call (/cart/change.js), the newly added variant as a cart line item has complete properties like price, total price, image path, and quantity. As you can see we are highlighting in the video. Change.js response:
attributes: {}
cart_level_discount_applications: []
currency: "PKR"
item_count: 1
items: [{id: 40160393625751, properties: {}, quantity: 1, variant_id: 40160393625751,…}]
0: {id: 40160393625751, properties: {}, quantity: 1, variant_id: 40160393625751,…}
discounted_price: 3679
discounts: []
featured_image: {aspect_ratio: 1, alt: "Canvas Lunch Bag", height: 1000,…}
final_line_price: 3679
final_price: 3679
gift_card: false
grams: 454
handle: "canvas-lunch-bag"
id: 40160393625751
image: "https://cdn.shopify.com/s/files/1/0520/4954/3319/products/Lunchbag_Khaki_Front_8ae0e1f4-407d-4ac0-89e6-961b306ef351.jpg?v=1620449416"
key: "40160393625751:8f7aed7a54ec9390d98246a56d3f7405"
line_level_discount_allocations: []
line_level_total_discount: 0
line_price: 3679
options_with_values: [{name: "Color", value: "Khaki - Your Price Rs.36.79"}]
original_line_price: 3679
original_price: 3679
price: 3679
product_description: "This is a demonstration store. You can purchase products like this from United By Blue.↵Reusable, durable, and roomy. Our lunchbag has a snap-closure top that rolls down to perfect for trail snacks and lunches. Small enough to throw in any of our bags.↵↵100% Organic Cotton↵Leather Trim↵Lifetime Guarantee↵↵"
product_has_only_default_variant: false
product_id: 6839736664215
product_title: "Canvas Lunch Bag"
product_type: "Bags"
properties: {}
quantity: 1
requires_shipping: false
sku: ""
taxable: false
title: "Canvas Lunch Bag - Khaki - Your Price Rs.36.79"
total_discount: 0
url: "/products/canvas-lunch-bag?variant=40160393625751"
variant_id: 40160393625751
variant_options: ["Khaki - Your Price Rs.36.79"]
variant_title: "Khaki - Your Price Rs.36.79"
vendor: "United By Blue"
items_subtotal_price: 3679
note: null
original_total_price: 3679
requires_shipping: false
token: "0d4386c33dc64a3f98f6b2cc10b693bc"
total_discount: 0
total_price: 3679
total_weight: 454
  • In the 3rd Ajax API call (/cart.js), we are getting the cart line items. The problem is all here. The newly created variant with the id “40160393625751” that is added in the cart with API call (/cart/add.js) made a line item but without all properties ready like price, title, image. It just shows the id and quantity at the start and after some time again this ajax API (/cart.js) brings the complete properties of this new variant added or refreshing couple to times cart page with an unspecified time taken. Cart.js response:
attributes: {}
cart_level_discount_applications: []
currency: "PKR"
item_count: 1
items: [{id: 40160393625751, properties: null, quantity: 1, variant_id: 40160393625751,…}]
0: {id: 40160393625751, properties: null, quantity: 1, variant_id: 40160393625751,…}
discounted_price: 0
discounts: []
featured_image: {aspect_ratio: null, alt: null, height: null, url: null, width: null}
final_line_price: 0
final_price: 0
gift_card: false
grams: 0
handle: null
id: 40160393625751
image: null
key: "40160393625751:8f7aed7a54ec9390d98246a56d3f7405"
line_level_discount_allocations: []
line_level_total_discount: 0
line_price: 0
options_with_values: null
original_line_price: 0
original_price: 0
price: 0
product_description: null
product_has_only_default_variant: false
product_id: null
product_title: null
product_type: null
properties: null
quantity: 1
requires_shipping: null
sku: null
taxable: null
title: null
total_discount: 0
url: ""
variant_id: 40160393625751
variant_options: null
variant_title: null
vendor: null
items_subtotal_price: 0
note: null
original_total_price: 0
requires_shipping: false
token: "0d4386c33dc64a3f98f6b2cc10b693bc"
total_discount: 0
total_price: 0
total_weight: 0

There might be a problem in response to the Cart.js API for a couple of seconds preparing a cart line item.
If anyone has already faced this issue and have figured out any solution then please share your solution.

3 Likes
2

Yes, I am also facing this issue and did not hear any back from Shopify support yet.

2 Likes
3

I faced the same issue while working for a client still not able to find the solution. Whenever a variant is created at runtime we face this issue. Looking forward to hear form Shopify support.

4

A couple of weeks before I was creating a variant through my app dynamically and added it with ajax API in the cart, after adding it in the cart when i instantly move to the cart page, there was an empty line item.
After refreshing the cart page for some time it correctly loaded in the cart. This was a similar issue as you are mentioning.
If you found any solution do let me know as well. Hope Shopify support will address this issue and give a solution if it’s at their end.

5

I had this issue as well and detailed why the problem happens here:
https://community.shopify.com/c/Shopify-APIs-SDKs/Price-for-a-newly-created-variant-shows-after-10-20-seconds-on/td-p/909113
I also explain my solution as well as another someone told me about.

Check it out!

6

Thanks for the reply and coming up with a possible solution,
but waiting for 10 to 20 seconds and then redirecting is not feasible in this scenario. Fixing the time limit for delay might fail becuase the variant to be ready completely could take more than 20 seconds sometimes on the cart page.

We are hoping to get this fix from Shopify as this problem is completely at their backend.

1 Like
7

@jenzy345

I do totally agree that this is a Shopify issue and I feel that is not good for the operation to take so long on their back end. I also want to contact Shopify directly about this or log some issue on their Github or somewhere for it to be addressed.

but waiting for 10 to 20 seconds and then redirecting is not feasible in this scenario. Fixing the time limit for delay might fail because the variant to be ready completely could take more than 20 seconds sometimes on the cart page.

Just to clarify, the solutions I detailed in the post I tagged were:

1.) Cover the missing values with DOM Manipulation(Not going to work for anyone making a public app that will touch lots of different themes).

2.) Make a web hook in your app that listens on your product and waits for the item to be processed in Shopify’s back end, then sends a response to your storefront to redirect. This solution will wait for as long as it takes(1 second or 20+ seconds), then redirects.

3.) Create dummy products that filled in the cart temporarily( a solution given by Paul Newton) but I am not sure to implement such a thing.

Solution 2 is also not great because almost no customer is going to wait potentially 20+ seconds.

Solution 3(if possible, idk I haven’t checked myself) could work really well.