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

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

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

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

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

JavaScript

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

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

商品画像を内包したdiv#itemInfoの前に、予め用意した自前のヘッダーを挿入してや～ってコードです。

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

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

HTML

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

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

CSS

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

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

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

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

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

まとめ

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

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