Open and Close the Minicart in Hyvä on Demand in JS

If your Magento 2 store is using the Hyvä Theme, you'll be pleased to know that you can now have more control over your mini cart display. Starting from Hyvä 1.3.0, you can open and close the mini cart on demand using a simple line of JavaScript.

Opening the Mini cart

To open the mini cart, you can use the following code:

window.dispatchEvent(new CustomEvent("toggle-cart", {detail: {isOpen: true}}));

This will tell the mini cart to show and is handy if you want to call it programmatically after the customer has performed an action, such as after adding to the cart or clicking a button.

Closing the Minicart

When you want to close the mini cart, you can use a similar code snippet:

window.dispatchEvent(new CustomEvent("toggle-cart", {detail: {isOpen: false}}));

For Hyvä Themes below, version 1.3.0

If you're using a version of Hyvä Themes that's older than 1.3.0, you can still open the mini cart on demand. However, closing it using the `isOpen: false` parameter is unavailable.

To open the mini cart on these earlier versions, you can do it this way:

window.dispatchEvent(new CustomEvent("toggle-cart"));

You’ll see that whether your Hyvä version is above or below 1.3.0, you’ll still be able to open the mini cart on demand whenever you need to in JS, another helpful feature from Hyvä. 

You can try these snippets on the Hyvä Demo site. Remember to add a product to the cart first, though!

Mike Sheward

Technical Director

Mike is a Technical Director who has worked on eCommerce projects since 2014 and has been with Develo since 2015. He became certified in Adobe Commerce in 2023. Mike’s favourite aspects of web development are tackling the intricate eCommerce challenges with the bespoke platform Magneto/Hyvä, and the best achievement from working at Develo is fostering a culture of growth and innovation within our team. His favourite aspect of Magento is tackling the intricate eCommerce challenges with the bespoke platform Magneto/Hyvä. His favourite achievement at Develo so far is sharing knowledge about new technologies, notably developing the Stripe compact module for Hyvä. Outside of work, he can be found spending time with his family, baking and walking his dogs.

Develo is a leading Magento agency and eCommerce web development company based in Birmingham, in the UK, serving clients globally since 2010. We provide our Learn articles to share knowledge of magento web development, web app development and more to the wider web developer community. To extend your team with our white label web developers, collaborate or consult with us on your project contact us here.