Alpine.store can be used.\nThe feature spans four independent Hyvä layout blocks, all sharing one reactive store.\n![\"Image](\"https://bondar-blog.pages.dev/media/posts/1/ChatGPT-Image-Apr-23-2026-09_47_25-AM.png\")
If you have worked with Hyvä, you are already familiar with Alpine.js and how it’s used within the theme. While the default Hyvä theme does not make use of Alpine.store, in real-world Hyvä-based projects it can be very useful in specific scenarios.
Alpine.store (available since Alpine.js v3) creates a reactive global data object that exists outside any component’s scope.
Unlike x-data, which is scoped to a specific DOM subtree, a store is:
$store magic propertyYou initialise a store once, and every component on the page can read and write to it reactively.
document.addEventListener('alpine:init', () => {\n Alpine.store('private', {\n isLogged: false\n });\n});\n<div x-data>\n <template x-if="$store.private.isLogged">\n <span>Welcome back!</span>\n </template>\n</div>\n<div x-data>\n <button @click="$store.private.isLogged = true">\n Log in\n </button>\n</div>\nfunction initComponent() {\n return {\n init() {\n if (this.$store.private.isLogged) {\n console.log('User is logged in');\n }\n }\n }\n}\n| ✅ Good fit when: | \n❌ Avoid using it when: | \n
|---|---|
| Multiple independent layout blocks share the same state | \nState is local to one component | \n
| You need a single source of truth | \nYou already rely heavily on event-based patterns | \n
| Customer/session data must be accessible globally | \nThe problem can be solved with simple $dispatch | \n
Alpine internally wraps the store in the same reactive proxy system used by x-data.
This means:
Let’s abstract and imagine that you don’t have any existing way to implement a promo campaign, so this is just a theoretical example of how Alpine.store can be used.\nThe feature spans four independent Hyvä layout blocks, all sharing one reactive store.\n
![\"Image](\"https://bondar-blog.pages.dev/media/posts/1/ChatGPT-Image-Apr-23-2026-09_47_21-AM.png\")
Register once in your theme’s default_head_blocks.xml or a dedicated JS module.\nThe store listens to @update-totals.window , the same event Hyvä’s own initCartTotals() uses and extracts the subtotal from total_segments.
Guard the registration so that a second call (from a duplicate layout block or a third-party module re-dispatching alpine:init) does not silently reset accumulated state:
<?php\n// gift-store-init.phtml\n/** @var \\Your\\Module\\Block\\PromoGifts $block */\n/** @var \\Magento\\Framework\\Escaper $escaper */\n/** @var \\Hyva\\Theme\\ViewModel\\HyvaCsp $hyvaCsp */\n?>\n<script>\ndocument.addEventListener('alpine:init', () => {\n if (Alpine.store('promo')) return; // already registered — do not overwrite\n\n Alpine.store('promo', {\n\n // ── Config ────────────────────────────────────────────────\n threshold: 100,\n\n // ── State ─────────────────────────────────────────────────\n cartTotal: 0,\n gifts: <?= /** @noEscape */ json_encode($block->getPromoGifts()) ?>,\n selectedGift: null,\n drawerOpen: false,\n bannerVisible: true,\n\n // ── Computed getters ──────────────────────────────────────\n // These recalculate whenever the flat primitives they depend\n // on (cartTotal, threshold) are reassigned. Avoid replacing\n // primitives with nested objects — mutations to nested\n // properties do not trigger getter recalculation.\n get remaining() {\n return Math.max(0, this.threshold - this.cartTotal);\n },\n get isEligible() {\n return this.cartTotal >= this.threshold;\n },\n get progress() {\n return Math.min(100, (this.cartTotal / this.threshold) * 100);\n },\n\n // ── Actions ───────────────────────────────────────────────\n selectGift(gift) {\n this.selectedGift = gift;\n },\n openDrawer() {\n this.drawerOpen = true;\n },\n closeDrawer() {\n this.drawerOpen = false;\n },\n dismissBanner() {\n this.bannerVisible = false;\n },\n\n // ── Cart sync ─────────────────────────────────────────────\n // totalsData matches window.checkoutConfig.totalsData shape:\n // { total_segments: [{ code: 'subtotal', value: 58.00 }, ...] }\n syncCart(totalsData) {\n const segment = totalsData?.total_segments\n ?.find(s => s.code === 'subtotal');\n this.cartTotal = segment?.value ?? 0;\n\n if (this.isEligible && !this.selectedGift) {\n this.openDrawer();\n }\n },\n\n // ── Event listeners ───────────────────────────────────────\n // Mirrors the pattern used in Hyvä's own initCartTotals()\n eventListeners: {\n ['@update-totals.window']($event) {\n Alpine.store('promo').syncCart($event.detail.data);\n }\n }\n });\n});\n</script>\n<?php $hyvaCsp->registerInlineScript() ?>\n\n<!-- Place once in default.xml, outside #maincontent -->\n<div x-data x-bind="$store.promo.eventListeners"></div>\nHyvä’s hyva.replaceDomElement() (used by cart.phtml after cart operations) replaces the main content area without re-firing alpine:init, so the store survives intact. Any listener element placed inside #maincontent would be destroyed and never re-attached.
header.phtml<div\n x-data\n x-show="$store.promo.bannerVisible"\n class="promo-banner"\n>\n <!-- your code -->\n</div>\ncart.phtml<div x-data class="promo-widget">\n <template x-if="!$store.promo.isEligible">\n <!-- your code -->\n </template>\n\n <template x-if="$store.promo.isEligible && !$store.promo.selectedGift">\n <!-- your code -->\n </template>\n\n <template x-if="$store.promo.selectedGift">\n <!-- your code -->\n </template>\n</div>\ngift-drawer.phtml<div\n x-data\n x-show="$store.promo.drawerOpen"\n @keydown.escape.window="$store.promo.closeDrawer()"\n>\n <div class="drawer-header">\n <h2>Choose your free gift</h2>\n <button @click="$store.promo.closeDrawer()">✕</button>\n </div>\n <div class="gift-grid">\n <template x-for="gift in $store.promo.gifts" :key="gift.id">\n <!-- your code -->\n </template>\n </div>\n</div>\nproduct-item.phtml<!-- Rendered inside each product card in the listing -->\n<div x-data >\n <template x-if="!$store.promo.isEligible && product.contributesToPromo">\n <!-- your code -->\n </template>\n</div>\nAn Alpine.store is registered once and lives for the entire page session. In standard Magento/Hyvä full-page loads this is fine - the store is torn down with the page. Two edge cases are worth knowing.
Double initialization. If alpine:init fires more than once, for example, a layout block is included in two places, or a third-party module re-dispatches the event calling Alpine.store('promo', { ... }) a second time silently overwrites the first registration. Any state accumulated since first load (cartTotal, selectedGift, drawerOpen) is reset. The guard at the top of the registration block handles this:
if (Alpine.store('promo')) return;\nHyvä’s replaceDomElement. As seen in cart.phtml, Hyvä can swap out #maincontent via hyva.replaceDomElement() after cart operations. This re-renders the DOM but does not re-run alpine:init the store survives intact, which is exactly what you want. This is why the cart-sync listener must live outside #maincontent in default.xml.
Alpine.store is a simple and powerful way to share reactive state across independent components.
For state that stays inside a single .phtml, keep using x-data. Reach for Alpine.store when the state genuinely needs to escape component boundaries.
Used correctly, it helps maintain a clean architecture and avoids unnecessary event complexity.
Further reading: Alpine.js $store documentation · Alpine.js Alpine.store() API documentation
", "image": "https://bondar-blog.pages.dev/media/posts/1/Screenshot-2026-04-23-at-13.29.04.png", "author": { "name": "Anastasiia Bondar" }, "tags": [ "Magento2", "Hyvä", "Alpine" ], "date_published": "2026-04-22T12:46:30+01:00", "date_modified": "2026-04-23T14:33:11+01:00" } ] }