SuprSonicJetBoy's blog

いろいろです。

EC-CUBE3 で数量を<select>(プルダウン)に変更する

EC-CUBEを仕事でたまに触るのですが(触りたくない)、EC-CUBEのデフォルトテンプレートは、ECサイトなのに数量が <input>で大変ユーザビリティが悪いので、<select>に変更したいと要望が毎回あります。
スマホで数量を手入力というのは普通に考えればあり得ません…。

ただ、「規格」や「在庫数」、「在庫数無制限」、「販売販売制限数」なども考慮しないといけないので、適当な数の<option>を用意して終わりにしていました。

しかし、これでは各上限を超えてカートに入れると、カート画面でエラーが出てしまい、これもあまり良くないので、<input>を<select>に書き換えるjQueryスクリプトを書いてみました。

EC-CUBE: v3.0.13

Twigもあるので、結構カオスです。
このまま、detail.twigのjavascript blockに貼り付けるだけで動くはずです。

Twigから受け取ったJavascriptの各変数には、NULLが入っていたり、空だったり、数値だったり、文字列だったり、何を出力するかわからないので、厳密に===で書くとバグが起こりそうで、比較的問題にならなそうなところは、==にしています。
parseInt()すると、NaNが返ってきたりするので、数値チェックも入れました。

Contoller から在庫情報をJSONで取得できるようにしてもいいかもしれませんが、Controllerを弄るとテンプレートとしての機能が維持できなくなるのであまり触りたくありません。
プラグイン化するのが良さそうですが、バージョンアップに対応しないといけなくなることを考えると、既に取得できる値で回すのがよさそうです。
こういうのって、ajaxで叩ければ余計なことをしなくて済むのですが…。

バグなどあればご報告頂ければ幸いです。