Sometimes you may need to perform certain actions based on what happens in Zakeke (for example on the add to cart). For that, we have some custom events that you can define to perform your action based on those events. In this article, we are going to talk about these custom events.
The 3D configurator provides an hook to control what do to during the add to cart process (like redirecting to a different page rather than the cart one, or add additional products to the cart beside the customized one, or open the minicart).
In that case, you can define a zakekeComposerAddToCart function. Whenever customers complete their customization and press the Add to Cart button, the “zakekeComposerAddToCart” function gets called. If you define this function, you should also handle both the add to cart and handling to which page to redirect the customer after the add to cart is completed or do any additional actions like opening the minicart.
Zakeke will pass to that function take as input an object context with the following proprerties:
| Name | Description |
| form | The html form DOM element which contains all the data needed to complete the add to cart of a customized product |
Now let’s see how you can use this custom event:
<script>
async function zakekeComposerAddToCart(context) {
const form = context.form;
// Add the product to the cart
const formData = new FormData(form);
//Submit the form data to the server
await fetch('/cart/add', {
method: 'POST',
body: formData
});
// Do any additional actions here, e.g., show a confirmation message
// Redirect to cart page after adding to cart to any page that you prefer, or do some custom action
window.location.href = '/cart';
}
</script>