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.

window.addEventListener("Angle3DAddToCart", function(event) {
  console.log('Angle3DAddToCart', JSON.stringify(event.detail));
  // Your custom behavior here (e.g. open cart drawer)
});

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.

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.

Last updated