【楽天市場】RMSのヘッダー、フッター、レフトナビでJavaScriptは使えるの？
という疑問にお答えします。
結論から言うとJavaScriptを使うことは可能です。
しかし、<scriptタグ>を使った方法は使えません。
本記事ではRMSのヘッダー、フッター、レフトナビでJavaScriptを使うテクニックを紹介します。
onpageshow属性
RMSのヘッダー、フッター、レフトナビでJavaScriptを使うためにはonpageshow属性を使います。
onpageshowは<bodyタグ>の属性です。
ページを表示した時に、指定したJavaScriptの処理を行います。
参考 onpageshow属性の「意外な使い道」について – 楽天・ヤフー・ECサイトの運営・制作なら「コンサルロケッツ」
例）要素の内容を変更する
実際の動きを確認する例として「要素の内容を変更する」デモを用意しました。
デモでは「my_js」というid名をつけた要素の内容「Hello World!」を、「Welcome!」に変更するようにしています。
See the Pen onpageshow属性のデモ by ざきひー (@zakihiii) on CodePen.0
jQueryが使える
楽天の商品ページには予めjQueryが読み込まれているため、jQueryも使えます。
続いてRMSでのonpageshow属性の使い方を説明します。
RMSのヘッダーでonpageshow属性を使う方法
- RMSのヘッダー、フッター、レフトナビのいずれかを開く
- <bodyタグ>を入力する
- onpageshow属性にJavaScriptを書く
以上です。
サンプル：日時で要素の表示／非表示を切り替える
「具体的にどう使えばいいかわからない」という方のために、「日時で要素の表示／非表示を切り替える」方法を一例として紹介します。
※本サンプルはjQueryで書いています。
使い方
- 表示／非表示を切り替えたい要素を
<span>でタグで囲む <span>タグにclass="view_timer"を付与するdata-start-date="yyyy/MM/dd HH:mm"、data-end-date="yyyy/MM/dd HH:mm"で日時を指定する
以上です。
デモ
日時で要素の表示／非表示を切り替えるデモです。
See the Pen ZZXOwM by ざきひー (@zakihiii) on CodePen.0
追記：ページ読み込み時に一瞬表示されるバナーへの対処法
「日時で要素の表示／非表示を切り替える」方法を実装するとページが完全に読み込まれる前にバナーが一瞬表示されます。
そのバナーのちらつきを解消する方法は下の2つ。
- 外部CSSファイルに
.view_timer{display:none}を記述 class="view_timer"を指定した<span>タグにstyle="display:none"を記述（例：<span class="view_timer" data-start-date="2019/3/1 10:00" style="display:none">）
対処法の情報は読者様（ぴの様）よりいただきました。ありがとうございます！
サンプル：PCカテゴリページの画像サイズを大きくする
PC版のカテゴリページに一覧表示される商品画像のサイズをもっと大きくしたい！と思いませんか？
実はonpageshowを利用しPCカテゴリページの商品画像を大きくする方法があります。
詳細は別記事にまとめました。
PCカテゴリページでJavaScriptを使用したいときの参考にもどうぞ。
さあ、RMSでJavaScriptを使おう
トリッキーな方法ですが、onpageshow属性でRMSのヘッダー、フッター、レフトナビでJavaScriptを使うことができます。
JavaScriptを上手く使って日々の更新やセール、キャンペーン時の作業を自動化しましょう。
サンプルとして紹介した「日時で要素の表示／非表示を切り替える」以外にも、ショップに合った用途で利用してください。
外部JSファイルを読み込みたい場合は、記述量も少なく複数のJSファイルも読み込める「imgタグを使う裏技」がおすすめです。
追記：imgタグを使う裏技は楽天の仕様変更により使用できなくなりました。JavaScriptを使うためには本記事の裏技を利用してください。
コメント
初めまして、
とても参考になりました。
実装後もうまくjavascriptの呼び出しもでき満足しております。
呼び出しが若干遅いなあと思いいろいろ試したところ・・・・
こんな感じで入れると呼び出せることが判明しました。
あとYahoo!ショッピングも
これで、呼び出せます。
本記事を読んでいただきありがとうございます！
Yahoo!ショッピングでも利用できることは知りませんでした。
試してみたいと思います。
ソースが消えているようなので・・・もう一度
楽天
<img style=”display:none;” src=”画像のURL” =”=”onload =jQuery.getScript(‘呼び出すJS’)>
※【 =”=”】がないとだめです。全角スペースが必要です。
ヤフー
<img src=”h画像のURL”onload=’var ele = document.createElement(“script”); ele.src = “呼び出すJS”; document.body.appendChild(ele);’ style=”width: 0% !important;”>
※画像URLの後ろの【”】に半角スペースなしで【onload】を入れることで
呼び出しができます。
paypayモールはできませんが・・・
有益な情報をいただきありがとうございます。
外部JSが使えて呼び出しも早くていいですね。
勉強させていただきました。
提供いただいた情報をもとに記事を執筆させていただきました。
楽天RMSで外部JavaScriptを使う裏技【imgタグ使用】
【Yahooショッピング】ストアクリエイターでJavaScriptを使う方法
はじめまして。このスクリプトでとても助かっている者です。
自分が管理しているショップだとonpageshowとスクリプトだけでは
ページ全体が読み込まれてからバナーが隠れてしまう
（読まれてる途中はバナーがちらっと見える）時間差が発生するので、
.view_timerのcss属性としてdisplay: noneを先に入れておいて解決しました。
(または対象要素にstyle=”display:none;”を入れておく）
時間差でバナーなどがチラッと見えてしまうのが気になる方はこの方法で解決できると思います。
有益な情報をいただきありがとうございます！
本記事にも追記させていただきました。
onpageshow属性に付きまして大変勉強になりました！
onpageshowを使ってPC版カテゴリページの商品画像を拡大できませんでしょうか？
2020年4月下旬より<SCRIPT・・での対応が不可となってしまいました。
無理なお願いで申し訳ございません。
何卒宜しくお願い致します。
onpageshowを使ってPCカテゴリページの商品画像を大きくする方法を記事にまとめました。
楽天カテゴリページの画像サイズを大きくする裏技
どうぞ参考にしてください。
うまく記述できていなかったようで申し訳ないです。
SCRIPT src=”https://www.rakuten.ne.jp/gold/店舗アカウント/js/sample.js” script
↓
body onpageshow=”sample.jsの中身”
このように解釈していたのですが、反映されなくて悩んでおりました。
しかし、「PCカテゴリページの商品画像を大きくする方法」を更新されていたので拝見し理解できました。ありがとうございました。
解決の助けになったようで良かったです。
こちらこそ読んでいただきありがとうございます。
はじめまして、楽天でSCRPTタグが使えなくなったので検索しているとここに辿り着きました。
onpageshowは、下記のような考えで良いのでしょうか？
↓
うまく動作がせずに困っています。
どのように動作がしないか、よろしければお教えください。
はじめまして。
こちらの記事を参考にRMSのPC用ヘッダー箇所にコピペで貼り付けたのですが、
表示されない期間でも表示されてしまい、うまく動作しません。
なにか間違っているのでしょうか？
はじめまして。本記事をご覧いただきありがとうございます。
よろしければ該当のソース（body、spanタグ等）をお教えください。
原因がわかるかもしれません。
ご返信ありがとうございます。
本日もう一度試してみたらできました！お騒がせいたしました…。
別件で、こちらのスクリプトを使用して5と0のつく日に表示させるには
data-start-date=”2019/3/1 10:00″ data-end-date=”2030/3/1 9:59″
こちらを地道に変えてくしかないでしょうか？
別の記事で紹介されていた5と0の日のスクリプトを body onpageshow=”〜に入れてみたのですが
作動せず…。なにかいい方法があれば教えていただきたいです…!
うまくいったようで良かったです。
5と0の日にだけ表示するスクリプトにつきましては次の記事のコードを一部修正し、onpageshowでも使えるようにしました。一度お試しください。
毎月同じ日に表示／非表示を切替えるJavaScript
試してみたのですが、作動していないようです…。
ソースはこちらです。
div class=”fivezeroday”
center
div class=”point”
a id=”link” href=”https://event.rakuten.co.jp/campaign/card/pointday/”
img src=”画像リンク” width=”65%” </a</div
提示いただいたソースは問題ないようです。
もしかしたらbodyタグに原因があるのかもしれません。
bodyタグで実装できない場合はimgタグでの方法もお試しください。
楽天RMSで外部JavaScriptを使う裏技【imgタグ使用】