Smartyが吐き出すチェックボックスタグをjQueryMobileで綺麗に読ませる方法

jQueryMobileとSmartyがある環境でうまいことカスタムされたチェックボックスが表示できなくてドハマリした。

結論から言うと、jQueryMobileがその便利機能をもってしておされチェックボックスを表示しているのはちゃんとしたチェックボックス＋ラベルタグがあるからだった。

そもそもの流れは、EC-CUBEのスマホ版で商品検索画面で検索フォームをある程度フレキシブルにしたいっていうところから始まった。PC版ではDBのマスタデータからもってきた項目を検索要素として出してるのだけれどそのコードをそのまま利用したかった。

が…Smartyのhtml_checkboxesを利用してチェックボックスタグを出すと、ラベルタグは出してくれるけどそのラベルタグにforはないし、チェックボックスタグにforに紐づくidもない。

何もしないとこんな感じ。

<label><input type="checkbox" name="box" value="1">項目1</label>

でも、jQueryMobileで綺麗に読み取るには…

<label for="box1"><input type="checkbox" name="box" value="1" id="box1">項目1</label>

みたいになってないとダメだった。

なるほど…。道理ですごい崩れていたわけね。

ここまでわかれば簡単な話。

ただすでにPC版のサイトがあってそれに影響を出すわけにいかないから、既存のSmartyの関数をどうこうするわけにいかない…。じゃあスマホ用に作りゃいいかってことでカスタム関数を追加するかーなんて考えながら、カスタム関数ディレクトリを見てみた。

EC-CUBEの場合は、data/smarty_extends

なんて関数名にするかなぁーとか思いながらすでにある関数ファイルを眺めてみると…
ん？！

function.html_checkboxes_ex.php　だと？

中身を見てみたところ、

if ($labels) {
　if ($label_ids) {
　　$_id = smarty_function_escape_special_chars(preg_replace('![^\w\-\.]!', '_', $name . '_' . $value));
　　$_output .= '<label for="' . $_id . '">';
　} else {
　　$_output .= '<label>';
　}
}

ちゃんとそれっぽいのがあった。
昨日半日悩んでたのはなんなんだろう。

なので…Smartyで関数を呼ぶ時には

<!--{html_checkboxes_ex ～}-->

にしたらいいってことらしい。

やっぱ同じようなことは先人たちも詰まってるんだなぁと思うと自分はまだまだだなって感じる。詰まること自体いいことではないんだけれど、誰もつまったことないところで詰まりたい。