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 in beta for Octane AI Plus users only. To learn more, email [email protected] or use the support icon to chat with our team.


1. Developer Tool Settings

Developer tools are advanced settings that let you replace Octane AI's default behavior with custom code.

How does this work?

When enabled, a custom javascript event will be sent to the store when a customer:

  • Adds an item to the cart

  • Finishes the quiz and lands on results page

The custom event holds data representing the customer's personalized recommendations, which can be used with developer code to design custom results pages or link unique shopping carts to a quiz.

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)

If you select the advanced option, adding items to the cart in the quiz will no longer work without code tied to the custom event.

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 pages

  2. Octane AI will not create your results pages

Choosing "Octane AI will not create your results pages" will stop any of the editor-created results pages from showing up.

Instead, custom CSS/HTML code can use the event to build results pages.

3.1. Octane AI Will Not Create Your Results Page

When someone finishes a quiz with a custom result page enabled, the event will include the following information about the customer:

  • Quiz answers

  • Marketing opt-ins (contact info)

  • Product recommendations

  • Quiz result URL

A quiz result page URL shared through the event will be a snapshot of the result page that the customer received, so any changes made to the quiz afterwards won't be reflected in the link.

Below is the data inside of the event.

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, "answers": { "Question 1": "Answer 1", "Question 2": "Answer 2",
"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": ""
}
]
]
"quiz_results_url": "", "email": "", "phone": "", "user": ""
}
*/
}, false);

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.

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?