Welcart カスタマイズ ブログ

数量入力フィールドに、＋/－の増減ボタンをつけるjQuery

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

Welcart用テーマ（WordPress.org公式ディレクトリにて配布中！こちら）の商品ページの数量ボタンに、こんなボタンを実装してみました。

demo

時々色々なECサイトで見ていて「これはいいなぁ」と思っていたのですが、実装方法について以下の記事を見つけて、早速Welcart用にカスタマイズしました。

Magento quantity increments – jQuery edition（英語）

Welcart公式ガイド本では、数量をセレクトフィールドにする方法が紹介されています。そちらはもう少し高度で、在庫数量を取得して在庫以上の数はセレクト出来ないようなカスタマイズです。

こちらはそういった複雑なPHPの計算はなく、単にボタンで数量を増減出来るだけのシンプルなものです。カスタマイズ自体も非常に簡単なので、jQueryの設置がうまく行きさえすればすぐに実装できます。

カスタマイズ手順

1. head要素内で、jQuery本体を読み込む
2. wc_item_single.php内の数量入力フィールドのclassを確認（単数SKUと複数SKUの2箇所）
3. 数量入力フィールドの前後に、+/-のボタンを設置するjQueryのコードを設置

1. head要素内で、jQuery本体を読み込む

既にjQuery本体をテーマ内で読み込んでいる場合はここは飛ばして下さい。

jQueryを動かすには、前提として使用中のWordPressテーマにjQuery本体が読み込まれている必要があります。jQueryはWordPressに付属しているので、読み込んでいない場合は、functions.phpに以下を記述すればOKです。

function my_scripts(){
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

こうすると、wp_head()の命令で、自動的に適切なjQueryを読み込んでくれます。

※jQueryの読み込みには、WordPress本体に付属しているjQueryではなく、CDN（外部ライブラリー）を読み込む方法もあります（多少読み込みが速くなるようですが、運営中のショップでは使っていません）。WordPressのjQuery設置方法は、以下のサイトが参考になります。

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例（Kachibito.net）

2. wc_item_single.php内の数量入力フィールドのclassを確認（単数SKUと複数SKUの2箇所）

次に、jQueryを作動させる為に、数量入力フィールドのclass属性を確認します。※jQueryを動かすには、idやclassなどを指定して、コードを動かす対象を決めます。

数量入力フィールドは、wc_item_single.phpという商品詳細ページ用のテンプレート内に記載されています。wc_item_single.phpは、プラグインフォルダ内の以下の位置にあります。

usc-e-shop/theme/welcart_default/wc_templates/wc_item_single.php

数量入力フィールドは、そのwc_item_single.php内の60行目（単一SKU）と128行目（複数SKU）の2箇所に、以下のコードで書かれています。

<?php usces_the_itemQuant(); ?>

このコードは、Welcartの独自コードで、サイト上ではskyquantityというclass属性を持ったinput要素として吐き出されます。以下は出力の例です。

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

今回は、このskuquantityを利用して、jQueryを動かすことにしましょう。

3. 数量入力フィールドの前後に、+/-のボタンを設置するjQueryのコードを設置

以下のコードを、wp_head()の後、</head>の直前に記載します。

<?php if(is_single()): ?>
<script type="text/javascript">
jQuery(function($){
    $(".skuquantity").after('<input type="button" value="+" id="add1" class="plus" />').before('<input type="button" value="-" id="minus1" class="minus" />');
    $(".plus").click(function(){
        var currentVal = parseInt(jQuery(this).prev(".skuquantity").val());
        if (!currentVal || currentVal=="" || currentVal == "NaN") currentVal = 0;
        $(this).prev(".skuquantity").val(currentVal + 1);
    });
    $(".minus").click(function(){
        var currentVal = parseInt(jQuery(this).next(".skuquantity").val());
        if (currentVal == "NaN") currentVal = 0;
        if (currentVal > 0) {
            $(this).next(".skuquantity").val(currentVal - 1);
        }
    });
});
</script>
<?php endif; ?>

※オリジナルのコードから、ほんの少しだけアレンジしてあります。また、demoサイト（Welcart用無料テーマ）では若干アレンジが異なります。

jQueryをざっくり解説

• 1行目：個別投稿ページでのみ、以下のjQueryを読み込む条件分岐
• 4行目：skuquantity（数量入力フィールド）の後ろに「＋」（プラス）・前に「－」（マイナス）のボタンをつける命令
• 5～10行目：＋ボタンをクリックされた時に、skuquantity（数量入力フィールド）内の値を増やす命令
• 11～16行目：－ボタンをクリックされた時に、skuquantity（数量入力フィールド）内の値減らす命令（ただしゼロより小さくならない）
• 17行目：1行目の条件分岐終了

これで、商品ページにボタンが出現すると思いますので、あとはスタイルシートで調整すれば完成です！

• 商品ページ
• jQuery

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook