1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/bb3ef058b751a6ad-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/e11418ac562b8ac1-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/c32042fed3bbd56b.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/4677f1ee830373a5.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/431dfe75bd330347.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-7299c46acce86469.js"/>
1<script src="/_next/static/chunks/4988176f-ca12d71108760cbe.js" async=""></script>
1<script src="/_next/static/chunks/90898-17a6d9dcc7e951c4.js" async=""></script>
1<script src="/_next/static/chunks/main-app-24b47578a12e190b.js" async=""></script>
1<script src="/_next/static/chunks/93919-8a24082fe501cf89.js" async=""></script>
1<script src="/_next/static/chunks/32071-aa4c74299a318151.js" async=""></script>
1<script src="/_next/static/chunks/9085-ceefa43889b1642e.js" async=""></script>
1<script src="/_next/static/chunks/37322-63452c74624dcb1a.js" async=""></script>
1<script src="/_next/static/chunks/app/(app)/docs/layout-eedbac636d5684a6.js" async=""></script>
1<script src="/_next/static/chunks/84fbfe7f-c78e7189645e729d.js" async=""></script>
1<script src="/_next/static/chunks/77718-80593851db6775b9.js" async=""></script>
1<script src="/_next/static/chunks/18402-5b9f553d87b3ae67.js" async=""></script>
1<script src="/_next/static/chunks/22913-422e2038c1fee78c.js" async=""></script>
1<script src="/_next/static/chunks/99662-e4ae0e973f898bc7.js" async=""></script>
1<script src="/_next/static/chunks/17517-c63f6394788f2c72.js" async=""></script>
1<script src="/_next/static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-627c894a2028118b.js" async=""></script>
1<script src="/_next/static/chunks/77719-65b480d6f826cbe5.js" async=""></script>
1<script src="/_next/static/chunks/52516-47eba5d2cbc36dbd.js" async=""></script>
1<script src="/_next/static/chunks/app/(app)/layout-15e3055a369e5644.js" async=""></script>
1<script src="/_next/static/chunks/28063-91cf88b58ba2db15.js" async=""></script>
1<script src="/_next/static/chunks/60770-473512f5b55fc2b2.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-adb64bdda73341ca.js" async=""></script>
1<link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=G-E8D2H0K0JZ" as="script"/><meta name="theme-color" media="(prefers-color-scheme: light)" content="white"/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="black"/><title>Installation - Zermatt</title><meta name="description" content="Start using Zermatt on your Magento project"/><meta name="keywords" content="Magento,Adobe Commerce,AlpineJS"/><meta property="og:title" content="Installation"/><meta property="og:description" content="Start using Zermatt on your Magento project"/><meta property="og:url" content="https://zermatt-www-e7847914de5b.herokuapp.com/docs/installation"/><meta property="og:image" content="https://www.zermatt.dev/og.jpg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Zermatt"/><meta property="og:type" content="article"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Installation"/><meta name="twitter:description" content="Start using Zermatt on your Magento project"/><meta name="twitter:image" content="https://www.zermatt.dev/og.jpg"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><meta name="twitter:image:alt" content="Zermatt"/><link rel="shortcut icon" href="/favicon-48x48.png"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" href="/apple-touch-icon.png"/><meta name="next-size-adjust"/>
1<script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script>
1</head><body class="min-h-screen font-sans antialiased __variable_3a0388">
1<script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&false)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}else{c.add('light')}if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'light'}catch(e){}}()</script>
1<div vaul-drawer-wrapper=""><div class="relative flex min-h-screen flex-col"><header class="sticky top-0 z-50 w-full border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"><div class="bg-[#508DC1] text-white"><div class="container max-w-screen-xl py-2 text-sm">ð¥Â  <strong>Hot Reload for JS and CSS now available!</strong> With Zermatt v1.2.0. <a href="/docs/hot-reload"><span class="font-bold underline">Read more</span>.</a></div></div><div class="container flex h-14 max-w-screen-xl items-center"><div class="mr-4 hidden md:flex"><a class="mr-4 flex items-center space-x-2 lg:mr-6" href="/"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 493.262 493.262" class="h-6 w-6"><g><g><path d="M206.196,119.342L0,373.92h221.797l95.299-117.658L206.196,119.342z M219.59,230.766l-13.394,52.459l-13.394-52.459 l-52.157,19.027l65.551-80.93l65.552,80.93L219.59,230.766z"></path><path d="M372.152,224.391L251.04,373.918l242.222,0.002L372.152,224.391z M372.152,320.648l-7.867-30.812l-30.637,11.176 l38.504-47.535l38.5,47.535l-30.635-11.176L372.152,320.648z"></path></g></g></svg><span class="hidden font-bold lg:inline-block">zermatt</span></a><nav class="flex items-center gap-4 text-sm lg:gap-6"><a target="_blank" class="text-foreground/60 transition-colors hover:text-foreground/80" href="https://demo.zermatt.dev">Demo</a><a class="transition-colors hover:text-foreground/80 text-foreground/60" href="/docs">Docs</a><a class="text-foreground/60 transition-colors hover:text-foreground/80" href="/#consulting">Consulting</a></nav></div><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-9 py-2 mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:R55u6ja:" data-state="closed"><svg stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"><path d="M3 5H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 12H16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 19H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="sr-only">Toggle Menu</span></button><div class="flex flex-1 items-center justify-between space-x-2 md:justify-end"><div class="w-full flex-1 md:w-auto md:flex-none"><button class="inline-flex items-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground px-4 py-2 relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"><span class="hidden lg:inline-flex">Search documentation...</span><span class="inline-flex lg:hidden">Search...</span><kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"><span class="text-xs">â</span>K</kbd></button><h2 id="radix-:R2f5u6jaH1:"></h2><p id="radix-:R2f5u6jaH2:"></p></div><nav class="flex items-center"><a target="_blank" rel="noreferrer" href="https://github.com/maddlen/zermatt"><div class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground py-2 h-8 w-8 px-0"><svg viewBox="0 0 438.549 438.549" class="h-4 w-4"><path fill="currentColor" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19
16.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg><span class="sr-only">GitHub</span></div></a></nav></div></div></header><main class="flex-1"><div class="border-b"><div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"><aside class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block"><div dir="ltr" class="relative overflow-hidden h-full py-6 pr-6 lg:py-8" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style> 2[data-radix-scroll-area-viewport] { 3 scrollbar-width: none; 4 -ms-overflow-style: none; 5 -webkit-overflow-scrolling: touch; 6} 7[data-radix-scroll-area-viewport]::-webkit-scrollbar { 8 display: none; 9} 10:where([data-radix-scroll-area-viewport]) { 11 display: flex; 12 flex-direction: column; 13 align-items: stretch; 14} 15:where([data-radix-scroll-area-content]) { 16 flex-grow: 1; 17} 18</style><div data-radix-scroll-area-viewport="" class="h-full w-full rounded-[inherit]" style="overflow-x:hidden;overflow-y:hidden"><div data-radix-scroll-area-content=""><div class="w-full"><div class="pb-4"><h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Getting Started</h4><div class="grid grid-flow-row auto-rows-max text-sm"><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline font-medium text-foreground" target="" rel="" href="/docs/installation">Installation<span class="ml-2 rounded-md bg-[#E25D33] px-1.5 py-0.5 text-xs leading-none text-[#fff] no-underline group-hover:no-underline">Start here</span></a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/architecture">Architecture</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/contributing">Issues, contributions, roadmap</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/release-notes">Release notes</a></div></div><div class="pb-4"><h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Operations</h4><div class="grid grid-flow-row auto-rows-max text-sm"><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/hot-reload">Hot reload<span class="ml-2 rounded-md bg-[#E25D33] px-1.5 py-0.5 text-xs leading-none text-[#fff] no-underline group-hover:no-underline">New!</span></a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/deployment">Build & deploy</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/update">Updating Zermatt</a></div></div><div class="pb-4"><h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Examples</h4><div class="grid grid-flow-row auto-rows-max text-sm"><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/examples/zermatt-examples"><div class="mr-1 h-3.5 w-3.5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-power"><path d="M12 2v10"></path><path d="M18.4 6.6a9 9 0 1 1-12.77.04"></path></svg></div>Get the code</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/examples/module-rewrite">Module rewrite</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/examples/passing-data">
18Backend data forwarding</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/examples/price">Price formatting</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/examples/translate">Translations</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/examples/using-partials">Partials</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/examples/bind">Enhance vendor templates</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/examples/knockout">KnockoutJS communication</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/examples/form">Precognitive form</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/examples/events">Pub/sub with Event</a></div></div><div class="pb-4"><h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Features</h4><div class="grid grid-flow-row auto-rows-max text-sm"><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/themes">Themes</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/modules">Modules</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/styling">CSS Styling</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/variables">Variables</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/translation">Translation</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/money">Money</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/events">Events</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/forms">Forms</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/partials">Partials</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/container">Container</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/utilities">Utilities</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/cli">CLI</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/zermatt-core">zermatt-core</a><a class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground" target="" rel="" href="/docs/features/alpine-plugins">AlpineJS plugins</a></div></div></div></div></div></div></aside><main class="relative py-6 lg:gap-10 lg:py-8"><div class="mx-auto w-full min-w-0"><div class="mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground"><div class="truncate">Docs</div><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579
18L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><div class="text-foreground">Installation</div></div><div class="space-y-2"><h1 class="scroll-m-20 text-3xl font-bold tracking-tight">Installation</h1><p class="text-base text-muted-foreground"><span data-br=":R2afnkv9u6ja:" data-brr="1" style="display:inline-block;vertical-align:top;text-decoration:inherit">Start using Zermatt on your Magento project</span>
18<script>self.__wrap_b=(e,n,t)=>{let s=(t=t||document.querySelector(`[data-br="${e}"]`)).parentElement,r=e=>t.style.maxWidth=e+"px";t.style.maxWidth="";let l=s.clientWidth,a=s.clientHeight,o=l/2-.25,i=l+.5,c;if(l){for(;o+1<i;)r(c=Math.round((o+i)/2)),s.clientHeight===a?i=c:o=c;r(i*n+l*(1-n))}t.__wrap_o||"undefined"!=typeof ResizeObserver&&(t.__wrap_o=new ResizeObserver(()=>{self.__wrap_b(0,+t.dataset.brr,t)})).observe(s)};self.__wrap_b(":R2afnkv9u6ja:",1)</script>
18</p></div><div class="pb-12 pt-8"><div class="mdx"><h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="requirements"><a class="font-medium underline underline-offset-4 subheading-anchor" aria-label="Link to section" href="#requirements"><span class="icon icon-link"></span></a>Requirements</h2> 19<p class="leading-7 [&:not(:first-child)]:mt-6">Basic knowledge of:</p> 20<ul class="my-6 ml-6 list-disc"> 21<li class="mt-2">Magento theme architecture</li> 22<li class="mt-2">AlpineJS</li> 23<li class="mt-2">ES6, npm, JS modules</li> 24<li class="mt-2">PHP (optional)</li> 25</ul> 26<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="module-install"><a class="font-medium underline underline-offset-4 subheading-anchor" aria-label="Link to section" href="#module-install"><span class="icon icon-link"></span></a>Module install</h2> 27<p class="leading-7 [&:not(:first-child)]:mt-6">Install the Zermatt Magento module.</p> 28<div data-rehype-pretty-code-fragment=""><pre class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900" data-language="bash" data-theme="default"><code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm" data-language="bash" data-theme="default"><span class="line"><span style="color:#FFE66D">composer</span><span style="color:#96E072"> require</span><span style="color:#96E072"> maddlen/module-zermatt</span></span> 29<span class="line"><span style="color:#FFE66D">bin/magento</span><span style="color:#96E072"> setup:upgrade</span></span></code></pre><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3 absolute right-4 top-4"><span class="sr-only">Copy</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard "><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div> 30<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="theme-setup"><a class="font-medium underline underline-offset-4 subheading-anchor" aria-label="Link to section" href="#theme-setup"><span class="icon icon-link"></span></a>Theme setup</h2> 31<p class="leading-7 [&:not(:first-child)]:mt-6">The frontend stack needs to be deployed in your theme.</p> 32<h4 class="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight" id="zermatt-initialization"><a class="font-medium underline underline-offset-4 subheading-anchor" aria-label="Link to section" href="#zermatt-initialization"><span class="icon icon-link"></span></a>Zermatt initialization</h4> 33<p class="leading-7 [&:not(:first-child)]:mt-6">Initialize Zermatt in your theme with <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">zermatt:install <targetThemeCode></code>. 34If your theme is located in <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">app/design/frontend/Package/theme</code>, then run:</p> 35<p class="leading-7 [&:not(:first-child)]:mt-6"><code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">bin/magento zermatt:install Package/theme</code></p> 36<h3 class="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight" id="javascript"><a class="font-medium underline underline-offset-4 subheading-anchor" aria-label="Link to section" href="#javascript"><span class="icon icon-link"></span></a>Javascript</h3> 37<p class="leading-7 [&:not(:first-child)]:mt-6">1 ⢠Navigate to your Zermatt theme folder</p> 38<p class="leading-7 [&:not(:first-child)]:mt-6"><code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">cd path_to_theme/web/zermatt</code></p> 39<p class="leading-7 [&:not(:first-child)]:mt-6">Example: <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">cd app/design/frontend/Package/theme/web/zermatt</code></p> 40<p class="leading-7 [&:not(:first-child)]:mt-6">2 ⢠Install npm dependencies and Start the dev mode</p> 41<p class="leading-7 [&:not(:first-child)]:mt-6"><code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">npm install && npm run dev</code></p>
42<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="simple-alpinejs-component"><a class="font-medium underline underline-offset-4 subheading-anchor" aria-label="Link to section" href="#simple-alpinejs-component"><span class="icon icon-link"></span></a>Simple AlpineJS component</h2> 43<p class="leading-7 [&:not(:first-child)]:mt-6">You can now use AlpineJS in any template. For example:</p> 44<div data-rehype-pretty-code-fragment=""><pre class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900" data-language="html" data-theme="default"><code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm" data-language="html" data-theme="default"><span class="line"><span style="color:#D5CED9"><?php</span></span> 45<span class="line"><span style="color:#D5CED9">$customers = [</span></span> 46<span class="line"><span style="color:#D5CED9"> ['code' => 'john', 'name' => 'John Doe', 'message' => __('Hello ')],</span></span> 47<span class="line"><span style="color:#D5CED9">['code' => 'emily', 'name' => 'Emily Johnson', 'message' => __('Welcome ')],</span></span> 48<span class="line"><span style="color:#D5CED9">];</span></span> 49<span class="line"><span style="color:#D5CED9">?></span></span> 50<span class="line"><span style="color:#D5CED9"><</span><span style="color:#F92672">div</span><span style="color:#FFE66D"> x-data</span><span style="color:#D5CED9">=</span><span style="color:#96E072">"{</span></span> 51<span class="line"><span style="color:#96E072"> customers: JSON.parse('<?= $escaper->escapeJs(json_encode($customers)) ?>'),</span></span> 52<span class="line"><span style="color:#96E072"> greet(customerCode) {</span></span> 53<span class="line"><span style="color:#96E072"> const customer = this.customers.find(customer => customer.code === customerCode)</span></span> 54<span class="line"><span style="color:#96E072"> return customer.message + customer.name</span></span> 55<span class="line"><span style="color:#96E072"> }</span></span> 56<span class="line"><span style="color:#96E072">}"</span><span style="color:#D5CED9">></span></span> 57<span class="line"><span style="color:#D5CED9"> <</span><span style="color:#F92672">span</span><span style="color:#FFE66D"> x-text</span><span style="color:#D5CED9">=</span><span style="color:#96E072">"greet('emily')"</span><span style="color:#D5CED9">></</span><span style="color:#F92672">span</span><span style="color:#D5CED9">></span></span> 58<span class="line"><span style="color:#D5CED9"></</span><span style="color:#F92672">div</span><span style="color:#D5CED9">></span></span></code></pre><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3 absolute right-4 top-4"><span class="sr-only">Copy</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard "><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div> 59<p class="leading-7 [&:not(:first-child)]:mt-6"><strong>The same thing, but the Zermatt way:</strong></p> 60<div data-rehype-pretty-code-fragment=""><pre class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900" data-language="html" data-theme="default"><code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm" data-language="html" data-theme="default"><span class="line"><span style="color:#D5CED9"><?php</span></span> 61<span class="line"><span style="color:#D5CED9">variable('customers', [</span></span> 62<span class="line"><span style="color:#D5CED9"> ['code' => 'john', 'name' => 'John Doe', 'message' => __('Hello ')],</span></span> 63<span class="line"><span style="color:#D5CED9"> ['code' => 'emily', 'name' => 'Emily Johnson', 'message' => __('Welcome ')],</span></span> 64<span class="line"><span style="color:#D5CED9">]);
64</span></span> 65<span class="line"><span style="color:#D5CED9">?></span></span> 66<span class="line"><span style="color:#D5CED9"><</span><span style="color:#F92672">div</span><span style="color:#FFE66D"> x-data</span><span style="color:#D5CED9">=</span><span style="color:#96E072">"{</span></span> 67<span class="line"><span style="color:#96E072"> greet(customerCode) {</span></span> 68<span class="line"><span style="color:#96E072"> const customer = Zermatt.Variables.customers.find(customer => customer.code === customerCode)</span></span> 69<span class="line"><span style="color:#96E072"> return customer.message + customer.name</span></span> 70<span class="line"><span style="color:#96E072"> }</span></span> 71<span class="line"><span style="color:#96E072">}"</span><span style="color:#D5CED9">></span></span> 72<span class="line"><span style="color:#D5CED9"> <</span><span style="color:#F92672">span</span><span style="color:#FFE66D"> x-text</span><span style="color:#D5CED9">=</span><span style="color:#96E072">"greet('emily')"</span><span style="color:#D5CED9">></</span><span style="color:#F92672">span</span><span style="color:#D5CED9">></span></span> 73<span class="line"><span style="color:#D5CED9"></</span><span style="color:#F92672">div</span><span style="color:#D5CED9">></span></span></code></pre><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3 absolute right-4 top-4"><span class="sr-only">Copy</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard "><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div> 74<p class="leading-7 [&:not(:first-child)]:mt-6">Please note that:</p> 75<ul class="my-6 ml-6 list-disc"> 76<li class="mt-2">The <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">variable()</code> PHP method is used to declare a <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">customers</code> variable...</li> 77<li class="mt-2">... which is then available in Javascript by calling <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">Zermatt.Variables.<variable></code>...</li> 78<li class="mt-2">... so <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">Zermatt.Variables.customers</code></li> 79</ul> 80<p class="leading-7 [&:not(:first-child)]:mt-6">This approach has several advantages:</p> 81<ul class="my-6 ml-6 list-disc"> 82<li class="mt-2">The <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">customers</code> variable is available in all AlpineJS components</li> 83<li class="mt-2">The heavy lifting to convert a PHP object to a JS one is done...</li> 84<li class="mt-2">... <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">$escaper->escapeJs(json_encode($customers))</code> is not needed</li> 85</ul> 86<p class="leading-7 [&:not(:first-child)]:mt-6"><a class="font-medium underline underline-offset-4" href="/docs/features/variables">Learn more about Variables</a></p> 87<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="simple-zermatt-module"><a class="font-medium underline underline-offset-4 subheading-anchor" aria-label="Link to section" href="#simple-zermatt-module"><span class="icon icon-link"></span></a>Simple Zermatt module</h2> 88<p class="leading-7 [&:not(:first-child)]:mt-6">Zermatt can have modules. Modules are AlpineJS components stored in dedicated JS files. 89Modules are integrated into the ViteJS app underlying Zermatt.</p> 90<hr class="my-4 md:my-8"/> 91<p class="leading-7 [&:not(:first-child)]:mt-6">You can see Zermatt modules as AlpineJS components embedded into a modern Javascript app that Magento <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">.phtml</code> files can use at will.</p> 92<hr class="my-4 md:my-8"/> 93<p class="leading-7 [&:not(:first-child)]:mt-6">Create the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">app/design/frontend/<Package>/<theme>/web/zermatt/modules/welcome.js</code> file with the AlpineJS component:</p> 94<div data-rehype-pretty-code-fragment=""><pre class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900" data-language="js" data-theme="default"><code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm" data-language="js" data-theme="default"><span class="line"><span style="color:#C74DED">export</span><span style="color:#C74DED"> default</span><span style="color:#D5CED9"> {</span></span> 95<span class="line"><span style="color:#FFE66D"> greet</span><span style="color:#D5CED9">(</span><span style="color:#00E8C6">
95customerCode</span><span style="color:#D5CED9">) {</span></span> 96<span class="line"><span style="color:#C74DED"> const</span><span style="color:#00E8C6"> customer</span><span style="color:#EE5D43"> =</span><span style="color:#F39C12"> Zermatt</span><span style="color:#D5CED9">.</span><span style="color:#00E8C6">Variables</span><span style="color:#D5CED9">.</span><span style="color:#00E8C6">customers</span><span style="color:#D5CED9">.</span><span style="color:#FFE66D">find</span><span style="color:#D5CED9">(</span><span style="color:#00E8C6">customer</span><span style="color:#C74DED"> =></span><span style="color:#F39C12"> customer</span><span style="color:#D5CED9">.</span><span style="color:#00E8C6">code</span><span style="color:#EE5D43"> ===</span><span style="color:#00E8C6"> customerCode</span><span style="color:#D5CED9">)</span></span> 97<span class="line"><span style="color:#C74DED"> return</span><span style="color:#F39C12"> customer</span><span style="color:#D5CED9">.</span><span style="color:#00E8C6">message</span><span style="color:#EE5D43"> +</span><span style="color:#F39C12"> customer</span><span style="color:#D5CED9">.</span><span style="color:#00E8C6">name</span></span> 98<span class="line"><span style="color:#D5CED9"> }</span></span> 99<span class="line"><span style="color:#D5CED9">}</span></span></code></pre><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3 absolute right-4 top-4"><span class="sr-only">Copy</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard "><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div> 100<p class="leading-7 [&:not(:first-child)]:mt-6">Update the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">app/design/frontend/<Package>/<theme>/web/zermatt/zermatt.json</code> file like this:</p> 101<div data-rehype-pretty-code-fragment=""><pre class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900" data-language="json" data-theme="default"><code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm" data-language="json" data-theme="default"><span class="line"><span style="color:#D5CED9">{</span></span> 102<span class="line"><span style="color:#00E8C6"> "modules"</span><span style="color:#D5CED9">: {</span></span> 103<span class="line"><span style="color:#00E8C6"> "welcome"</span><span style="color:#D5CED9">: </span><span style="color:#96E072">"./modules/welcome"</span></span> 104<span class="line"><span style="color:#D5CED9"> },</span></span> 105<span class="line"><span style="color:#00E8C6"> "rewrites"</span><span style="color:#D5CED9">: {}</span></span> 106<span class="line"><span style="color:#D5CED9">}</span></span></code></pre><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3 absolute right-4 top-4"><span class="sr-only">Copy</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard "><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div> 107<p class="leading-7 [&:not(:first-child)]:mt-6">Here, we define a new Zermatt module with the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">welcome</code> name 108and its AlpineJS component is available thru the relative path <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">./modules/welcome</code></p> 109<p class="leading-7 [&:not(:first-child)]:mt-6">Update your zermatt-lock.json file to activate the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">welcome</code> module:</p> 110<p class="leading-7 [&:not(:first-child)]:mt-6"><code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">bin/magento zermatt:lock:dump</code></p> 111<p class="leading-7 [&:not(:first-child)]:mt-6">Update your PHTML template by calling the Zermatt module in <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">x-data</code>
111 rather than a native AlpineJS component.</p> 112<div data-rehype-pretty-code-fragment=""><pre class="mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900" data-language="html" data-theme="default"><code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm" data-language="html" data-theme="default"><span class="line"><span style="color:#D5CED9"><?php</span></span> 113<span class="line"><span style="color:#D5CED9">variable('customers', [</span></span> 114<span class="line"><span style="color:#D5CED9"> ['code' => 'john', 'name' => 'John Doe', 'message' => __('Hello ')],</span></span> 115<span class="line"><span style="color:#D5CED9"> ['code' => 'emily', 'name' => 'Emily Johnson', 'message' => __('Welcome ')],</span></span> 116<span class="line"><span style="color:#D5CED9">]);</span></span> 117<span class="line"><span style="color:#D5CED9">?></span></span> 118<span class="line"><span style="color:#D5CED9"><</span><span style="color:#F92672">div</span><span style="color:#FFE66D"> x-data</span><span style="color:#D5CED9">=</span><span style="color:#96E072">"Zermatt.Module('welcome')"</span><span style="color:#D5CED9">></span></span> 119<span class="line"><span style="color:#D5CED9"> <</span><span style="color:#F92672">span</span><span style="color:#FFE66D"> x-text</span><span style="color:#D5CED9">=</span><span style="color:#96E072">"greet('emily')"</span><span style="color:#D5CED9">></</span><span style="color:#F92672">span</span><span style="color:#D5CED9">></span></span> 120<span class="line"><span style="color:#D5CED9"></</span><span style="color:#F92672">div</span><span style="color:#D5CED9">></span></span></code></pre><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3 absolute right-4 top-4"><span class="sr-only">Copy</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard "><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button></div> 121<p class="leading-7 [&:not(:first-child)]:mt-6">Note the use of <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">Zermatt.Module('welcome')</code>. The <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">Zermatt.Module</code> object gathers all modules declared in all 122<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">zermatt.json</code> files.</p> 123<p class="leading-7 [&:not(:first-child)]:mt-6">From now on:</p> 124<ul class="my-6 ml-6 list-disc"> 125<li class="mt-2">The PHTML is decoupled from the Javascript.</li> 126<li class="mt-2">The Zermatt module can easily be distributed.</li> 127<li class="mt-2">The AlpineJS component is fully integrated within the ViteJS install that Zermatt uses.</li> 128<li class="mt-2">It is then possible to <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">ìmport</code> modules from the AlpineJS and Javascript ecosystems.</li> 129<li class="mt-2">The module is loaded (and its .js file requested) only if the current page uses it.</li> 130<li class="mt-2">The module is loaded only once. A factory creates a new instance each time the PHTML calls it.</li> 131</ul> 132<p class="leading-7 [&:not(:first-child)]:mt-6"><a class="font-medium underline underline-offset-4" href="/docs/features/modules">Learn more about Zermatt modules and zermatt-lock.json</a></p></div></div><div class="flex flex-row items-center justify-between"><a class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 ml-auto" href="/docs/architecture">Architecture<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579
132L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div></div></main></div></div></main><footer class="py-6 md:px-8 md:py-0"><div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row"><p class="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">Made with<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256" class="mx-0.5 inline-block h-4 w-4 align-baseline"><defs></defs><g style="stroke:none;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;fill:none;fill-rule:nonzero;opacity:1" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"><path d="M 51.865 1.523 c 2.639 0.961 4.659 2.757 6.26 5.115 c 5.117 -0.776 10.301 0.912 13.976 4.587 c 3.675 3.675 5.364 8.857 4.588 13.975 c 4.168 3.07 6.638 7.929 6.638 13.126 c 0 5.393 -2.644 10.387 -7.091 13.437 c -0.76 2.672 -2.184 5.104 -4.135 7.055 c -3.134 3.134 -7.323 4.754 -11.539 4.754 c -3.088 0 -6.19 -0.869 -8.902 -2.649 l 0.549 -0.836 l -10.447 -1.312 c 0 0 0 0 0 0 l -0.216 0.977 c -0.422 -0.094 -0.843 -0.204 -1.256 -0.329 c -3.807 3.412 -8.875 4.69 -13.641 3.882 c 0.009 -0.082 0.048 -0.316 0.054 -0.379 C 21.64 59.31 16.967 51.451 16.924 45 c -0.041 -6.216 2.696 -12.469 7.394 -16.172 c -0.92 -6.117 1.123 -11.997 4.951 -16.687 c 3.961 -4.852 10.438 -6.889 16.416 -5.562 C 45.933 3.689 48.897 2.544 51.865 1.523" style="stroke:none;stroke-width:1;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;fill:rgb(127,178,65);fill-rule:nonzero;opacity:1" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"></path><path d="M 26.702 62.925 C 21.64 59.31 17.809 51.551 17.767 45.1 c -0.041 -6.216 2.718 -12.047 7.415 -15.75 c -0.92 -6.117 0.952 -12.328 5.086 -16.751 c 4.133 -4.423 9.991 -6.482 15.793 -5.591 c 1.564 -2.275 3.552 -4.128 5.804 -5.483 C 49.745 0.537 47.41 0 44.999 0 c -5.197 0 -10.056 2.47 -13.126 6.639 c -5.117 -0.777 -10.3 0.912 -13.975 4.587 s -5.364 8.857 -4.587 13.975 c -4.169 3.07 -6.638 7.929 -6.638 13.126 c 0 5.393 2.644 10.387 7.091 13.437 c 0.759 2.67 2.183 5.103 4.135 7.055 c 2.456 2.456 5.534 3.942 8.749 4.487 C 26.656 63.223 26.696 62.987 26.702 62.925 z" style="stroke:none;stroke-width:1;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;fill:rgb(113,156,64);fill-rule:nonzero;opacity:1" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"></path><path d="M 57.523 54.976 l -3.031 -2.947 c -0.387 -0.375 -0.999 -0.378 -1.388 -0.007 l -3.865 3.69 V 40.889 c 0 -0.552 -0.447 -1 -1 -1 h -4.275 c -0.552 0 -1 0.448 -1 1 v 7.186 l -4.745 -4.919 c -0.377 -0.391 -1.063 -0.391 -1.439 0 l -2.52 2.614 c -0.369 0.382 -0.374 0.986 -0.013 1.375 l 6.515 7.007 V 89 c 0 0.553 0.448 1 1 1 h 6.477 c 0.553 0 1 -0.447 1 -1 V 64.29 l 8.276 -7.872 c 0.197 -0.188 0.309 -0.447 0.311 -0.719 C 57.828 55.426 57.718 55.166 57.523 54.976 z" style="stroke:none;stroke-width:1;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;fill:rgb(160,126,99);fill-rule:nonzero;opacity:1" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"></path></g></svg>on the French countryside by <a target="_blank" href="https://www.maddlen.fr/en">Maddlen</a>. The source code is available on<!-- --> <a href="https://github.com/maddlen/zermatt" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">GitHub</a>.</p></div></footer></div></div><div role="region" aria-label="Notifications (F8)" tabindex="-1" style="pointer-events:none"><ol tabindex="-1" class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"></ol></div><div role="region" aria-label="Notifications (F8)" tabindex="-1" style="pointer-events:none"><ol tabindex="-1" class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"></ol></div>
132<script src="/_next/static/chunks/webpack-7299c46acce86469.js" async=""></script>
132<script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script>
132<script>self.__next_f.push([1,"1:HL[\"/_next/static/media/bb3ef058b751a6ad-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/media/e11418ac562b8ac1-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n3:HL[\"/_next/static/css/c32042fed3bbd56b.css\",\"style\"]\n4:HL[\"/_next/static/css/4677f1ee830373a5.css\",\"style\"]\n5:HL[\"/_next/static/css/431dfe75bd330347.css\",\"style\"]\n"])</script>
132<script>self.__next_f.push([1,"6:I[70872,[],\"\"]\n9:I[79269,[],\"\"]\nb:I[15175,[],\"\"]\nc:I[49107,[\"93919\",\"static/chunks/93919-8a24082fe501cf89.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"9085\",\"static/chunks/9085-ceefa43889b1642e.js\",\"37322\",\"static/chunks/37322-63452c74624dcb1a.js\",\"15141\",\"static/chunks/app/(app)/docs/layout-eedbac636d5684a6.js\"],\"ScrollArea\"]\nd:I[25776,[\"93919\",\"static/chunks/93919-8a24082fe501cf89.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"9085\",\"static/chunks/9085-ceefa43889b1642e.js\",\"37322\",\"static/chunks/37322-63452c74624dcb1a.js\",\"15141\",\"static/chunks/app/(app)/docs/layout-eedbac636d5684a6.js\"],\"DocsSidebarNav\"]\ne:I[9085,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"9085\",\"static/chunks/9085-ceefa43889b1642e.js\",\"77718\",\"static/chunks/77718-80593851db6775b9.js\",\"18402\",\"static/chunks/18402-5b9f553d87b3ae67.js\",\"22913\",\"static/chunks/22913-422e2038c1fee78c.js\",\"99662\",\"static/chunks/99662-e4ae0e973f898bc7.js\",\"17517\",\"static/chunks/17517-c63f6394788f2c72.js\",\"37322\",\"static/chunks/37322-63452c74624dcb1a.js\",\"331\",\"static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-627c894a2028118b.js\"],\"\"]\nf:I[41782,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"77719\",\"static/chunks/77719-65b480d6f826cbe5.js\",\"93919\",\"static/chunks/93919-8a24082fe501cf89.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"9085\",\"static/chunks/9085-ceefa43889b1642e.js\",\"99662\",\"static/chunks/99662-e4ae0e973f898bc7.js\",\"52516\",\"static/chunks/52516-47eba5d2cbc36dbd.js\",\"37322\",\"static/chunks/37322-63452c74624dcb1a.js\",\"85814\",\"static/chunks/app/(app)/layout-15e3055a369e5644.js\"],\"MainNav\"]\n10:I[72542,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"77719\",\"static/chunks/77719-65b480d6f826cbe5.js\",\"93919\",\"static/chunks/93919-8a24082fe501cf89.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"9085\",\"static/chunks/9085-ceefa43889b1642e.js\",\"99662\",\"static/chunks/99662-e4ae0e973f898bc7.js\",\"52516\",\"static/chunks/52516-47eba5d2cbc36dbd.js\",\"37322\",\"static/c"])</script>
132<script>self.__next_f.push([1,"hunks/37322-63452c74624dcb1a.js\",\"85814\",\"static/chunks/app/(app)/layout-15e3055a369e5644.js\"],\"MobileNav\"]\n11:I[5713,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"77719\",\"static/chunks/77719-65b480d6f826cbe5.js\",\"93919\",\"static/chunks/93919-8a24082fe501cf89.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"9085\",\"static/chunks/9085-ceefa43889b1642e.js\",\"99662\",\"static/chunks/99662-e4ae0e973f898bc7.js\",\"52516\",\"static/chunks/52516-47eba5d2cbc36dbd.js\",\"37322\",\"static/chunks/37322-63452c74624dcb1a.js\",\"85814\",\"static/chunks/app/(app)/layout-15e3055a369e5644.js\"],\"CommandMenu\"]\n13:I[58579,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"28063\",\"static/chunks/28063-91cf88b58ba2db15.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"77718\",\"static/chunks/77718-80593851db6775b9.js\",\"22913\",\"static/chunks/22913-422e2038c1fee78c.js\",\"60770\",\"static/chunks/60770-473512f5b55fc2b2.js\",\"63185\",\"static/chunks/app/layout-adb64bdda73341ca.js\"],\"ThemeProvider\"]\n18:I[73066,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"28063\",\"static/chunks/28063-91cf88b58ba2db15.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"77718\",\"static/chunks/77718-80593851db6775b9.js\",\"22913\",\"static/chunks/22913-422e2038c1fee78c.js\",\"60770\",\"static/chunks/60770-473512f5b55fc2b2.js\",\"63185\",\"static/chunks/app/layout-adb64bdda73341ca.js\"],\"Toaster\"]\n19:I[5337,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"28063\",\"static/chunks/28063-91cf88b58ba2db15.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"77718\",\"static/chunks/77718-80593851db6775b9.js\",\"22913\",\"static/chunks/22913-422e2038c1fee78c.js\",\"60770\",\"static/chunks/60770-473512f5b55fc2b2.js\",\"63185\",\"static/chunks/app/layout-adb64bdda73341ca.js\"],\"Toaster\"]\n1a:I[67162,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"28063\",\"static/chunks/28063-91cf88b58ba2db15.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"77718\",\"static/chunks/77718-80593851db6775b9.js\",\"22913\",\"static/chunks/22913-422e2038c1fee78c.js\",\"60770\",\"static/chunks/60770-473512"])</script>
132<script>self.__next_f.push([1,"f5b55fc2b2.js\",\"63185\",\"static/chunks/app/layout-adb64bdda73341ca.js\"],\"Toaster\"]\n1b:I[35064,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"28063\",\"static/chunks/28063-91cf88b58ba2db15.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"77718\",\"static/chunks/77718-80593851db6775b9.js\",\"22913\",\"static/chunks/22913-422e2038c1fee78c.js\",\"60770\",\"static/chunks/60770-473512f5b55fc2b2.js\",\"63185\",\"static/chunks/app/layout-adb64bdda73341ca.js\"],\"GoogleAnalytics\"]\n1d:I[38311,[],\"\"]\na:[\"slug\",\"installation\",\"oc\"]\n12:T843,"])</script>
132<script>self.__next_f.push([1,"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"])</script>
132<script>self.__next_f.push([1,"14:{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"}\n15:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n16:{\"display\":\"inline-block\"}\n17:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n1e:[]\n"])</script>
132<script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c32042fed3bbd56b.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/4677f1ee830373a5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L6\",null,{\"buildId\":\"W4RKdT-Hp70xhIo7HTV55\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/docs/installation\",\"initialTree\":[\"\",{\"children\":[\"(app)\",{\"children\":[\"docs\",{\"children\":[[\"slug\",\"installation\",\"oc\"],{\"children\":[\"__PAGE__?{\\\"slug\\\":[\\\"installation\\\"]}\",{}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"(app)\",{\"children\":[\"docs\",{\"children\":[[\"slug\",\"installation\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$L7\",\"$L8\"],null],null]},[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(app)\",\"children\",\"docs\",\"children\",\"$a\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lb\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/431dfe75bd330347.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[[\"$\",\"div\",null,{\"className\":\"border-b\",\"children\":[\"$\",\"div\",null,{\"className\":\"container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10\",\"children\":[[\"$\",\"aside\",null,{\"className\":\"fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block\",\"children\":[\"$\",\"$Lc\",null,{\"className\":\"h-full py-6 pr-6 lg:py-8\",\"children\":[\"$\",\"$Ld\",null,{\"config\":{\"mainNav\":[{\"title\":\"Demo\",\"href\":\"https://demo.zermatt.dev\",\"external\":true},{\"title\":\"Documentation\",\"href\":\"/docs\"},{\"title\":\"Consulting\",\"href\":\"/#consulting\"}],\"sidebarNav\":[{\"title\":\"Getting Started\",\"items\":[{\"title\":\"Installation\",\"href\":\"/docs/installation\",\"label\":\"Start here\",\"items\":[]},{\"title\":\"Architecture\",\"href\":\"/docs/architecture\",\"items\":[]},{\"title\":\"Issues, contributions, roadmap\",\"href\":\"/docs/contributing\",\"items\":[]},{\"title\":\"Release notes\",\"href\":\"/docs/release-notes\",\"items\":[]}]},{\"title\":\"Operations\",\"items\":[{\"title\":\"Hot reload\",\"href\":\"/docs/hot-reload\",\"items\":[],\"label\":\"New!\"},{\"title\":\"Build \u0026 deploy\",\"href\":\"/docs/deployment\",\"items\":[]},{\"title\":\"Updating Zermatt\",\"href\":\"/docs/update\",\"items\":[]}]},{\"title\":\"Examples\",\"items\":[{\"title\":\"Get the code\",\"href\":\"/docs/examples/zermatt-examples\",\"items\":[],\"icon\":\"power\"},{\"title\":\"Module rewrite\",\"href\":\"/docs/examples/module-rewrite\",\"items\":[]},{\"title\":\"Backend data forwarding\",\"href\":\"/docs/examples/passing-data\",\"items\":[]},{\"title\":\"Price formatting\",\"href\":\"/docs/examples/price\",\"items\":[]},{\"title\":\"Translations\",\"href\":\"/docs/examples/translate\",\"items\":[]},{\"title\":\"Partials\",\"href\":\"/docs/examples/using-partials\",\"items\":[]},{\"title\":\"Enhance vendor templates\",\"href\":\"/docs/examples/bind\",\"items\":[]},{\"title\":\"KnockoutJS communication\",\"href\":\"/docs/examples/knockout\",\"items\":[]},{\"title\":\"Precognitive form\",\"href\":\"/docs/examples/form\",\"items\":[]},{\"title\":\"Pub/sub with Event\",\"href\":\"/docs/examples/events\",\"items\":[]}]},{\"title\":\"Features\",\"items\":[{\"title\":\"Themes\",\"href\":\"/docs/features/themes\",\"items\":[]},{\"title\":\"Modules\",\"href\":\"/docs/features/modules\",\"items\":[]},{\"title\":\"CSS Styling\",\"href\":\"/docs/features/styling\",\"items\":[]},{\"title\":\"Variables\",\"href\":\"/docs/features/variables\",\"items\":[]},{\"title\":\"Translation\",\"href\":\"/docs/features/translation\",\"items\":[]},{\"title\":\"Money\",\"href\":\"/docs/features/money\",\"items\":[]},{\"title\":\"Events\",\"href\":\"/docs/features/events\",\"items\":[]},{\"title\":\"Forms\",\"href\":\"/docs/features/forms\",\"items\":[]},{\"title\":\"Partials\",\"href\":\"/docs/features/partials\",\"items\":[]},{\"title\":\"Container\",\"href\":\"/docs/features/container\",\"items\":[]},{\"title\":\"Utilities\",\"href\":\"/docs/features/utilities\",\"items\":[]},{\"title\":\"CLI\",\"href\":\"/docs/features/cli\",\"items\":[]},{\"title\":\"zermatt-core\",\"href\":\"/docs/features/zermatt-core\",\"items\":[]},{\"title\":\"AlpineJS plugins\",\"href\":\"/docs/features/alpine-plugins\",\"items\":[]}]}],\"chartsNav\":[{\"title\":\"Getting Started\",\"items\":[{\"title\":\"Introduction\",\"href\":\"/docs/charts\",\"items\":[]},{\"title\":\"Installation\",\"href\":\"/docs/charts/installation\",\"items\":[]}
132,{\"title\":\"Theming\",\"href\":\"/docs/charts/theming\",\"items\":[]}]},{\"title\":\"Charts\",\"items\":[{\"title\":\"Area Chart\",\"href\":\"/docs/charts/area\",\"items\":[]},{\"title\":\"Bar Chart\",\"href\":\"/docs/charts/bar\",\"items\":[]},{\"title\":\"Line Chart\",\"href\":\"/docs/charts/line\",\"items\":[]},{\"title\":\"Pie Chart\",\"href\":\"/docs/charts/pie\",\"items\":[]},{\"title\":\"Radar Chart\",\"href\":\"/docs/charts/radar\",\"items\":[]},{\"title\":\"Radial Chart\",\"href\":\"/docs/charts/radial\",\"items\":[]}]},{\"title\":\"Components\",\"items\":[{\"title\":\"Tooltip\",\"href\":\"/docs/charts/tooltip\",\"items\":[]},{\"title\":\"Legend\",\"href\":\"/docs/charts/legend\",\"items\":[]}]}]}}]}]}],[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(app)\",\"children\",\"docs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lb\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}]]}]}],null],null]},[[[\"$\",\"header\",null,{\"className\":\"sticky top-0 z-50 w-full border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\",\"children\":[[\"$\",\"div\",null,{\"className\":\"bg-[#508DC1] text-white\",\"children\":[\"$\",\"div\",null,{\"className\":\"container max-w-screen-xl py-2 text-sm\",\"children\":[\"ð¥Â  \",[\"$\",\"strong\",null,{\"children\":\"Hot Reload for JS and CSS now available!\"}],\" With Zermatt v1.2.0. \",[\"$\",\"$Le\",null,{\"href\":\"/docs/hot-reload\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-bold underline\",\"children\":\"Read more\"}],\".\"]}]]}]}],[\"$\",\"div\",null,{\"className\":\"container flex h-14 max-w-screen-xl items-center\",\"children\":[[\"$\",\"$Lf\",null,{}],[\"$\",\"$L10\",null,{}],[\"$\",\"div\",null,{\"className\":\"flex flex-1 items-center justify-between space-x-2 md:justify-end\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full flex-1 md:w-auto md:flex-none\",\"children\":[\"$\",\"$L11\",null,{}]}],[\"$\",\"nav\",null,{\"className\":\"flex items-center\",\"children\":[\"$\",\"$Le\",null,{\"href\":\"https://github.com/maddlen/zermatt\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"children\":[\"$\",\"div\",null,{\"className\":\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground py-2 h-8 w-8 px-0\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 438.549 438.549\",\"className\":\"h-4 w-4\",\"children\":[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"$12\"}]}],[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"GitHub\"}]]}]}]}]]}]]}]]}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(app)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lb\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\"
132:\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}],[\"$\",\"footer\",null,{\"className\":\"py-6 md:px-8 md:py-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-balance text-center text-sm leading-loose text-muted-foreground md:text-left\",\"children\":[\"Made with\",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"version\":\"1.1\",\"viewBox\":\"0 0 256 256\",\"className\":\"mx-0.5 inline-block h-4 w-4 align-baseline\",\"children\":[[\"$\",\"defs\",null,{}],[\"$\",\"g\",null,{\"style\":{\"stroke\":\"none\",\"strokeWidth\":0,\"strokeDasharray\":\"none\",\"strokeLinecap\":\"butt\",\"strokeLinejoin\":\"miter\",\"strokeMiterlimit\":10,\"fill\":\"none\",\"fillRule\":\"nonzero\",\"opacity\":1},\"transform\":\"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M 51.865 1.523 c 2.639 0.961 4.659 2.757 6.26 5.115 c 5.117 -0.776 10.301 0.912 13.976 4.587 c 3.675 3.675 5.364 8.857 4.588 13.975 c 4.168 3.07 6.638 7.929 6.638 13.126 c 0 5.393 -2.644 10.387 -7.091 13.437 c -0.76 2.672 -2.184 5.104 -4.135 7.055 c -3.134 3.134 -7.323 4.754 -11.539 4.754 c -3.088 0 -6.19 -0.869 -8.902 -2.649 l 0.549 -0.836 l -10.447 -1.312 c 0 0 0 0 0 0 l -0.216 0.977 c -0.422 -0.094 -0.843 -0.204 -1.256 -0.329 c -3.807 3.412 -8.875 4.69 -13.641 3.882 c 0.009 -0.082 0.048 -0.316 0.054 -0.379 C 21.64 59.31 16.967 51.451 16.924 45 c -0.041 -6.216 2.696 -12.469 7.394 -16.172 c -0.92 -6.117 1.123 -11.997 4.951 -16.687 c 3.961 -4.852 10.438 -6.889 16.416 -5.562 C 45.933 3.689 48.897 2.544 51.865 1.523\",\"style\":{\"stroke\":\"none\",\"strokeWidth\":1,\"strokeDasharray\":\"none\",\"strokeLinecap\":\"butt\",\"strokeLinejoin\":\"miter\",\"strokeMiterlimit\":10,\"fill\":\"rgb(127,178,65)\",\"fillRule\":\"nonzero\",\"opacity\":1},\"transform\":\" matrix(1 0 0 1 0 0) \",\"strokeLinecap\":\"round\"}],[\"$\",\"path\",null,{\"d\":\"M 26.702 62.925 C 21.64 59.31 17.809 51.551 17.767 45.1 c -0.041 -6.216 2.718 -12.047 7.415 -15.75 c -0.92 -6.117 0.952 -12.328 5.086 -16.751 c 4.133 -4.423 9.991 -6.482 15.793 -5.591 c 1.564 -2.275 3.552 -4.128 5.804 -5.483 C 49.745 0.537 47.41 0 44.999 0 c -5.197 0 -10.056 2.47 -13.126 6.639 c -5.117 -0.777 -10.3 0.912 -13.975 4.587 s -5.364 8.857 -4.587 13.975 c -4.169 3.07 -6.638 7.929 -6.638 13.126 c 0 5.393 2.644 10.387 7.091 13.437 c 0.759 2.67 2.183 5.103 4.135 7.055 c 2.456 2.456 5.534 3.942 8.749 4.487 C 26.656 63.223 26.696 62.987 26.702 62.925 z\",\"style\":{\"stroke\":\"none\",\"strokeWidth\":1,\"strokeDasharray\":\"none\",\"strokeLinecap\":\"butt\",\"strokeLinejoin\":\"miter\",\"strokeMiterlimit\":10,\"fill\":\"rgb(113,156,64)\",\"fillRule\":\"nonzero\",\"opacity\":1},\"transform\":\" matrix(1 0 0 1 0 0) \",\"strokeLinecap\":\"round\"}],[\"$\",\"path\",null,{\"d\":\"M 57.523 54.976 l -3.031 -2.947 c -0.387 -0.375 -0.999 -0.378 -1.388 -0.007 l -3.865 3.69 V 40.889 c 0 -0.552 -0.447 -1 -1 -1 h -4.275 c -0.552 0 -1 0.448 -1 1 v 7.186 l -4.745 -4.919 c -0.377 -0.391 -1.063 -0.391 -1.439 0 l -2.52 2.614 c -0.369 0.382 -0.374 0.986 -0.013 1.375 l 6.515 7.007 V 89 c 0 0.553 0.448 1 1 1 h 6.477 c 0.553 0 1 -0.447 1 -1 V 64.29 l 8.276 -7.872 c 0.197 -0.188 0.309 -0.447 0.311 -0.719 C 57.828 55.426 57.718 55.166 57.523 54.976 z\",\"style\":{\"stroke\":\"none\",\"strokeWidth\":1,\"strokeDasharray\":\"none\",\"strokeLinecap\":\"butt\",\"strokeLinejoin\":\"miter\",\"strokeMiterlimit\":10,\"fill\":\"rgb(160,126,99)\",\"fillRule\":\"nonzero\",\"opacity\":1},\"transform\":\" matrix(1 0 0 1 0 0) \",\"strokeLinecap\":\"round\"}]]}]]}],\"on the French countryside by \",[\"$\",\"$Le\",null,{\"href\":\"https://www.maddlen.fr/en\",\"target\":\"_blank\",\"children\":\"Maddlen\"}],\". The source code is available on\",\" \",[\"$\",\"a\",null,{\"href\":\"https://github.com/maddlen/zermatt\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"font-medium underline underline-offset-4\",\"children\":\"GitHub\"}],\".\"]}]}]}]],null],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{}],[\"$\",\"body\",null,{\"className\":\"min-h-screen font-sans antialiased __variable_3a0388\",\"children\":[\"$\",\"$L13\",null,{\"attribute\":\"class\",\"defaultTheme\":\"light\",\"enableSystem\":true,\"disableTransitionOnChange\":true,\"children\":[[\"$\",\"div\",null,{\"vaul-drawer-wrapper\":\"\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative flex min-h-screen flex-col\",\"children\":[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lb\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$14\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$15\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$16\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$17\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]}]}],null,[\"$\",\"$L18\",null,{}],[\"$\",\"$L19\",null,{}],[\"$\",\"$L1a\",null,{}],[\"$\",\"$L1b\",null,{\"gaId\":\"G-E8D2H0K0JZ\"}]]}]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L1c\"],\"globalErrorComponent\":\"$1d\",\"missingSlots\":\"$W1e\"}]]\n"])</script>
132<script>self.__next_f.push([1,"1f:I[22436,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"9085\",\"static/chunks/9085-ceefa43889b1642e.js\",\"77718\",\"static/chunks/77718-80593851db6775b9.js\",\"18402\",\"static/chunks/18402-5b9f553d87b3ae67.js\",\"22913\",\"static/chunks/22913-422e2038c1fee78c.js\",\"99662\",\"static/chunks/99662-e4ae0e973f898bc7.js\",\"17517\",\"static/chunks/17517-c63f6394788f2c72.js\",\"37322\",\"static/chunks/37322-63452c74624dcb1a.js\",\"331\",\"static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-627c894a2028118b.js\"],\"default\"]\n20:I[30962,[\"30792\",\"static/chunks/84fbfe7f-c78e7189645e729d.js\",\"32071\",\"static/chunks/32071-aa4c74299a318151.js\",\"9085\",\"static/chunks/9085-ceefa43889b1642e.js\",\"77718\",\"static/chunks/77718-80593851db6775b9.js\",\"18402\",\"static/chunks/18402-5b9f553d87b3ae67.js\",\"22913\",\"static/chunks/22913-422e2038c1fee78c.js\",\"99662\",\"static/chunks/99662-e4ae0e973f898bc7.js\",\"17517\",\"static/chunks/17517-c63f6394788f2c72.js\",\"37322\",\"static/chunks/37322-63452c74624dcb1a.js\",\"331\",\"static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-627c894a2028118b.js\"],\"Mdx\"]\n21:T57ba,"])</script>
132<script>self.__next_f.push([1,"var Component=(()=\u003e{var m=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var E=(l,e)=\u003e()=\u003e(e||l((e={exports:{}}).exports,e),e.exports),g=(l,e)=\u003e{for(var a in e)c(l,a,{get:e[a],enumerable:!0})},o=(l,e,a,r)=\u003e{if(e\u0026\u0026typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!D.call(l,s)\u0026\u0026s!==a\u0026\u0026c(l,s,{get:()=\u003ee[s],enumerable:!(r=p(e,s))||r.enumerable});return l};var C=(l,e,a)=\u003e(a=l!=null?m(y(l)):{},o(e||!l||!l.__esModule?c(a,\"default\",{value:l,enumerable:!0}):a,l)),N=l=\u003eo(c({},\"__esModule\",{value:!0}),l);var i=E((v,t)=\u003e{t.exports=_jsx_runtime});var _={};g(_,{default:()=\u003eh,frontmatter:()=\u003ef});var n=C(i()),f={type:\"Doc\",title:\"Installation\",description:\"Start using Zermatt on your Magento project\"};function d(l){let e={a:\"a\",code:\"code\",div:\"div\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h2,{id:\"requirements\",children:[(0,n.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#requirements\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Requirements\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Basic knowledge of:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Magento theme architecture\"}),`\n`,(0,n.jsx)(e.li,{children:\"AlpineJS\"}),`\n`,(0,n.jsx)(e.li,{children:\"ES6, npm, JS modules\"}),`\n`,(0,n.jsx)(e.li,{children:\"PHP (optional)\"}),`\n`]}),`\n`,(0,n.jsxs)(e.h2,{id:\"module-install\",children:[(0,n.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#module-install\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Module install\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Install the Zermatt Magento module.\"}),`\n`,(0,n.jsx)(e.div,{\"data-rehype-pretty-code-fragment\":\"\",children:(0,n.jsx)(e.pre,{\"data-language\":\"bash\",\"data-theme\":\"default\",__rawString__:`composer require maddlen/module-zermatt\nbin/magento setup:upgrade\n`,children:(0,n.jsxs)(e.code,{\"data-language\":\"bash\",\"data-theme\":\"default\",children:[(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFE66D\"},children:\"composer\"}),(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" require\"}),(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" maddlen/module-zermatt\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFE66D\"},children:\"bin/magento\"}),(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" setup:upgrade\"})]})]})})}),`\n`,(0,n.jsxs)(e.h2,{id:\"theme-setup\",children:[(0,n.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#theme-setup\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Theme setup\"]}),`\n`,(0,n.jsx)(e.p,{children:\"The frontend stack needs to be deployed in your theme.\"}),`\n`,(0,n.jsxs)(e.h4,{id:\"zermatt-initialization\",children:[(0,n.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#zermatt-initialization\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Zermatt initialization\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Initialize Zermatt in your theme with \",(0,n.jsx)(e.code,{children:\"zermatt:install \u003ctargetThemeCode\u003e\"}),`.\nIf your theme is located in `,(0,n.jsx)(e.code,{children:\"app/design/frontend/Package/theme\"}),\", then run:\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:\"bin/magento zermatt:install Package/theme\"})}),`\n`,(0,n.jsxs)(e.h3,{id:\"javascript\",children:[(0,n.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#javascript\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Javascript\"]}),`\n`,(0,n.jsx)(e.p,{children:\"1 \\u2022 Navigate to your Zermatt theme folder\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:\"cd path_to_theme/web/zermatt\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Example: \",(0,n.jsx)(e.code,{children:\"cd app/design/frontend/Package/theme/web/zermatt\"})]}),`\n`,(0,n.jsx)(e.p,{children:\"2 \\u2022 Install npm dependencies and Start the dev mode\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:\"npm install \u0026\u0026 npm run dev\"})}),`\n`,(0,n.jsxs)(e.h2,{id:\"simple-alpinejs-component\",children:[(0,n.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#simple-alpinejs-component\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Simple AlpineJS component\"]}),`\n`,(0,n.jsx)(e.p,{children:\"You can now use AlpineJS in any template. For example:\"}),`\n`,(0,n.jsx)(e.div,{\"data-rehype-pretty-code-fragment\":\"\",children:(0,n.jsx)(e.pre,{\"data-language\":\"html\",\"data-theme\":\"default\",__rawString__:`\u003c?php\n$customers = [\n ['code' =\u003e 'john', 'name' =\u003e 'John Doe', 'message' =\u003e __('Hello ')],\n['code' =\u003e 'emily', 'name' =\u003e 'Emily Johnson', 'message' =\u003e __('Welcome ')],\
132n];\n?\u003e\n\u003cdiv x-data=\"{\n customers: JSON.parse('\u003c?= $escaper-\u003eescapeJs(json_encode($customers)) ?\u003e'),\n greet(customerCode) {\n const customer = this.customers.find(customer =\u003e customer.code === customerCode)\n return customer.message + customer.name\n }\n}\"\u003e\n \u003cspan x-text=\"greet('emily')\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n`,children:(0,n.jsxs)(e.code,{\"data-language\":\"html\",\"data-theme\":\"default\",children:[(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003c?php\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"$customers = [\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" ['code' =\u003e 'john', 'name' =\u003e 'John Doe', 'message' =\u003e __('Hello ')],\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"['code' =\u003e 'emily', 'name' =\u003e 'Emily Johnson', 'message' =\u003e __('Welcome ')],\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"];\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"?\u003e\"})}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003c\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"div\"}),(0,n.jsx)(e.span,{style:{color:\"#FFE66D\"},children:\" x-data\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:'\"{'})]}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" customers: JSON.parse('\u003c?= $escaper-\u003eescapeJs(json_encode($customers)) ?\u003e'),\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" greet(customerCode) {\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" const customer = this.customers.find(customer =\u003e customer.code === customerCode)\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" return customer.message + customer.name\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" }\"})}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:'}\"'}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" \u003c\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"span\"}),(0,n.jsx)(e.span,{style:{color:\"#FFE66D\"},children:\" x-text\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:`\"greet('emily')\"`}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\u003c/\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"span\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003c/\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"div\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\"})]})]})})}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"The same thing, but the Zermatt way:\"})}),`\n`,(0,n.jsx)(e.div,{\"data-rehype-pretty-code-fragment\":\"\",children:(0,n.jsx)(e.pre,{\"data-language\":\"html\",\"data-theme\":\"default\",__rawString__:`\u003c?php\nvariable('customers', [\n ['code' =\u003e 'john', 'name' =\u003e 'John Doe', 'message' =\u003e __('Hello ')],\n ['code' =\u003e 'emily', 'name' =\u003e 'Emily Johnson', 'message' =\u003e __('Welcome ')],\
132n]);\n?\u003e\n\u003cdiv x-data=\"{\n greet(customerCode) {\n const customer = Zermatt.Variables.customers.find(customer =\u003e customer.code === customerCode)\n return customer.message + customer.name\n }\n}\"\u003e\n \u003cspan x-text=\"greet('emily')\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n`,children:(0,n.jsxs)(e.code,{\"data-language\":\"html\",\"data-theme\":\"default\",children:[(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003c?php\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"variable('customers', [\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" ['code' =\u003e 'john', 'name' =\u003e 'John Doe', 'message' =\u003e __('Hello ')],\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" ['code' =\u003e 'emily', 'name' =\u003e 'Emily Johnson', 'message' =\u003e __('Welcome ')],\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"]);\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"?\u003e\"})}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003c\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"div\"}),(0,n.jsx)(e.span,{style:{color:\"#FFE66D\"},children:\" x-data\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:'\"{'})]}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" greet(customerCode) {\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" const customer = Zermatt.Variables.customers.find(customer =\u003e customer.code === customerCode)\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" return customer.message + customer.name\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:\" }\"})}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:'}\"'}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" \u003c\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"span\"}),(0,n.jsx)(e.span,{style:{color:\"#FFE66D\"},children:\" x-text\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:`\"greet('emily')\"`}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\u003c/\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"span\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003c/\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"div\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\"})]})]})})}),`\n`,(0,n.jsx)(e.p,{children:\"Please note that:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"variable()\"}),\" PHP method is used to declare a \",(0,n.jsx)(e.code,{children:\"customers\"}),\" variable...\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"... which is then available in Javascript by calling \",(0,n.jsx)(e.code,{children:\"Zermatt.Variables.\u003cvariable\u003e\"}),\"...\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"... so \",(0,n.jsx)(e.code,{children:\"Zermatt.Variables.customers\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"This approach has several advantages:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsx)(e.code,{children:\"customers\"}),\" variable is available in all AlpineJS components\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The heavy lifting to convert a PHP object to a JS one is done...\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"... \",(0,n.jsx)(e.code,{children:\"$escaper-\u003eescapeJs(json_encode($customers))\"}),\" is not needed\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:\"/docs/features/variables\",children:\"Learn more about Variables\"})}),`\n`,(0,n.jsxs)(e.h2,{id:\"simple-zermatt-module\",children:[(0,n.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#simple-zermatt-module\",children:(0,n.jsx)(e.span,{className:\"icon icon-link\"})}),\"Simple Zermatt module\"]}),`\n`,(0,n.jsx)(e.p,{children:`Zermatt can have modules. Modules are AlpineJS components stored in dedicated JS files.\nModules are integrated into the ViteJS app underlying Zermatt.`}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.p,{children:[\"You can see Zermatt modules as AlpineJS components embedded into a modern Javascript app that Magento \",(0,n.jsx)(e.code,{children:\".phtml\"}),\" files can use at will.\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsxs)(e.p,{children:[\"Create the \",(0,n.jsx)(e.code,{children:\"app/design/frontend/\u003cPackage\u003e/\u003ctheme\u003e/web/zermatt/modules/welcome.js\"}),\" file with the AlpineJS component:\"]}),`\n`,(0,n.jsx)(e.div,{\"data-rehype-pretty-code-fragment\":\"\",children:(0,n.jsx)(e.pre,{\"data-language\":\"js\",\"data-theme\":\"default\",__rawString__:`export default {\n greet(customerCode) {\n const customer = Zermatt.Variables.customers.find(customer =\u003e customer.code === customerCode)\n return customer.message + customer.name\n }\n}\n`,children:(0,n.jsxs)(e.code,{\"data-language\":\"js\",\"data-theme\":\"default\",children:[(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#C74DED\"}
132,children:\"export\"}),(0,n.jsx)(e.span,{style:{color:\"#C74DED\"},children:\" default\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#FFE66D\"},children:\" greet\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"(\"}),(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:\"customerCode\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\") {\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#C74DED\"},children:\" const\"}),(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:\" customer\"}),(0,n.jsx)(e.span,{style:{color:\"#EE5D43\"},children:\" =\"}),(0,n.jsx)(e.span,{style:{color:\"#F39C12\"},children:\" Zermatt\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\".\"}),(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:\"Variables\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\".\"}),(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:\"customers\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\".\"}),(0,n.jsx)(e.span,{style:{color:\"#FFE66D\"},children:\"find\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"(\"}),(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:\"customer\"}),(0,n.jsx)(e.span,{style:{color:\"#C74DED\"},children:\" =\u003e\"}),(0,n.jsx)(e.span,{style:{color:\"#F39C12\"},children:\" customer\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\".\"}),(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:\"code\"}),(0,n.jsx)(e.span,{style:{color:\"#EE5D43\"},children:\" ===\"}),(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:\" customerCode\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\")\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#C74DED\"},children:\" return\"}),(0,n.jsx)(e.span,{style:{color:\"#F39C12\"},children:\" customer\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\".\"}),(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:\"message\"}),(0,n.jsx)(e.span,{style:{color:\"#EE5D43\"},children:\" +\"}),(0,n.jsx)(e.span,{style:{color:\"#F39C12\"},children:\" customer\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\".\"}),(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:\"name\"})]}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" }\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"}\"})})]})})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Update the \",(0,n.jsx)(e.code,{children:\"app/design/frontend/\u003cPackage\u003e/\u003ctheme\u003e/web/zermatt/zermatt.json\"}),\" file like this:\"]}),`\n`,(0,n.jsx)(e.div,{\"data-rehype-pretty-code-fragment\":\"\",children:(0,n.jsx)(e.pre,{\"data-language\":\"json\",\"data-theme\":\"default\",__rawString__:`{\n \"modules\": {\n \"welcome\": \"./modules/welcome\"\n },\n \"rewrites\": {}\n}\n`,children:(0,n.jsxs)(e.code,{\"data-language\":\"json\",\"data-theme\":\"default\",children:[(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"{\"})}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:' \"modules\"'}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\": {\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:' \"welcome\"'}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:'\"./modules/welcome\"'})]}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" },\"})}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#00E8C6\"},children:' \"rewrites\"'}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\": {}\"})]}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"}\"})})]})})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here, we define a new Zermatt module with the \",(0,n.jsx)(e.code,{children:\"welcome\"}),` name\nand its AlpineJS component is available thru the relative path `,(0,n.jsx)(e.code,{children:\"./modules/welcome\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Update your zermatt-lock.json file to activate the \",(0,n.jsx)(e.code,{children:\"welcome\"}),\" module:\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:\"bin/magento zermatt:lock:dump\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Update your PHTML template by calling the Zermatt module in \",(0,n.jsx)(e.code,{children:\"x-data\"}
132),\" rather than a native AlpineJS component.\"]}),`\n`,(0,n.jsx)(e.div,{\"data-rehype-pretty-code-fragment\":\"\",children:(0,n.jsx)(e.pre,{\"data-language\":\"html\",\"data-theme\":\"default\",__rawString__:`\u003c?php\nvariable('customers', [\n ['code' =\u003e 'john', 'name' =\u003e 'John Doe', 'message' =\u003e __('Hello ')],\n ['code' =\u003e 'emily', 'name' =\u003e 'Emily Johnson', 'message' =\u003e __('Welcome ')],\n]);\n?\u003e\n\u003cdiv x-data=\"Zermatt.Module('welcome')\"\u003e\n \u003cspan x-text=\"greet('emily')\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n`,children:(0,n.jsxs)(e.code,{\"data-language\":\"html\",\"data-theme\":\"default\",children:[(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003c?php\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"variable('customers', [\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" ['code' =\u003e 'john', 'name' =\u003e 'John Doe', 'message' =\u003e __('Hello ')],\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" ['code' =\u003e 'emily', 'name' =\u003e 'Emily Johnson', 'message' =\u003e __('Welcome ')],\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"]);\"})}),`\n`,(0,n.jsx)(e.span,{className:\"line\",children:(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"?\u003e\"})}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003c\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"div\"}),(0,n.jsx)(e.span,{style:{color:\"#FFE66D\"},children:\" x-data\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:`\"Zermatt.Module('welcome')\"`}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\" \u003c\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"span\"}),(0,n.jsx)(e.span,{style:{color:\"#FFE66D\"},children:\" x-text\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"#96E072\"},children:`\"greet('emily')\"`}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\u003c/\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"span\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\"})]}),`\n`,(0,n.jsxs)(e.span,{className:\"line\",children:[(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003c/\"}),(0,n.jsx)(e.span,{style:{color:\"#F92672\"},children:\"div\"}),(0,n.jsx)(e.span,{style:{color:\"#D5CED9\"},children:\"\u003e\"})]})]})})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Note the use of \",(0,n.jsx)(e.code,{children:\"Zermatt.Module('welcome')\"}),\". The \",(0,n.jsx)(e.code,{children:\"Zermatt.Module\"}),` object gathers all modules declared in all\n`,(0,n.jsx)(e.code,{children:\"zermatt.json\"}),\" files.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"From now on:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The PHTML is decoupled from the Javascript.\"}),`\n`,(0,n.jsx)(e.li,{children:\"The Zermatt module can easily be distributed.\"}),`\n`,(0,n.jsx)(e.li,{children:\"The AlpineJS component is fully integrated within the ViteJS install that Zermatt uses.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"It is then possible to \",(0,n.jsx)(e.code,{children:\"\\xECmport\"}),\" modules from the AlpineJS and Javascript ecosystems.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The module is loaded (and its .js file requested) only if the current page uses it.\"}),`\n`,(0,n.jsx)(e.li,{children:\"The module is loaded only once. A factory creates a new instance each time the PHTML calls it.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:\"/docs/features/modules\",children:\"Learn more about Zermatt modules and zermatt-lock.json\"})})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(d,{...l})}):d(l)}return N(_);})();\n;return Component;"])</script>
132<script>self.__next_f.push([1,"8:[\"$\",\"main\",null,{\"className\":\"relative py-6 lg:gap-10 lg:py-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full min-w-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground\",\"children\":[[\"$\",\"div\",null,{\"className\":\"truncate\",\"children\":\"Docs\"}],[\"$\",\"svg\",null,{\"width\":\"15\",\"height\":\"15\",\"viewBox\":\"0 0 15 15\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-3.5 w-3.5\",\"children\":[\"$\",\"path\",null,{\"d\":\"M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z\",\"fill\":\"currentColor\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\"}]}],[\"$\",\"div\",null,{\"className\":\"text-foreground\",\"children\":\"Installation\"}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-2\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"scroll-m-2
1320 text-3xl font-bold tracking-tight\",\"children\":\"Installation\"}],[\"$\",\"p\",null,{\"className\":\"text-base text-muted-foreground\",\"children\":[\"$\",\"$L1f\",null,{\"children\":\"Start using Zermatt on your Magento project\"}]}]]}],null,[\"$\",\"div\",null,{\"className\":\"pb-12 pt-8\",\"children\":[\"$\",\"$L20\",null,{\"code\":\"$21\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-row items-center justify-between\",\"children\":[\"$undefined\",[\"$\",\"$Le\",null,{\"href\":\"/docs/architecture\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 ml-auto\",\"children\":[\"Architecture\",[\"$\",\"svg\",null,{\"width\":\"15\",\"height\":\"15\",\"viewBox\":\"0 0 15 15\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"ml-2 h-4 w-4\",\"children\":[\"$\",\"path\",null,{\"d\":\"M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z\",\"fill\":\"currentColor\",\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\"}]}]]}]]}]]}]}]\n"])</script>
132<script>self.__next_f.push([1,"1c:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: light)\",\"content\":\"white\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: dark)\",\"content\":\"black\"}],[\"$\",\"meta\",\"3\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"4\",{\"children\":\"Installation - Zermatt\"}],[\"$\",\"meta\",\"5\",{\"name\":\"description\",\"content\":\"Start using Zermatt on your Magento project\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"Magento,Adobe Commerce,AlpineJS\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"Installation\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"Start using Zermatt on your Magento project\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"https://zermatt-www-e7847914de5b.herokuapp.com/docs/installation\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image\",\"content\":\"https://www.zermatt.dev/og.jpg\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:alt\",\"content\":\"Zermatt\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:title\",\"content\":\"Installation\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:description\",\"content\":\"Start using Zermatt on your Magento project\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:image\",\"content\":\"https://www.zermatt.dev/og.jpg\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image:alt\",\"content\":\"Zermatt\"}],[\"$\",\"link\",\"22\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon-48x48.png\"}],[\"$\",\"link\",\"23\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"24\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"meta\",\"25\",{\"name\":\"next-size-adjust\"}]]\n7:null\n"])</script>
132</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.