// Product list template with click handler, translated string and product list item children.
const ProductList = ({doc, onProductListClick, products}) => {
  return (
    <div onClick={onProductListClick}>
      <span>{localize(doc, LocalizedStringId.AMP_STORY_SHOPPING_BUY_NOW)}</span>
      <ul>
        // Iterate over products and render `ProductListItem` elements with individual product data.
        {products.map((product) => (
          <ProductListItem product={product} />
        ))}
      </ul>
    </div>
  );
};

// Product list item elements are generated from the ProductList parent.
const ProductListItem = ({product}) => {
  const {name, brand} = product;
  return (
    <li role="button">
      <div>name: {name}</div>
      <div>brand: {brand}</div>
    </li>
  );
};

...
buildCallback() {
  ...
  this.storeService_.subscribe(
    StateProperty.SHOPPING_DATA,
    (shoppingData) => {
      this.element.appendChild(
        <ProductList
          doc={this.win.document}
          onProductListClick={this.onProductListClick_}
          products={shoppingData.products}
        />
      );
    }
  );
 ...
}