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

Product extensions

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.

To access Product Extensions within the product tag on the product.attributes.extensions variable:

<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. Open the developer tools console

3. Type _shop._products

4. Expand the array to view product data

Attributes

• dataRef: DataLocator - the data-element storing the Generator's configuration

• item: anonymous arrow function - used to create a collection item