Client-side filtering

Edit on Github
Open in Playground

Introduction

This is a sample showing how to implement client-side filtering.

Setup

Additionally used AMP components must be imported in the header. We use amp-bind to store products locally into a variable.

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

We use amp-list to retrieve static data.

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

We use amp-mustache to render data.

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

Client-side Filter

It is possible to implement client-side filtering by using amp-list, amp-state and amp-bind.

The amp-state is initially setup with data from an endpoint which returns a list of available products; the user can choice between different colors and that selection sets the variable filteredProducts to the result of a filter expression. The filter expression is an amp-bind expression which uses the Array.filter function.

filteredProducts variable is then used as src of amp-list.

The alternative to this approach is using server-side filtering which we explain in the product sample. amp-list does not resize automatically, it is possible to calculate it and update it by using amp-bind: here we are binding the [height] to the length of the filteredProducts array times the height of a single element.

Example

Select your favourite color

<div class="m1">
  <amp-state id="allProducts"
    src="/json/related_products.json"></amp-state>
  <h3>Select your favourite color</h3>
  <select class="mt1 ampstart-input"
    on="change:AMP.setState({filteredProducts: allProducts.items.filter(a => event.value == 'all' ? true : a.color == event.value)})">
    <option value="all"
      selected="">All</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="yellow">yellow</option>
    <option value="orange">orange</option>
  </select>
  <amp-list credentials="include"
    width="auto"
    height="372"
    [height]="(40 + 24)*filteredProducts.length"
    layout="fixed-height"
    src="/json/related_products.json"
    [src]="filteredProducts">
    <template type="amp-mustache">
      <amp-img src="{{img}}"
        class="mt1"
        layout="fixed"
        width="60"
        height="40"
        alt="{{name}}"></amp-img>
      {{name}}
    </template>
  </amp-list>
</div>