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

產品瀏覽頁

檢視示範 在 Playground 中開啟

簡介

這是產品瀏覽頁的範例範本。它示範了 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 網址。

篩選結果

色彩

<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 也支援更傳統的輪播模式。

建議

蘋果

★★★★★

$1.99

橘子

★★★★☆

$0.99

西洋梨

★★★☆☆

$1.50

香蕉

★★★★★

$1.50

蘋果 2

★★★★★

$1.99

橘子 2

★★★★☆

$0.99

西洋梨 2

★★★☆☆

$1.50

香蕉 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，請參閱這裡

暢銷商品

<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 上編輯範例