Products
Fruit Vegetable More

Product Browse Page

Edit on Github
Open in Playground View Demo

Introduction

This sample showcases how to build a product browse page in AMP HTML.

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 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>
  <form method="GET"
    action="/samples_templates/product_browse_page/search"
    target="_top">
    <input name="search"
      type="search"
      placeholder="Search">
    <a id="sample-logo"
      href="/">Products</a>
    <input type="submit"
      value="">
  </form>
</div>

A Hero Slider

The amp-carousel component can be used to quickly create full-bleed, auto-advancing slideshows showcasing your latest promotions.

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>
    <div class="caption">The 10 best Apples</div>
  </a>
  <a href="#">
    <amp-img src="/img/product_hero2_1024x683.jpg"
      layout="fill"
      alt="product hero 2"
      attribution="visualhunt"></amp-img>
    <div class="caption">So much orange!</div>
  </a>
  <a href="#">
    <amp-img src="/img/product_hero3_1024x683.jpg"
      layout="fill"
      alt="product hero 3"
      attribution="visualhunt"></amp-img>
    <div class="caption">So healthy.</div>
  </a>
</amp-carousel>

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

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>