【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;">

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

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

画像URL

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

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

読み込ませるJSファイル

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

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

imgタグの入力場所

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

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

前述したimgタグのvarの前と;の後ろに合った'を消すことで
新ストアデザインの商品説明～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）";>

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

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

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

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

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

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

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