オプション項目をボタン入力する

カラーミーショップのオプション項目関連でカスタマイズを相談されることがあります。
代表的な4パターン。

  • HTML・CSSでレイアウトとデザインを整える
  • 販売価格に範囲がある場合の○○円~○○円表示
  • 独自タグなどを使って入力形式をデザインする
  • オプション在庫・値段表(テンプレート)のデザインをいじる(組み合わせが多いときなど)

今回はオプション項目をボタン入力する方法を紹介します。
他カートのアパレル系ショップでよくみかけます。

オプション項目レイアウト例

カラーミーショップのオプション仕様
オプション項目は2つまで(例:カラー × サイズ)。
項目数は30×30までは確認しました(正確にはわかりませんが、これ以上使うお店はほとんどないでしょう)。
現状の表示形式はセレクトボックス(ドロップダウン)か表形式(ラジオボタン)です。商品ごとに選択できます

上例のようなボタン形式の入力を作るには、オプション関連の独自タグを使います。
<{$option}>(必要なし)
<{$option_value}>(オプションID取得で必要)
<{$option_view_data}>(在庫数取得で必要)

取得できる項目は下のとおりです。

$option_view_dataの項目$option_valueの項目

注意点
今回の例は一覧性は高いので、項目が見やすい利点があります。
オプション項目が二つの場合はクリックする手間が増えて、かえって使い勝手が悪くなる気もします。入力しやすさでは表形式の方がおすすめです。

他カートのアパレル系ショップですと、在庫なしのときに項目に「/」が入って、わかりやすい作りになっていますが、カラーミーショップでオプション項目が二つの場合は、考慮すべき点が多くて実装は結構大変です。

ページロード時に在庫数を取ってくるので、タイミングによっては売り切れていることもあります。

執筆者

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

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴10年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

お仕事のご相談はこちら

関連記事