Persistent Cart

Overview

By default, the cart and checkout are part of the embedded menu, so they are only available on the page where your menu is placed. If you would like customers to open their cart from any page of your website (for example, from a cart button in your site header), you can add the Hytiva cart component to the rest of your pages. Cart contents are shared, so items added on the menu page will appear in the cart on every other page.

Do not load the cart script on your menu page

The embedded menu already includes the cart. The cart script and <hytiva-cart> element must only be added to pages that do not contain the <hytiva-menu> element. Loading both on the same page can cause conflicts.

Add the Cart Component

Place the following code just before the closing </body> tag on every page except the page with your embedded menu.

<!-- Hytiva Cart: required on all pages EXCEPT the menu page -->
<script src="https://e.hytiva.com/v1/js/cart.js" defer></script>
<hytiva-cart id="hytivaCart"></hytiva-cart>

Using a CMS or site template?

If your cart code lives in a shared footer or template, wrap it in a condition that skips your menu page. Many CMS script plugins offer an "exclude pages" option for this.

Hide the Menu's Built-In Cart Button

The embedded menu shows its own cart button next to the search bar. If your site has its own cart button (such as in your header), you will probably want to remove the menu's button so customers don't see two. Add the showCartIcon="false" attribute to your <hytiva-menu> element:

<hytiva-menu id="hytivaMenu" businessId="@@YOUR_EMBED_KEY_HERE@@" showCartIcon="false"></hytiva-menu>

The cart itself still works on the menu page. Customers can still add items and check out, and your own button can open it.

Add a Cart Button

Add a button anywhere on your site (such as your header). The hytiva-cart-count element shows the number of items in the cart and is optional.

<button class="hytiva-cart-button" type="button">
	Cart <span class="hytiva-cart-count">0</span>
</button>

Then add the following script to open the cart when the button is clicked and keep the item count up to date. It is safe to include on every page, including the menu page: it opens #hytivaCart when present and falls back to your menu (#hytivaMenu).

<script>
	document.addEventListener('DOMContentLoaded', () => {
		const buttons = document.querySelectorAll('.hytiva-cart-button');
		const getCart = () => document.querySelector('#hytivaCart') ?? document.querySelector('#hytivaMenu');

		// Open the cart
		buttons.forEach(button => {
			button.addEventListener('click', (e) => {
				e.preventDefault();
				getCart()?.openCart();
			});
		});

		// Update the item count
		document.addEventListener('hytiva-menu-item', (e) => {
			const quantity = parseInt(e.detail.total) || 0;

			buttons.forEach(button => {
				const count = button.querySelector('.hytiva-cart-count');
				if (count) {
					count.innerText = quantity;
					count.classList.toggle('active', quantity > 0);
				}
			});
		});
	});
</script>

Reference

Item	Type	Description
openCart()	Method on <hytiva-cart> and <hytiva-menu>	Opens the cart / checkout panel.
showCartIcon	Attribute on <hytiva-menu>	Set to "false" to remove the menu's built-in cart button from the search bar area. Defaults to "true".
hytiva-menu-item	Event on document	Fired when the cart changes. event.detail.total is the total number of items in the cart.