カラーミー：プルダウン式オプションに在庫数が表示されるようカスタマイズ

こんにちは、ウェブ担当の菅井です。

カラーミーショップの商品詳細ページにて、プルダウン方式のオプション表示の選択項目に、各オプションに設定されている在庫数を表示させるためのコードを残しておきます。
デフォルトではプルダウン方式（セレクトメニュー）だと在庫数がパッとみてわからないので、カスタマイズします。

使用テーマ： Might　ですが、他のテンプレートでも大丈夫だと思います。

テーマをカスタマイズする際は必ずバックアップをとりましょう。
「テンプレートをコピー」しておくと安心です。

カスタムする箇所

デザイン編集＞商品詳細>HTMLからコードを編集します。

MightテーマのHTMLファイルでは222行目あたりがセレクトメニュータイプのオプション選択欄のコードが記載されています。
その部分を以下のコードに丸々差し替えてください。

オプションが１つしかない場合しか正常に動作しないようです。

<{* セレクトメニュー *}>
<div class="p-product-option-select">
  <{foreach from=$option item=i key=k}>
    <select name="<{$i.select_name}>">
      <{foreach from=$option_view_data[$k].data item=i2 key=k2}>
        <option value="<{$option_value[$k].id[$k2]}>"<{if !$i2.stock_num}>disabled="disabled"<{/if}>><{$i2.name}> 残り<{$i2.stock_num}>個</option>
      <{/foreach}>
    </select>
  <{/foreach}>
</div>

「残り」「個」のテキストは自由に変更してもらって大丈夫です。

今回はnaeko.jpさんの記事を参考にさせていただきました。
参照元であるカラーミーの公式ヘルプが、もう閲覧できなくなっていましたので、naeko.jpさんの記事から引用させていただきました。ありがとうございました。

一応、「オプションの詳細情報」で在庫数は見れる

「オプションの詳細情報」をクリックすると、カスタマイズしなくても各オプションの在庫数は表示されます。
ですが、パッと見てセレクトエリアに在庫数が入っていた方がいいですよね。

プルダウンに在庫数が表示されることを確認

このようにオプション名の横に各在庫数が表示されるようになりました。

実際のショップはこちらですので、ぜひご覧ください。（お客様のサイトです＾＾）
素敵な京都の和漆器を製造・販売されているCOCOO様です。