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

カラーミーショップのオプション項目はカスタマイズの余地もあって、ご相談をよくいただきます。
標準では、商品登録画面から商品ごとに「プルダウン形式」と「表形式」が選択できます。

他カートのアパレル系ショップの「カラー×サイズ」では、ボタン入力形式をよくみかけます。
カラーに関しては選択肢に小画像を表示して、一目で選びやすいようになっていることもしばしば。

今回はあらゆるショップ向けに定番のボタン入力形式を考えてみました。

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

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


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

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

カラーミーショップにあるオプション関連の独自タグは4つです。
<{$option}>(オプションID取得で必要)
<{$option_value}>(オプション項目名やオプションID取得で必要。今回は必要なし)
<{$option_view_data}>(在庫数取得で必要)
<{$option_tree}>($option_view_dataと中身は同じ、並びが違う)

<{$option_view_data}>は表形式(縦並び)を選択していると独自タグの中身の入り方が違うので注意。
<{$option_tree}>は中身が常にオプション1×オプション2の順で、わかりやすい(こちらを使う方がコードが簡単になる)。

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

$option_view_dataの項目
$option_valueの項目


注意点

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

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

既存の表示形式を残しつつ、併存することも一応可能です。

実装

カラーミーショップの既存テンプレートはオプション周りに改善点が多いように思います。ついでに検討されるとよいでしょう。

海外のアパレル系ではボタン入力が一般的で、ボタンについてもテキストのみではなく、カラー選択時の項目は画像になっていて一目で色が選びやすくなっています(カラーミーショップでも登録と作り込み次第で実装可能)。

また、オプション選択に応じて価格表示や在庫数表示・選択可能かどうかも可変します。こういう機能も作り込み次第で実装可能です。

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

ボタン入力形式以外にも、表形式で並べ方を工夫されている場合もあります(既存の表形式はわりとキツキツですもんね)。
下例のような並べ方だと在庫や価格が見やすいと思いますが、スマートフォン閲覧時は逆に使い辛いでしょうし……なかなか難しいところ。
丁寧な作り込みが必要ですので結構大変です(費用増)。

カラー:ブラック
サイズS 在庫あり 価格 [カートに入れる]
サイズM 在庫あり 価格 [カートに入れる]
カラー:グレー
サイズS 在庫あり 価格 [カートに入れる]
サイズM 在庫あり 価格 [カートに入れる]


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

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

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

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

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

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