[Flow Theme] Open Cart Slider using custom ajax add to cart script

Retired Boards Appdev Store Design
, , ,

Topic summary

A developer has implemented custom AJAX add-to-cart functionality on a Shopify store using the Flow theme but encounters issues with opening the cart slider drawer.

Current Problem:

  • Cart slider opens successfully only on the first add-to-cart action
  • Subsequent attempts fail after removing products or adding more items
  • The drawer trigger stops working after initial use

Technical Details:

  • Uses /cart/add.js endpoint with POST request
  • Attempts to programmatically trigger cart drawer button click after successful AJAX response
  • Targets drawer button using .js-drawer-open-right-link selector
  • Code includes success/error handlers with console logging

Status:
The issue remains unresolved. The developer is seeking help to fix the cart drawer behavior so it consistently opens after each add-to-cart event, not just the first one.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hello All,
I have created custom ajax add to cart functionality in my store and I want to open the slider cart after successful add to cart event. I have achieved it using the help from other discussion but it only works for the first time. If you remove the products from cart and try to add again then it won’t work or if you want to add more to it then also it won’t work. I am using shopify flow theme.
$.ajax({
url: ‘/cart/add.js’,
type: ‘post’,
dataType: ‘json’,
contentType: “application/json”,
data: JSON.stringify({ ‘items’: itemsToAdd }),
success: function(response) {
console.log(‘Both products added’, response);
var cartDrawerButtonSelector = “.js-drawer-open-right-link”;
var cartDrawerButton = document.querySelector(cartDrawerButtonSelector);
cartDrawerButton.click();
},
error: function(xhr, status, error) {
console.error(‘Failed to add products’, xhr.responseJSON);
}
});
Please help me out on this.
Thanks to all.