welcart-basic 購入数量の指定方法をカウンタ方式に変更する

Welcart_Basicの購入数量は数値入力です。

しかしスマホではこのような入力方法は面倒です。

そこで+/-ボタンで購入数量が変更できる様にカスタマイズします。

＜変更前＞

＜変更後＞

1.開発方針と制限

1.関数名と引数

関数名：my_itemQuant_select()

2.表示サンプル

上記の「＋」及び「ー」文字はFont Awesomeのアイコンフォントを利用します

よってFont Awesomeが利用するで使える様にして下さい。

3.name属性

カート投入ボタンを挿入すると制御はカートプログラムに移ります。

カートプログラムはinputの下記のname属性の数値を購入数量として取り込みます。

受け渡す情報	name属性	value属性
購入数	quant[ポストID][SKU値]	入力数字

4.カウントUP&Down制御

カウントのUP&DownはJqeryで制御します。

5.制限事項

購入数量はSKU情報です。

よってこの関数は、下記のSKUループの中でしか利用できません。

<?php usces_remove_filter(); ?>
<?php usces_the_item(); ?>　　　
<?php while ( usces_have_skus() ):?>
　　SKU情報の表示
<?php endwhile; ?>

上記で使われているWelcart関数

関数	解説
usces_remove_filter()	カートページ、会員ページで制御している the_title や the_content のフィルターを無効化する
usces_the_item()	商品情報をセットする関数
usces_have_skus()	while文で複数のSKU情報を読み出します。

2.プログラムの詳細

1.プログラム

func￥welcart￥itemフォルダの下に「my_itemQuant_select.php」ファイルを作成し下記を記述します。

<?php 
/*****************************************************************************
購入数量を指定するプログラム。
jqueryの制御は「my_jquery.js」を参照してください
*******************************************************************************/
function my_itemQuant_select()
{
	global $post, $usces;
	$sku_enc = urlencode(usces_the_itemSku('return'));	/* SKUコード取得(全角→半角変換込み) */
	$id = $post->ID;
	$quant = 'quant['.$id.']['.$sku_enc.']';                         /* inputのname属性にセットする値 */
?>
<div class='item_qunt'>
	<div class='header'>数量：</div>
	<i class="minus fas fa-minus"></i>
	<input name="<?php echo $quant;?>" type="text"  value="1" class="quant" />
	<i class="plus fas fa-plus"></i>
	<div class='unit'><?php usces_the_itemSkuUnit(); ?></div> <!-- 購入単位表示 -->
</div>

<style>
	.item_qunt{
		display:flex;
		justify-content:flex-end; 
		align-items:center;
		margin-bottom:10px;}
	.item_qunt .quant{
 		padding-right:5px;
 		margin:0 2px;
 		width: 50px;
 		height: 30px;
 		text-align:right;
		border-radius:5px;} 
	.item_qunt .header,
	.item_qunt .unit{
		font-size:16px;}
	.item_qunt .plus,
	.item_qunt .minus{
		font-size:16px;
		padding:7px;
		background: #ddd;
		cursor:pointer;}
</style>	

<?php
}
?>

上記で使っている関数

関数	説明
usces_the_itemSku(‘return’)	SKUのループの中で、SKUコードを取得します。 SKUコードに日本語が含まれる場合があるので下記で利用します。 urlencode(usces_the_itemSku(‘return’)) urlencodeは日本語をurlで使える文字列に変更します
usces_the_itemSkuUnit()	SKUのループの中で、SKUの所で設定した単位を表示します。単位が空白の場合は表示しません。

2.プログラムのロード

functions.phpに下記を記述します。

/* 個別商品関連関数の追加 */
	get_template_part('func/welcart/item/my_itemQuant_select');	/* 数値入力 */

3.jqueryの記述

上記のカウンタを制御するJquryは下記になります。

私の場合は「my_jqury.js」の中に下記を記述しています。

/*********************************/	
/* 購入数量の+/-ボタンの制御     */
/*********************************/	
$(function(){
	$(".item_qunt .plus").click(function(){
		var No = parseInt($(this).prev(".quant").val());
		$(this).prev(".quant").val(No + 1);
 	});
 	$(".item_qunt .minus").click(function(){
		var No = parseInt($(this).next(".quant").val());
 		if (No > 1){ 
 			$(this).next(".quant").val(No - 1);
 		}
 	});
});

上記でやっている事は下記になります。

■＋がクリックされたら、＋の前の「.quant」の数値を読込み整数化し、１を加えて書き込みます。

■ーがクリックされたら、－の次の「.quant」の数値を読込み整数化します。
その数値が1より大き場合は１を減算して書き込みます。

4.上記関数を設定する場所

個別商品表示プログラム「wc_item_single.php」の中に記述します。

子テーマに上記プログラムが無い場合は親テーマの「wc_templates」フォルダと合わせて、子テーマにコピーして下さい。

関数を設定する場所は下記になります。

＜変更前＞

<span class="quantity"><?php _e('Quantity', 'usces'); ?><?php usces_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?></span>

＜変更後＞

<?php my_itemQuant_select();?>

以上で購入数の指定がカウンター方式に変更されました。