カラーミーショップの挙動として、オプション項目を変更した際に、サーバー側（カラーミーショップ）に在庫チェックしにいきます。

在庫数がたりない場合は、下画像の赤枠のようなメッセージを表示します。
この状態ではカートに入りませんし、決済画面にも移動しません。

Ajax（非同期通信）を使ってサーバー側（カラーミーショップ）と通信して在庫チェックしています。
クライアント側（ブラウザ）は商品詳細ページのソースコードに product_stock.js というファイルがあってその中に処理が書いてあります。

在庫チェックのメッセージを変更する

在庫チェック後の「選択いただいた商品の在庫は残り3台です」というメッセージは、product_stock.js 内でJavaScriptを使って文章に組み立て、メッセージ表示欄に挿入しています。

在庫チェックのメッセージを変更したいという相談がたまにありますが、ファイルの置き場所の関係上、product_stock.js を直接修正することはできません。

とはいえ、別ファイル・別の置き場所に product_stock.js を丸々コピーして、コピー先のメッセージを修正してやれば、表示内容を変更することが可能です。

if (option_val.stock_num == -1) {
  c_class.text("選択いただいた商品の在庫数が不足しています").css("display", "block");
} else if (option_val.stock_num == 0) {
  c_class.text("選択いただいた商品の在庫はありません").css("display", "block");
} else if (option_val.stock_num < parseInt(productNum)) {
  c_class.text("選択いただいた商品の在庫は残り" + option_val.stock_num + decodeURI(option_val.unit) + "です").css("display", "block");
}
if (c_class.css('display') == 'block') {
  return false;
}

詳細な解説

product_stock.js の先頭には、コードを複数回読み込まないようなフラグ処理が書いてあります。これのおかげで、2回目以降は無効になって影響がないわけです。

// product_stock.jsが複数回読まれた時に2回目以降は無効化
if(typeof Colorme.productStockJsAlreadyRead === 'undefined') {
  Colorme.productStockJsAlreadyRead = true;

product_stock.js は、商品詳細ページのソースコードを見るとわかりますが、body終了タグの直前（ソースコードの一番最後）にカラーミーショップ側で自動挿入して、読み込むようになっています。
それよりも先に、メッセージ変更した版のJavaScriptを読んでおけば、上手く動作するわけです。

Ajax通信で通信成功した場合の戻り値

戻り値は以下の4つです。
商品ID、在庫切れフラグ、在庫数、単位です。

product_id: "136212487"​
stock_flg: "0"
​stock_num: "0"
​unit: "%E5%8F%B0"

別サーバーにアップロードしても動きます

アップロード先はどこでも問題ないっぽいです。
カラーミーショップの文字エンコードはEUC-JPです。

カラーミーショップAPIを使わなくても、product_stock.jsのAjax部分を読んでコードを流用すれば、最新の在庫数を参照できるということです（怒られるかもしれませんので、APIを使いましょう）。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら