Comment on page
Product
This tag is only available on eCommerce plans.
The Product generator allows you to access elements of a product in your storefront. This allows you to display details on the products inventory, price range, variants, and media associated with the product.
<Product
dataRef={content.product}
item={(product) => (
<ProductInventory product={product} />
<ProductPrice product={product} />
<ProductOptions dataRef={product.options} product={product} />
<Media
dataRef={product.media[0]}
category="image"
readOnly={true}
/>
)}
/>
When Product is added, a new button will be added to the top right corner of the component that allows you to pick a product from your storefront as shown below.
Choose a product from your Storefront to have
Pick a Product from your storefront that will be used
If you're using Elastic Path, you can add additional fields to your product data with Product Extensions. Product Extensions are a great way to add additional data to products.
<Product
dataRef={content.product}
item={(product) => (
<div>{product.attributes.extensions['template-name']['attribute-name']}
)
/>
The same information can be accessed from the JavaScript associated with the component. For example:
this.init(function(section) {
var products = _shop._products
var container = section.node.querySelector('[data-product]')
var productId = container.dataset.product
var product = products[productId]
// Product Extensions
product._data.attributes.extensions['template-name']['attribute-name']
})
If you're curious about the other data associated with a products, we encourage you to explore it your web browser:
- 1.Open any published page that has products embedded it
- 2.
- 3.Type
_shop._products - 4.Expand the array to view product data
- dataRef: DataLocator - the data-element storing the Generator's configuration
Last modified 2mo ago