Overview

This article is an overview of the developer tools section which includes the Add to cart JavaScript event and the Quiz completed JavaScript event.

Table of Contents

1. Developer Tool Settings

2. Add To Cart Behavior & JavaScript Event

2.1. Octane AI Will Not Add Products to the Cart

3. Custom Results Page & JavaScript Event

3.1. Octane AI Will Not Create Your Results Page

4. Additional Resources

This feature is currently available for Enterprise users only. To learn more, email [email protected] or use the support icon to chat with our team.


1. Developer Tool Settings

Developer tools in quiz settings give access to optional adjustments that can be made to quiz behavior. This includes:

  • Add to cart behavior

  • Results page behavior

Each setting can enable a JavaScript event that can be used for custom add to cart behavior or a custom results page.

This can be great for headless Shopify stores or for custom shopping carts like slide out carts.

You can find this in the Octane AI quiz editor by going to:

Quiz settings > Developer tools

Back to top.


2. Add to Cart Behavior & JavaScript Event

Under add to cart behavior settings, two options can be chosen:

  1. Octane AI will add products to cart

  2. Octane AI will not add products to the cart. (Advanced)

The first option will leave the quiz on default behavior, which means a product is added to Shopify's shopping cart when the add to cart button is pressed.

The second option will disable the default behavior and enable a custom JavaScript event instead.

Users with development knowledge can use this event to create custom add to cart behaviors, such as triggering a slide out shopping cart instead.

2.1. Octane AI Will Not Add Products to the Cart

When advanced behavior is enabled, a custom event is fired to signal either success or failure every time a user adds an item to the cart on a results page,

You can listen for those events easily by adding the following JavaScript code

document.addEventListener('octane.quiz.addToCart', function (e) { 
// your code for successfully added items
console.log(e.detail); // example: {items: [{id: '12345', quantity: 1}]}
}, false);

document.addEventListener('octane.quiz.addToCartError', function (e) {
// your code for the error case
}, false);

The event is configured for bubbling up and the items information is available in the detail event's object property.

A success or failure will be indicated by one of the following events:

  • octane.quiz.addToCart

  • octane.quiz.addToCartError

Back to top.


3. Custom Results Behavior & JavaScript Event

Under results page behavior, settings two options can be chosen:

  1. Octane AI will create your results page

  2. Octane AI will not create your results page

The first option will use results pages built in Octane AI's quiz editor. The second option allows a custom webpage to be used as a results page instead.

This is a great option for brands that are looking to build a more custom results page or take advantage of the product data included in a recommendation.

3.1. Octane AI Will Not Create Your Results Page

If this option is chosen, a custom JavaScript event containing product data is enabled every time someone finishes a quiz.

Below is the data inside of the event. It will include a reference to the HTML element where if the Octane AI will not create your results pages option is selected, you would add your own designs.

This is done by replacing // your code for building and handling the results page with your own design code.

The event is configured for bubbling up and the items’ information is available in the detail event’s object property.

document.addEventListener('octane.quiz.completed', function (e) { 
// your code for building and handling the results page
console.log(e.detail);
/* output example
{
"quiz_wrapper_element": element,
"product_blocks": [
[
{
"description": "The candy bar of your dreams",
"id": "40597157904591",
"image": "https://cdn.shopify.com/s/files/...2048x2048.jpg?v=1639095",
"link": "https://store.myshopify.com/products/chocolate?variant=904591",
"price_formatted": "$5",
"tags": [
"brand new"
],
"title": "Crispy chocolate bar",
"type": ""
},
{
"description": "The everlasting taste you were looking for",
"id": "40597156823247",
"image": "https://cdn.shopify.com/s/files/...2048x2048.jpg?v=163968",
"link": "https://store.myshopify.com/products/lollipop?variant=459715",
"price_formatted": "3",
"tags": ["brand new", "birthday"],
"title": "Lollipop",
"type": ""
}
]
]
}
*/
}, false);

When the code used for building your results page is used with the custom event, your custom page will appear at the end of your Octane AI quiz with product recommendations populated by data from the quiz.

Back to top.


4. Additional Resources


Have any questions? Send an email to [email protected] or use the support icon to chat with our team.

Did this answer your question?