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に関する各種設定
今回のプラグインでは、
以上が、
次回は引き続き管理画面の解説を行います。