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

なお、今回は規格を一つだけしか使わず、
変更対象とするのは商品一覧と商品詳細の2ページ。

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

カートへ商品を入れる時に実行される、AddCartTypeという処理を拡張する。

処理を拡張すると規格表示がラジオボタンに変わるため、
CSSを使ってレイアウトを整える。
しかし、このままだと、規格を選択した時にformにセットされる
ProductClassのhidden値が入らなくなってしまうため、コードを追加する。

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

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

上記はセレクトボックスを選択した時に実行される処理のセレクタのみを変更。
書き方は他にもあるので、色々と工夫することもできる。
商品詳細ページは、これで動くようになるが、商品一覧ページはまだ動かない。

inputタグに一手間加える

なぜ商品一覧ページでは動かないのか。
追加した処理で上手く動くのは、はじめに表示される商品のみ。
これはラジオボタンのinputタグに設定されているidが、各商品で同じだから。
別々の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を設定し直している。

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