私の本業である印章業の通販サイト「綺麗印影」において、ショッピングシステムを製作しておりますので、紹介いたします。
※注文完了で店舗にメールが届く形になるのでご注意ください。
製作の経緯 および目的
印章は彫刻文字や字体など選択肢が多く、また当該サイトでは印章ケースや化粧箱も選べる仕様です。
通常のHTMLによる選択(チェックボックス・ラジオボタン)では画像が表示できない(できても小さく表示せざるを得ない)問題があります。
また、選択する項目が多いため表示が煩雑になりやすく、読み飛ばしが多くなる可能性が高いという問題がありました。
今回のシステムは3代目ですが、選択肢の表現が自由にできるショッピングシステムが見つからない関係で、全て自作しております。
システムの特徴
- 読み飛ばしを起こさないよう「一項目ずつ表示」という形式にしています。
入力・選択が終わり「次に進む」ボタンを押すと、次の項目が表示され、自動でスクロールされます。
※字体や印章ケースなどは標準でおすすめのものが選択されているので、お任せで手早く進みたい方は「次へ進む」ボタンを押すだけで進めます。 - 字体や印章ケース、化粧箱は大きめの画像で表示。「変更する」ボタンを押すと、モーダルウインドウが表示され、他の選択肢も画像で確認できます。
- お届時間帯や決済方法などのラジオボタンは、スタイルシートでボタン表示に変更。
- のし紙やメッセージカードなど、細かい対応も可能にしながら、不要な方には無視して「次へ進む」ボタンを押すだけでＯＫという仕組みです。
使用言語
- PHP(7)
- jQuery(2.9)
- CSS