Octane AI allows developers to disable default Octane AI code for:
Adding products to the cart
Results page design
This article will give some context on how these options work, and use cases.
How developer tools work
Octane AI offers two types of developer options:
Disabling Octane AI behaviors
Disabling Octane AI behaviors are options available inside of the quiz editor that can be selected to replace Octane AI code with your own custom code. These options are separate from custom events.
Custom events trigger automatically upon certain quiz actions. The
addEventListener() method can be used to call functions when a certain event appears.
This article will focus on disabling Octane AI behaviors.
Octane AI will not create your results page
Selecting the option "Octane AI will not create your results pages" will disable Octane AI styling for results pages only.
This means the HTML & CSS structure described here will no longer apply for results pages built inside of quizzes, and instead custom HTML & CSS must be created instead. Product recommendations are not disabled by this option.
This setting is useful for enabling complete developer freedom over results page design, while still using the editor-built quiz to handle the backend logic for product recommendations.
What if I want to redirect quiz takers when they finish the quiz?
To redirect quiz takers, that functionality must be built through the
octane.quiz.completed custom event.
The "Octane AI will not create your results pages" setting will not impact a results page displayed through an external URL.
Octane AI will not add products to the cart
Selecting the option "Octane AI will not add products to the cart" disables the built-in add to cart behavior. If this is enabled, the add to cart button will no longer add products to the shopping cart without additional custom code.
This setting can be used in conjunction with the
octane.quiz.addToCart event to create custom behavior when the add to cart button is pressed.
Although add to cart behavior is highly customizable when using the event, the main use cases for selecting this option include:
Interacting with a custom shopping cart or custom checkout.
Configuring the add to cart button for when the frontend and backend are on different domains.
An example of this is a headless Shopify store where the checkout domain differs from the domain that the quiz has been embedded in.