Wrapping up
お疲れさまでした!これで、e コマースのインタラクティブな商品詳細ページが完成しました。ページに表示されるサイズと価格は必要時にリモートの JSON エンドポイントからフェッチされるもので、各 SKU に応じて変化します。
このチュートリアルでは、以下の内容について学習しました。
<amp-state>
を使用して、色、サイズ、在庫などの商品情報をフェッチする。amp-bind
を使用して、要素間のインタラクティブ性を追加する。- AMP を使用して、高速でリッチなユーザーエクスペリエンスを実現する。
途中でわからなくなった場合は、static/final.html
ファイルで完成したソリューション確認できます。
次のステップ
インタラクティブな AMP ページは効果的かつ柔軟に作成することができます。詳しくは、amp-bind
のドキュメントや、他の動的な AMP コンポーネントについての説明をご覧ください。