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

<ul>
<li>In your JS, listen for the form's submit event </li>
<li>Prevent the default submit </li>
<li>Ajax submit the form's data to the Commerce <code>addToCart</code> controller </li>
<li>Grab the result of this call... </li>
<li>If error - show error </li>
<li>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 <code>cart</code> variable in that will have the updated cart data)</li>
</ul>

CC BY-SA 3.0
2016-10-14T22:13:47.837Z
2016-10-18T11:39:34.267Z
2016-10-18T11:39:34.267Z
Jeremy Daalder
<p>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.</p>

<p>I'm using <a href="http://git.blivesta.com/drawer" rel="nofollow">http://git.blivesta.com/drawer</a> for the menu implementation</p>

<p>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'.</p>

<p>Ideally, I would like this to be possible, without reloading the page.</p>

<p>Has anyone implemented anything similar? </p>

<plugin-craftcommerce>
Trigger off canvas menu upon adding product to cart
# Trigger off canvas menu upon adding product to cart

(Asked by: username_0 on 2016-10-14)

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?

**Tags:** plugin-craftcommerce


---

## 1 answers

### Answer by username_1 on 2016-10-14. Score: 2

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)


---

