AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

まとめ

これで、e コマースのインタラクティブな商品詳細ページが完成しました。ページに表示されるサイズと価格は必要時にリモートの JSON エンドポイントから取得されるもので、各 SKU に応じて変化します。

このチュートリアルでは、以下の内容について学習しました。

  • <amp-state> を使用して、色、サイズ、在庫などの商品情報を取得する。
  • amp-bind を使用して、要素間のインタラクティブ性を追加する。
  • AMP を使用して、高速でリッチなユーザー エクスペリエンスを実現する。

途中でわからなくなった場合は、static/final.html ファイルで完成形をご確認ください。

次のステップ

インタラクティブな AMP ページは効果的かつ柔軟に作成することができます。詳しくは、amp-bind のドキュメントや、他の 動的な AMP コンポーネントについての説明をご覧ください。