shopify-moneycomponent
Accepts query a reference to a Money object, and uses the store's country and language market to format it correctly. This component must be a child of a shopify-context component. The component takes a query attribute that defines the context it's a part of, and the field to query. This component produces a text node with the formatted price.
Usually you want a product price to update based on the selected variant, so make sure to reference the field if you are using the shopify-variant-selector component.
See the playground for more complete examples.
Anchor to attributesAttributes
- Anchor to queryquerystringrequired
Defines the context to reference and field to query. For example
query="product.title"would query the title of the product context.- Anchor to formatformat
The format of the price. Defaults to
money.
MoneyAttributes
- format
The format of the price. Defaults to `money`.
Format - query
Defines the context to reference and field to query. For example `query="product.title"` would query the title of the product context.
string
interface MoneyAttributes {
/** Defines the context to reference and field to query. For example `query="product.title"` would query the title of the product context. */
query: string;
/**
* The format of the price. Defaults to `money`.
*/
format?: Format;
}Format
The currency format format. - `money` - Display the price in the store's currency. eg. `$100.00` - `money_without_currency` - Display the price in the store's currency, without the currency symbol. eg. `100.00` - `money_with_currency` - Display the price in the store's currency, including the currency symbol. eg. `$100.00 USD`
"money" | "money_without_currency" | "money_with_currency"Example
HTML
examples
example
description
This is the default example
HTML
<shopify-store store-domain="https://your-store.myshopify.com" > </shopify-store> <!-- The context is bound to the store --> <shopify-context type="product" handle="handle-of-product" > <template> <h1> <!-- Query the selected or first available variant's price. Renders a text node with the formatted price. --> <shopify-money format="money_with_currency" query="product.selectedOrFirstAvailableVariant.price" ></shopify-money> </h1> </template> </shopify-context>