![\"Image](\"https://bondar.blog/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 initialize a store once, and every component on the page can read and update it reactively.
document.addEventListener('alpine:init', () => {\n Alpine.store('private', {\n isClicked: false\n });\n});\n<div x-data>\n <template x-if="$store.private.isClicked">\n <span>You have clicked `Click Me` before </span>\n </template>\n</div>\n<div x-data>\n <button @click="$store.private.isClicked = true">\n Click Me\n </button>\n</div>\nfunction initComponent() {\n return {\n init() {\n if (this.$store.private.isClicked) {\n console.log('Component is initialized after the click');\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 wraps stores in its reactive system (the same mechanism as Vue’s reactivity engine). This ensures that updates to store properties automatically propagate to any component that depends on them.
This means:
Let’s abstract and imagine that you don’t have any existing way to implement a promo campaign. This is a simplified, theoretical example of how Alpine.store can be used.
The feature spans four independent Hyvä layout blocks, all sharing one reactive store.
![\"Image](\"https://bondar.blog/media/posts/1/ChatGPT-Image-Apr-23-2026-09_47_21-AM.png\")
Register the store once, either 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.\n // Keep store shape simple when possible.\n // Deeply nested state is still reactive, \n // but flatter structures are usually easier to reason about and maintain.\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 // for demo purposes it only handles the transition into eligibility\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 lifetime of the current page. 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 and calls Alpine.store('promo', { ... }) again, re-registering a store with the same name. This can overwrite its existing state. While this behavior is not emphasized in the Alpine documentation, guarding the initialization is a good defensive practice to prevent accidental resets caused by duplicate layout blocks or re-dispatched alpine:init events.
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, so 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 reduces the need for cross-component event wiring.
Further reading: Alpine.js $store documentation · Alpine.js Alpine.store() API documentation
", "image": "https://bondar.blog/media/posts/1/HyvaAlpineStore.jpg", "author": { "name": "Anastasiia Bondar" }, "tags": [ "Magento2", "Hyvä", "Alpine" ], "date_published": "2026-04-23T15:18:00+01:00", "date_modified": "2026-04-24T13:50:06+01:00" } ] }