HOME  /Welcart
 /Welcart 商品詳細画面に獲得ポイントや値引き金額を表示させる
2020年10月05日

Welcart 商品詳細画面に獲得ポイントや値引き金額を表示させる


Welcartにはポイントを付与し、商品購入時にそのポイントを利用する仕組みがあります。

又キャンペーン設定でポイントをn倍にしたり価格を値引く仕組みもあります。

ここではそれらの概要と問題点及び解決策を解説します。

1.ポイントとキャンペーンの仕組みと問題点

1.ポイントシステム

1)基本設定

Welcart-Shop → 基本設定の中に下記設定があります。

<上記設定のポイント>

①ポイントは会員に付与される仕組みなので、ポイントシステムを使う場合は「会員システム」、「会員ポイント」の両方をONにする必要があります。

②ポイントをどれ位の率で付けるか?は商品マスタ登録時に指定するポイント率で決まります。
ここで指定する「商品登録の初期値」は「新規商品追加」時にポイントの初期値として表示されるだけなのであまり意味はありません。

③会員登録時のポイントは、会員登録された時に付与されるポイントでキーはメールアドレスになります。
よって同じメールアドレスで複数ユーザは登録できません。

2)商品設定

商品設定の中に下記項目があります。

上記の値がポイントの付与率です。

上記の1)と2)が設定されていると、商品購入でポイントが付与されます。

 

2.キャンペーン

キャンペーンは期間を限定して、ポイントをn倍、または価格値引きを行う仕組みです。

1)キャンペーン期間の設定

Welcart-Shop → 営業日設定にキャンペーン期間を設定します。

2)キャンペーンの詳細の設定

Welcart-Shop → 基本設定にキャンペーンの詳細を設定します。

キャンペーン対象の商品を選択した後、キャンペーンをどの様にするか?を指定します。

ポイントn倍の場合

商品に設定されているポイントをn倍したポイントが付与されます。

値引きの場合

商品の売価のn%が値引きされます。

この時、ポイントシステムがONでもポイント付与はされません(※重要

 数量割引とキャンペーン割引の関係

数量割引は商品単価が割り引かれます。

一方、このキャンペーン割引で「値引き」を指定した場合は、購入総額からn%割り引かれます。

よって両方の割引が適用されることがあります。

上記の1)と2)が設定されていると、キャンペーン処理がなされます。

 

3.問題点

ポイントの設定やキャンペーンを設定しても、商品詳細画面にどれ位のポイントが付与されるのかが良くわかりません。

そこでこれが判る様にカスタマイズします。

 

2.開発方針と制限

1.関数名と引数

関数名:my_discount_msg()

 

2.表示サンプル

値引きキャンペーン
(Type1)
ポイントUPキャンペーン
(Type2)
ポイント付与
(Type3)

上記のポイントマークにはFont Awesomeのアイコンフォントを利用します

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

 

3.制限事項

この関数は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_discount_msg.php」ファイルを作成し下記を記述します。

<?php 
/*****************************************************************************
ポイント及びキャンペーン値引きの表示関数。
ポイントはキャンペーンポイントも反映させる
*******************************************************************************/
function my_discount_msg(){
	global $post, $usces;
	$options	= $usces->options;

	$point_flg			    = usces_is_membersystem_point('return');				/* ポイント付与フラグ */
	$campaign_flg		= in_category($options['campaign_category']);		/* キャンペーン対象製品か否かのフラグ */
	$discount_rate	    = $options['privilege_discount'];								/* キャンペーン値引率 */
	$point_rate			= $options['privilege_point'];									/* キャンペーンポイント倍率 */
	$nomal_point		= usces_the_point_rate('return');							/* 商品のポイント率 */
	$item_price			= usces_the_itemPrice('return');								/* 売価 */
	/* キャンペーンタイプの設定 */
	if($options['display_mode'] == 'Promotionsale' 	  && $options['campaign_privilege'] == 'discount'){$type = 1;}
	elseif($options['display_mode'] == 'Promotionsale' && $options['campaign_privilege'] == 'point'){$type = 2;}
	else{$type = 3;}					
?>
	
<?php if($type == 1 && $campaign_flg == 1 && $discount_rate != 0):?>								 <!-- type1(価格Down) -->
	<div id='discount_msg'>
		<?php echo '▲'.number_format($item_price*$discount_rate/100).'円OFF';?>
	</div>
<?php elseif($type == 2 && $campaign_flg == 1  && $point_flg == 1 && $point_rate != 0):?><!-- Type2(ポイントUP) -->
	<div id='discount_msg'>
		<i id="icon" class="fab fa-product-hunt"></i><?php echo number_format($item_price*$nomal_point*$point_rate/100).'ポイント('.$point_rate.'倍)付与';?>
	</div>
<?php else:?>	<!-- Type3(通常のポイント付与) -->
	<?php if($point_flg == 1 && $nomal_point !== 0):?>
		<div id='discount_msg'>
			<i id="icon" class="fab fa-product-hunt"></i><?php echo number_format($item_price*$nomal_point/100).'ポイント付与';?>
		</div>
	<?php endif;?>
<?php endif;?>
<style>
	#discount_msg{
		display:flex;
		justify-content:flex-end; 
		align-items:center;
		font-size:16px;
		margin-bottom:10px;}
	#icon{
		font-size:20px;
		color:red;
	}
}
</style>

<?php
}
?>

■上記プログラムでWelcartのDBから直接読み込んでいる物

タグ名 解説
$optios[‘campaign_category‘] キャンペーン商品のカテゴリID
$optios[‘privilege_discount‘] キャンペーンの値引き率
$optios[‘privilege_point‘] キャンペーンのポイントUP率
$optios[‘display_mode‘] 値がPromotionsaleの時はキャンペーン中
$optios[‘campaign_privilege‘] キャンペーンの種類
discount:値引き
point:ポイントUP

■上記プログラムで使っている関数

関数 解説
usces_is_membersystem_point(‘return’) 基本設定の会員ポイントの値
true ポイント制オン、false オフ
usces_the_point_rate(‘return’) 商品に適用されているポイント率を取得する
usces_the_itemPrice(‘return’) 現在のSKUの売価を取得する
in_category($id) wordpress関数
現在の投稿が指定したカテゴリに属するか?を判断する

 

2.プログラムのロード

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

/* 個別商品関連関数の追加 */
	get_template_part('func/welcart/item/my_discount_msg');			/* ポイント&価格Downメッセージ*/

 

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

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

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

<変更前>

<div class="c-box">
	<span class="quantity"><?php _e('Quantity', 'usces'); ?><?php usces_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?></span>
	<span class="cart-button"><?php usces_the_itemSkuButton( '&#xf07a;&nbsp;&nbsp;' . __('Add to Shopping Cart', 'usces' ), 0 ); ?></span>
</div>

<変更後>

<div class="c-box">
	<?php my_discount_msg(); ?>       <!-- 今回追加するメッセージ -->
	<?php my_itemQuant_select();?>   <!-- 数値入力をボタンに変えた関数 -->
	<span class="cart-button"><?php usces_the_itemSkuButton( '&#xf07a;&nbsp;&nbsp;' . __('Add to Shopping Cart', 'usces' ), 0 ); ?></span>
</div>

my_itemQuant_select()は数値入力をボタンに変更した関数です。

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

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

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

Welcartには、カートを空にするクラス関数が用意されています。ここでは、この関数の使い方を解説しています。

Welcartの商品一覧ページに購入ボタンを配置する為には「usces_direct_intoCart」を利用しますが、この関数は必須オプションのチェックは行ってくれません。それをうまく行える方法を解説しています。

welcartで用意されているカート投入ボタンはwhile(usces_have_skus())ループの中でしか使えません。しかしforeachの方がカウンター処理がしやすいのでこれが使えるカート投入ボタンを作成しました。

welcartの購入数量指定はテキスト入力です。これをボタンで数値入力ができる様にしました

welcartの中ではどれ位のポイントが付与されるのか?どれ位の金額が値引きされるか?の表示がありません。そこでこれを表示する関数を作成しました。

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

Welcart_basicテーマは、SKUが複数あると縦にダラダラと長く表示される問題点があります。そこでSKUを分解し、どのSKUを表示するのか?をラジオボタンやセレクトBOXで選択できる様にカスタマイズします。

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

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

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

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

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

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