【Yahooショッピング】ストアクリエイターでJavaScriptを使う方法

YahooショッピングのストアクリエイターでJavaScriptを使う方法

YahooショッピングのストアクリエイターでJavaScriptを使うための裏技を紹介します。

商品ページやカテゴリページでJavaScriptを使って実現したいことがある人は参考にどうぞ。

スポンサーリンク

ストアクリエイターでJavaScriptを使う方法

必要なのは下のimgタグです。

<img src="https://shopping.geocities.jp/ストアID/img/xxx.gif(画像URL)"onload='var ele = document.createElement("script"); ele.src = "https://shopping.geocities.jp/ストアID/js/xxx.js(読み込みたいJS)";
  document.body.appendChild(ele);' style="width: 0% !important;">
ここがポイント

src="画像URL"の直後、通常半角スペースを空けるところをスペースを空けずにonloadを記述することがポイントです。

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

また、各店舗で書き換えが必要なのは2箇所。

  1. 画像URL
  2. JSファイルのURL

画像URL

画像は表示されないので何の画像でもOK。src=""に画像URLを入力します。

透明で軽量なスペーサーGIFを使うのもありだと思います。

スペーサーGIFとは?

スペーサーGIFとは、縦横1pxの透明なGIF画像のこと。
画像編集ソフトがあればすぐ作成できますが、下のダウンロードボタンを押して入手していただいてもOKです。

spacer.gif(39バイト)
スポンサーリンク

読み込ませるJSファイル

YahooトリプルにアップしているJSファイルを読み込ませることができます。

ele.src = ""にJSファイルのURLを入力してください。

imgタグの入力場所

imgタグはストアクリエイターのストア構築>ストアデザイン>ヘッダー・看板(サイドナビ、フッターでも可)のフリースペースに入力します。

新ストアデザインへの適用について

前述したimgタグのvarの前と;の後ろに合った'を消すことで
新ストアデザインの商品説明~PC用フリースペース1~3に使うことができます。

新ストアデザインの商品説明~PC用フリースペース1~3用
<img src="https://shopping.geocities.jp/ストアID/img/xxx.gif(画像URL)"onload=var ele = document.createElement("script"); ele.src = "https://shopping.geocities.jp/ストアID/js/xxx.js(読み込みたいJS)";
  document.body.appendChild(ele); style="width: 0% !important;">

スマートフォン用フリースペースに使うには?

新ストアデザインの商品説明~PC用フリースペース1~3用のimgタグと下のimgタグを併記してください。
アプリでは前述したimgタグでJavaScriptが読み込まれ、ブラウザでは下のimgタグでJavaScriptが読み込まれます。

スマホブラウザ用
<img src="https://shopping.geocities.jp/ストアID/img/xxx.gif(画像URL)"onload='var&nbsp;ele= document.createElement("script");ele.src="https://shopping.geocities.jp/ストアID/js/xxx.js(読み込みたいJS)";>
ここがポイント

vareleの間に通常なら半角スペースを入力しますが、ここでは&nbsp;を入力します。

正:var&nbsp;ele
誤:var ele

ストアクリエイターでJavaScriptを使おう

JavaScriptを読み込むimgタグの入力場所は下の通り。

  1. ヘッダー・看板(サイドナビ、フッターでも可)のフリースペース
  2. 新ストアデザインの商品説明~PC用フリースペース1~3
  3. スマートフォン用フリースペース

※スマートフォン用フリースペースで使う場合は2つのimgタグを併用する

商品ページやカテゴリページでJavaScriptを使いたい場合にどうぞ参考にしてください。

本記事の情報は読者様(おの しげ様)より提供いただきました。ありがとうございます。

追記)新ストアデザインの商品説明~PC用フリースペース1~3、スマートフォン用フリースペースで使う方法を追記

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

コメント

  1. 記事にしていただきありがとうございます。
    &nbsp;これは半角に直してください。
    varの前と;の後ろに合った’を消してもらえれば
    新ストアデザインの商品説明~PC用フリースペース1~3に使えます。

    スマートフォン用フリースペースにも使えますが、記事に記載のものと一緒に入力してください。
    アプリ上では記事のものでjavascriptが読み込まれ、ブラウザでは下のものが読み込まれます
    <img src=”https://shopping.geocities.jp/ストアID/img/xxx.gif(画像URL)”onload=var&nbsp;ele= document.createElement(“script”);ele.src=”https://shopping.geocities.jp/ストアID/js/xxx.js(読み込みたいJS)”;>

    • ありがとうございます!
      記事に追記させていただきました。

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