When a user clicks 'Add to Cart', rather than redirecting them to the cart page, I would like to trigger an off-canvas menu that contains the contents of their shopping cart.

I'm using http://git.blivesta.com/drawer for the menu implementation

The menu can be toggled/opened with javascript, but I'm unsure as to how to trigger the opening of the menu when a user clicks 'Add to Cart'.

Ideally, I would like this to be possible, without reloading the page.

Has anyone implemented anything similar?


The basic recipe is this, and you can definitely do it without a page reload:

  • In your JS, listen for the form's submit event
  • Prevent the default submit
  • Ajax submit the form's data to the Commerce addToCart controller
  • Grab the result of this call...
  • If error - show error
  • If cart - JS pass the cart's data off to your drawer system and print out the cart that way (that's the quickest way, or you can just ajax load in a Craft template to where you have your drawer, the cart variable in that will have the updated cart data)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.