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

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

  • HTML・CSSでレイアウトとデザインを整える
  • 販売価格に範囲がある場合の○○円~○○円表示
  • 独自タグなどを使って入力形式(選択方法や入力欄)を作り替える
  • オプション在庫・値段表(テンプレート)のデザインをいじる

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

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

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

カラーミーショップのオプション仕様

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

カラーミーショップにあるオプション関連の独自タグは3つです。
<{$option}>(オプションID取得で必要)
<{$option_value}>(オプション項目名やオプションID取得で必要。今回は必要なし)
<{$option_view_data}>(在庫数取得で必要)

<{$option_view_data}>は表形式(縦並び)を選択していると独自タグの中身が違うので注意。

取得できる項目は以下のとおりです。
ご依頼に応じて、オプション項目の販売価格や在庫数も表示可能です。

$option_view_dataの項目
$option_valueの項目

注意点

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

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

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

どの表示形式を選ぶかによって、コーディングが変わります。

実装

作業内容によって、お見積り金額は変わります。
どういう風にしたいかおうかがいしたのちに、お見積りいたします。

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

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

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

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

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