HOME  /Welcart
 /Welcart-basic 商品画像をサムネール付きスライダで表示させる
2020年09月20日

Welcart-basic 商品画像をサムネール付きスライダで表示させる

welcart-basicの個別商品画面の中の商品画像は画像をクリックすると別画面が表示されるだけで画像スライドの概念がありません。

そこで、これをサムネール付きスライダで表示させる方法に変更する方法を解説します。

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

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

 

1.サムネール付きスライダのタイプ

Slickを使って商品画像をスライドさせる方法には2つのタイプがあります。

1.Slickオプションだけでスライドさせた場合

サムネール付きスライダをSlickオプションだけで指定すると、上図の様にサムネールは1行で表示されます。

サムネールが少ない時はこれでも良いのですが、サムネール数が増えるとサムネール画像が小さくなりすぎる問題があります。

 

2.Slickのイベントやメソッドを使ってスライドさせた場合

Slickにはコマンド以外にイベントやメソッドとい概念があり、これを利用すると上図の様にサムネールを複数行にする事ができます

以上の事から、ここではSlickのイベントやメソッドを使って商品画像をスライドさせる方法を解説します。

 

2.関数作成の基本方針

1.関数名と引数

関数名:my_image_slic($num,$arrows)

引数 デフォルト値 備考
$num 3 一行に表示するサムネールの数
$arrows false slick矢印の表示。表示する場合はtrueを指定します。

 

3.プログラムの詳細

1.プログラム

func¥welcart¥itemの下に「my_header_img_slic.php」というファイルを作成し、下記を追加します。

<?php 
/*****************************************************************
商品画像の表示とサムネール制御プログラム。
<引数>
$num   :1行に表示するサムネール個数
$arrows:矢印を表示するか否か デフォルトは表示しない
jqueryの制御は「my_jquery.js」を参照
******************************************************************/
function my_image_slic($num=3,$arrows=false)
{
	$imageid = usces_get_itemSubImageNums();				/* サムネール個数の取得 */
	$width = 100 / $num;												/* サムネールの幅の計算 */
	$attr = 'arrows='.$arrows; 										/* 属性値のセット */
?>
<div class="product_img" <?php echo $attr;?>>         <!-- 属性値をセットし、メイン画像を呼び出す -->
	<?php usces_the_itemImage(0,800,800); ?>
	<?php foreach( $imageid as $id ) : ?>
		<?php usces_the_itemImage($id,800,800); ?>
	<?php endforeach; ?>
</div>
<?php	if( !empty( $imageid ) ):	?>						    <!-- サムネール画像の呼び出し -->
	<div class="product_subimg">
		<?php usces_the_itemImage(0,200,200); ?>
		<?php foreach( $imageid as $id ) : ?>
			<?php usces_the_itemImage($id,200,200); ?>
		<?php endforeach; ?>
	</div>
<?php endif; ?>

<!-- スタイル設定 ---------------------------->
<style>
.product_img{
	width:100%;}
.product_subimg{
	margin-top:15px;
	width:100%;
	display:flex;
	flex-wrap:wrap;}
.product_subimg img{
	width:<?php echo $width;?>%;
	height:10%;
	opacity:0.6;
	cursor:pointer;	}
.product_subimg img.active{opacity:1;}
@media screen and (max-width:767px){
	.product_subimg{display:none;}
	.product_img{width:90%;margin:0 auto;}
}
.slick-prev:before,
.slick-next:before {
    color: #000;}
</style>

<?php
}
?>

プログラムからJqueryに情報を渡す為に属性を利用しています。
上記では「product_img」クラスの属性として「$attr」を設定しています。

画像読込みで利用しているWelcart関数は下記です。

関数 内容
usces_get_itemSubImageNums() 商品サブ画像の数を返します
usces_the_itemImage(n,w,h) n は画像番号、0がメイン画像、それ以外はサブ画像
w は画像の幅、
h は画像の高さ

上記では「メイン画像」と「サムネール画像」に総ての画像を読み込んでいます。この中から何を表示するか?の制御をjqueryで行います。

 

2.プログラムのロード

functions.phpに上記関数の読み込みを記述します。

/* 個別商品関連関数の追加 */
	get_template_part('func/welcart/item/my_image_slic');				/* 商品イメージのslicスライド */

 

3.Jquery

上記のスライドを制御するJquryは下記になります。

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

/*************************************************/
/* 商品詳細画面のサムネール付き画像スライダ制御  */
/*************************************************/
$(function(){
 	var $arrows = $('.product_img').attr('arrows');/* arrows属性を取得します */
	if($arrows == 1){$arrows = true;} 

  if(window.innerWidth > 767) //768以上
  	{
  		/* サムネール画像に属性と番号を振る */
  		$('.product_subimg img').each(function(){
   			var no = $('.product_subimg img').index(this);
   			$(this).attr('img_no',no);
  		});
  		/* 初期化イベントでサムネール画像に「active」クラスを設定する */
  		$('.product_img').on('init',function(slick){
   			$('.product_subimg img'+'[img_no=0]').addClass('active');
  		});
  		/* スライド切替前のイベントでサムネール画像の「active」クラスの切替えを行う */
  		$('.product_img').on('beforeChange',function(event,slick,currentSlide,nextSlide){
    		$('.product_subimg img'+'[img_no=' + currentSlide + ']').removeClass("active");
    		$('.product_subimg img'+'[img_no=' + nextSlide + ']').addClass("active");
  		});
	  	 /* サムネール画像のクリックイベントでメイン画像を切り替える */
  		$('.product_subimg img').on('click',function(){
    		var index = $(this).attr('img_no');
    		$('.product_img').slick('slickGoTo',index);/* slickメソッド */
  		});
		}
  //slickスライダ指定 
  $('.product_img').slick({
    arrows:$arrows,
  	responsive:[{breakpoint:767,settings:{dots:true} /*767まで*/
		}]
  });
});

htmlの「.product_img」の属性値を読み込んでいます

始めにサムネール画像に「img_no」という番号を属性値として設定しています

上記で利用しているslickイベント

イベント コマンド例
スライダーが初期化された時のイベント $(‘クラス名’).on(‘init,function(slick){処理}
処理の所でサムネール画像の0番目に「active」クラスを付与
スライド切り替え前のイベント $(‘クラス名’).on(‘beforeChange‘,function(event,slick,currentSlide,nextSlide){処理}
処理の所でスライドする前の処理として「active」の付け替えを定義しています。
スライダがクリックされた時のイベント $(‘クラス名’).on(‘click‘,function(){処理}
処理の所でクリックされた時にスライド移動のメソッドを実行します

上記で利用しているslickメソッド

メソッド コマンド例
指定のスライドへの移動 $(‘クラス名’).slick(‘slickGoTo‘, n);

 

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

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

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

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

<変更前>

<div id="img-box">
	<div class="itemimg">
		<a href="<?php usces_the_itemImageURL(0); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', NULL ); ?>><?php usces_the_itemImage( 0, 335, 335, $post ); ?></a>
	</div>
	<?php
		$imageid = usces_get_itemSubImageNums();
		if( !empty( $imageid ) ):
	?>
	   <div class="itemsubimg">
		  <?php foreach( $imageid as $id ) : ?>
		    	<a href="<?php usces_the_itemImageURL($id); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', NULL ); ?>><?php usces_the_itemImage( $id, 135, 135, $post ); ?></a>
		  <?php endforeach; ?>
	      </div>
	 <?php endif; ?>
</div><!-- #img-box -->

<変更後>

<div id='img_box'>
	<?php my_image_slic(3,true);?>
</div>

 

4.使用例

1.サムネール3個で矢印なし

<?php my_image_slic(3);?>
PC画像 スマホ画像

 

2.サムネール3個で矢印あり

<?php my_image_slic(3,true);?>
PC画像 スマホ画像

 

3.サムネール2個で矢印なし

<?php my_image_slic(2);?>
PC画像 スマホ画像

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

関連ドキュメントはメニュの「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には関連商品という概念はありません。そこで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品リスト」として表示する関数を作成する方法を解説します。

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