【カラーミーショップカスタマイズ】おすすめ商品をランダムで3件表示する

Color me shop のテンプレートのカスタマイズ方法をご紹介します。

「おすすめ」に登録したものからランダムで3件表示する方法です。

人気の有料テンプレート「MONO」でそのまま使えるソースも続いて紹介します。

おすすめ商品をランダムで3件表示する方法

おすすめ商品の情報を全て取得し出力、スタイルシートを使ってランダムで3件だけ表示するという方法です。

html

<{section name=num loop=$recommend}>

/* 出力タグをここに入れる */

<{/section}>
<script>
	// 売れ筋商品全体の数
	var recommendNum = <{$recommend_num}>;

	// 売れ筋商品の数だけ配列に
	var recommendNumArray = [];
	for (var i = 0; i < recommendNum; i++) {
		recommendNumArray.push(i);
	}

	// 売れ筋商品の数をシャッフル
	for (var i = recommendNumArray.length - 1; i >= 0; i--) {
		// 0~iのランダムな数値を取得
		var rand = Math.floor( Math.random() * ( i + 1 ) );
		// 配列の数値を入れ替える
		var tmp = recommendNumArray[i];
		recommendNumArray[i] = recommendNumArray[rand];
		recommendNumArray[rand] = tmp;
	}

	// 上で設定したランダム配列から表示させるものを設定
	var showLi = document.querySelectorAll('それぞれの商品を囲うタグ'); // DOM取得
	var limit = 3; // 表示させる数
	for (var i =0; i < limit; i++) {
		showLi[recommendNumArray[i]].style.display = 'block';
	}
</script>

それぞれの商品を囲うタグ {
	display: none;
}

テンプレートMONOでそのまま使えるソース

人気の有料テンプレート「MONO」でそのまま使えるソースです。

<{* おすすめ商品 *}>
<{* // おすすめ商品 *}>
のところを入れ替えてもらえればOKです。

html

<{* おすすめ商品 *}>
<{if $recommend_num != 0}>
<div class="c-section p-layout-container">
	<h2 class="c-section__heading">
		<div class="c-section__heading--title">
			<span>おすすめ商品</span>
		</div>
		<div class="c-section__heading--sub-title">
			RECOMMEND ITEM
		</div>
	</h2>

	<ul class="c-product-list">
		<{section name=num loop=$recommend}>
		<li class="c-product-list__item">
			<{* 商品画像 *}>
			<a href="<{$recommend[num].link_url}>" class="c-product-list__image-wrap c-image-wrap c-image-wrap--link">
				<{* 商品画像1枚目 *}>
				<div class="c-image-box<{if $recommend[num].otherimg[0].url != ""}> c-image-box--main<{/if}>">
					<{if $recommend[num].img_url != ""}>
					<img src="<{$recommend[num].img_url}>" alt="<{$recommend[num].name}>" class="c-image-box__image js-lazyload" />
					<{else}>
					<span class="c-image-box__image c-image-box__image--noimage">No Image</span>
					<{/if}>
				</div>
				<{* 商品画像2枚目（2枚目が存在する場合のみ） *}>
				<{foreach from=$recommend[num].otherimg item=otherimg name=otherimg}>
				<{if $otherimg.url != "" && $smarty.foreach.otherimg.first}>
				<div class="c-image-box c-image-box--otherimg">
					<img src="<{$otherimg.url}>" class="c-image-box__image" />
				</div>
				<{/if}>
				<{/foreach}>
			</a>
			<{* 商品名 *}>
			<a href="<{$recommend[num].link_url}>" class="c-product-list__name">
				<{$recommend[num].name}>
			</a>
			<{if !$recommend[num].soldout_flg}>
			<div class="c-product-info__price c-product-list__price<{if $members_login_flg && $recommend[num].discount_flg}> c-product-info__price--discount<{/if}>">
				<{* 販売価格（ログイン時は会員価格） *}>
				<{$recommend[num].price}>
				<{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
				<{if $members_login_flg && $recommend[num].discount_flg}><{$recommend[num].discount_rate}>OFF<{/if}>
			</div>
			<{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
			<{if $members_login_flg && $recommend[num].discount_flg}>
			<div class="c-product-info__regular-price c-product-list__regular-price">
				<{$recommend[num].regular_price}>
			</div>
			<{/if}>
			<{else}>
			<{* 売り切れの表記 *}>
			<div class="c-product-info__soldout c-product-list__soldout">
				SOLD OUT
			</div>
			<{/if}>
			<{* 簡易説明文 *}>
			<{if $recommend[num].s_expl != ""}>
			<div class="c-product-list__expl">
				<{$recommend[num].s_expl}>
			</div>
			<{/if}>
			<{* お気に入り追加ボタン *}>
			<div class="c-product-list__fav-item">
				<button type="button" <{favorite_button_attribute added_class="is-added" product_id=$recommend[num].id}>>
					<svg role="img" aria-hidden="true"><use xlink:href="#heart"></use></svg>
				</button>
			</div>
		</li>
		<{/section}>
	</ul>
</div>
<script>
	// 売れ筋商品全体の数
	var recommendNum = <{$recommend_num}>;

	// 売れ筋商品の数だけ配列に
	var recommendNumArray = [];
	for (var i = 0; i < recommendNum; i++) {
		recommendNumArray.push(i);
	}

	// 売れ筋商品の数をシャッフル
	for (var i = recommendNumArray.length - 1; i >= 0; i--) {
		// 0~iのランダムな数値を取得
		var rand = Math.floor( Math.random() * ( i + 1 ) );
		// 配列の数値を入れ替える
		var tmp = recommendNumArray[i];
		recommendNumArray[i] = recommendNumArray[rand];
		recommendNumArray[rand] = tmp;
	}

	// 上で設定したランダム配列から表示させるものを設定
	var showLi = document.querySelectorAll('#recommend li'); // DOM取得
	var limit = 3; // 表示させる数
	for (var i =0; i < limit; i++) {
		showLi[recommendNumArray[i]].style.display = 'block';
	}
</script>
<{/if}>
<{* // おすすめ商品 *}>

css

#recommend .c-product-list__item {
	display: none;
}

テンプレートタグを変えれば「売れ筋商品」もランダムで出すことができます。

$recommend_num を $seller_num
$recommend を $seller
に変更してもらえれば「売れ筋商品」もランダムで表示できます。

売れ筋商品の場合、以下のランキングの順位を表示するソースを削除しておくのがよいでしょう。

<span class="c-product-list__index<{if $smarty.section.num.iteration < 4}> c-product-list__index--<{$smarty.section.num.iteration}><{/if}>">
	<{$smarty.section.num.iteration}>
</span>