Cookieを活用してトップページのスライダーを切り替える方法

「特定のページを見た」とか、「あるページを何回以上アクセスした」という情報を Cookie に保存し、その条件をルールに設定して、サイトのトップにあるスライダーの内容を変更する設定を紹介してみます。

今回は site2015 のテーマを利用している時の設定になります。

Cookie の設定

どんな条件にするかによりますが、今回は products/domestic の詳細ページを見た時と、products/business の詳細ページを見た時に カテゴリーコードを interest という名前の Cookie に保存します。

/themes/site2015/products/entry.html の head 内に以下の JavaScript を設定します。

entry.html

	<script>
	var cookie_interest = 'interest';
	var expires_day = 30;
	var ary_ccd = ['domestic','business'];
	
	ACMS.Ready(function() {
		if( ary_ccd.indexOf( '%{CCD}' ) >= 0 ){
			// 保存
			$.cookie( cookie_interest, '%{CCD}', { expires: expires_day , path: '/' });
		}
	});
	</script>

ルールの設定 (家庭用製品の時)

条件の設定

ルールに Cookie の名前 (interest) と値 (domestic) を設定します。

interest = domestic で家庭用製品のページにアクセスしたことがあるという条件になります。

モジュールID の設定

Ver.2.5 からルール機能でモジュールID の設定ができるようになりました。家庭用製品の時の「モジュールID」ボタンをクリックすると、家庭用製品の時のモジュールID一覧が表示されます。

topImage「トップページのメイン画像」というモジュールID の設定を変更することでスライダーの画像を変更することができます。

回数をカウントする例

最初の JavaScript とは違い、回数をカウントするサンプルになります。

entry.html

	<script>
	var cookie_repeat = 'repeat';
	var expires_day = 30;
	
	ACMS.Ready(function() {
		num = $.cookie( cookie_repeat );
		if( !( parseInt(num) > 0) ){
			num = 1;
		}else{
			num = parseInt(num) + 1;
		}
		$.cookie( cookie_repeat, num, { expires: expires_day , path: '/' });
	});
	</script>