> For the complete documentation index, see [llms.txt](https://help.brickspacelab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.brickspacelab.com/slab/advanced-customizations/theme-architecture/javascript.md). # JavaScript Interactivity is handled by Alpine.js. Components are defined inline in Liquid templates with `x-data`. ## Entry point `src/entrypoints/theme.ts` is the single JavaScript entry point compiled by Vite. It imports `src/javascript/app.ts` to assemble the global `window.app()` factory, registers Alpine.js plugins (`AsyncAlpine`, `@alpinejs/focus`, `@alpinejs/intersect`, `@alpinejs/persist`), and starts Alpine. ## How we use Alpine #### Global Alpine components `layout/theme.liquid` sets `x-data="app()"` on ``, making every method in `app()` available to all child Alpine components via `$root` or direct call. `app()` is assembled in `src/javascript/app.ts` by spreading four core modules: `products` (variant selection, option availability, URL sync, recently viewed, quick-buy fetching), `cart` (add/change/edit/remove items, discount codes, cart notes, cart overlay routing), `utils` (overlays, image loading, scroll tracking, clipboard, audio, event dispatching, string utilities), and `shopify` (`formatMoney()` for price formatting, also assigned to `window.Shopify.formatMoney`). #### Global Alpine stores `theme__scripts.liquid` registers all global Alpine stores inside an `alpine:init` listener. These stores are the single source of truth for shared state across the theme. The `config` store holds theme-wide settings seeded from Liquid, including scroll state, sidebar visibility, login state, body scrolling toggles, audio settings, and URLs. The `cart` store holds live cart state refreshed after every mutation. The `overlays` store tracks the open/closed status and type of every overlay registered at render time. Supporting stores (`feedback`, `search`, `filter`, `pagination`, `recentProducts`) handle transient UI messages, predictive search state, collection filter state, infinite scroll state, and persisted recently-viewed products respectively. #### Product data Product sections build their `x-data` object using `{% render 'helper__product-object' %}` captured into an inline JS object literal on the product container. This exposes the full Shopify product JSON, the currently selected options and variant, selling plan data, quantity, calculated price, and availability flags directly to the Alpine component. The main entry method is `initProduct()` (called via `x-init`). It attaches the form submit handler, reads the URL for a variant pre-selection, and calls `handleProductFormChange()` to sync all display state with the initial selection. #### Section-specific components Heavier, page-specific components live in `src/javascript/components/`. They are loaded on-demand via `async-alpine` using `x-load` on the element: ```liquid

``` Each file exports a default function whose name matches the filename (e.g. `slider.ts` exports `slider()`). See `.cursor/rules/alpine.mdc` for the full component authoring guide. {% content-ref url="/pages/N4dgQyMCiGpFY4wpLamW" %} [Events](/slab/advanced-customizations/theme-architecture/javascript/events.md) {% endcontent-ref %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://help.brickspacelab.com/slab/advanced-customizations/theme-architecture/javascript.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.