Add To Cart Interaction

JavaScript

アイテムを追加するとカートがスライド表示される「Add To Cart Interaction」

Add To Cart Interactionは、アイテムをカートに追加するボタンをクリックしたときに、カートをスライド表示させる機能を実装できます。JSとCSSが使われており、カートのスタイルや表示させる位置などはCSSからカスタマイズ可能です。シンプルかつ実用的なカートを実装したい場合にはピッタリですね。

ショッピングに集中しやすい工夫

デモ

デモでは、「ADD TO CART」と書かれたボタンをクリックすると、画面右下からカートがスライドで現れます。カートにはアイテム数も表示されるので、現在アイテムがいくつ入っているかを一目で把握できます。

追加ボタンをクリックするたびに、アイテム数が切り替わっていくので、ユーザーもテンポよくショッピングができそうですね。

カートはクリックするまで非表示になっているので、ショッピングにも集中しやすいのではないでしょうか?

また、カートのアイコン自体をクリックすると、現在カートに入っている商品の詳細が表示されます。合計金額などもここからチェックできるので、かなり便利ですね。わざわざページ移動して確認する手間が省けるので、効率的に買い物を楽しめると思います。

余計な機能や動作を必要とせず、ユーザーがサクサク買い物できるように工夫された実用性の高いカートを実装したいときに、活用してみたいですね。

Add To Cart Interaction

関連記事

  1. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  2. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  3. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  4. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  5. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  6. jQuery googleslides

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP