مجله خبری هاست ایران » طراحی و توسعه » آموزش ساخت رابط کاربری سبد خرید با استفاده از CSS و جاوا اسکریپت
  • mag-telegram.jpg
  • landing96-300-420.jpg
UI/UX توسعه وب طراحی و توسعه طراحی وب

آموزش ساخت رابط کاربری سبد خرید با استفاده از CSS و جاوا اسکریپت

سبد خرید یکی از مهم‌ترین بخش‌ها در یک فورشگاه آنلاین به‌حساب می‌آید، در این مقاله، قصد داریم نحو ساخت سبد خرید با استفاده از CSS و جاوا اسکریپت را آموزش دهیم. در این مطلب از فونت­‌های گوگل، به‌خصوص «Roboto»، استفاده می­‌کنیم.

عنوان آموزش: HTML / CSS3 / JavaScript

میزان سختی: متوسط (Intermediate)

زمان تخمینی آموزش: ۳۰ دقیقه

 

HTML

گام ۱: ابتدا ساختار HTML را می‌سازیم.

برای این کار نیاز به یک کانتینر div داریم که آن را «.shopping-cart» می‌­نامیم.


مقاله مرتبط: دانلود رایگان مجموعه آیکون های فروشگاهی


در کانتینر، یک عنوان و سه آیتم داریم که به شرح زیر هستند:

  • دو دکمه، دکمه حذف (Delete) و دکمه مورد­علاقه (Favorite)
  • تصویر محصول
  • نام و توضیحات محصول
  • دکمه­‌هایی که تعداد محصولات را مشخص می‌­کنند
  • قیمت کل

CSS

مطمئن شوید که فونتی که در این آموزش استفاده می­‌کنیم، را در سیستم خود دارید.

حال، با کدهای زیر برخی روش­‌ها (style) را به بدنه (body) اضافه می­‌کنیم:

سبد خرید را در اندازه ۷۵۰×۴۲۳ پیکسل تنظیم می­‌کنیم. توجه داشته باشید که ما از فلکس‌­باکس (flexbox) استفاده می­‌کنیم، بنابراین سبد خرید را طوری تنظیم می­‌کنیم که فلکس را نمایش دهد و جهت فلکس عمودی باشد، زیرا به‌صورت پیش‌فرض، جهت فلکس افقی است.

این مرحله را با تغییر ارتفاع «عنوان» به ۶۰ پیکسل و اضافه نمودن برخی سبک­‌های (style) پایه‌­ای شروع می­‌کنیم. سپس، به سراغ سه آیتمی که در سبد خرید هستند، می­‌رویم. ارتفاع هر یک از این سه مورد را ۱۲۰ پیکسل قرار می‌­دهیم و آن‌ها را برای نمایش فلکس تنظیم می­‌کنیم.
حال، ساختار پایه سبد خرید را طراحی کرده­‌ایم. در این قسمت، محصولات­مان را به ترتیب می‌­سازیم.

اولین مولفه‌­ها، دکمه‌­های حذف «delete» و مورد­علاقه «favorite» هستند.

تصویر متحرک دکمه قلب در توییتر را مورد علاقه بسیاری از کاربران است و می‌خواهیم این انیمیشن را به سبد خرید خود اضافه کنم. حال، در این قسمت آن را عملیاتی می‌­کنیم.

کلاس «is-active» را با استفاده از jQuery برای زمانی که روی دکمه کلیک می‌شود، تنظیم می‌­کنیم تا با کلیک بر روی آن قلب به حرکت درآید­، البته این مورد مطلب مربوط به بخش بعدی (جاوا اسکریپت) است.

گام بعدی، تصویر محصول است که نیاز به حاشیه ۵۰ پیکسلی از سمت راست دارد.

سپس، تعداد دکمه تعداد سفارش را اضافه می­‌کنیم، که نیاز به دو دکمه برای اضافه و حذف تعداد محصول دارد. ابتدا، CSS را ایجاد می­‌کنیم و سپس با اضافه کردن برخی مشخصات جاوا اسکریپت این کار را انجام می‌­دهیم.

و در آخر به سراغ قیمت کلی محصول می­‌رویم.

همچنین، می­‌توانید با اضافه کردن کد زیر آن را responsive کنید. این بخش مربوط به CSS است.

جاوا اسکریپت

با اضافه کردن کد زیر، هنگام کلیک برروی قلب،‌ با حالتی انیمیشن وار حرکت می­‌کند.

حال با دستورات زیر دکمه­‌ی مقدار را فعال می­‌کنیم.

برای مشاهده دمو برروی دکمه زیر کلیک کنید.

مشاهده دمو

امیدواریم مطالب مفیدی را از این مقاله آموخته باشید.

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه