welcart：数量入力inputボックスをtextからnumberにする

2019/02/08

Works

welcart：数量入力inputボックスをtextからnumberにする

Tag: Welcart

welcartの商品詳細ページでの購入数量入力はテキストボックスで出力されます。

この部分はwelcartの独自関数から整形された状態で出力されるので通常は変更不可です。

そこを多少強引ではありますが、タイプをtextからnumberに変更したいと思います。

↓この部分

inputのtype「text」と「number」の違い

textの場合、入力ボックスには何でも入力できます。

welcartの場合、カートに入れるボタンを押した後にjsで数字かどうかのチェックが入ります。

numberの場合だと数字のみ入力を受け付けます。

他には入力ボックスにカーソルを持っていくと数字の上下ボタンが出ます。

スマホの場合はデフォルトでテンキーが表示されるようになるので便利かと思います。

注意点

このinput type=”number”はIE,EDGEでは機能しません。

chromeやfirefox等はちゃんと機能します。

IEのシェアは減ってきてるとはいってもまだまだ割合高いですから、IEでも対応したい場合はjsで擬似的にやってやるしかないですね。

ま、特に重要なところでもないのでIEは無視でいいんじゃないでしょうか。

IEは無視でも心配することはなくて、numberに対応していない場合はtextとして認識されるので不具合がでることはないです。

カスタマイズ

やり方は2つあります。

どちらもやることは同じなのですが、各場所が違ったりします。

wc_item_single.phpに直接書く

商品詳細用テンプレートに直接記入します。

数量入力ボックスはwelcartの関数usces_the_itemQuantで出力されますのでそれを書き換えてやります。

<?php usces_the_itemQuant(); ?>
↓
<?php echo str_replace( 'text', 'number', usces_the_itemQuant( 'return' ) ); ?>

usces_the_itemQuantの引数にreturnを指定すると表示されずに数量入力ボックスのHTMLソースを取得します。

取得したソースのtextをnumberに書き換えて出力します。

ただこれだけ。

フィルターを使う

関数usces_the_itemQuantには出力される前に通るフィルターが設定されており、そこで変更することによってテンプレートは書き換えずに出力を変更できます。

フィルターusces_filter_the_itemQuantはtemplate_func.phpに書かれています。

以下の内容をfunctions.phpに記入してください。

function change_quant_input( $quant) {
    return str_replace( 'text', 'number', $quant );
}
add_filter( 'usces_filter_the_itemQuant', 'change_quant_input' );

$quantの中身はusces_filter_the_itemQuantで表示されるHTMLソースです。

それのソースをtextからnumberに書き換えして返します。

これでusces_the_itemQuant()でnumberに変更された数量入力ボックスが出力されるようになります。

カート部分の数量入力ボックスも変更する

カート部分にも数量入力ボックスがあり、これを変更するのも同様の処理にフィルター追加でOKです。

↓この部分

この部分のフィルターusces_filter_cart_rows_quantもtemplate_func.phpに書かれています。

テンプレートではwc_cart_page.php内のusces_get_cart_rows()で出力されていますが、これはカートのテーブル全てなのでwc_item_single.phpのときのように入力ボックスのみ書き換えるということができません。

ですのでこの部分はフィルターで設定します。

関数は先程と同じでフィルターのみ変更します。

function change_quant_input( $quant) {
    return str_replace( 'text', 'number', $quant );
}
add_filter( 'usces_filter_cart_rows_quant', 'change_quant_input' );

両方指定する場合は単純にフィルターを並べて記述でOK。

function change_quant_input( $quant) {
    return str_replace( 'text', 'number', $quant );
}
add_filter( 'usces_filter_the_itemQuant', 'change_quant_input' );
add_filter( 'usces_filter_cart_rows_quant', 'change_quant_input' );