10 無料の CSS と JavaScript の e コマース ショッピング カート UI の例

e コマース カートは、すべての訪問者が使用でき、アクセスできる必要があります。 あなたの目標は、コンバージョンを増やし、チェックアウト時に人々の関心を維持することです。これを行う最善の方法は、ユーザーの活動を促進するクリーンなデザインを使用することです.

あらゆる目的に合わせてスタイルを変更できる、無料のオープン ソース ショッピング カートが多数あります。 そして、私たちはこのコレクションで私たちのお気に入りを自由に集めました.

フラットカート

フラットデザインの人気は否定できません。 あらゆるタイプの Web サイトで機能し、デザイナーが美学よりも使いやすさに重点を置くのに役立ちます。

そのため、このフラット カートは、e コマース チェックアウト ページを作成する人にとって優れたリソースになります。 色は簡単に更新でき、インターフェイス機能はレイアウト スタイルに関係なく同じように機能します。

フラット デザインがすべてのプロジェクトの解決策になるとは思いませんが、適切なシナリオでは、このペンは開始テンプレートとしてうまく機能します。

Will Paige による Pen Flat Cart [codepen comp] を参照してください。

テーブルフリー UI

多くのチェックアウト ページではテーブルを使用してデータを整理していますが、Alex Rodrigues によるこの例では代わりにDIVを使用しています。

完全にレスポンシブなので、使用しているデバイスに関係なく、レイアウトは見栄えがよくなります。 各行には、非常に小さな画面でも、適切に再スタイルしてすべてを整理するのに十分なデータが保持されます。 また、CSS コードでは Compass を使用して時間を節約し、無料の Google フォントを使用して少しスタイルを整えています。

alex rodrigues によるペン対応のテーブルレス ショッピング カートをご覧ください。

おいしいショッピングカート

これが実際のサイトで機能するとは想像できませんが、UI/UX の実験としてはかなりクールです。 セルフタイトルのデリシャス ショッピング カートは、さまざまなデザートの写真が掲載されたオンライン ベーカリー / スイーツ ストアのように機能します。

カーソルを左右に動かしてカルーセルを進めたり、モバイル デバイスでスワイプしたりできます。 各アイテムには、アイテムを追加または注文から削除するためのプラス/マイナス アイコンと、カートから完全に削除するための「X」アイコンがあります。

全体が Sass、Slim、jQuery で構築されているため、まさにフロントエンド プロジェクトです。 優れたコードを分析したい場合は、この例を保存する価値があります。

ディディエのペンデリシャスショッピングカートを見る

レスポンシブ デザイン

これは、Sass で構築され、テーブルを使用しない別のシンプルなレスポンシブ ショッピング カート UI です。

ブレークポイントがより自然に感じられるため、このレスポンシブ チェックアウトは他のチェックアウトよりも少し気に入っています。 小さい画面でも、カートのアイテムが窮屈に感じたり、場違いに感じたりすることはありません。

すべての「削除」ボタンは JavaScript を介して機能し、数値入力フィールドは価格を自動更新します。 これは、購入者が支払う前に数量を増やし、総費用の見積もりを確認するフロントエンド カート ページに最適です。

Justin Klemm によるペンレスポンシブ ショッピング カートを参照してください。

jQuery ショッピング バスケット

このペンは、完全なチェックアウト ページというよりもワイヤーフレームのように機能しますが、出発点としては最適です。 開発者の Khurram Alvi は、基本的な HTML/CSS と小さな jQuery を使用して、このレスポンシブ ショッピング カートを作成しました。

完全にレスポンシブで、数量の入力は期待どおりに機能します。 良い点の 1 つは、このカートのデザインがシンプルであることです。 レイアウトに色、フォント、またはテクスチャを課すことはありません。 新しいカートをゼロから構築しようとしている人は、構築と再構築が簡単なので、ここから始めることができます。

Khurram Alvi による Pen Responsive jQuery Shopping Basket を参照してください。

チャレンジカート

サインアップ ページやモーダル ウィンドウなどのさまざまなインターフェイスを開発者に作成するよう求める新しい CodePen の課題が頻繁に発生します。 Ziga Miklic によるこのペンは、ショッピング カート UI への挑戦から生まれたもので、フロントエンド開発の傑作です。

カートにアイテムを追加/削除すると、小さなスライド アニメーションで価格が自動的に更新されます。 また、商品画像をクリックしてカートから簡単に削除することもできます。 これらの小さな機能はインターフェイスに多くの機能を追加し、クローン作成を簡単にします。

バックエンドの何にも接続されていませんが、チェックアウト機能にも独自のアニメーション機能があります。

Ziga Miklic による Pen ショッピング カート [ CodePen Challange ] を参照してください。

スライディングカートUI

タブ付きウィジェットを使用すると、コンテンツを 1 つのページに追加して、ユーザーにそのコンテンツに対する権限を与えることができます。 このスライド式カートでは、カート自体と保存済みの「お気に入り」アイテムのリストを切り替えることができます。

チェックアウト機能は実際には機能しないため、お気に入りに追加したり、カートにアイテムを追加/削除したりすることはできません. しかし、インターフェースの項目は整っているので、ちょっとした JavaScript マジックでそれを修正できます。 それでも、このカートの見栄えの良さと、ユニークでありながら使いやすいタブ インターフェイスには感銘を受けました。

Alex によるペン ショッピング カート (レスポンシブ) を参照してください。

ダイナミック ストア & カート

ストアとショッピング カートを 1 つのインターフェイスに混在させるのは大変な仕事ですが、Olivia Cheng はこのペンでそれを成し遂げました。

ホバー時に「カートに追加」ボタンが設定されたグリッドで幅の広いサムネイルを使用します。 これをクリックして、自動更新価格で上記のアイテムを追加します。 ユニークな機能の 1 つは、アイテムのサムネイルの上に追加された数量です。 これは実際のカートでは混乱するかもしれませんが、数字がもう少し小さければ、スペースを節約するのに最適な方法です。

Olivia Cheng の Pen Sliding Shopping Cart & Store をご覧ください

きれいなショッピングカート

開発者の Bart Veneman は、シンプルなインターフェイス テンプレートとして、このきれいなショッピング カートを作成しました。 合計金額を自動計算し、チェックアウト ボタンの近くに税金も含めます。

これらの動的機能はすべて JavaScript を介して機能し、驚くべきことに、このペンは jQuery ではなく Zepto を使用しています。 これは、Zepto ライブラリを好む開発者にとっては素晴らしいことですが、実際には誰でもこのコードを拾い上げて、任意のテンプレートに合うように作り直すことができます。

Bart Veneman のペン ショッピング カートを見る

Vue.js を使用したシンプルなカート

Vue.js を使用したフロントエンド コーディングにより、テンプレート作成が非常に簡単になります。 このペンは、実際に JavaScript 基盤上に構築された動的カートの一例です。

カートはクリックするたびに自動更新されるため、アイテムを追加/削除してすぐに結果を確認できます。 右上のボタンは、Bootstrap のモーダル コンポーネントを使用してモーダル ウィンドウで現在のカートを開きます。

Vue.js 構文が気に入った場合、このテンプレートはショッピング カートの作成を開始するのに最適な場所です。 カスタマイズが簡単で、すべてのブラウザでうまく動作するはずです。

Pen VueJS 2 Simple Shopping cart by Cristian Matos を参照してください。

ドメインカート

これは、ドメイン レジストラーをモデルにした、私のお気に入りのショッピング カートのデザインの 1 つです。 コーダーの Jesse Bilsten は、支払いセクションと必須の T&C エリアを含む、このインターフェースの詳細を説明しました。

チェックアウトプロセスを完了する前に、「同意する」ボタンをクリックする必要があります。 これは一部の e コマース サイトではマイナーながらも価値のある機能であり、2 列のレイアウトが非常に気に入っています。 また、このデザインは完全にレスポンシブであるため、ほぼすべての e コマース システムで使用するために複製できます。

ペンレスポンシブ ショッピング カートを見る – ブランド v01 by Jesse Bilsten