When a product is added to a cart through an Octane AI quiz, the website's shopping cart icon may not show a visible change even if the product was successfully added.
Use this guide to learn why this happens, and what you can do.
💡 What you'll learn
Shopping cart compatibility (jump to section)
How to listen for Octane AI's custom events (jump to section)
💡 Prerequisites
The developer tools described in this guide are available on Octane Plus.
Shopping cart compatibility
Although Octane AI is designed to connect with Shopify stores using any theme, the exact way each theme's code is unique to each theme.
While this means merchants have access to a wide variety of store looks without needing to code a theme on their own, some themes will only reflect shopping cart changes from a quiz once the website is refreshed or a new page is navigated to.
📕 Adding compatibility manually
Quizzes can be connected to your website's shopping cart icon through Octane AI's add to cart custom event.
This is a custom event that Octane Plus quizzes fire every time an add to cart button is pressed from the quiz.
Code can then be added to the website that listens for this event, and performs a function when it sees the event fired from the quiz.
How to listen for Octane AI's custom events
Code must be added to your website's theme code that lets the website listen for certain custom events.
Example:
document.addEventListener('octane.quiz.addToCart', function (e) {console.log('completed'); console.log(e.detail);}, false);
Inside of this code snippet, 'octane.quiz.addToCart' means the custom event that fires when the add to cart button is pressed is being listened for. You can also replace octane.quiz.addToCart with the following events:
octane.quiz.completedFired when someone sees a result page.
octane.quiz.accessedFired when someone views a quiz
For a more in-depth explanation on Octane AI's custom event options, check out this guide.