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

当サイトには広告が含まれています。

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

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

完成形

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

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

目次

カスタムする箇所

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

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

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

差し替え用コード
<{* セレクトメニュー *}>
<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様です。

デザイン作るの難しい〜!と感じたら

デザイン・ホームページで

お困りのことがありましたら、
私たちクートスラボにご依頼ください!
実績多数の女性クリエイターチームが、

どんなお悩みも解決します。

\ 南大阪・泉州でデザインのご依頼はこちら /

シェアお願いします!
  • URLをコピーしました!
目次