【楽天市場】RMSのヘッダーでJavaScriptを使うには?onpageshowで解決

【楽天市場】RMSのヘッダーでJavaScriptを使うには?onpageshowで解決

【楽天市場】RMSのヘッダー、フッター、レフトナビでJavaScriptは使えるの?

という疑問にお答えします。

 

結論から言うとJavaScriptを使うことは可能です。

しかし、<scriptタグ>を使った方法は使えません。

本記事ではRMSのヘッダー、フッター、レフトナビでJavaScriptを使うテクニックを紹介します。

Advertisement

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属性を使う方法

  1. RMSのヘッダー、フッター、レフトナビのいずれかを開く
  2. <bodyタグ>を入力する
  3. onpageshow属性にJavaScriptを書く

以上です。

Advertisement

サンプル:日時で要素の表示/非表示を切り替える

「具体的にどう使えばいいかわからない」という方のために、「日時で要素の表示/非表示を切り替える」方法を一例として紹介します。

※本サンプルはjQueryで書いています。

使い方

  1. 表示/非表示を切り替えたい要素を<spanタグ>で囲む
  2. <spanタグ>class=”view_timer”を付与する
  3. 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

最後に

トリッキーな方法ですが、onpageshow属性でRMSのヘッダー、フッター、レフトナビでJavaScriptを使うことができます。

JavaScriptを上手く使って日々の更新やセール、キャンペーン時の作業を自動化しましょう。

サンプルとして紹介した「日時で要素の表示/非表示を切り替える」以外にも、ショップに合った用途で利用してください。

本記事の方法は楽天非公式のテクニックです。使用の際は自己責任でお願いします。
なお、楽天の仕様変更により突然使えなくなる可能性があります。ご注意ください。