Products
Fruit Vegetable More

Product Browse Page

Edit on Github
Open in Playground View Demo

Introduction

This is a sample template for a news article in AMP. It demonstrates the usage of AMP components which works well in news articles. Examples include social sharing, image galleries, personalized content, ads, and more.

Additionally used AMP components must be imported in the header.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  Use the [amp-sidebar](/components/amp-sidebar/) component to give customers the chance to quickly jump to any of your product categories.

Example

<amp-sidebar id="drawermenu"
  layout="nodisplay">
  <a href="/"
    class="caps text-decoration-none block p1">Products</a>
  <hr/>
  <a class="caps text-decoration-none block p1"
    href="/samples_templates/product_browse_page/preview/">Fruit</a>
  <a class="caps text-decoration-none block p1"
    href="/samples_templates/product_browse_page/preview/">Vegetable</a>
  <a class="caps text-decoration-none block p1"
    href="/samples_templates/product_browse_page/preview/">More</a>
</amp-sidebar>

AMP supports forms, which means you can directly integrate a product search into your AMPs. Try searching for "Apple". AMP doesn't support custom Javascript, but you can use CSS3 animations to enrich your page. The expanding text field when the search box is focused is implemented with CSS only.

Example

<div class="header">
  <a id="sample-menu"
    on="tap:drawermenu.toggle">
    <amp-img srcset="/img/ic_menu_white_1x_web_24dp.png 1x, /img/ic_menu_white_2x_web_24dp.png 2x"
      width="24"
      height="24"
      alt="navigation"></amp-img>
  </a>
  <input name="search"
    type="text"
    placeholder="Search"
    on="change:AMP.setState({
      products: {
      listSrc: '/samples_templates/products?searchProduct='+ event.value +'&sort='+ products.sortChoiceValue +'&searchColor='+ products.searchColor +'&_=RANDOM',
      searchProduct: event.value
      }
      })">
  <a id="sample-logo"
    href="/">Products</a>

Keep this just for creating the change event

Example

<input type="submit"
  value="">
</div>

A Hero Slider

The amp-carousel component can be used to quickly create full-bleed, auto-advancing slideshows showcasing your latest promotions. We use the amp-fit-text component for the slide headers to automatically size the text to fit into the carousel.

Example

<amp-carousel id="hero-images"
  width="1024"
  height="480"
  layout="responsive"
  type="slides"
  autoplay>
  <a href="#">
    <amp-img src="/img/product_hero1_1024x683.jpg"
      layout="fill"
      alt="product hero 1"
      attribution="visualhunt"></amp-img>

    <amp-fit-text class="caption"
      width="300"
      height="200"
      layout="responsive"
      max-font-size="36">
      The 10 best Apples
    </amp-fit-text>
  </a>
  <a href="#">
    <amp-img src="/img/product_hero2_1024x683.jpg"
      layout="fill"
      alt="product hero 2"
      attribution="visualhunt"></amp-img>
    <amp-fit-text class="caption"
      width="300"
      height="200"
      layout="responsive"
      max-font-size="36">
      So much orange!
    </amp-fit-text>
  </a>
  <a href="#">
    <amp-img src="/img/product_hero3_1024x683.jpg"
      layout="fill"
      alt="product hero 3"
      attribution="visualhunt"></amp-img>
    <amp-fit-text class="caption"
      width="300"
      height="200"
      layout="responsive"
      max-font-size="36">
      So healthy!
    </amp-fit-text>
  </a>
</amp-carousel>

Filter and sorting

We implemented filtering and ordering by combining amp-bind and amp-list. For filtering, we update, via amp-bind, the src of amp-list based on the color selection. Similarly, we use a select option to allow the user to sort products based on price and we then modify the src url of amp-list.

Example

Filter results

Color

<div id="main-wrap">
  <div class="refine p1">
    <h3>Filter results</h3>
    <h4 class="p1">Color</h4>
    <div class="ampstart-input ampstart-input-chk inline-block relative mb3 mx1">
      <input type="radio"
        id="yellow"
        name="colorFilter"
        class="relative"
        value="Yellow"
        on="change:AMP.setState({
          products: {
          searchColor: event.checked == true ? 'yellow' : '',
          listSrc: '/samples_templates/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'yellow' : '') +'&_=RANDOM'
          }
          })">
      <label for="yellow"> yellow </label>
    </div>
    <div class="ampstart-input ampstart-input-chk inline-block relative mb3 mx1">
      <input type="radio"
        id="orange"
        name="colorFilter"
        class="relative"
        value="Orange"
        on="change:AMP.setState({
          products: {
          searchColor: event.checked == true ? 'orange' : '',
          listSrc: '/samples_templates/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'orange' : '') +'&_=RANDOM'
          }
          })">
      <label for="orange"> orange </label>
    </div>
    <div class="ampstart-input ampstart-input-chk inline-block relative mb3 mx1">
      <input type="radio"
        id="green"
        name="colorFilter"
        class="relative"
        value="Green"
        on="change:AMP.setState({
          products: {
          searchColor: event.checked == true ? 'green' : '',
          listSrc: '/samples_templates/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'green' : '') +'&_=RANDOM'
          }
          })">
      <label for="green"> green </label>
    </div>
    <div class="ampstart-input ampstart-input-chk inline-block relative mb3 mx1">
      <input type="radio"
        id="all"
        name="colorFilter"
        class="relative"
        value="all"
        on="change:AMP.setState({
          products: {
          searchColor: event.checked == true ? 'all' : '',
          listSrc: '/samples_templates/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'all' : '') +'&_=RANDOM'
          }
          })">
      <label for="all"> all </label>
    </div>
  </div>
  <div class="content">
    <div id="info-wrap">
      <div class="ampstart-input inline-block relative m1">
        <select id="sort"
          on="change:AMP.setState({
            products: {
            sortChoiceValue: event.value,
            listSrc: '/samples_templates/products?searchProduct='+products.searchProduct+'&sort='+event.value+'&searchColor='+products.searchColor+'&_=RANDOM'
            }
            })">
          <option value="price-descendent">Price high to low
          </option>
          <option value="price-ascendent">Price low to high
          </option>
        </select>
        <label for="sort"
          class="absolute top-0 right-0 bottom-0 left-0">Sort</label>
      </div>
      <button class="ampstart-btn caps m1 mb3 filter-mobile"
        on="tap:filter-lightbox">
        Filter
      </button>
    </div>
    <amp-list width="auto"
      height="600"
      layout="fixed-height"
      src="/samples_templates/products?sortChoiceValue=price-descendent&searchColor=all&_=RANDOM'"
      [src]="products.listSrc"
      class="grid">
      <template type="amp-mustache">
        <a class="m1 text-decoration-none products"
          href="/samples_templates/product/">
          <amp-img width="150"
            height="100"
            alt="{{name}}"
            src="{{img}}"></amp-img>
          <p class="name">{{name}}</p>
          <p class="star">{{{stars}}}</p>
          <p class="price">${{price}}</p>
        </a>
      </template>
    </amp-list>
  </div>
</div>

Offers & Highlights

The amp-carousel supports also a more traditional carousel mode.

Example

<amp-carousel class="m1"
  width="auto"
  height="160"
  layout="fixed-height"
  type="carousel">
  <a class="m1 text-decoration-none"
    href="#"
    role="listitem">
    <amp-img width="640"
      height="426"
      layout="responsive"
      alt="Apple"
      src="/img/product1_640x426.jpg"></amp-img>
    <p class="name">Apple</p>
    <p class="star">★★★★★</p>
    <p class="price">$1.99</p>
  </a>
  <a class="m1 text-decoration-none"
    href="#"
    role="listitem">
    <amp-img width="640"
      height="426"
      layout="responsive"
      alt="Orange"
      src="/img/product2_640x426.jpg"></amp-img>
    <p class="name">Orange</p>
    <p class="star">★★★★☆</p>
    <p class="price">$0.99</p>
  </a>
  <a class="m1 text-decoration-none"
    href="#"
    role="listitem">
    <amp-img width="640"
      height="426"
      layout="responsive"
      alt="Pear"
      src="/img/product3_640x426.jpg"></amp-img>
    <p class="name">Pear</p>
    <p class="star">★★★☆☆</p>
    <p class="price">$1.50</p>
  </a>
  <a class="m1 text-decoration-none"
    href="#"
    role="listitem">
    <amp-img width="640"
      height="426"
      layout="responsive"
      alt="Banana"
      src="/img/product4_640x426.jpg"></amp-img>
    <p class="name">Banana</p>
    <p class="star">★★★★★</p>
    <p class="price">$1.50</p>
  </a>
  <a class="m1 text-decoration-none"
    href="#"
    role="listitem">
    <amp-img width="640"
      height="426"
      layout="responsive"
      alt="Apple"
      src="/img/product1_640x426.jpg"></amp-img>
    <p class="name">Apple 2</p>
    <p class="star">★★★★★</p>
    <p class="price">$1.99</p>
  </a>
  <a class="m1 text-decoration-none"
    href="#"
    role="listitem">
    <amp-img width="640"
      height="426"
      layout="responsive"
      alt="Orange"
      src="/img/product2_640x426.jpg"></amp-img>
    <p class="name">Orange 2</p>
    <p class="star">★★★★☆</p>
    <p class="price">$0.99</p>
  </a>
  <a class="m1 text-decoration-none"
    href="#"
    role="listitem">
    <amp-img width="640"
      height="426"
      layout="responsive"
      alt="Pear"
      src="/img/product3_640x426.jpg"></amp-img>
    <p class="name">Pear 2</p>
    <p class="star">★★★☆☆</p>
    <p class="price">$1.50</p>
  </a>
  <a class="m1 text-decoration-none"
    href="#"
    role="listitem">
    <amp-img width="640"
      height="426"
      layout="responsive"
      alt="Banana"
      src="/img/product4_640x426.jpg"></amp-img>
    <p class="name">Banana 2</p>
    <p class="star">★★★★★</p>
    <p class="price">$1.50</p>
  </a>
</amp-carousel>
  With AMP, you can easily pull in different latest offers or highlights without changing the page. To do so, just use `amp-list` to fire a CORS request to a JSON endpoint which supplies the list of related products. These are populated into an amp-mustache template on the client.
  Learn more about `amp-list` [here](/components/amp-list/)

Example

<amp-list class="items"
  width="200"
  height="100"
  layout="responsive"
  src="/json/related_products.json">
  <template type="amp-mustache">
    <a class="m1 text-decoration-none"
      href="/samples_templates/product/preview/">
      <amp-img width="640"
        height="426"
        layout="responsive"
        alt="{{name}}"
        src="{{img}}"></amp-img>
      <p class="name">{{name}}</p>
      <p class="star">{{{stars}}}</p>
      <p class="price">${{price}}</p>
    </a>
  </template>
</amp-list>
  ## User Analytics
  Analytics must be configured in the body. Here we use Google Analytics to track pageviews.

Example

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-80609902-1"
      },
      "triggers": {
        "default pageview": {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "title": "{{title}}"
          }
        }
      }
    }
  </script>
</amp-analytics>