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

NagoyaDev
Excursionist
26 1 0

@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. 

Screen Shot 2021-06-04 at 12.47.40.png

 

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.

 

0 Likes
NagoyaDev
Excursionist
26 1 0

@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

 

0 Likes

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.

SPO - SEO App to research keywords & edit social link preview
BYOB - Build Your Own Bundles
0 Likes
NagoyaDev
Excursionist
26 1 0

@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.

Screen Shot 2021-06-07 at 10.10.21.png

 

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.

Screen Shot 2021-06-07 at 10.09.07.png

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.

0 Likes

@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

SPO - SEO App to research keywords & edit social link preview
BYOB - Build Your Own Bundles
0 Likes
NagoyaDev
Excursionist
26 1 0

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.

 

 

0 Likes
NagoyaDev
Excursionist
26 1 0

@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.

Screen Shot 2021-06-08 at 10.51.00.png

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);
  }) })

 

 Screen Shot 2021-06-08 at 10.50.32.png

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.

 

 

0 Likes

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.

SPO - SEO App to research keywords & edit social link preview
BYOB - Build Your Own Bundles
0 Likes
PaulNewton
Shopify Partner
2775 155 513

@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.

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
sagarkohli
Tourist
5 0 3

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.

 

0 Likes