10 أمثلة مجانية لواجهة مستخدم عربة التسوق في التجارة الإلكترونية و CSS و JavaScript

يجب أن تكون عربات التجارة الإلكترونية قابلة للاستخدام ومتاحة لجميع الزوار. هدفك هو زيادة التحويلات والحفاظ على تفاعل الأشخاص أثناء الخروج ، وأفضل طريقة للقيام بذلك هي باستخدام تصميم نظيف يشجع نشاط المستخدم.

هناك العديد من عربات التسوق المجانية مفتوحة المصدر التي يمكنك إعادة تصميمها لأي غرض. وقد اتخذنا الحرية في جمع الأشياء المفضلة لدينا في هذه المجموعة.

عربة مسطحة

ليس هناك من ينكر شعبية التصميم المسطح. إنه يعمل مع جميع أنواع مواقع الويب ، ويساعد المصممين على التركيز بشكل أكبر على سهولة الاستخدام بدلاً من الجماليات.

هذا هو السبب في أن هذه العربة المسطحة تقدم موردًا ممتازًا لأي شخص يقوم ببناء صفحة الخروج من التجارة الإلكترونية. من السهل تحديث الألوان وتعمل ميزات الواجهة بنفس الطريقة بغض النظر عن نمط التخطيط.

لا أعتقد أن التصميم المسطح هو الحل لكل مشروع ، ولكن في السيناريو الصحيح ، يمكن أن يعمل هذا القلم جيدًا كقالب بداية.

راجع Pen Flat Cart [codepen comp] بقلم Will Paige

واجهة مستخدم خالية من الجدول

تستخدم العديد من صفحات الخروج جداول لتنظيم البيانات ولكن هذا المثال بواسطة Alex Rodrigues يستخدم DIV بدلاً من ذلك.

إنه مستجيب تمامًا ، لذا يجب أن يبدو التصميم رائعًا بغض النظر عن الجهاز الذي تستخدمه. يحتوي كل صف على بيانات كافية لإعادة التصميم بشكل صحيح والحفاظ على كل شيء منظمًا ، حتى على الشاشات فائقة الصغر. ويستخدم كود CSS البوصلة لتوفير الوقت مع خطوط Google المجانية لأسلوب بسيط.

شاهد عربة التسوق Pen Responsive Table-less Shopping Cart من أليكس رودريغز

عربة تسوق لذيذة

لا أستطيع أن أتخيل أن هذا يعمل على موقع حقيقي ولكن كتجربة UI / UX فهو رائع جدًا. تعمل عربة التسوق اللذيذة التي تحمل عنوانًا ذاتيًا مثل متجر مخبز / حلويات عبر الإنترنت مع صور حلويات مختلفة.

يمكنك تحريك المؤشر يسارًا / يمينًا للتقدم خلال الدائرة أو التمرير سريعًا على جهاز محمول. يحتوي كل عنصر على رموز زائد / ناقص لإضافة عناصر أو إزالتها من طلبك ، بالإضافة إلى رمز "X" لإزالته بالكامل من سلة التسوق الخاصة بك.

كل شيء مبني على Sass و Slim و jQuery ، لذلك فهو واحد من مشروع الواجهة الأمامية! إذا كنت تتطلع إلى تشريح بعض الرموز الرائعة ، فإن هذا المثال يستحق الحفظ.

شاهد عربة التسوق اللذيذة للقلم من ديدييه

الرسم المتجاوب

إليك واجهة مستخدم أخرى لعربة التسوق سريعة الاستجابة مبنية على Sass وخالية من الجدول.

أنا أحب هذا الخروج سريع الاستجابة أكثر قليلاً من الآخرين لأن نقاط التوقف تبدو طبيعية أكثر. حتى على الشاشات الأصغر ، لا تشعر عناصر العربة بأنها ضيقة أو في غير مكانها.

تعمل جميع أزرار "الإزالة" من خلال JavaScript ، ويتم تحديث أسعار حقول الإدخال الرقمية تلقائيًا. يعد هذا أمرًا رائعًا لصفحة عربة التسوق الأمامية حيث قد يرغب المشتري في زيادة الكميات قبل الدفع والاطلاع على تقدير إجمالي التكاليف.

شاهد عربة التسوق المستجيبة للقلم من تصميم جاستن كليم

سلة التسوق jQuery

يعمل هذا القلم كإطار سلكي أكثر من كونه صفحة تسجيل خروج كاملة ولكنه مثالي كنقطة بداية. أنشأ المطور Khurram Alvi عربة التسوق سريعة الاستجابة هذه باستخدام HTML / CSS الأساسي وقليل من jQuery.

إنه مستجيب تمامًا ، وتعمل مدخلات الكمية كما تتوقع. شيء واحد لطيف هو بساطة تصميم هذه العربة. لا يفرض أي ألوان أو خطوط أو مواد في التخطيط. قد يبدأ هنا أي شخص يتطلع إلى إنشاء عربة جديدة من البداية لأنه من السهل البناء عليها وإعادة هيكلتها.

شاهد سلة تسوق jQuery المستجيبة للقلم من تصميم Khurram Alvi

عربة التحدي

تظهر تحديات CodePen الجديدة في كثير من الأحيان وتطلب من المطورين إنشاء واجهات مختلفة مثل صفحات التسجيل أو النوافذ المشروطة. جاء هذا القلم من Ziga Miklic من تحدٍ لواجهات مستخدم عربة التسوق وهو تحفة من تطوير الواجهة الأمامية.

عند إضافة / إزالة عناصر من عربة التسوق ، ستلاحظ أن الأسعار يتم تحديثها تلقائيًا باستخدام رسم متحرك منزلق صغير. يمكنك أيضًا النقر فوق أي صورة منتج لإزالتها من عربة التسوق بسهولة. تضيف هذه الميزات الصغيرة الكثير إلى الواجهة وتجعل الاستنساخ نسيمًا.

حتى وظيفة الخروج لها ميزة الرسوم المتحركة الخاصة بها ، على الرغم من أنها غير متصلة بأي شيء على الواجهة الخلفية.

شاهد عربة التسوق Pen [CodePen Challange] بواسطة Ziga Miklic

انزلاق عربة واجهة المستخدم

تتيح لك عناصر واجهة المستخدم المبوبة إضافة محتوى إلى صفحة واحدة ومنح المستخدمين القدرة على التحكم في هذا المحتوى. في هذه العربة المنزلقة ، يمكنك التبديل بين العربة نفسها وقائمة العناصر "المفضلة" المحفوظة.

لا تعمل أي من ميزات الخروج فعليًا ، لذلك لا يمكنك إضافة أو إضافة / إزالة العناصر إلى سلة التسوق. لكن عناصر الواجهة موجودة ، لذا فإن القليل من سحر JavaScript سيصلح ذلك. ومع ذلك ، فأنا معجب بمدى نظافة هذه العربة وواجهة علامة التبويب الفريدة التي لا يمكن استخدامها.

شاهد عربة تسوق القلم (مستجيبة) بواسطة Alex

المتجر الديناميكي والعربة

يعد المزج بين المتجر وعربة التسوق في واجهة واحدة مهمة صعبة ، لكن أوليفيا تشينج أنجزتها في هذا القلم.

يستخدم صورًا مصغرة واسعة في شبكة تم إعدادها باستخدام زر "إضافة إلى عربة التسوق" عند التمرير. انقر فوق هذا لإضافة العنصر أعلاه مع أسعار التحديث التلقائي. إحدى الميزات الفريدة هي الكمية المضافة أعلى الصورة المصغرة للعنصر. قد يكون هذا مربكًا على عربة حقيقية ، ولكن إذا كانت الأرقام أصغر قليلاً ، فستكون هذه طريقة رائعة لتوفير المساحة.

شاهد عربة التسوق المنزلق القلم والمخزن من قبل أوليفيا تشينج

عربة التسوق النظيفة

قام المطور Bart Veneman بإنشاء عربة التسوق النظيفة هذه كقالب واجهة بسيط. يقوم بحساب السعر الإجمالي تلقائيًا ويتضمن الضرائب بالقرب من زر الخروج.

تعمل كل هذه الميزات الديناميكية من خلال JavaScript والمثير للدهشة أن هذا القلم يستخدم Zepto عبر jQuery. يعد هذا أمرًا رائعًا للمطورين الذين يفضلون مكتبة Zepto ، ولكن حقًا يمكن لأي شخص التقاط هذا الرمز وإعادة صياغته ليناسب أي قالب.

شاهد عربة تسوق القلم من بارت فينمان

عربة بسيطة مع Vue.js

يجعل ترميز الواجهة الأمامية باستخدام Vue.js عملية القوالب أسهل كثيرًا. وهذا القلم هو أحد الأمثلة على عربة ديناميكية مبنية عمليًا على أساس JavaScript.

يتم تحديث عربة التسوق تلقائيًا مع كل نقرة حتى تتمكن من إضافة / إزالة العناصر والاطلاع على النتائج على الفور. يفتح الزر العلوي الأيمن عربة التسوق الحالية في نافذة مشروطة باستخدام مكون Bootstrap الشرطي.

إذا كنت تحب صيغة Vue.js ، فإن هذا القالب يعد مكانًا رائعًا لبدء إنشاء عربة تسوق. من السهل تخصيصها ويجب أن تعمل بشكل جيد في جميع المتصفحات.

شاهد عربة التسوق Pen VueJS 2 Simple من كريستيان ماتوس

عربة المجال

إليك أحد تصميمات عربة التسوق المفضلة على غرار مسجل المجال. تم تفصيل Coder Jesse Bilsten بهذه الواجهة بما في ذلك قسم الدفع ومنطقة الشروط والأحكام المطلوبة.

يجب عليك النقر فوق الزر "أوافق" قبل إكمال عملية الدفع. إنها ميزة ثانوية ولكنها قيّمة لبعض مواقع التجارة الإلكترونية ، وأنا معجب حقًا بالتخطيط المكون من عمودين. وهذا التصميم مستجيب تمامًا لذا يمكنك استنساخه لاستخدامه في أي نظام تجارة إلكترونية تقريبًا.

شاهد عربة التسوق المستجيبة للقلم - العلامة التجارية v01 من جيسي بيلستن