Add To Cart Interaction

JavaScript

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

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

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

デモ

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

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

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

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

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

Add To Cart Interaction

Random Quote Machineランダムにテキスト(クオート)を表示させる「Random Quote Machine」前のページ

画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」次のページZoomify

関連記事

  1. JavaScript

    シンプルな構成で簡単に実装することができるツールチップ「jQuery PowerTip」

    とてもシンプルな構成で簡単に実装することができるjQueryプラグイン…

  2. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  3. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  4. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  5. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  6. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP