楽天スマホページに独自ヘッダーを設置する方法

楽天スマホページに独自ヘッダーを設置する方法

楽天スマホページに独自のヘッダーを設置しているショップ見かけますよね。

ショップを回遊してもらえるナビゲーションや、キャンペーンバナーを設置するために大変重宝します。

今回はそんなショップ独自のヘッダーを設置するための方法を紹介します。

楽天スマホページに独自ヘッダーを実装する

JavaScript

jQuery自体は楽天さんが読み込んでくれてるので、自前で用意するのは次のコードのみです。

jQueryのinsertAfterを利用しており、短くて簡単です。

店舗名を内包した#shopNameの後に、予め用意した自前のヘッダーを挿入してやーってコードです。

複数の要素を指定する場合もカンマで区切るだけでOK。簡単です。

 

前述したコードを「insertAfter.js」など、適当な名前をつけて外部ファイルとして<script>タグで読み込みます。

<script>タグはそのままではRMSに入力できません。楽天スマホページでjavascriptを使う裏技を利用し、RMSのデザイン設定より「スマホ商品ページ」、「スマホカテゴリページ」に記述してください。

HTML

独自ヘッダーの中身はナビゲーション、バナーなど、店舗に合ったお好きな要素を含めることができます。

すなわち、HTMLは店舗におまかせです。

CSS

独自ヘッダーを実装するにあたって必要なのはJavaScriptだけですので、CSSは必要ありません。

独自ヘッダーの装飾にのみ利用してください。

デモ:楽天スマホページに独自ヘッダーを実装する

デモを用意しましたのでイメージを掴んでください。

 

See the Pen insertAfter(楽天スマホページに店舗独自ヘッダーを設置する) by ざきひー (@zakihiii) on CodePen.0

まとめ

今回は店舗の独自ヘッダーを挿入することに絞って紹介しましたが、insertAfterはその他の用途にも利用できます。例えば買い物かごの周りに関連商品を挿入してもいいかもしれません。

楽天のスマホページは比較的自由度が高いので、こういった技を使って店舗間の回遊を促したり、キャンペーン・セールページに誘導しましょう。

それでは今回はこのへんで。

楽天市場カテゴリの最新記事