EC運営ヒント

楽天市場店で独自のスマホヘッダーを追従にする方法

投稿日:

[`evernote` not found]
LINEで送る

こんにちは!きたむです。

最近ページをスクロールするとヘッダーが追従してくる店舗をよく見かけますよね。
楽天スマホの商品ページ・カテゴリページにオリジナルの追従ヘッダーを実装したい!!
ですが、楽天スマホの商品ページ・カテゴリページでは、基本的にcssやjavascriptを読込むことはできません。
さらに、実は楽天ヘッダーにある検索窓にかぶってしまうとレギュレーション違反になってしまうのです。

そこで今回は合法的にcssとjavascriptを読込む裏技を使い、検索窓に被らないように追従ヘッダーを実装する方法を共有したいと思います。

※よくjqueryを使って、スマホに動きをつける方法もありますが、
楽天のカテゴリページなどではjquery本体を読込むことで、デフォルトで設置されているスライダーや機能とバッティングを起こし、不具合が出てしまう恐れもあるため、今回紹介する方法ではjavascriptを使用して実装を行います。

 
 

GOLDサーバーで準備するファイル

【1】iframeの準備
追従させたいオリジナルのヘッダーのソースを用意し、GOLDサーバーの任意の場所にアップします。
iframeのファイル名は「sp-header-iframe.html」にしてください。
 
【2】javascriptの準備
下記のjavascriptをGOLDサーバーの任意の場所にアップします。
javascriptのファイル名は「sp-header-script.js」にしてください。

/*============
スマホ商品ページ・カテゴリページ追従ヘッダーJS
==============*/

(function(window) {
	'use strict';

	function classReg(className) {
		return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
	}
	var hasClass, addClass, removeClass;
	if ('classList' in document.documentElement) {
		hasClass = function(elem, c) {
			return elem.classList.contains(c);
		};
		addClass = function(elem, c) {
			elem.classList.add(c);
		};
		removeClass = function(elem, c) {
			elem.classList.remove(c);
		};
	} else {
		hasClass = function(elem, c) {
			return classReg(c).test(elem.className);
		};
		addClass = function(elem, c) {
			if (!hasClass(elem, c)) {
				elem.className = elem.className + ' ' + c;
			}
		};
		removeClass = function(elem, c) {
			elem.className = elem.className.replace(classReg(c), ' ');
		};
	}

	function toggleClass(elem, c) {
		var fn = hasClass(elem, c) ? removeClass : addClass;
		fn(elem, c);
	}
	var classie = {
		// full names
		hasClass: hasClass,
		addClass: addClass,
		removeClass: removeClass,
		toggleClass: toggleClass,
		// short names
		has: hasClass,
		add: addClass,
		remove: removeClass,
		toggle: toggleClass
	};
	// transport
	if (typeof define === 'function' && define.amd) {
		// AMD
		define(classie);
	} else if (typeof exports === 'object') {
		// CommonJS
		module.exports = classie;
	} else {
		// browser global
		window.classie = classie;
	}
})(window);

function init() {
	window.addEventListener('scroll', function(e) {
		var distanceY = window.pageYOffset || document.documentElement.scrollTop,
			shrinkOn = 200,
			iframe = document.querySelector("iframe.sp-header-iframe");
		if (distanceY > shrinkOn) {
			classie.add(iframe, "fixed");
		} else {
			if (classie.has(iframe, "fixed")) {
				classie.remove(iframe, "fixed");
			}
		}
	});
}
window.onload = init();

 
【3】cssの準備
下記のcssをGOLDサーバーの任意の場所にアップ。
cssのファイル名は「sp_cts.css」にしてください。
※「.sp-header-iframe」のheightの値は「110px」にしていますが、設置いただくヘッダーの高さによって変更してください。

/*============
追従ヘッダーカテゴリ
==============*/

/*iframeのポジション・高さの設定*/
.sp-header-iframe {
	position: fixed;
	top: 93px;
	left: 0;
	width: 100%;
	z-index: 9999;
	height: 110px;
}

/*指定の位置でトップに移動*/
.sp-header-iframe.fixed {
	top: 0!important;
}

/*検索窓下の余白*/
#rstTopSearch {
	margin-bottom: 110px;
}

  

楽天RMSのにソースを設置(商品ページ)

【1】楽天RMSにログインし、「1-2デザイン設定」から
「2.スマートフォン デザイン設定」の「商品ページ設定」>「商品ページ 共通パーツ設定」へと進みます。


 
【2】「商品ページ共通説明文表示」を「表示する」にチェックを入れ、「商品ページ共通説明文」に下記のソースを挿入します。
※楽天RMSの商品・カテゴリのスマホページでcss、javascriptのファイルを読込む際に、通常の読み込み方では、エラーが出てしまい読込むことができません。
下記のソースのようにスペースを大量に入れることで、読込むことができる裏技をここでは使用しています。

<link                   ="" rel="stylesheet" href="https://www.rakuten.ne.jp/gold/店舗ID/任意のディレクトリ/sp_cts.css">

<iframe src="http://www.rakuten.ne.jp/gold/店舗ID/任意のディレクトリ/sp-header-iframe.html" class="sp-header-iframe" scrolling="no" frameborder="0" =""=""></iframe ="">

<script src="http://www.rakuten.ne.jp/gold/店舗ID/任意のディレクトリ/sp-header-script.js" type="text/javascript" charset="UTF-8" async defer =""=""></script                   >


 
【3】確認画面へ進んで設定をし、完了です。

※カテゴリページも同じ方法で設置できます。
  

ぜひ今回ご紹介した追従ヘッダーが、魅力的なサイト作りに貢献できれば幸いです。
   

関連ニュース

[`evernote` not found]
LINEで送る

-EC運営ヒント

Copyright© EC grow | EC関連のニュースメディアサイト , 2017 All Rights Reserved.