楽天のスマホ商品ページをカスタマイズ＜ヘッダーにオリジナルのコンテンツを追加する方法＞

楽天スマホ商品ページの「店舗名」と「商品画像」の間に「バナーや」「オリジナルのコンテンツ」を追加する方法。スタイルシートなどでやる方法が一般的ですが絶対配置ではどうしてもスマホの縦横、機種によってずれる。jQueryで行うこの方法がベストなのかもしれません。

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

作成したコンテンツを「店舗名」と「商品画像」の間に入れるjQuery

jQueryの「insertAfter」（※指定した要素の後に追加）を使います、jQuery本体は楽天が勝手に読み込んでくれるので本体の読み込みは不要。

jQuery(document).ready(function (r) {
  r("#myshop_header").insertAfter("#shopName")
})

jQuery(document).ready(function (r) {

r("#myshop_header").insertAfter("#shopName")

})

オリジナルヘッダーの「店舗名」の後にオリジナルコンテンツを追加します。

上記を「insertAfter.js」などの名前で保存して楽天のゴールドスペースにアップします。

オリジナルコンテンツの作成とjQueryの読み込み

上記で作成したjQueryの読み込み、楽天スマホページ裏技を使い読み込みます。
<script src=”https://www.rakuten.ne.jp/gold/●店舗名●/scripts/insertAfter.js” =””></script =””>

<div id=”myshop_header” =””=””>
オリジナルのコンテンツをココに書く
</div =””=””>

<script src="https://www.rakuten.ne.jp/gold/●店舗名●/scripts/insertAfter.js" =""></script ="">
<div id="myshop_header" =""="">
オリジナルのコンテンツをココに書く
</div =""="">

オリジナルのコンテンツをココに書く

</div =""="">

作成したHTMLを

デザイン設定メニュー（スマートフォン）
↓
スマートフォン用商品ページ
↓
商品ページ設定
↓
商品ページ共通説明文に書き込みます。

ページを確認するのは

出来上がったページをスマホではなくPCで確認する場合は商品ページURLに「?force-site=ipn」追加です。

404 NOT FOUND | ココペリ

Web・EC・Bootstrap・Foundation・WordPress