Shopify/Timber

Ajax cart: remain on page after adding to cart, but don't open drawer

Closed this issue · 2 comments

Question: let's say I want to have the customer remain on the product page after adding to cart, but I don't want to use the cart drawer. The cart count should update and there should be a success message, but the drawer shouldn't open.

The way I've been handling this is just switching in carolineschnapp's ajaxify-cart, which already works the way I want, instead of using the Ajax cart that comes with Timber and trying to disable the drawer part/enable the other features.
https://github.com/carolineschnapp/ajaxify-cart

This seems to work fine. Is this the preferred way to do it, or is there some simple way to do it using the Timber Ajax cart that I'm missing?

Thanks!

You can certainly swap things out for Caroline's version with no issues. The alternative is to leave the JS as is, but disable the part that tells the drawer to open up.

Right now, when you open the drawer or add a product from the product page, the same function runs - this one. You'll still want that to run when the drawer is opened from the 'cart' button in the top right, so we'll have to go a slightly different route.

On line 264 of ajax-cart.js, change ShopifyAPI.getCart(cartUpdateCallback); to ShopifyAPI.getCart(productAddedCallback);.

Then create a new function below that like this:

productAddedCallback = function (cart) {
  // Update quantity and price
  updateCountPrice(cart);
};

This makes sure the cart details are updated (cost and number of items), but doesn't build the cart which in turn would open the drawer. If you try this as is, you'll have a JS error, as the last thing you need to do is add productAddedCallback to line 180. This is needed because the file uses 'use strict';.

Great, thanks so much for the detailed answer!