au Pay マーケット(au Wowma!)のスマホ商品ページでJavaScriptを使う裏技

au Pay マーケット(au Wowma!)のスマホ商品ページでJavaScriptを使う裏技

au Pay マーケット(au Wowma!)ではJavaScriptは使えない。そう思い込んでいませんか?

それは間違いです!

実はau Pay マーケット(au Wowma!)のスマホ商品ページでJavaScriptを使うことができるんです。

本記事では裏技の使い方に加え、使い方の一例として「日時指定で表示/非表示を切り替える」方法を紹介します。

スポンサーリンク

裏技の使い方

裏技を使うための手順
  1. JSファイルを作成
  2. JSファイルをau PAY マーケット Plusにアップロード
  3. Wow! managerワウマネージャーの商品ページ編集画面を開く
  4. 「SP用商品説明」に裏技用のimgタグを記述する

裏技を使ってau PAY マーケット Plus(Wowma! Plusワウマプラス)のJSファイルを読み込みます。

使用するのは下のimgタグだけ!

<img style="display:none;" src="画像のURL" ="="onload=jQuery.getScript('https://www.rakuten.ne.jp/gold/店舗ID/js/xxx.js(読み込みたいJSファイルのURL)')>
ここがポイント!

src="画像URL"の直後、全角スペースに続けて="="onloadを記述することでJSファイルの読み込みができます。半角スペースではダメです。

正:src="画像URL" ="="onload
誤:src="画像URL" ="="onload

画像URL

style="display:none;"を指定しているため画像は表示されません。何の画像でもOKです。src=""に画像URLを入力します。

透明で軽量なスペーサーGIFを使うのも一つの手です。

スペーサーGIFとは?

スペーサーGIFとは、縦横1pxの透明なGIF画像のこと。
画像編集ソフトがあればすぐ作成できますが、下のダウンロードボタンを押して入手していただいてもOKです。※圧縮ファイル(zip形式)でダウンロードされますので展開してお使いください。

spacer.gif(39バイト)

読み込ませるJSファイルについて

au PAY マーケット PlusにアップしているJSファイルを読み込ませることができます。

jQuery.getScript('')にJSファイルのURLを入力してください。

例)jQuery.getScript('https://plus.wowma.jp/user/会員番号/plus/js/sample.js')

ここがポイント!

会員番号を忘れた場合はショップのトップページURLを見るのが手っ取り早いです。

例)https://wowma.jp/user/会員番号 またはhttps://plus.wowma.jp/user/会員番号/plus/

URLサンプルはこちら。

https://plus.wowma.jp/user/28287944/plus/

リンク先:タマチャンショップ【au Pay マーケット店】

複数のJSファイルを読み込むには?

JSファイルを複数読み込むことも可能です。

jQuery.getScript('https://plus.wowma.jp/user/会員番号/plus/js/sample1.js');jQuery.getScript('https://plus.wowma.jp/user/会員番号/plus/js/sample2.js')
ここがポイント!

一つ目のjQuery.getScript('')のあと、続けて二つ目のjQuery.getScript('')を記述します。間の「;」セミコロンを忘れずに。

スポンサーリンク

サンプル:日時指定で表示/非表示を切り替える

裏技の使い方例としてサンプルを一つ紹介。

日時指定で要素の表示/非表示を切り替えるスクリプトです。

view_timer.js
$(document).ready(function() {
    $(".view_timer").each(function(t, a) {
        var e = $(this).attr("data-start-date")
          , i = $(this).attr("data-end-date")
          , n = new Date;
        e = e ? new Date(e) : n,
        i && (i = new Date(i)),
        e <= n && (!i || n <= i) ? $(this).show() : $(this).hide()
    })
});
SP用商品説明
<img style="display:none;" src="画像のURL" ="="onload=jQuery.getScript('https://www.rakuten.ne.jp/gold/店舗ID/js/view_timer.js')>

<!-- 2020年6月1日 10:00以降に表示する -->
<span class="view_timer" data-start-date="2020/6/1 10:00">ここに内容</span>

<!-- 2030年6月1日 9:59まで表示する -->
<span class="view_timer" data-end-date="2030/6/1 9:59">ここに内容</span>

<!-- 2020年6月1日 10:00~2030年6月1日 9:59の間は表示する -->
<span class="view_timer" data-start-date="2020/6/1 10:00" data-end-date="2030/6/1 9:59">ここに内容</span>
使い方
  1. 表示/非表示を切り替えたい要素をspanタグで囲む
  2. spanタグにclass="view_timer"を付与する
  3. data-start-date="yyyy/MM/dd HH:mm"data-end-date="yyyy/MM/dd HH:mm"で日時を指定する

まとめ:au PAY マーケットのスマホ商品ページでJavaScriptを使おう

  • au PAY マーケットのスマホ商品ページでJavaScriptが使える
  • 使うのはimgタグだけ
  • 複数のJSファイルを読み込める

サンプルで紹介したようにスマホ商品ページで実装したい事柄がある場合はどうぞ参考にしてください。

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

コメント

タイトルとURLをコピーしました