back-button-1
A simple back button that points to the previous page.
<back-button-1 />fallbackUrl any -
label any -
boolean-filter-1
Generic boolean/toggle filter for product listings.
fieldPath string Dot-notated field path, for example `customFields.inStock`.
label string Label displayed beside the toggle.
enabled boolean Optional initial state of the toggle.
my-cart-1
DSL cart component used by the webshop storefront.
Responsibilities: - Reads persisted items from cart storage. - Resolves product and choice metadata through shop-svc APIs. - Keeps the browser cart storage in sync with quantity/remove updates. - Emits analytics (`view_cart`) and local message-bus events (`cart:remove`). Notes for DSL usage: - Route-level component (renders cart page content and sets document title). - Uses `productsLoaded` as the loading guard for templates. - Uses integer minor-units for prices (for example cents), converts to major-units only when sending analytics payloads.
Responsibilities: - Reads persisted items from cart storage. - Resolves product and choice metadata through shop-svc APIs. - Keeps the browser cart storage in sync with quantity/remove updates. - Emits analytics (`view_cart`) and local message-bus events (`cart:remove`). Notes for DSL usage: - Route-level component (renders cart page content and sets document title). - Uses `productsLoaded` as the loading guard for templates. - Uses integer minor-units for prices (for example cents), converts to major-units only when sending analytics payloads.
cart-button-1
type "button" | "menu-item" -
categories-loader
CategoriesLoader is a renderless data loader component for shop categories.
It loads categories from the backend and emits them through the `loaded` output.
It loads categories from the backend and emits them through the `loaded` output.
<categories-loader (loaded)="categories = $event" /> <loop [data]="categories" let="category"> <!-- render category --> </loop>
custom-field-definition
Headless helper component that allows templates to declare product custom field definitions.
Usage: Outcome: - Enables template authors to declaratively define custom product fields, which then appear in the admin product edit form.
Usage: Outcome: - Enables template authors to declaratively define custom product fields, which then appear in the admin product edit form.
editable-image
EditableImage is the standard component for in-place editable images.
Use this when the image should be both displayed and replaceable through the editor UI. In edit mode, authorized users can click the image and swap it without changing template code. Outside edit mode, it behaves like a normal image display component. Unlike `ResponsiveImg` and `ResponsiveImgModal`, this component is content-backed: the rendered image is resolved from `elementId`, so the same `elementId` can be reused in multiple places to keep those instances synchronized. If no image has been configured yet, the component falls back to `placeholder`. Example:
Recommended with placeholder:
Reusing the same image in multiple locations:
Use this when the image should be both displayed and replaceable through the editor UI. In edit mode, authorized users can click the image and swap it without changing template code. Outside edit mode, it behaves like a normal image display component. Unlike `ResponsiveImg` and `ResponsiveImgModal`, this component is content-backed: the rendered image is resolved from `elementId`, so the same `elementId` can be reused in multiple places to keep those instances synchronized. If no image has been configured yet, the component falls back to `placeholder`. Example:
<editable-image elementId="mainHeroImage" />Recommended with placeholder:
<editable-image
elementId="mainHeroImage"
placeholder="https://images.example.com/hero-fallback.jpg"
/>Reusing the same image in multiple locations:
<editable-image elementId="brandLogo" width="160" height="160" /> <editable-image elementId="brandLogo" width="48" height="48" />
elementId string Unique content key for this editable image.
The component uses this ID to load and update the stored image asset.
Multiple instances may intentionally share the same `elementId`
to render the same image in different places or sizes.
width number Preferred rendered width used for the default image URL and automatic srcset generation.
height number Preferred rendered height used for the default image URL and proportional srcset generation.
quality number Controls the generated image quality for both `src` and `srcset` candidates.
placeholder string A fallback image used if no editable image is configured or if the primary source fails to load.
Providing this is a best practice as it ensures:
- Seamless template portability across different environments.
- Transparent sourcing for easier image license verification.
modal boolean Enables the shared image modal instead of rendering the plain inline image.
sizes string | undefined Responsive slot sizes passed to the browser.
Defaults to `(max-width: {width}px) 100vw, {width}px` when not provided.
widths number[] | undefined Optional list of candidate widths used to build `srcset`.
Leave undefined for sensible defaults or pass an empty array to disable `srcset` entirely.
loading "lazy" | "eager" Native loading hint forwarded to the underlying `<img>`.
decoding "async" | "sync" | "auto" Native decoding hint forwarded to the underlying `<img>`.
fetchPriority "high" | "low" | "auto" Native fetch priority hint forwarded to the underlying `<img>`.
styleKey string | undefined DEPRECATED. Will be removed.
defaultCss any DEPRECATED. Will be removed.
editable-text
EditableText is the canonical component for all text display across the platform.
It serves as the primary interface for dynamic, user-adjustable text content, allowing authorized users to modify text values directly through the UI in edit mode.
It serves as the primary interface for dynamic, user-adjustable text content, allowing authorized users to modify text values directly through the UI in edit mode.
<editable-text elementId="mainHeroTitle" placeholder="This does not really matter" />placeholder Record<string, string> | string Fallback text if no content has been saved yet. For multilingual content, pass language-keyed values. Example: <editable-text placeholder='{\"en\":\"Hello world\", \"hu\":\"Helló világ\"}' />. A plain string value is still accepted to maintain compatibility with older templates.
elementId string The authoritative identifier for this component.
This ID is mandatory as it functions as the lookup key for the specific text asset data.
Note: Multiple instances can share the same elementId to display and synchronize
the same text content across different parts of the UI.
styleKey string | undefined DEPRECATED. Will be removed.
defaultCss any DEPRECATED. Will be removed.
free-tier-banner-1
Simple informational banner shown on free-tier storefronts.
The component is static and translation-driven, intended for drop-in usage in DSL layouts wherever the plan/status notice should appear.
The component is static and translation-driven, intended for drop-in usage in DSL layouts wherever the plan/status notice should appear.
header-context
Header context loads information into the template to enable you to
implement custom headers.
implement custom headers.
<header-context (loaded)="hdr = $event" /> <!-- Then somewhere down the line in your template --> <loop [data]="hdr.navigation.entries" let="item"> <a [href]="item.url" class="honey1-nav-link"><print [value]="item.title" /></a> </loop>
multiselect-filter-1
Generic multi-select product filter component.
Renders a list of checkbox options and emits a single `in` filter that can be passed directly to product loading APIs.
- When no option is selected, emits an empty array. - Supports both plain string options and `{ label, value }` objects. - Styling is controlled through CSS variables defined in the component stylesheet.
Renders a list of checkbox options and emits a single `in` filter that can be passed directly to product loading APIs.
<multiselect-filter-1
fieldPath="customFields.material"
[options]="['Cotton', 'Wool', 'Linen']"
(changed)="filters = $event"
/>- When no option is selected, emits an empty array. - Supports both plain string options and `{ label, value }` objects. - Styling is controlled through CSS variables defined in the component stylesheet.
fieldPath string Dot path used in the emitted filter.
heading string Heading rendered on top of the component.
selected string[] Preselected values that should start checked.
my-orders-1
Customer order history page component.
Loads signed-in user's recent orders, enriches them with product/choice data, and exposes a "reorder" action that rehydrates the cart from a past order.
Loads signed-in user's recent orders, enriches them with product/choice data, and exposes a "reorder" action that rehydrates the cart from a past order.
numeric-range-filter-1
A generic numeric range filter component for product listings.
fieldPath string Dot-notated product field path (for example `customFields.width`).
min number | null Optional initial minimum value displayed in the minimum input.
max number | null Optional initial maximum value displayed in the maximum input.
heading string Optional visible heading shown above the filter controls.
open-icon-1
style any -
place-order-1
Checkout orchestrator for the storefront order flow.
It coordinates the multi-step DSL UI (form -> summary -> payment -> success), loads cart products/choices, prepares order payloads, and places orders using shop-svc.
It coordinates the multi-step DSL UI (form -> summary -> payment -> success), loads cart products/choices, prepares order payloads, and places orders using shop-svc.
product-loader
ProductLoader is a renderless data loader component for a single shop product.
It resolves the product id from the current route, loads the product from the backend, and emits it through the `loaded` output.
Intended for product detail pages where the route contains a `product ID` param.
It resolves the product id from the current route, loads the product from the backend, and emits it through the `loaded` output.
<product-loader (loaded)="product = $event" />Intended for product detail pages where the route contains a `product ID` param.
products-1
Orchestrates the retrieval of product data with Hydration support.
1. Checks `TransferState` for cached data to prevent double-fetching during hydration. 2. Fetches active products from `shopSvcApi` based on the current hostname. 3. Normalizes image dimensions to prevent **Cumulative Layout Shift (CLS)**. 4. Synchronizes results with the `SearchService` for client-side filtering.
1. Checks `TransferState` for cached data to prevent double-fetching during hydration. 2. Fetches active products from `shopSvcApi` based on the current hostname. 3. Normalizes image dimensions to prevent **Cumulative Layout Shift (CLS)**. 4. Synchronizes results with the `SearchService` for client-side filtering.
eagerCount number The number of product images to load immediately with high priority.
*
query string -
products-loader
ProductsLoader is a renderless data loader component for shop products.
It loads products from the backend and emits them through the `loaded` output.
If `categoryId` is provided, it only loads products in that category.
It loads products from the backend and emits them through the `loaded` output.
<products-loader (loaded)="products = $event" /> <loop [data]="products" let="p"> <!-- render product --> </loop>
If `categoryId` is provided, it only loads products in that category.
categoryId string Optional category id filter.
When set, only products from that category are loaded.
search-1
Search input element for product listing pages.
Emits the current text query on each change and when cleared, so parent DSL containers can filter products reactively.
Emits the current text query on each change and when cleared, so parent DSL containers can filter products reactively.
output string -
if
If is a visibility toggle that shows or hides content based on a specific condition.
It is commonly used to handle "empty states," loading indicators, or gated features.
It is commonly used to handle "empty states," loading indicators, or gated features.
<if [condition]="items.length == 0"> <div>No results found.</div> </if> <if not [condition]="items.length == 0"> <div>Results found! <3</div> </if>
condition boolean The primary evaluation criteria.
When true, the children blocks are rendered to the DOM.
not any Inverts the condition logic.
If true, the component acts as an "Unless" toggle (renders only when condition is false).
loop
Loop is used to display a list of items by repeating a template for every entry in a collection.
It makes the data for the "current" item available to all components inside it using a custom name.
It makes the data for the "current" item available to all components inside it using a custom name.
<loop [data]="products" let="item"> <div> Name: {{ item.name }} Price: {{ item.cost }} </div> </loop>
data any[] The collection of items to iterate over.
Can be an array of objects, strings, or numbers.
If null/undefined, the loop handles it gracefully by rendering nothing.
let string Name for the current item inside the loop.
Defines the variable name used to reference each item in the template.
Defaults to `"e"` if not specified.
height string | undefined The fixed height of the scroll container.
Setting this value triggers `overflow: hidden` on the host and is
typically required for virtual scrolling to function correctly.
virtualize boolean Enables Virtual Scrolling (CDK).
When true, only the items currently visible in the viewport are rendered.
Best used with large datasets and a defined `height`.
block
Block defines a globally accessible UI fragment.
Once defined, this snippet is stored in a shared registry, making it available for use across different pages or even entirely different websites within the platform. It serves as the single source of truth for shared design patterns.
To display the content of a block anywhere in your layout (even on other pages), use the `` component with the corresponding key:
Once defined, this snippet is stored in a shared registry, making it available for use across different pages or even entirely different websites within the platform. It serves as the single source of truth for shared design patterns.
<block key="global-footer"> <footer class="site-footer">© 2024 Platform Inc.</footer> </block>
To display the content of a block anywhere in your layout (even on other pages), use the `` component with the corresponding key:
<include src="global-footer" />key string The unique identifier used to reference this snippet globally.
name string A friendly name for the block.
This title appears in the Snippet Explorer to help others identify the component.
description string A brief summary of the block's purpose.
This description is displayed in the Snippet Explorer to explain how the component should be used.
publish boolean * When enabled, this block is added to the Public Snippet Explorer
(https://rikrol.com/snippets), allowing others to discover and use it.
display boolean Controls whether the block is visible at the location where it is defined.
Set to 'false' if you only want to register the block without rendering it immediately.
include
Include pulls in a shared UI fragment from the global registry.
It can resolve blocks defined locally, on other pages, or from external sites, allowing you to build unified interfaces using pre-existing components without duplicating code.
To include a block from a different website or project, prefix the source with the target application ID followed by a colon:
It can resolve blocks defined locally, on other pages, or from external sites, allowing you to build unified interfaces using pre-existing components without duplicating code.
<include src="shared-nav-menu" />To include a block from a different website or project, prefix the source with the target application ID followed by a colon:
<include src="app-1234:footer" />src string Format: "appId:templateId" or just "templateId" (local)
Example: "system:navbar" or "my-custom-footer"
let
Let is the state-initialization component for the DSL.
It allows developers to explicitly declare and initialize variables.
It allows developers to explicitly declare and initialize variables.
<let name="selectedCategory" value="'all'" /> <let name="itemCount" value="0" /> <let name="myArray" value="[{'id': 1}, {'id': 2}]" />
name string The variable name the let statement sets
value any The value to be assigned to the variable.
This input supports:
- **Literals**: Numbers (100) or Strings ('hello' or "world").
- **Variable References**: Unquoted keys (e.g., `user.name`) are resolved to variables.
- **Concatenation**: Combine values using `+` (e.g., `'Hello ' + firstName`).
- **Comparisons**: Evaluates to boolean using `==` or `!=`.
* *Note: While the DSL evaluates strings, you can also pass raw JS Objects/Arrays
directly via Angular property binding [value]="{id: 1}".*
responsive-img
ResponsiveImg is the standard display-only component for responsive images.
Use this when an image should be rendered with generated `src` / `srcset` but should not be editable through the CMS or editor UI. It supports responsive sizing, loading hints, fallback placeholders, and common layout controls such as width, height, and object fit. Example:
Use this when an image should be rendered with generated `src` / `srcset` but should not be editable through the CMS or editor UI. It supports responsive sizing, loading hints, fallback placeholders, and common layout controls such as width, height, and object fit. Example:
<responsive-img
src="/upload/gallery-1.jpg"
alt="Gallery image"
/>src string Source URL of the image.
Required input. Can be absolute or relative path, or file ID.
placeholder string | undefined A fallback image used if no editable image is configured or if the primary source fails to load.
Providing this is a best practice as it ensures:
- Seamless template portability across different environments.
- Transparent sourcing for easier image license verification.
alt any Alternative text for accessibility.
Defaults to empty string.
sizes string Value for the `sizes` attribute.
Defines how the image should scale across viewport widths.
Defaults to `"100vw"`.
quality number Image quality (typically 1–100).
Passed to the responsive image service.
Defaults to `80`.
widths number[] | undefined Array of widths used to generate responsive `srcset`.
Defaults to predefined breakpoints.
loading "eager" | "lazy" | undefined Loading behavior of the image.
`"lazy"` defers loading, `"eager"` loads immediately.
decoding "sync" | "async" | "auto" | undefined Decoding hint for the browser.
`"async"` (default), `"sync"`, or `"auto"`.
fetchPriority "high" | "low" | "auto" | undefined Fetch priority hint for the browser.
`"high"`, `"low"`, or `"auto"`.
width string | number | undefined Explicit width of the image.
Can be a number (pixels) or any valid CSS size string.
height string | number | undefined Explicit height of the image.
Can be a number (pixels) or any valid CSS size string.
maxWidth string | number | undefined Maximum width constraint.
Accepts number (pixels) or CSS size string.
maxHeight string | number | undefined Maximum height constraint.
Accepts number (pixels) or CSS size string.
objectFit string | undefined CSS `object-fit` value applied to the image.
Example: `"cover"`, `"contain"`, `"fill"`, etc.
responsive-img-modal
ResponsiveImgModal is a display-only image component with lightbox behavior.
Use this when an image should render inline as a responsive preview and open into an interactive modal when clicked. The modal supports zooming, rotation, and panning. This component does not provide in-place editing. Example:
Use this when an image should render inline as a responsive preview and open into an interactive modal when clicked. The modal supports zooming, rotation, and panning. This component does not provide in-place editing. Example:
<responsive-img-modal
src="/upload/gallery-1.jpg"
alt="Gallery image"
/>src string Source URL of the image.
Required input. Can be absolute or relative path, or file id.
alt string Alternative text for accessibility.
Defaults to empty string.
width string | number | undefined Explicit width of the thumbnail image.
Accepts number (pixels) or any valid CSS size string.
maxWidth string | undefined Maximum width constraint for the thumbnail or container.
Accepts any valid CSS size string.
maxHeight string | undefined Maximum height constraint.
Accepts number (pixels) or CSS size string.
fitContainer boolean | undefined Determines how the thumbnail fits within its container.
`true` uses "contain", `false` uses "cover".
Defaults to `true`.
sizes string Value for the `sizes` attribute of the responsive image.
Controls how the browser selects appropriate image sizes.
Defaults to `"100vw"`.
quality number Image quality parameter (typically 1–100).
Passed to image processing services.
Defaults to `80`.
thumbnailWidths number[] Width breakpoints used to generate the responsive thumbnail `srcset`.
Defaults to predefined thumbnail widths.