Add products via AJAX API on Checkout Page

New Member
3 0 0
I need to add products to the cart depending on the shipping method. So doing this is not possible before Shipping Method page on Shopify. 
 
I know that products can be added via AJAX api, but I am noticing a weird behavior. The scenario is something like:
 
On Payment page in Checkout page :
  • Add products via AJAX and then go to payment page - added products are not in cart anymore
  • Add products via AJAX and trigger reload via JS and then go to payment page - added products are in cart now

I don't know why Shopify overrides cart on payment page, if I don't reload. So looking for a solution that works without reloading the whole page.

 

To reproduce the bug, you can check at sample Shopify website for AJAX cart

 

https://mayert-douglas4935.myshopify.com/pages/api

 

  1. Add some product to cart.
  2. Go to checkout page
  3. Add another product to cart via AJAX api ( code given below )
  4. Get Cart via AJAX to verify that item was added.
  5. Proceed to next page and your added products via AJAX are gone.
Checkout.$.ajax({
    url: "/cart/add.js",
    type: "POST",
    data: JSON.stringify({
        quantity: 1,
        id: 794864101
    }),
    dataType: 'json',
    contentType: 'application/json',
});

Get Cart to verify 

Checkout.$.getJSON('/cart');

After adding and verifying products, just go to next Checkout step and added products via AJAX will be gone.

@Jason @KarlOffenberger kindly shed some light if you can have a look.

 

0 Likes
Highlighted
Shopify Expert
9786 86 1531

A cart is not a checkout so keep that distinction in mind as you develop for carts, checkouts and orders.

Your example doesn't show anything being added in the checkout flow so there's some conjecture here. Got an example where you have working checkout code in place?

 

I don't see this as a bug at the moment.

 

It's also worth noting that there's many cases that a cart won't exist so hopefully you've got a plan for when that happens (eg, draft order checkouts, other channels). AJAX API can't post to a cart that doesn't exist.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
3 0 0

Thank you for the swift response. Yes I am aware of the difference between Cart and Checkout and my code only triggers when someone reaches the Shipping Method step of Checkout. So a user cannot reach Shipping step without any product in Cart. I cannot share the original URL , but you can re-create the same behaviour using information below.

 

Go to https://mayert-douglas4935.myshopify.com/407092/checkouts/0cea777011fd7771a6aafb48103913b5

It should be a Checkout with 1 item. Fill in info and go to shipping step

Now in browser console, add the following code

This should add another product. 

 

Checkout.$.ajax({
    url: "/cart/add.js",
    type: "POST",
    data: JSON.stringify({
        quantity: 1,
        id: 794864101
    }),
    dataType: 'json',
    contentType: 'application/json',
});

 

Get Cart to verify 

Checkout.$.getJSON('/cart');

GetCart would show 2 products but when you go to payment page, there is only 1 product.

0 Likes
Shopify Expert
9786 86 1531

There's no cart on that link you sent so that use case I noted earlier applies.

 

Ignoring that, when on the shipping method page the methods that are returned are based on what is in the cart at that point in time. You shouldn't be trying to jump to the next step if you just added another product in the background. Adding the new product will invalidate the shipping methods so they need to called again. This needs a refresh.

 

You can still do what you need but you'll need to adjust the flow or think about things in a different way. Now I have no idea what kind of rates the end result will have but you could attempt to capture the kind of shipping method earlier and use that info to hide shipping methods. Also remember that Shopify Scripts has the ability to remove/show shipping methods so the existence of some specific item in the cart can help you only show one single method. 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
3 0 0

There's no cart on that link you sent so that use case I noted earlier applies.

 

Don't worry about that. Cart Exists on live site..

 

You shouldn't be trying to jump to the next step if you just added another product in the background. Adding the new product will invalidate the shipping methods so they need to called again. This needs a refresh.

 

This makes sense but page refresh just kills the user experience.

 

You can still do what you need but you'll need to adjust the flow or think about things in a different way. Now I have no idea what kind of rates the end result will have but you could attempt to capture the kind of shipping method earlier and use that info to hide shipping methods. Also remember that Shopify Scripts has the ability to remove/show shipping methods so the existence of some specific item in the cart can help you only show one single method. 

 

All this is a part of bigger problem and I am already using Shopify Scripts too.

 

Problem:

Allow user to select different Packaging Type for few selecetd products

 

  • Standard
  • Premium

Standard packaging is free. Premium packaging add a flat rate.

For this, I added new shipping method and hide / show it based on products if those are eligible for Premium packaging.

 

If a user selects Premium packaging, then also add an additional product to his cart. ( this is the part where I am using AJAX api)

0 Likes