Several merchants have asked us if their cart drawer could open up when a quiz taker adds a product to cart from the Result Page. While we have implemented this for merchants that use custom recommendation / result pages, this feature wasn’t available to merchants using our app result page until now. Since the implementation of cart drawers varies across themes, there are a few steps to involved to implement it for your specific theme:

1. Ensure “Stay on Page” is selected for your preferred Add-to-Cart button behavior

1. Add an event listener that listens for VQB’s “product.added” event when a user adds a product to cart from the app result page. This code should call the cart drawer function when it detects a “product.added” event.

Here is a code example (although the specific code and which file it’s added to in your theme can vary)

window.addEventListener("product.added", () => {
    fetch('/?sections=cart-drawer,cart-icon-bubble', {method: "GET"})
    .then(response => response.json())
    .then(html => {
        const cartContent = {
        sections: html
        }
        cart.renderContents(cartContent)
        cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
        cart.classList.remove('is-empty')
       
    })
    .catch(error => {
        console.error('Error refreshing cart drawer:', error);
    });
});
****

<aside> 💡 Fullscreen (pop-up) quizzes As long as the cart code is on the page where the full-screen quiz is being called, the cart drawer should open. However, we will likely need to change the z-index of the quiz relative to the cart drawer, so that you can see it. This will be theme specific.

</aside>

<aside> 💡 Page and iframe quizzes If the quiz is embedded and the cart code is present on the same page, the cart drawer will open up. If not, it isn’t possible to open up the cart drawer from a page where the cart code isn’t present.

</aside>