Welcartの数量入力フィールドをセレクトボックスに変更する方法

Welcartの数量入力フィールドをセレクトボックスに変更する方法

Welcartの数量入力フィールドをセレクトボックスに変更する方法

Welcartの数量入力フィールドは、通常は以下のように数値を入力する形式になっています。

通常の数量入力フィールド

数量入力フィールドはusces_the_itemQuant()という関数で出力できますが、出力されるHTMLは以下のようになっています。

<input name="quant[10][test_sku]" type="text" id="quant[10][test_sku]" class="skuquantity" value="1" onkeydown="if (event.keyCode == 13) {return false;}">

これをセレクトボックスに変更する方法をご紹介いたします。

Welcartの数量入力フィールドをセレクトボックスに変更する方法

数量入力フィールドは、usces_filter_the_itemQuantというフィルターを使って書き換えることが可能です。

Welcart公式サイトにusces_filter_the_itemQuantのマニュアルが用意されているのですが、そこにセレクトボックスに変更する方法がサンプルとして掲載されていました。

マニュアルに載っているコードをそのままfunctions.phpにコピペすれば、数量入力フィールドがセレクトボックスに書き換えられます。

add_filter('usces_filter_the_itemQuant',  'my_filter_the_itemQuant', 10, 2);
function my_filter_the_itemQuant($html, $post) {
  $sku = urlencode(usces_the_itemSku('return'));
  $html = '<select name="quant[' . $post->ID . '][' . $sku . ']" class="skuquantity">';
  for ($i = 1; $i <= 10; $i++) {
    $html .= '<option value="' . $i . '">' . $i . '</option>';
  }
  $html .= '</select>';
  return $html;
}

このようにセレクトボックスで数量を選択できるようになります。

出力されるHTMLは、以下の通りです。

<select name="quant[10][test_sku]" class="skuquantity">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

あとがき

数量をセレクトボックスに変更したいなと思って調べていたら、フィルターフックのマニュアルにドンピシャなサンプルが載っていてビックリしました。

数量は選択式にしたいという要望は結構あるので、usces_filter_the_itemQuantというフックで書き換え可能なことを覚えておくと役立つと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です