カラーミーの在庫チェック時のJavaScriptコードを読んでみて分かったこと
カラーミーショップの挙動として、オプション項目を変更した際に、サーバー側(カラーミーショップ)に在庫チェックしにいきます。
在庫数がたりない場合は、下画像の赤枠のようなメッセージを表示します。
この状態ではカートに入りませんし、決済画面にも移動しません。
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について記事にしています。
ご相談・お問い合わせはこちら