HOME  /Welcart
 /welcart カートへの追加ボタンをカスタマイズします
2020年10月05日

welcart カートへの追加ボタンをカスタマイズします

カートへの投入ボタンの表示は下記の様になっています。

これを色や文字を変更できる様にカスタマイズします。

 

1.関数の開発方針と制限

1.関数名と引数

関数名:my_cart_input($color,$text)

引数 デフォルト値 備考
$color ‘#ff8c00’ ボタンの色
デフォルト値はWelcart_basicが使っている色
$value ‘カートに入れる’ ボタンの中に表示する文字

 

2.表示サンプル

<?php my_cart_input('blue','カートに入れる');?>

上記の指定の場合のボタンは下記になります。

アイコンはfontawesomeの「fas fa-cart-arrow-down」を利用します。

このテーマでFont Awesomeが利用できるようにして下さい。

 

3.name属性、id属性の指定方法

name属性:welcartのカートプログラムが入力データを取得する為の属性値です。

id属性  :welcartのjqueryが入力データチェックを行う時に参照する属性値です。

下記に必要な属性を一覧します。

1)inputのtype=”hidden”で渡す情報

受け渡す情報 name属性,id属性 value属性
在庫数 zaikonum[ポストID][SKU値] 在庫数
在庫状態 zaiko[ポストID][SKU値] 在庫ステータス
数量割引 gptekiyo[ポストID][SKU値]
数量割引対象か否か
価格情報 skuPrice[ポストID][SKU値]
価格
スラグ情報 usces_referer スラグ名

2)カート投入ボタンで渡す情報

name属性 onclick属性
inCart[ポストID][SKU値] return uscesCart.intoCart(ポストID,SKU値)

■onclickはボタンが挿入された時に動くjavascriptで、このプログラムが入力項目で足りない項目のチェックを行います。

 

4.制限事項

カートへの投入ボタンは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情報を読み出します。

 

3.プログラム

1.プログラム

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

<?php 
/********************************************************************
	カートへの投入ボタン
	引数:
	$color:カートボタンのカラー(デフォルトは「オレンジ」)
	$value:カートボタンの文字(デフォルトは「カートに入れる」)
*********************************************************************/
function my_cart_input($color='#ff8c00',$value='カートに入れる') {
	global $usces, $post;

	$post_id			= (int)$post->ID;
	$sku					= esc_attr(urlencode($usces->itemsku['code']));

	$zaikonum		= esc_attr($usces->itemsku['stocknum']);										   /* 在庫数の取得 */
	$zaiko_status	= esc_attr($usces->itemsku['stock']);													/* 在庫状態の取得 */
	$gptekiyo			= esc_attr($usces->itemsku['gp']);														/* 数量割引情報の取得 */
	$skuPrice			= esc_attr($usces->getItemPrice($post_id, $usces->itemsku['code']));/* 価格情報の取得 */

	$name_zaikonum 		= 'zaikonum['	.$post_id.']['.$sku.'}';										   /* 在庫数のname&id属性の設定 */
	$name_zaiko_status	= 'zaiko['		.$post_id.']['.$sku.']';												/* 在庫状態のname&id属性の設定 */
	$name_gptekiyo 		= 'gptekiyo['	.$post_id.']['.$sku.']';										    	/* 数量割引のname&id属性の設定 */
	$name_skuPrice 		= 'skuPrice['	.$post_id.']['.$sku.']';											    /* 価格のnam&ide属性の設定 */
	
	$name_inCart			= 'inCart['		.$post_id.']['.$sku.']';											    /* カート投入ボタンのname属性の設定 */
	$inCart_js					=	'return uscesCart.intoCart("'.$post_id.'","'.$sku.'")';			        /* ボタンを挿入した時のJabascriptの指定 */
	?>

	<input type='hidden'	value='<?php echo $zaikonum;?>'		name='<?php echo $name_zaikonum;?>'		id='<?php echo $name_zaikonum;?>' >
	<input type='hidden'	value='<?php echo $zaiko_status;?>'	name='<?php echo $name_zaiko_status;?>'	id='<?php echo $name_zaiko_status;?>'>
	<input type='hidden'	value='<?php echo $gptekiyo;?>'		name='<?php echo $name_gptekiyo;?>'			id='<?php echo $name_gptekiyo;?>'>
	<input type='hidden'	value='<?php echo $skuPrice;?>'		name='<?php echo $name_skuPrice;?>'			id='<?php echo $name_skuPrice;?>'>
	<input type='hidden'	value='<?php echo esc_url($_SERVER["REQUEST_URI"]);?>'	name='usces_referer' >
	
	<button type='submit'	name='<?php echo $name_inCart;?>'  id='<?php echo $name_inCart;?>' class='inCart_button' onclick='<?php echo $inCart_js;?>'>
 		<i class="icon fas fa-cart-arrow-down"></i>&nbsp;<?php echo $value;?>&nbsp;
	</button>
	
	<style>
		.inCart_button{
			border: none; 
    	    outline: none;
			margin:5px 0;
			padding:10px 20px;
			border-radius:5px;
			box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
			color:#fff;
			background-color:<?php echo $color;?>}
		.icon{font-size:20px;}
	</style>
<?php
}
?>

 

2.プログラムのロード

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

/* 個別商品関連関数の追加 */
	get_template_part('func/welcart/item/my_cart_input');	/* カートへの投入ボタン */

 

3.この関数を設定する場所

子テーマの「wc_templates」フォルダの中の「wc_item_single.php」を変更します。

上記ファイルが無い場合は親テーマからフォルダ毎コピーして下さい。

<変更前>

<?php usces_the_itemSkuButton( '&#xf07a;&nbsp;&nbsp;' . __('Add to Shopping Cart', 'usces' ), 0 ); ?>

<変更後>

<?php my_cart_input('blue','カートに入れる'); ?> <!-- カートへの投入ボタン -->

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

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

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

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


<関連記事一覧>

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

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

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

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

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

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

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

Welcart_Basicの購入数量は数値入力です。しかしスマホではこのような入力方法は面倒なので+/-ボタンで購入数量が変更できる様に変更した事例を紹介しています。

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」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。