> For the complete documentation index, see [llms.txt](https://docs.angle3d.co/angle3d-configurator-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.angle3d.co/angle3d-configurator-documentation/custom-add-to-cart.md).

# Custom Add to Cart

***

## 🛒 Custom Add to Cart Event Listener

By default, Angle3D Configurator navigates users to the cart page after they click the **Add to Cart** button.

If your theme uses a **cart drawer**, you can override this behaviour using our custom event listener. This allows you to stay on the current page and handle the Add to Cart logic manually.

*(Please note that the "Add to Cart" action is performed anyway, only the navigation to the cart page is deactivated, so you can implement your own custom logic)*

Follow the below steps:

1. In the app, go to Customizer Settings > Storefront > Snippet UI Settings,\
   then active "Custom Add to Cart Behaviour"
2. Add this snippet to your theme and add your own javascript code inside.

<pre class="language-javascript"><code class="lang-javascript"><strong>window.addEventListener("Angle3DAddToCart", function(event) {
</strong>  console.log('Angle3DAddToCart', JSON.stringify(event.detail));
  // Your custom behavior here (e.g. open cart drawer)
});
</code></pre>

### Resetting the customizer ID

In some cases, after you already added an item to the cart, clicking the **Add to Cart** button again should create a new cart item instead of updating the existing one (commonly when using a cart drawer).\
In these cases, use the code below to reset the customizer ID and ensure the item is added as new.

```javascript
window.Angle3dFunctions.resetCustomizerId();
```

(If needed, you'll need to add this line in "Angle3DAddToCart" event listener above.)

⚠️ **Please use these event listeners responsibly**. Custom scripts should not interfere with the core functionality of the Angle3D Configurator. Improper use may lead to unexpected behavior, and we cannot provide support for issues caused by external scripts.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.angle3d.co/angle3d-configurator-documentation/custom-add-to-cart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.