Price for a newly created variant shows after 10-20 seconds on store

[sagarkohli]

Hi,

We have created a public app to help Shopify store owners to allow their customers to buy products and the price is dynamically calculated at the time of the checkout process based on the inputs entered on the page. For this, we use the Shopify public API to create a new variant with the dynamically calculated price. However, we do see that when we create a new variant using API and then to the cart, the price on the cart page shows the price as $0 and no image for up to 10-15 seconds. Then if we refresh that page couple of times, it shows the correct price. It seems like a delay in the system somewhere from the time when the variant is created and when that information is available on the store front end. 

Is there a solution to this or any recommendations?

[BoxUp]

Hey,

Did you ever hear back from Shopify on this?

[sagarkohli]

No I haven't. Do you know any workaround / solution ?

[NagoyaDev]

I created a similar functioning custom app for a client in Japan and am experiencing a similar situation.

I can see I get a response back instantly from the API showing the product was created but it will take 5-15 seconds to go through some processing before it appears in the cart.

Did you ever figure how to get it to speed up?

My solution was just to add a loading indicator that holds the product page for about 10 seconds before it goes to the checkout page but still sometimes that's not long enough.

[sillycube]

I am also having this problem. No matter how I try to use cart ajax to add the new variant to cart, the problem still exists. I get the new variant id but the title, image and price are gone.

When post request for add is finished, the new item is returned. I don't see any problem in this item

I guess it's a problem in the Shopify backend

[NagoyaDev]

I believe it is their backend. I'm curious if it would be possible to make a request for them to review this slow update of information.

[sillycube]

@NagoyaDev 

Via the Partner support live chat, I submitted another request for 2 weeks with no response at all. The issue is about order edit. I try to follow up but the agent just asked me to wait. 

You can try but I've lost my hope with partner support

[NagoyaDev]

@sillycube 

Can I ask what your temporary solution is? I just have a timer set to 10 seconds to give the backend time to process the item but still, sometimes that is not enough time. If it's not enough time, I overlay a message over the cart saying some data didn't load correctly so they need to reload the page.

I did some poking around checking network requests to see if I could have the page wait until there is some kind of message from Shopify's backend saying the product was loaded properly, but no dice. The only thing I get is the return message from the POST request but that doesn't help anything.

[sillycube]

There is no temporary solution yet. I didn't set a long wait time to wait for the changes. If the wait time is too long, the visitors will just go away. This is not good for conversion.

I think you can only ask the customer to refresh the cart page.

[NagoyaDev]

You have a good point... I think that will happen as well. 10-20 seconds is a long time to wait.

[NagoyaDev]

@sillycube 

So I believe have pinpointed the issue. Previously, I thought that data was taking too long on Shopifys end to process the data but it actually happens pretty instantly. I checked by sending a POST request and then checked what was returned from Shopifys API before directing to the cart page.

I could see that a product variant was created with a price and image and everything. However, sometimes when directed to the cart page, no price or image was available. (please see attached image. The console log on the right is the data returned from Shopifys backend after the POST request to add to the cart). The left picture is my cart showing 0 qty. 

This tells me that the issue stems from the store's server-side rendering of the page. For some reason, that information is slow to load sometimes. 

I think a potential solution is instead of relying on Liquid to load the data is to make a GET request/ Graphql query and get the data and load it in. This is untested and I have no idea if it will work but it could be worth looking into. That, or put on a loading indicator and refresh the page until the data appears.

[NagoyaDev]

@sillycube 

I am going to try this and let you know if it works.

I am planning to use the AJAX API and call the cart on the cart page because I think all the data will be there already, then loop through it and display the data myself instead of waiting for Shopify's server-side rendering to load the data properly.

https://shopify.dev/docs/themes/ajax-api/reference/cart#get-cart-js

[sillycube]

Thanks @NagoyaDev , please keep me updated. FYI, bundle builder is also using this technique but it doesn't have this problem. You can test its demo store if necessary.

[NagoyaDev]

@sillycube 

I seem to have to the issue fixed now!

My solution was to take the response back that I get from my app backend and save the price as well as the product image into localStorage. Then, if the price and image are not showing yet in the cart, I grab those values from localStorage and replace that information over the missing price and image to act as a visual placeholder while the cart is still processing the newly added product.

I thought this might still create an issue if the customer proceeded to the payment page because the cart might still show a 0 priced item. However, it seems the cart page will hang while it is still processing and adding the item to the cart. Once it is completed loaded into the cart, it redirects to the payment page. 

I probably manually tested this 100 times and NEVER had an instance when the item was still 0 priced in the payment page.

In this image, I have an instance where the price came back as 0. In my console.log statement at the top it says "No price". So, I wrote a condition to replace the zero price and image with the correct info.

Here is a console of the cart information(I got this information using the AJAX API) . As you can see the price is zero even though I added the item to the cart on the product page. For some reason Shopify's back end is very slow to load the item into the cart.

This is fine though. The product is still be added to the cart. Next, every time I went to the payment page, the correct information was always displayed correctly no matter how many times I tested it. I noticed varying loading times from the cart page to the payment page. I believe this is because the cart was still processing the added item and once it was finished, it would then proceed.

Feel free to try out my method. I believe it should work fine now though.

[sillycube]

@NagoyaDev 

Thanks for sharing your fix. Your case is easier than mine since you're only handling 1 theme. You can search the DOM for the error line item with id. 

My app is installed in different stores. It's much harder for me to update the DOM.

I guess I can only use GET /cart.js to check the error line item. If the error line item disappears, reload the page

[NagoyaDev]

Sorry I couldn't help solve you issue.

Someone mentioned webhooks as a possible solution so that you could listen for the correct data to appear in the cart, then trigger a page reload.

Maybe this might be worth reviewing? I think it still relies on waiting which could take a long time but it might be more elegant than requiring the user to reload the page themselves.

https://shopify.dev/docs/admin-api/rest/reference/events/webhook

They have an event for listening to changes in the cart.

[NagoyaDev]

@sillycube 

So I thought I might show you exactly where the breakdown seems to happen. I talked with someone in Shopify's Developer slack group and he explained to me pretty nicely the issues at hand.

For example:

As I explained before I can create a variant, then push it to the cart and see the returned data showing a price and an image but still show up as zero price in the cart.

Here is a case where the item in the cart came back as a zero price(Ignore the first product in the cart, the price is actually zero but I changed the price to actual price with DOM manipulation). (First image) I displayed the Variant IDs at the top of the cart.

The next image is me using the AJAX API and calling the product and logging its variant data. If you look at the first ID(40240781656223) in the first image it is not logged in the second image even though it appears in the cart and has an ID. The item has still not been fully created yet.

  APICall('/products/sticker.js', 'GET').then((data) => { data.variants.forEach(variant => {
    console.log(variant);
  }) })

 

Then, if I log the cart data It will show a zero price(of course).

This seems to happen because after the variant is created and added to the cart, it only returns something like a promise of what the data will be and not the actual variant or cart data.

That's why if I go to checkout I sometimes get an incomplete item because it actually hasn't been added yet and I'm only getting back some partial data.

So I think a good option for you and anyone building a similar app that will be used on many different themes and can't just cover over the missing data is to set up a webhook in your app. You can wait for a response showing your item has been loaded and then proceed to checkout.

[sillycube]

I just use script tag + cart ajax (GET) to check for the error item. When the error item appears, the product title, id, image, line item price, line item total price are gone. But it's not 100% the case. Sometimes, cart ajax returns correct data, and the broken line item still appears. But it's hard to find this item with the document selector in DOM. 

When the error line item is found, reload the page with js after 2s. 

I'll just leave it here. Hopefully, it will help other people who are stuck by the issue.

[SanaMinatozaki]

But how do you handle cart subtotal? Line item price is still zero so the cart subtotal might not be correct

[NagoyaDev]

@SanaMinatozaki 

What I do after replacing all the missing prices is to get all the item prices, total them, fix price formatting and replace the original subtotal with the new total using DOM manipulation.

[NagoyaDev]

Also, when the user goes to actually check out, the car page will hang and load until all of the correct pricing has been completely added to the cart so you will never have an instance where a customer can checkout with a zero-priced item.

[sillycube]

Even I try to use GraphQL (product variant create) to create the new variant. It still takes a long time to show the correct data on the cart page. 

Hope Shopify can improve it. It's the backend issue that app developers cannot control. And it's seriously affecting the conversion rate on the cart page

[SanaMinatozaki]

@NagoyaDev In another of your posts, you mentioned that @PaulNewton 's method would work although you didn't try it.

I've read his post but couldn't understand. Can you elaborate on this one?

[PaulNewton]

@SanaMinatozaki if you mean my post about a dummy product it's just that, create an unpublish product with placeholder data.

When the custom stuff comes in push that the existing dummy product basically skipping waiting on a roundtrip if you were to create everything at once.

Never seen if it's done in the wild though since its kinda the reverse of what a lot of apps and customizations do: a dummy cart , or loader preventing checkout until the product is ready.

[PaulNewton]

---

@sillycube wrote:

Thanks NagoyaDev , please keep me updated. FYI, bundle builder is also using this technique but it doesn't have this problem. You can test its demo store if necessary.

---

@sillycube Could you elaborate on the steps to see that is in fact what they are doing? For the wine demo looking through the json ,of the interstitial /products, most the products|variants are pre-existing so I'm not able to see a real time product creation. It's only the line item properties that are dynamic from what I can see.

 There is a something to notice for these situations updates are fast when you've generated all the products once from all the combinations requested over time.

So you could take that idea back to the start, have a dummy product(s) created and that is what you push data to for presentation purposes since updates should be faster, meanwhile another process finishes the creation and updating of the product and it's variant.

[sagarkohli]

Custom Price Calculator(https://apps.shopify.com/custom-price-calculator) now has a fast checkout mode which has been enabled for more than 100 of their stores on request and now the customers don't have to wait for 15-20 seconds due to Shopify delays. If anyone of you are still looking for it and have not been able to find for your store, then do give a try.

[NagoyaDev]

@sagarkohli I actually based my app around the functionality of this app and actually yes you do need to wait 10-20 seconds when you use it. 

The app will actually console log how long it takes and the three times I tested it, they all took about 15 seconds