AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 网站

产品浏览页面

查看演示 在游乐场中打开

简介

这是一个产品浏览页面的示例模板。它演示了在电子商务网站中效果良好的 AMP 组件的使用。示例包括社交分享、图片库、个性化内容、广告等。

此外，还必须在页眉中导入已使用的 AMP 组件。导入 amp-carousel 以创建自动推进产品列表。

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

导入 amp-list 以实现自动建议搜索

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

导入 amp-mustache 作为 amp-list 的格式模板

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

导入 amp-form 以实现自动建议搜索

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

导入 amp-analytics 以监控使用情况

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

导入 amp-fit-text 以使文本适应所提供的空间

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

导入 amp-sidebar 以实现菜单

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

导入 amp-bind 以实现过滤和排序

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

导入 amp-lightbox 以显示过滤和排序部分

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

导入 amp-selector 以实现自动建议搜索

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

使用 amp-sidebar 组件让客户有机会快速跳转到任何产品类别

<amp-sidebar id="drawermenu" layout="nodisplay">
  <a href="/documentation/examples/e-commerce/product_browse_page">Products</a>
  <hr>
  <a href="#">Fruit</a>
  <a href="#">Vegetable</a>
  <a href="#">More</a>
</amp-sidebar>

AMP 支持表单，这意味着你可以直接将产品搜索集成到 AMP 中。在此，我们实现了自动完成，尝试搜索“Apple”，你应该能够选择“Apple”。请查看 自动建议示例，以了解有关如何实现自动建议的更多详细信息。

AMP 不支持自定义 Javascript，但你可以使用 CSS3 动画来丰富你的页面。当搜索框获得焦点时，扩展文本字段仅使用 CSS 实现。

<div class="header">
  <div class="menu-wrap">
    <a id="sample-menu" on="tap:drawermenu.toggle">
      <amp-img srcset="/static/samples/img/ic_menu_black_1x_web_24dp.png 1x, /static/samples/img/ic_menu_black_2x_web_24dp.png 2x" width="24" height="24" alt="navigation"></amp-img>
    </a>
    <input name="search" type="search" placeholder="Search" on="change:AMP.setState({
      products: {
      listSrc: '/documentation/examples/api/products?searchProduct='+ event.value +'&sort='+ products.sortChoiceValue +'&searchColor='+ products.searchColor +'&_=RANDOM',
      searchProduct: event.value
    }});
      input-debounced:
        AMP.setState({
          autosuggest: {
            query: event.value,
            showDropdown: event.value
          }
        }),
      autosuggest-list.show;
      tap:
        AMP.setState({
          autosuggest: {
            query: autosuggest.query == null ? '' : autosuggest.query,
            showDropdown: 'true'
          }
        }),
        autosuggest-list.show" [value]="autosuggest.query || ''" value>
<!--START_HINT_0-->
    <input type="submit" value>
<!--END_HINT-->
  </div>
  <div class="suggest">
      <div class="autosuggest-container" hidden [hidden]="!(autosuggest.showDropdown && autosuggest.query)">
        <amp-list class="autosuggest-box" layout="fixed-height" height="120" src="/documentation/examples/api/products-autosuggest" [src]="autosuggest.query ?
            autosuggest.endpoint + autosuggest.query :
            autosuggest.emptyAndInitialTemplateJson" id="autosuggest-list" binding="refresh">
          <template type="amp-mustache">
            <amp-selector id="autosuggest-selector" keyboard-select-mode="focus" layout="container" on="
                select:
                  AMP.setState({
                    autosuggest: {
                      query: event.targetOption,
                      showDropdown: false
                    },
                    products: {
                      listSrc: '/documentation/examples/api/products?searchProduct='+ event.targetOption +'&sort='+ products.sortChoiceValue +'&searchColor='+ products.searchColor +'&_=RANDOM',
                      searchProduct: event.targetOption
                    }
                  }),
                  autosuggest-list.hide">
              {{#results}}
                <div role="option" tabindex="0" on="tap:autosuggest-list.hide" option="{{.}}">{{.}}</div>
              {{/results}}
              {{^results}}
                <div class="{{#autosuggest.query}}empty{{/ autosuggest.query}}">
                  {{#autosuggest.query}}Sorry! We couldn't find the product 😰{{/autosuggest.query}}
                </div>
              {{/results}}
            </amp-selector>
          </template>
        </amp-list>
      </div>
    </div>
</div>

英雄滑块

amp-carousel 组件可用于快速创建全出血、自动推进的幻灯片，展示你最新的促销活动。我们

为幻灯片标题使用 amp-fit-text 组件，以自动调整文本大小以适应旋转木马。

10 大最佳苹果 如此多的橙色！ 如此健康！ 
<amp-carousel id="hero-images" width="1024" height="480" layout="responsive" type="slides" autoplay>
  <a href="#">
    <amp-img src="/static/samples/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="/static/samples/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="/static/samples/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>

产品配置

产品的初始状态和辅助变量由 amp-state 配置。

<amp-state id="products">
  <script type="application/json">
{
        "sortChoiceValue": "price-descendent",
        "searchProduct": "",
        "searchColor": "all",
        "listSrc": "/documentation/examples/api/products?sort=price-descendent&searchColor=all&_=RANDOM"
      }
  </script>
</amp-state>

筛选和排序

我们通过结合 amp-bind 和 amp-list 来实现筛选和排序。对于筛选，我们通过 amp-bind 根据颜色选择来更新 amp-list 的 src。

类似地，我们使用选择选项来允许用户根据价格对产品进行排序，然后修改 amp-list 的 src url。

筛选结果

颜色

<div id="main-wrap">
  <div class="refine">
    <h3>Filter results</h3>
    <h4>Color</h4>
      <div><label><input type="radio" id="yellow" name="colorFilter" value="Yellow" on="change:AMP.setState({
        products: {
        searchColor: event.checked == true ? 'yellow' : '',
        listSrc: '/documentation/examples/api/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'yellow' : '') +'&_=RANDOM'
        }
        })"> yellow </label></div>
        <div><label><input type="radio" id="orange" name="colorFilter" value="Orange" on="change:AMP.setState({
        products: {
        searchColor: event.checked == true ? 'orange' : '',
        listSrc: '/documentation/examples/api/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'orange' : '') +'&_=RANDOM'
        }
        })"> orange </label></div>

        <div><label><input type="radio" id="green" name="colorFilter" value="Green" on="change:AMP.setState({
        products: {
        searchColor: event.checked == true ? 'green' : '',
        listSrc: '/documentation/examples/api/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'green' : '') +'&_=RANDOM'
        }
        })"> green </label></div>
        <div><label><input type="radio" id="all" name="colorFilter" value="all" on="change:AMP.setState({
        products: {
        searchColor: event.checked == true ? 'all' : '',
        listSrc: '/documentation/examples/api/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'all' : '') +'&_=RANDOM'
        }
        })"> all </label></div>
  </div>
  <div class="content">
    <div id="info-wrap">
      <div>
        <label for="sort">Sort</label>
        <select id="sort" on="change:AMP.setState({
        products: {
        sortChoiceValue: event.value,
        listSrc: '/documentation/examples/api/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>
      </div>
      <button class="filter-mobile" on="tap:filter-lightbox">
        Filter
      </button>
    </div>
    <amp-list width="auto" height="600" layout="fixed-height" src="/documentation/examples/api/products?sort=price-descendent&searchColor=all&_=RANDOM'" [src]="products.listSrc" binding="no" class="grid" data-amp-replace="RANDOM">
      <template type="amp-mustache">
        <a class="products" href="#">
          <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>

我们在移动版的筛选部分实现了一个额外的灯箱。

<amp-lightbox id="filter-lightbox" layout="nodisplay">
  <div class="filter-section">
    <h3>Filter results</h3>
    <h4>Color</h4>
    <div>
      <label> yellow <input type="radio" name="colorFilter" value="Yellow" on="change:AMP.setState({
        products: {
        searchColor: event.checked == true ? 'yellow' : '',
        listSrc: '/documentation/examples/api/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'yellow' : '') +'&_=RANDOM'
        }
        }), filter-lightbox.close"></label>
      <label> orange <input type="radio" name="colorFilter" value="Orange" on="change:AMP.setState({
        products: {
        searchColor: event.checked == true ? 'orange' : '',
        listSrc: '/documentation/examples/api/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'orange' : '') +'&_=RANDOM'
        }
        }), filter-lightbox.close"></label>
      <label> green <input type="radio" name="colorFilter" value="Green" on="change:AMP.setState({
        products: {
        searchColor: event.checked == true ? 'green' : '',
        listSrc: '/documentation/examples/api/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'green' : '') +'&_=RANDOM'
        }
        }), filter-lightbox.close"> </label>
      <label> all <input type="radio" name="colorFilter" value="all" on="change:AMP.setState({
        products: {
        searchColor: event.checked == true ? 'all' : '',
        listSrc: '/documentation/examples/api/products?searchProduct='+ products.searchProduct +'&sort='+ products.sortChoiceValue +'&searchColor='+ (event.checked == true ? 'all' : '') +'&_=RANDOM'
        }
        }), filter-lightbox.close"> </label>
        </div>
    <div>
      <a on="tap:filter-lightbox.close" role="button" tabindex="0">
        Close
      </a>
    </div>
  </div>
</amp-lightbox>

优惠和亮点

amp-carousel 还支持更传统的轮播模式。

推荐

Apple

★★★★★

$1.99

Orange

★★★★☆

$0.99

Pear

★★★☆☆

$1.50

Banana

★★★★★

$1.50

Apple 2

★★★★★

$1.99

Orange 2

★★★★☆

$0.99

Pear 2

★★★☆☆

$1.50

Banana 2

★★★★★

$1.50

 
<div class="recommendations">
  <h3>Recommendations</h3>
  <amp-carousel width="auto" height="160" layout="fixed-height" type="carousel">
    <a href="#" role="listitem">
      <amp-img width="640" height="426" layout="responsive" alt="Apple" src="/static/samples/img/product1_640x426.jpg"></amp-img>
      <p class="name">Apple</p>
      <p class="star">★★★★★</p>
      <p class="price">$1.99</p>
    </a>
    <a href="#" role="listitem">
      <amp-img width="640" height="426" layout="responsive" alt="Orange" src="/static/samples/img/product2_640x426.jpg"></amp-img>
      <p class="name">Orange</p>
      <p class="star">★★★★☆</p>
      <p class="price">$0.99</p>
    </a>
    <a href="#" role="listitem">
      <amp-img width="640" height="426" layout="responsive" alt="Pear" src="/static/samples/img/product3_640x426.jpg"></amp-img>
      <p class="name">Pear</p>
      <p class="star">★★★☆☆</p>
      <p class="price">$1.50</p>
    </a>
    <a href="#" role="listitem">
      <amp-img width="640" height="426" layout="responsive" alt="Banana" src="/static/samples/img/product4_640x426.jpg"></amp-img>
      <p class="name">Banana</p>
      <p class="star">★★★★★</p>
      <p class="price">$1.50</p>
    </a>
    <a href="#" role="listitem">
      <amp-img width="640" height="426" layout="responsive" alt="Apple" src="/static/samples/img/product1_640x426.jpg"></amp-img>
      <p class="name">Apple 2</p>
      <p class="star">★★★★★</p>
      <p class="price">$1.99</p>
    </a>
    <a href="#" role="listitem">
      <amp-img width="640" height="426" layout="responsive" alt="Orange" src="/static/samples/img/product2_640x426.jpg"></amp-img>
      <p class="name">Orange 2</p>
      <p class="star">★★★★☆</p>
      <p class="price">$0.99</p>
    </a>
    <a href="#" role="listitem">
      <amp-img width="640" height="426" layout="responsive" alt="Pear" src="/static/samples/img/product3_640x426.jpg"></amp-img>
      <p class="name">Pear 2</p>
      <p class="star">★★★☆☆</p>
      <p class="price">$1.50</p>
    </a>
    <a href="#" role="listitem">
      <amp-img width="640" height="426" layout="responsive" alt="Banana" src="/static/samples/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>
</div>

畅销商品

使用 AMP，您可以轻松地拉取不同的最新优惠或亮点，而无需更改页面。要做到这一点，只需使用 amp-list 向 JSON 端点发出 CORS 请求，该端点提供相关产品的列表。这些产品会填充到客户端的 amp-mustache 模板中。在此处了解有关 amp-list 的更多信息 here

畅销商品

<div class="bestsellers">
  <h3>Bestsellers</h3>
  <amp-list class="items" width="auto" height="160" layout="fixed-height" src="/static/samples/json/related_products.json" binding="no">
    <template type="amp-mustache">
      <a href="#">
        <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>
</div>

自动建议配置

产品自动建议的初始状态和辅助变量由 amp-state 配置。

<amp-state id="autosuggest">
    <script type="application/json">
    {
      "endpoint": "/documentation/examples/api/products-autosuggest?q=",
      "emptyAndInitialTemplateJson": [{
        "query": "",
        "results": []
      }],
      "showDropdown":false,
      "query":""
    }
    </script>
</amp-state>

用户分析

分析必须在正文中配置。此处我们使用 Google Analytics 跟踪页面浏览量。

<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>
需要进一步说明吗？

如果本页上的说明未能涵盖您的所有问题，请随时联系其他 AMP 用户，讨论您的确切用例。

转到 Stack Overflow
一个未说明的功能？

AMP 项目强烈鼓励您参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您对您特别热衷的问题做出一次性贡献。

在 GitHub 上编辑示例