Skip to main content

AMP Sort Order for E-Commerce Example Source Code

A Sort Order Implemented in AMP

An AMP Tech Guide

This page shows crucial snippets of the code used on Example of a sort order implemented using AMP Bind and AMP List.
Required tags in the document head:

<!-- Required tags: Charset,  canonical link, and viewport -->
<meta charset="utf-8">
<link rel="canonical" href="https://www.stonetemple.com/amp/examples/amp-sort-order-code.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- Required: The AMP project default CSS and noscript -->
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Required: The AMP Project JS -->
<script async src="https://cdn.ampproject.org/v0.js"></script>

The custom CSS is put inside a style tag with the attribute name amp-custom.

<style amp-custom>
  /* any custom style goes here */
  body {
      font-family: "Helvetica", "Arial", sans-serif;
      padding-top: 60px;
      line-height: 1.6em;
      font-weight: normal;
      font-size: 16px;
      margin: 0;
    }
    amp-img {
      margin-right: 6px;
    }
    p {
      margin: 0px 0px 18px;
    }
    a {
      color: #66ac2f;
      cursor: pointer;
    }
    a:hover {
      text-decoration: none;
    }
    .content {
      max-width: 700px;
      width: 100%;
      margin: 20px auto 50px;
    }
    .small {
      font-size: 12px;
      text-align: right;
    }
    .wrapper {
      padding: 0px 24px;
    }
  .header.fixed{left:0;position:fixed;top:0;transform:translateY(0%);transition:all .4s ease;width:100%;z-index:1000;
    height: 44px; background-color: #1f70a8;}
.header.fixed a {text-decoration: none;color:#fff;}
      .header.fixed a:hover {text-decoration: underline;}
    h1 {
    text-align: center;
  font-size: 36px;
    line-height: 44px;
  font-family: 'Arial', sans-serif;
  color: #3197a3;
  margin-bottom: 30px;
  margin-top: 0;
  height: auto;
  width: 100%;
  }
    .title p {
      color: #ffffff;
      padding: 10px 0px 0px;
      text-align: center;
      margin: 0px;
    }
     footer p {
      font-size: 14px;
    }
    footer {
      background-color: #808183;
      text-align: center;
      color: #ffffff;
      padding: 14px 0px 0px;
      overflow: hidden;
    }
    .url-entry {margin-bottom: 16px;border: 2px solid #ddd;
      background: -moz-linear-gradient(45deg, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
    .url-entry amp-img {text-align: center;}
  div.plays amp-img {
    background-color: gray;
    border: 1px solid black;
    display: block;
  }
        .hide {
        display: none;
      }
</style>

AMP components used in this example (the AMP story component):

<!-- This is the AMP component that enable functionality used on this page (AMP-bind, AMP-list and AMP-mustache). -->
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

All of the preceding code blocks should be put in the document head. The following code blocks should reside in the document body.
Using AMP-bind to select which request to send to the server

<p>
Sort by
 <select on="change:AMP.setState({
              products: {
              sortChoiceValue: event.value,
              listSrc: 'request.php?sort='+event.value+'&_=RANDOM'
              }
              })" name="country" id="country" required >
      <option value="priceAsc">Price Lowest to Highest</option>
      <option value="priceDesc">Price Highest to Lowest</option>
    <option value="ratingAsc">Rating Lowest to Highest</option>
    <option value="ratingDesc">Rating Highest to Lowest</option>
  </select>
</p>

This combination of AMP-list and AMP-mustace is used to retrieve the products in a specified order.

<amp-list width="auto"
  height="600"
  layout="fixed-height"
  src="request.php"
  [src]="products.listSrc">
  <template type="amp-mustache">
    <div class="url-entry">
    <table width="100%">
      <tr valign="top">
      <td width="35%">
          <amp-img src="images/{{image}}" height="200" width="100"></amp-img>
      </td>
      <td>
            <h3>{{name}}</h3>
      <p><br>
    ${{price}}<br>
    {{rating}}</p>
      </td>
    </tr>
    </table>
    </div>
  </template>
</amp-list>

 

Follow Us