IT女子のお気に入りフォルダ管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。/[EC-CUBE4.0.3]規格をラジオボタンにして一覧表示にする[EC-CUBE4.0.3]規格をラジオボタンにして一覧表示にする公開日:2019/10/24EC-CUBEデフォルトでは規格はセレクトボックスになっていますが、今回どうしてもラジオボタンにして、一覧表示で在庫有無をわかりやすくしたいという要望があったので対応しました。http://EC-CUBE4:規格レイアウト選択:プルダウン・ラジオボタン・規格ごとカートボタン有償ですが、上記のようなステキなプラグインがあるようです。今回は以下の条件さえ満たせば汎用性を必要としなかったので少し強引な方法ですが有償プラグインに頼らない方法で対応しました。在庫0の場合は選択不可の「×」表示にする商品一覧ページには表示不要(カートボタンも表示なし)AddCartTypeを拡張まずは、商品をカートへ入れる処理をしているsrc/Eccube/Form/Type/AddCartType.phpを拡張します。app/Customize/Form/Extension/AddCartTypeExtension.phpを作成し、以下の処理を追加します。AddCartType::class;}}これで規格の表示がラジオボタンに変わりました。このままだと規格を選択した時にformにProductClassのhidden値がセットされなくなってしまうので、規格選択時の処理を追加する必要があります。以下のJavaScriptを商品詳細ページに追加します。$sele2);}});今回は規格を一つしか使わないのですが、参考サイトに載っていた記述をそのまま拝借しました。商品一覧ページはこれだけではまだ動かないようです。今回は一覧ページには規格表示しないのでここまでの対応で留めます。一覧ページの対応は参考サイトをご覧ください。ラジオボタンのHTMLタグをカスタマイズ見た目を整えていきたいと思います。一覧表示にするためにtableタグにします。在庫がない場合にはラジオボタンは表示せず「×」として、選択不可なうえ、一目で品切れがわかるようにしたいと思います。フロント用のフォーム内容を出力するためのテンプレートを修正します。src/Eccube/Resource/template/default/Form/form_div_layout.twigをコピーしてapp/template/dafault/Form/form_div_layout.twigを作成します。商品詳細ページでForm/form_div_layout.twigを利用することを宣言します。app/template/default/Product/detail.twigに以下のように5行目を追加します。<style>準備が整ったので、app/template/dafault/Form/form_div_layout.twigのradio_widgetを以下のように変更します。-%}ここか少し強引にやっつけています。在庫がゼロの場合にラベルに付与される「(品切れ中)」は空白に置換して表示を消し、ラジオボタンを「×」にする条件指定にはラベルに「品切れ中」が含まれていたらという判定にしています。スマートな方法がある気がするのだけど・・・とりあえず今回はcssを整えて完了です。開発ドキュメントおまけ:規格名を追加する出来上がりイメージには規格名も表示しています。以下を商品詳細ページの表示したい場所に追加するだけです。IT女子のお気に入りフォルダ。