HOME  /Welcart
 /welcart-basic 購入数量の指定方法をカウンタ方式に変更する
2020年09月20日

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

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

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

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

<変更前>

<変更後>

 

1.関数作成のポイント

1.カートプログラムに渡す情報

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

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

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

 

2.「+」及び「ー」文字

この文字はFont Awesomeのアイコンフォントを利用します

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

 

3.カウントのUP&DownはJqueryで制御する

購入数量はSKU単位に複数表示されるので、関数の中の<script>では記述せず、単独のJqeryファイルの中に記述します。

 

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」の数値を読込み整数化し、1を加えて書き込みます。

■ーがクリックされたら、-の次の「.quant」の数値を読込み整数化します。
その数値が1より大き場合は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();?>

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

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wecart」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

welcartで用意されている業務パックデータの表示関数はwhile(usces_have_skus())ループの中でしか使えません。しかしforeachの方がカウンター処理がしやすいのでこれが使える業務パックデータの表示関数を作成しました。

Welcartでは業務パック割引(購入数量割引)という機能があります。この機能を使うとカートページにGPマークが表示させますがこのマークを任意のアイコンに変更する方法を解説しています。

カートに商品を投入すると、商品名は①商品名②商品コード③SKU名④SKUコードを合わせた文字列が商品名として表示されます。これをカスタマイズする方法を解説しています。

Welcartのカートへの投入ボタンのプログラム解説と、色と文字を変更する新しい関数の作成方法を解説しています。

welcart_basicのオプション表示は、入力必須をチェックしてもユーザから見て判りません。またチェックボックスやラジオボタン表示に一部、おかしい所があります。ここではこれらの修正方法を解説しています。

Welcartにはポイントを付与し、商品購入時にそのポイントを利用する仕組みがあります。又キャンペーン設定でポイントをn倍にしたり価格を値引く仕組みもあります。ここではそれらの概要と問題点及び解決策を解説しています。

Welcartでは業務パック割引(購入数量割引)という機能があります。これは、指定した数量以上を購入した場合に価格を値引く仕組みですが、業務パック割引という言葉はあまりなじみがないのでこのメッセージを変更する方法を解説しています。

Welcartでは個別商品画面に商品オプションやカスタムフィールドを追加する事ができます。ここではその追加方法を解説しています。

Welcartで個別商品表示画面から、商品マスタ編集にジャンプする事ができるとコンテンツ編集効率が飛躍的に向上します。しかしWelcartではこの機能が提供されていないのでこれを可能になる関数を作成します。

ここではWelcart商品を価格順に並び替える為に、WordpressのメタデータにWelcartの価格データを自動的に登録する関数の作成方法を解説しています。

ここではWelcartのキャンペーン商品設定の方法と、設定された商品リストを表示する関数を作成する方法を解説しています

ここではWelcartの商品カテゴリを指定して商品リストする関数を作成しています。全商品、おすすめ商品、新製品及び商品カテゴリが対象となります。

ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成する方法を解説しています。

Welcartには関連商品という概念はありません。そこで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品リスト」として表示する関数を作成する方法を解説します。

Welcart_basicのメニュをカスタマイズする為にはどの様な仕組みで作られているか?を知る必要があります。そこでここではメニュの仕様を解説しています。

ここではWelcart_basicのカートボタンの「色」と「文字」を変更する関数の作成方法を解説しています。

カートボタンをカスタマイズする為には、このカートがどの様に作られているのか?を知る必要があります。そこでここではその仕様について解説しています。

Welcartで会員システムを使うのであれば、ログイン後の画面に現在使えるポイント数が表示されているのが親切です。そこでここではwelcart_bascで保有ポイントが表示されるようにカスタマイズしたサンプルを解説しています。

welcart_basicの会員システムをカスタマイズする為には、この機能がどの様に作られているか?を知る必要があります。
そこでこのでは会員システムの仕組みについて解説しています。

Welcart_basicの検索機能をカスタマイズする為には、これがどの様に作られているのか?を知る必要があります。ここではその仕様を解説しています。

welcart_basicは商品だけしか検索対象としていませんが、ここではページの情報を読み込んで、カテゴリ別に検索できる様にカスタマイズする方法を解説しています。

ここでは「welcart_basic」の「category.php」がブログ用のサイドーバーが使われてない問題点を修正方法を説明しています。また「welcart_basic」がどの様な構造になっているか?も併せて解説しています。

ここではwelcartの.検索機能制限の解除、カテゴリが製品か否かの判断関数、上位カテゴリの取得関数、.商品カテゴリの取得関数の作成方法を解説しています。

ここではWelcartで用意されている関数を解説しています。

Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。

Welcartのホームページと事前に作られている固有のページを解説してます。特にカートページやメンバーページ及びお問い合わせフォームの作り方も解説しています。

WelcartはWordPressの「固定ページ」と「投稿ページ」のみで作られております。この「投稿ページ」の中に「商品」が設定されています。そこで検索機能はファンクションの中で、商品のみを検索する様な設定が定義されている為、そのままではブログ等を検索できません。

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。スライド方法は下記の2つを解説しています。①.slickオプションだけでスライドさせる。②slickイベントやメソッドを使ってスライドさせる。

welcart_basicのカスタマイズ→ヘッダ画像で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。

「slick.js」はjqueryでスライド動作を指定するプラグインです。ここでは「slick.js」のインストールから、設定方法及び「slick.js」のオプションを解説しています。またslickのメソッドやイベントの使い方の説明しています。

ここでは「Welcart basic」の子テーマの作成方法を解説しています。

Welcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。

Welcartで商品登録を行う前に.Welcart Shopの「基本設定」、「配送設定」及び「.商品カテゴリ」の登録が必要で、ここではその登録方法を解説しています。

ここではWelCartの商品の登録の仕方を解説しています。

WelcartはWordPressを使った無償のe-Commerceシステムです。ここでは「Welcart」の「インストール」と無償テンプレート「Welcart_basic」について解説します。

ここでは「Welcart_Basic」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。