PR

カラーミーの商品画像を自動で商品説明に表示させる 

2024.05.08

カラーミーを利用している店舗さんで、カゴ周りの商品画像をそのまま商品説明にも表示させたいというニーズはあるかと思います。

特に楽天やYahooショッピングなどから横展開してきた店舗さんは、商品説明がカゴ周り画像と共通の画像で作られた縦長のページであることが多く、それをそのままカラーミーショップに移植しようとすると、商品画像とは別に画像管理画面で同じ画像を登録しなければなりません。

それだと非常に管理も煩雑になりますし、カゴ周り画像を変更したら商品説明画像も変更する必要があります。（その逆もまた然り）

これは非常にめんどくさいので、カゴ周り画像を自動で読み込んで商品説明に表示させるスクリプトを作りました。

外部JSファイルを作成

kagoimage-add.js

window.addEventListener('DOMContentLoaded', () => {
  // カゴ周り画像の枚数をカウント
  var obj = $('.p-thumbnail-list > .p-thumbnail-list__unit');
  
  // URLから商品IDを取得
  var parentDivsp = document.getElementById("parent-div-sp");
  var urlsp = location.href ;
  var imageIDD = url.replace("https://abc-shop.jp/?pid=", "");
  var imageIDsp = imageIDD.substr(0, 9);

  // キャッシュ対策でタイムスタンプを生成
  var imageUrl_fsp = "https://img00.shop-pro.jp/PA00000/000/product/"
  var imageUrl_ssp = imageUrl_fsp + imageIDsp;
  var date = new Date();
  var time = date.getTime();

  // 1枚め画像表示
  var image_1 = document.createElement('img');
  image_1.src = imageUrl_ssp + ".jpg?cmsp_timestamp=" + time;
  image_1.style.width = "100%";
  parentDivsp.before(image_1);

  // 2枚目以降を表示
  let otherImagesp = obj;
  for (let i = 0; i < (otherImagesp.length -1); i++) {
    var imageUrl_osp = imageUrl_ssp + "_o" + (otherImagesp.length - (i+1)) + ".jpg?cmsp_timestamp=" + time;
    var newElementsp = document.createElement("img");
    newElementsp.src = imageUrl_osp;
    newElementsp.style.width = "100%";

    parentDivsp.insertBefore(newElementsp, parentDivsp.firstChild);
  }

})

3行目：var obj = $(‘.p-thumbnail-list > .p-thumbnail-list__unit‘);
赤字の部分は、お使いのテンプレートのCSSセレクタに書き換えて下さい。

カラーミーのサンプルショップhttps://monosample.shop-pro.jp/で説明すると、カゴ周り画像のサムネイル部分になります。

カラーミーのサンプルショップでは、取得するCSSセレクタは「.p-thumbnail-list > .p-thumbnail-list__unit」となります。

CSSセレクタを確認するには、Chromeブラウザのデベロッパーツールを使うのが良いでしょう。対象の画像の上で、右クリック＞検証 でデベロッパーツールが起動します。

8行目：var imageIDD = url.replace(“https://abc-shop.jp/?pid=”, “”);
赤字の部分をご自身の店舗のURLに書き換えてください。

12行目：var imageUrl_fsp = “https://img00.shop-pro.jp/PA00000/000/product/”
[/product/]以前の赤字の部分をご自身の店舗の商品写真のアドレスに書き換えて下さい。

画像のURLはChromeブラウザで右クリック＞画像URLをコピーで調べられます。コピーしたらテキストエディタに貼り付けると確認することが出来ます。

このkagoimage-add.jsを、FTPサーバーにアップロードします。

商品説明欄に記入

<div id="parent-div-sp" class="detail_images"></div>
<script src="https://file000.shop-pro.jp/PA00000/000/kagoimage-add.js"></script>

上記2行のHTMLソースを商品説明欄に記入します。

<script src=”https://file000.shop-pro.jp/PA00000/000/kagoimage-add.js”></script>
赤字の部分はご自身の店舗のFTPサーバーアドレスに書き換えて下さい。

FTPサーバー情報は、管理画面のツール＞FTPアカウント＞FTPアカウントで確認できます。

これでカラーミーショップに、カゴ周りの商品画像を自動で商品説明に挿入させることが出来ます。

サンプルショップと同じテンプレートを使っている店舗さんは、上記のソースをちょっと書き換えるだけでそのまま使えます。

サンプルショップと異なるテンプレートを使っている店舗さんは、CSSのセレクタを探すのが難しいかもしれませんが、頑張ってみて下さい！


(サンプルコードDL特典付き)できるポケット Web制作必携 HTML&CSS全事典 改訂3版
タイトルとURLをコピーしました