Use the shared storefront runtime to read public Measura product and variant configuration from theme code.
These shared storefront methods are available as long as the Measura shared runtime is loaded.
window.AtomicPOS runtime state.Both methods can find product state by productId or productHandle.
productId is provided and the product is already registered in window.AtomicPOS.products, Measura uses that product directly.productHandle is provided, Measura searches already registered products by exact handle match.productHandle is provided, Measura fetches the product page, replays the embedded Measura block script in hydrate-only mode, resolves the Shopify product id from that script, and returns the hydrated product config.Sanitized responses
productId is optional when productHandle is provided.productHandle is required for cold hydration because Measura uses it to fetch the product page.window.AtomicPOS.products.| Method | Async | Description |
|---|---|---|
| getProduct(options) | Yes | Return public Measura configuration for a measured product. |
| getVariant(options) | Yes | Return public Measura configuration for one measured variant. |
window.Measura.getProduct(options)Returns the public Measura configuration for a measured product.
{
productId?: string | number;
productHandle?: string;
}Promise<{
id: string;
handle?: string;
measurementType?: "weight" | "length" | "area" | "volume" | "time";
selectedVariantId?: string;
variants: Record<
string,
{
id: string;
title?: string;
price?: number;
compareAtPrice?: number;
formattedPrice?: string;
formattedCompareAtPrice?: string;
rawFormattedPrice?: string;
rawFormattedCompareAtPrice?: string;
isPricingRulePrice?: true;
unitMeasurement?: {
value?: number;
unit?: string;
};
purchaseCondition?: {
min?: number;
max?: number;
increment?: number;
} & Record<string, any>;
settings?: {
displayStyle?: string;
presets?: Array<Record<string, any>>;
};
inventory?: {
tracksInventory: boolean;
quantity?: number;
continueSellingWhenOutOfStock: boolean;
};
}
>;
} | null>| Field | Description |
|---|---|
id | Shopify product id as a string. |
handle | Shopify product handle when available. |
measurementType | Measura measurement type configured for the product. |
selectedVariantId | Selected or first available variant id from the product block bootstrap. |
variants | Object keyed by Shopify variant id. |
variants[variantId].price | Variant price in minor units, such as cents. |
variants[variantId].compareAtPrice | Compare-at price in minor units when available. |
variants[variantId].formattedPrice | Liquid-formatted price string. |
variants[variantId].unitMeasurement | Unit measurement used for unit-price calculations. |
variants[variantId].purchaseCondition | Minimum, maximum, increment, and related purchase rules. |
variants[variantId].settings.displayStyle | Current Measura input style for the variant, such as pills or dropdown. |
variants[variantId].settings.presets | Configured preset values and labels when available. |
variants[variantId].inventory | Public inventory flags and quantity when Liquid exposed inventory data. |
null whenproductId and productHandle are missing.productHandle is missing.const product = await window.Measura.getProduct({
productHandle: "sample-backpack-4"
});
if (product) {
console.log(product.measurementType);
console.log(product.variants[product.selectedVariantId]);
}Example response:
{
"id": "9904458072362",
"handle": "sample-backpack-4",
"measurementType": "weight",
"selectedVariantId": "50661130010922",
"variants": {
"50661130010922": {
"id": "50661130010922",
"title": "Default Title",
"price": 1200,
"formattedPrice": "$12.00",
"unitMeasurement": {
"value": 1,
"unit": "lb"
},
"purchaseCondition": {
"min": 0.25,
"increment": 0.25
},
"settings": {
"displayStyle": "pills",
"presets": [
{
"label": "1 lb",
"value": 1
}
]
},
"inventory": {
"tracksInventory": true,
"quantity": 8,
"continueSellingWhenOutOfStock": false
}
}
}
}window.Measura.getVariant(options)Returns the public Measura configuration for one measured variant. This is a convenience wrapper over the same product lookup and hydration path used by getProduct().
{
productId?: string | number;
productHandle?: string;
variantId: string | number;
}Promise<{
id: string;
title?: string;
price?: number;
compareAtPrice?: number;
formattedPrice?: string;
formattedCompareAtPrice?: string;
rawFormattedPrice?: string;
rawFormattedCompareAtPrice?: string;
isPricingRulePrice?: true;
unitMeasurement?: {
value?: number;
unit?: string;
};
purchaseCondition?: {
min?: number;
max?: number;
increment?: number;
} & Record<string, any>;
settings?: {
displayStyle?: string;
presets?: Array<Record<string, any>>;
};
inventory?: {
tracksInventory: boolean;
quantity?: number;
continueSellingWhenOutOfStock: boolean;
};
} | null>null whenproductId and productHandle are missing.variantId is missing.productHandle is missing.const variant = await window.Measura.getVariant({
productHandle: "sample-backpack-4",
variantId: 50661130010922
});
if (variant?.settings?.presets) {
renderPresetButtons(variant.settings.presets);
}Example response:
{
"id": "50661130010922",
"title": "Default Title",
"price": 1200,
"formattedPrice": "$12.00",
"unitMeasurement": {
"value": 1,
"unit": "lb"
},
"purchaseCondition": {
"min": 0.25,
"increment": 0.25
},
"settings": {
"displayStyle": "pills",
"presets": [
{
"label": "1 lb",
"value": 1
}
]
},
"inventory": {
"tracksInventory": true,
"quantity": 8,
"continueSellingWhenOutOfStock": false
}
}