HOME  /Welcart
 /Welcart-basic 個別商品表示の下に関連商品をリスト表示する
2020年09月20日

Welcart-basic 個別商品表示の下に関連商品をリスト表示する

Welcartには関連商品という概念はありません。

そこで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品リスト」として表示する関数をここで作成しています。

尚、このプログラムは下記の設定が完了している事が前提となります。

商品リストを価格順に並べるカスタマイズ

Jqueryで制御するスライダープラグイン「slick.js」の導入と使い方

総ての「Font Awesome」アイコンフォントを利用可能にする

商品カテゴリの取得関数の作成

1.開発方針

1.関数名と引数

relation_products($pc_num,$sm_num,$msg)

引数 デフォルト値 備考
$pc_num 5 PC画面の時、1行に表示する商品数
$sm_num 2 スマホ画面の時、1行に表示する商品数
$msg ’関連商品’ タイトルに付ける名前

 

2.その他の条件

①関連商品とは、現在表示している商品と同じカテゴリの商品とする。

②関連商品には、現在表示している商品は含めない。

③関連商品が1行に表示する商品数を超えた場合は「slick.js」でスライドさせる。

 

2.プログラムの詳細

1.プログラム

func¥welcart¥item-listフォルダに下に「relation_products.php」を作成し下記を追加します。

<?php 
/*****************************************************************************
関連商品のリスト出力
引数 $pc_num:1行の表示個数(PC)デフォルトは5
引数 $sm_num:1行の表示個数(スマホ)デフォルトは2
引数 $msg :タイトル名 デフォルトは「関連製品」
*******************************************************************************/
function relation_products($pc_num=5,$sm_num=2,$msg='関連製品') {
	if(!is_single()){return;}  							/* 個別商品ページ以外の場合は終了 */

	list($slug,$name) = get_my_itemgenre();	/*商品カテゴリの取得 */
	$msg = '<i class="fas fa-grip-lines-vertical" style="color:blue;"></i>&nbsp'.$msg;	/* タイトル */
	$args = array(                                           /* wp_queryのパラメータセット */
  	    'posts_per_page' 	=>-1,
  	    'category_name' 	=> $slug,
  	    'meta_key'       	    => 'price',
  	    'orderby'   			=> 'meta_value_num',
  	    'order'     			    => 'asc',
  	    'post__not_in' 		=> array(get_the_ID()),/* 現在の商品は非表示 */
  	);
	$products = new WP_Query( $args );
?>
<h3><?php echo $msg;?></h3>
<div class="my_relation">         /* 商品リスト */
	<?php while ($products->have_posts()) : $products->the_post(); ?>
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<div class="itemimg">
				<a href="<?php the_permalink() ?>"><?php usces_the_itemImage(0, 150, 150); ?></a>
				<?php welcart_basic_campaign_message(); ?>
			</div>
			<div class="itemprice"><?php usces_the_firstPriceCr(); usces_guid_tax(); ?></div>
			<?php if(! usces_have_zaiko_anyone() ) : ?>
				<div class="itemsoldout"><?php _e('Sold Out', 'usces' ); ?></div>
			<?php endif; ?>
				<div class="itemname"><a href="<?php the_permalink() ?>"  rel="bookmark"><?php usces_the_itemName(); ?></a></div>
		</article>
	<?php endwhile; ?>
</div>

<style>		/* CSSの出力 */
	.my_relation article{padding:10px;}
	.my_relation .itemimg img {
		width: 100%;
		height: auto;
	}
	@media screen and (max-width:768px){.my_relation{margin:0 20px;max-width:100%;}}
	.slick-prev:before,
	.slick-next:before{color:'#000';}
	.slick-track{margin-left:0;}	
</style>

<?php echo <<<EOM
<script>								/* Jqueryの出力 */
	$(function(){
  	$('.my_relation').slick({
    	arrows:true,					/* 左右矢印を表示 */
    	dots:false, 					/* ドットは非表示 */
    	infinite:false,				    /* 無限ループ機能はOFF */
    	slidesToShow:$pc_num,	/* 1行の表示個数(PC) */
    	slidesToScroll:1,			    /* スクロール個数 */
    	swipeToSlide:true,		    /* スワイプはslidesToScroll値に影響を受けない */
    	responsive:[{
     		breakpoint:768,settings:{slidesToShow:$sm_num,}/* 1行の表示個数(スマホ) */
    	}]
  	});
	});
</script>
EOM;?>

<?php
 wp_reset_postdata();	/* WP_Queryのリセット */
}									/* functionの終了 */
?>

get_my_itemgenre()関数は、下記で事前に作成しておいて下さい。

商品カテゴリの取得関数の作成

アイコンフォントは「fas fa-grip-lines-vertical」を利用しています。
総ての「Font Awesome」アイコンフォントを利用可能にするの設定をして下さい。

wp_query」のパラメータは左記リンク先の解説を参照してください。

尚、価格順の表示方法は商品リストを価格順に並べるカスタマイズを実行して下さい。

商品の表示部分はwelcart_basicの商品表示プログラムを「wp_query」用に少し変更しました。

「slick.js」の設定は、プログラムで変更する必要がある為、phpプログラムで書きました。
<<<EOMはヒアドキュメントと言われる物で、何行にも渡る長い文章を出力する方法です。次のEOMまでが1つのドキュメントになります。

wp_reset_postdata()」は、Wp_Queryのリセット関数で必須です。

 

2.プログラムのロード

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

/* 商品リスト関数の追加 */
	get_template_part('func/welcart/item-list/relation_products');	/* 関連商品 */

■「welcart」の下に「item-list」フォルダを作成し、その中に「relation_products.php」関数を作成します。

 

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

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

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

関数を追加する場所は下記になります。

<div id="primary" class="site-content">
	<div id="content" role="main">
       個別商品の各種情報の表示
       ・・・・
   </div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php relation_products(5,2);?><!-- 関連商品の表示 -->

■追加する場所は<?php get_sidebar(); ?>の下です。

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

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

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

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


<関連記事一覧>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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