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

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

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

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

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

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

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

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

$option_view_dataの項目$option_valueの項目

注意点
オプション項目のボタン化は一覧性は高いので、項目が見やすい・選びやすい利点があります。
オプション項目が二つの場合は、表形式にくらべるとクリックする手間が増えて、かえって使い勝手が悪くなる場合も考えられます。

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

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

作り込みの量によって、お見積り金額は変わります。

制作物用のお問い合わせボタン

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

機能実装のお手伝いをしています。お気軽にご相談ください。
追加の要望や設置場所の状態によって、お見積り金額は変動します。

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

よく読まれているプロダクト