Product Builder

JavaScript

カスタマイズ性に優れたオンラインストアに役立つ「Product Builder」

Product Builderは、カスタマイズ性に優れたオンラインストアに役立つショッピングツールです。レスポンシブにも対応しているので、パソコンからスマホまでさまざまなデバイスで見やすくレイアウトされます。オンラインショッピングの際に、オプションをたくさん選択する必要がある製品などに活用できますね。

Product Builder

デモ

デモページにアクセスすると、画面上の方に、MODELS、COLORS、ACCESSRIES、SUMMARYという項目が表示されています。まずは車のMODELS(車種)を選択しないと、それ以降に進めない仕組みになっています。

MODELSを選択すると、右下にある「COLORS」というボタンが黄色に変化。ここをクリックすると、今度は車のカラーを選択する画面が表示されます。ちなみに、上部のメニューから「COLORS」を選んでも同じ画面に行くことができます。

COLORSの次は、ACCESSORIES、最後にSUMMARY、という流れで画面が切り替わっていきます。

このように、Product Builderを使うことで、カスタマイズしながら購入する製品を決めていくページをつくることができるわけです。単純に購入ボタンを押せば完了する製品ではなく、カラーを選んだりオプションを決めたりと、最終的な購入まである程度ユーザーが選択しなければいけない製品ページに最適なツールといえますね。

Product Builder

justContext.jsシンプルなコンテキストメニューを実装できる「justContext.js」前のページ

レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」次のページSlyder

関連記事

  1. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  2. AJAX Live Search
  3. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  4. JavaScript

    クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

    Purplecoat.jsはクリックすると画像や好きな要素にオーバーレ…

  5. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  6. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP