Products

A container that displays records based on Search results. It generates a product component for each record in the results, and displays a list of them in a grid layout. On subsequent searches or anything that triggers products to update, it updates each product component in the grid.

Provided Aliases: $products

Structure

<yield>
  <gb-list items="{ $products.products }" layout="grid">
    <gb-product product="{ $item }"></gb-product>
  </gb-list>
</yield>

Example Implementation

<gb-products></gb-products>

Properties

• This component does not have any properties.

State

Property	Type	Default	Note
products	object[]	[]	An array of objects representing products.

Events

Event	Affected State Properties
'products_updated'	products

Child Components: Product

A display container for a single product. It contains the logic for updating the product and handling click events and must be used to wrap a Simple Product Card or Product Tile. By default, it displays the product in a SimpleProductCard.

Provided Aliases: $product

• This component does not listen for any events.

Structure

<yield>
  <gb-simple-product-card></gb-simple-product-card>
</yield>

Example Implementation

// index.js
const product = {
  "data": {
    "id": "1246742",
    "title": "Cat",
    "price": "59.99",
    "image": "http://example.com/cat.jpg"
  },
  "variants": []
};

<!-- index.html -->
<gb-product product="{ product }"></gb-product>

Properties

Property	Type	Default	Required	Notes
product.data	object	{}	Yes	An object containing the product’s data.
product.variants	object[]	[]	Yes	An array of variants for the product.

State

Property	Type	Default	Notes
data	object	{}	An object containing the product’s data.
variants	object[]	[]	An array of variants for the product.
link()	function		Returns a beautified URL for this product.
onClick()	function		Requests the details of the product.
onSelect(index, persist)	function		Updates the selected variant, and sets the variant to the displayed item if persist true, otherwise keep first variant as displayed item

Child Components: Simple Product Card

A container to display the product in a simple layout.

• This component does not have any properties.
• This component does not have any properties in state.
• This component does not listen for any events.

Structure

<gb-link url="{ $product.link() }" on-click="{ $product.onClick }">
  <img riot-src="{ $product.data.image }" alt="" />
</gb-link>
<gb-link url="{ $product.link() }" on-click="{ $product.onClick }">{ $product.data.title }</gb-link>
<p>{ $product.data.price }</p>

Example Implementation

// index.js
const product = {
  "data": {
    "id": "1246742",
    "title": "Cat",
    "price": "59.99",
    "image": "http://example.com/cat.jpg"
  },
  "variants": []
};

<!-- index.html -->
<gb-product product="{ product }">
  <gb-simple-product-card></gb-simple-product-card>
</gb-product>

Child Components: Product Tile

A container to display the product with image, title, price, inventory information and rating.

• This component does not have any properties.
• This component does not have any properties in state.
• This component does not listen for any events.

Structure

<div class="gb-product-tile">
  <img riot-src="{ $product.data.image }" alt="" class="gb-product-tile__image">
  <div class="gb-product-tile__content">
    <div class="gb-product-tile__content__header">
      <h3 class="gb-product-tile__content__title">{ $product.data.title }</h3>
      <span class="gb-product-tile__content__price">{ $product.data.price }</span>
    </div>
    <div class="gb-product-tile__content__description">
      { $product.data.shortDescription }
    </div>
    <div class="gb-product-tile__content__inventory"></div>
    <div class="gb-product-tile__content__rating"></div>
  </div>
</div>

Example Implementation

// index.js
const product = {
  "data": {
    "id": "1246742",
    "title": "Cat",
    "price": "59.99",
    "image": "http://example.com/cat.jpg"
  },
  "variants": []
};

<!-- index.html -->
<gb-product product="{ product }">
  <gb-product-tile></gb-product-tile>
</gb-product>