Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-10-14T22:13:47.837Z
Answers.LastActivityDate: 2016-10-18T11:39:34.267Z
Answers.LastEditDate: 2016-10-18T11:39:34.267Z
Answers.UserDisplayName: Jeremy Daalder
Body: <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>
  
Tags: <plugin-craftcommerce>
Title: Trigger off canvas menu upon adding product to cart
ThreadText: # 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)
  
  
  ---
  
  