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

スポンサーリンク

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

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

Magento quantity increments – jQuery edition(英語)

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

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行目の条件分岐終了

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

3 Responses to “数量入力フィールドに、+/-の増減ボタンをつけるjQuery”

  1. よっしー より:

    いつもめちゃくちゃ参考にさせていただいてます。こちらのサイトを何度訪れて助かったことか(><
    一つ困っていることがありますので、もしご存じでしたら教えていただけないでしょうか。。。
    現在拡張プラグインItem List LayoutとWidget Cartの組み合わせで
    一覧表示させている時に「カートへ入れる」ボタンを表示させています。
    その際に数量ボタンも表示させて、数量も反映させてカートへ入れたいと
    思っているのですが、どのようにすればよいのかアドバイスをお願いできないでしょうか。
    応用に書かれている以下のコードをfunctions.phpに追加する際に
    どこにどのようなコードでusces_the_itemQuant()を記載すればよいのか悩みに悩んでいます。

    add_filter(‘item_list_layout_filter_list_price’, ‘my_list_layout_filter_list_price’, 10, 3);
    function my_list_layout_filter_list_price($price, $post, $opts){
    global $usces;
    $sku = usces_the_firstSku( ‘return’ );
    $status_index = usces_the_firstZaiko( ‘return’ );
    if( 1 < $status_index ){
    $price .= ‘’ . esc_html($usces->zaiko_status[$status_index]) . ‘’;
    }else{
    $price .= usces_direct_intoCart($post->ID, $sku, false, ‘カートへ追加’, NULL, ‘return’);
    }
    return $price;
    }

    とんでもない質問で大変申し訳ありません。

    • まめ子(管理人) より:

      Item List Layoutのフックですか・・・。私はプラグインを購入しておらず、プラグイン内のフック周辺のコードを知ることが出来ませんので、お書き頂いたコードが適切かどうか、何とも申し上げられないです。
      jQueryが動かないのでしたら、セレクタが正しく指定されているか、スクリプトがコンフリクトを起こしていないか等を確認する必要があるかと存じます。あまりお役に立てず済みません。

  2. よっしー より:

    まめ子さま

    お返事遅くなり大変失礼いたしました。
    ご丁寧な回答をいただき感謝しております、お役に立てずになんて言わんでください
    このサイトで、ホントにいっぱい助かってます(^^

    今後もよろしくお願いします。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.