Add variant and add this variant into the cart

seb87
Shopify Partner
17 0 16

We have a Product Options App and create a new variant with an individual price. After that we add this variant into the cart.

Now we have the problem that sometimes we have a delay in cart. Variant was added and Shopify also know this variant and add them but the title and the price are not display in cart. 

Please check my video and see this bug in action. The whole thing is not easy to reproduce. The bug occurs only sometimes but it causes big problems for all apps with dynamic prices.

Have someone the same problem and can help me? We have a workarround and use Javascript to refresh the row items when the API deliver the variant informations. But this is not very smart.

Here are my steps:

1) Add Variant

admin/api/2020-10/products/6800010707153/variants.json

 

{
  "variant": {
    "option1": "test variant 5",
    "price": "38.00",
    "inventory_policy": "continue"
  }

 

 

2) Add this variant into the cart

 

$.ajax({
    url: '/cart/add.js',
    type: 'post',
    dataType: 'json',
    data: 'quantity=1&id=40330847420625',
    success: function (cart){
        window.location.href = '/cart';
    }
});

 

 

Replies 6 (6)
Keyurp
Excursionist
27 0 3

Hello @seb87 


I have checked and I have faced the same issue but the solution is that If you create a variant in Shopify then you will have to wait 2-3 seconds then add a variant into the cart.

I think you are using jquery/javascript to create a variant and cart so please use the 'setTimeout' function once the variant is created. So it will work.

Thanks & Regards
Keyur Prajapati

 

sillycube
Shopify Partner
671 16 96

From this thread, look like Shopify is doing indexing after the variant is created. So the new variant cannot be loaded. Shopify is loading something at the back anyway. 

Waiting is not useful because it takes 10 - 15s for the loading to complete. Even Shopify gives me the new variant id and I add it to the cart with cart ajax, it cannot be loaded on the cart page.

I am looking for a fix right now. Hope Shopify can fix the issue

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
alvaro-rs
Shopify Partner
3 0 0

Hi, I'm currently having this issue and I was wondering: is there a way in the cart page to check if the variant data is missing?

I was thinking to use cart attributes only in those scenarios, like a json with the product name and the price that I can use as a fallback. It is probably too complex but I don't think the cart with a floating $0 is an acceptable user experience.

sillycube
Shopify Partner
671 16 96

@alvaro-rs 

Yes, you can check the cart with a get request. Use setInterval to check if there is an item with no product price, title & id per second. 

The simple way is to wait for 5 - 10s. 

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
seb87
Shopify Partner
17 0 16

A workaround is to check the cart and set the price via JavaScript.

But this is a big pain when you develop a public app and use this in different themes. You need the query selector to get the price and the subtotal to replace it until shopify have reindex the product.

This not feels very professionell 😞

This is a reason why some of our clients see shopify not as a professionell ecommerce solution. 

sillycube
Shopify Partner
671 16 96

@seb87 

Given that there are more than a hundred themes, and they are kept updating, I don't know how I can use js to target elements with different id / classes on different themes. 

It's going to be a mess if I have to use the script tag on the cart page. Now, I already find it hard to integrate with different themes, apps, inventory systems.

I would not say that it's a fix. It's just trying to monkey patch the frontend to hide the error

My fix is to simply wait longer for Shopify loading. I prefer to use UX hacks to distract the customers' attention for a few seconds

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview