AMPでEC-CUBEがさらに便利に快適に!
第3回 実践!EC-CUBEのAMP HTML化[その2:プラグイン管理機能]
EC-CUBE 4のAMP HTML化 (続き)
今回は前回に引き続き,
amp-bindによるデータバインディング
EC-CUBE 4のデフォルトで商品規格が2つ存在する商品詳細ページの場合,
このとき,
これは1つ目のセレクトボックスで選択する商品規格1のvalue属性の値を元に,
この挙動をAMP HTML化したページで実現するには,
たとえば前述の商品詳細ページにおいて,
<select id="classcategory_id1" name="classcategory_id1" class="form-control" on="change: AMP.setState({
selectOption: classCategories.items[0].classcategory_1.filter(elm => elm.id == event.value)[0], selectResult: ''})">
ポイントはon属性にセットしたchangeイベントです。
ここで実行されるのはセレクトボックスを変更した際に,
selectOptionでは,
<amp-state id="classCategories" src="https://◯◯◯.com/classCategories.json">
そしてselectOptionの定義および更新が発生したタイミングで,
<amp-list class="ec-selectList" layout="flex-item" [src]="selectOption || 'https://◯◯◯.com/classCategories.json'" src="./classCategories.json">
ここでamp-list要素が新たに参照するようになったselectOptionのデータを元に,
これで1つ目のセレクトボックスを選択した後,
そして今度は,
1つ目のセレクトボックス変更時に定義した空のデータであるselectResult,
<select id="classcategory_id2" name="classcategory_id2" class="form-control" on="change: AMP.setState({
selectResult: selectOption.classcategory_2.filter(elm => elm.id == event.value)[0]})">
これによりユーザが選択した商品の,
参考までに商品金額,
<amp-list class="ec-productRole__info" height="155" layout="flex-item" src="https://◯◯◯.com/classCategories.json">
<template type="amp-mustache">
<div class="ec-productRole__priceRegular">
<span class="ec-productRole__priceRegularPrice">通常価格:
<span class="price01-default">{
{default_price01}}
</span>
<span class="ec-productRole__priceRegularTax">税込
</div>
<div class="ec-productRole__price">
<div class="ec-price">
<span class="ec-price__price price02-default" [text]="selectResult.price02_inc_tax || classCategories.items[0].default_price02">{
{default_price02}}
<span class="ec-price__tax">税込
</div>
</div>
<div class="ec-productRole__code"> 商品コード:
<span class="product-code-default" [text]="selectResult.product_code || classCategories.items[0].default_code">{
{default_code}}
</div>
</template>
</amp-list>
初期状態では,
管理機能の概要
EC-CUBE 4をAMP HTML化するにあたり,
AMPプラグインでは,
AMPプラグインの追加によって拡張される管理機能
AMPプラグインを導入することによって,
- プラグイン・
AMP設定ページでの, AMP HTMLに関する各種設定 - レイアウト管理での,
端末種別AMPの追加 - ページ管理での,
AMP HTMLに関する各種設定 - ブロック管理での,
AMP HTMLに関する各種設定
今回のプラグインでは,
以上が,
次回は引き続き管理画面の解説を行います。
バックナンバー
AMPでEC-CUBEがさらに便利に快適に!
- 第5回 海外からも注目。あなたもEC-CUBE×AMPプロジェクトに参加できる?!
- 第4回 実践!EC-CUBEのAMP HTML化[その3:管理画面,インストール,各種設定]
- 第3回 実践!EC-CUBEのAMP HTML化[その2:プラグイン管理機能]
- 第2回 実践!EC-CUBEのAMP HTML化[その1:商品詳細ページ]
- 第1回 いよいよECでもAMP対応が加速!EC-CUBEでAMP対応を行った方法や成果を公開