# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.