Secura Vita

Category: Works > wordpress > welcart » welcart:数量入力inputボックスをtextからnumberにする
2019/02/08
Works

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

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

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

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

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

↓この部分

数量入力ボックス
スポンサーリンク

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

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

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

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

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

数量入力ボックス

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

text
text
number
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_itemQuanttemplate_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_quanttemplate_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' );
入力の下限を1にする

input type=”number”は何も設定しないと0や-1とかの数字も入力で来ていしまいます

ECサイトで0やマイナスは必要ないので下限を1にしてやります。

inputの属性minで1を指定することで可能です。

ソースの書き換え部分を下記に変更します。

str_replace( 'type="text"', 'type="number" min="1"', $quant );

多少強引ですけどこれで数字の下限が設定できます。
入力ボックスに出てくる矢印ボタンを押しても1未満にはなりません。

スポンサーリンク
おもしろかった・役に立った

Comment Post

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください