【EC-CUBE4】規格をラジオボタンにして一覧表示する

EC-CUBE4で作られたサイトは、
規格がセレクトボックスとして選択できるようになっている。
これをラジオボタンにして、はじめから全ての規格を表示するように変更する。
オーナーズストアでは有償で販売されているが、これで無償で導入できる。

なお、今回は規格を一つだけ使うことを想定し、
変更するのは商品一覧と商品詳細ページとしている。

規格表示をラジオボタンに変更する

カートへ商品を入れる処理として使われている、
AddCartTypeを拡張して、処理を追加する。

処理を追加すると規格表示がラジオボタンに変わるので、
CSSを使ってレイアウトを整える。

しかし、このままだと、規格を選択した時にformにセットしているProductClassのhidden値が入らなくなってしまうため、コードを追加する。

規格を選んだ時の処理を追加する

以下のJSコードを商品一覧と商品詳細ページに追加する。
app/template/default/Product/list.twig
app/template/default/Product/detail.twig

セレクトボックスを選択した際に走る処理のセレクタのみを変更したもの。
書き方は他にもあるので、工夫してみても良い。
商品詳細ページは、これでもう動くようになる。
商品一覧ページはこれだけではまだ動かない。

inputタグに一手間加える

なぜ商品一覧ページでは動かないのか。
追加した処理で上手く動くのは、はじめに表示した商品だけである。
これはラジオボタンのinputタグに設定されているidが、各商品で同じだから。
そのため、twigファイルを一つ作って、formレイアウトを変更する。
app/template/default/Form/custom_form_div_layout.twig

あとは、list.twig内の「{% set form = forms[Product.id] %}」と
記載されている下に、「{% form_theme form ‘Form/custom_form_div_layout.twig’ %}」を追記する。

custom_form_div_layout.twigでは、ラジオボタンのinputタグに、
ChoiceTypeに設定されるユニークIDを渡し、
それを使って商品毎のidを設定し直している。

これで商品一覧ページでも動くようになる。

ABOUTこの記事をかいた人

フリーランスとして働く、フルスタックエンジニア 初崎 匠のサイト。仕事のことから趣味のアニメーション制作、英語学習など、様々なことを通じて、少しでも多くの人が幸せになれるような価値を提供できるよう挑戦し続けます。