آموزش رایگان ساخت تاریخچه سفارشات سایت دیجی کالا با Html | Css | BootStrap | Jquery

آموزش رایگان و پروژه محور ساخت تاریخچه سفارشات

تاریخچه سفارشات یکی از بخش‌های مهم حساب کاربری توی فروشگاه‌های اینترنتیه. کاربر باید بتونه وضعیت سفارش‌هاش رو ببینه و دنبال کنه. در این مینی پروژه قراره با HTML، CSS، Bootstrap و jQuery یه تاریخچه سفارشات مشابه دیجی کالا بسازیم.

سفارشات به پنج وضعیت تقسیم شدن: در انتظار پرداخت، در حال پردازش، تحویل داده شده، مرجوعی و لغو شده. هر وضعیت یه تب جدا داره که با کلیک روش، جدول سفارشات همون وضعیت نمایش داده می‌شه. تعداد سفارشات هر وضعیت با یه bage کنار عنوانش مشخص شده.

توی دسکتاپ، تب‌ها به صورت افقی بالای جدول قرار گرفتن. تب فعال با یه خط ضخیم زیرش مشخص می‌شه و فونت بولدتری داره. این چیدمان دسترسی سریع به هر وضعیت رو فراهم می‌کنه.

توی موبایل، تب‌ها به یه منوی کشویی تبدیل می‌شن. کاربر با کلیک روی دکمه «لیست سفارشات بر اساس»، منوی وضعیت‌ها رو می‌بینه و می‌تونه انتخاب کنه. این تغییر با مدیا کوئری انجام شده و باعث می‌شه جدول توی صفحات کوچیک شلوغ نشه.

جدول سفارشات شامل ستون‌هایی مثل ردیف، شماره سفارش، تاریخ ثبت، مبلغ قابل پرداخت، مبلغ کل، وضعیت و لینک جزئیاته. هر ردیف یه سفارش رو نمایش می‌ده و لینک جزئیات با یه آیکون فلش مشخص شده.

برای وضعیت مرجوعی که سفارشی نداره، به جای جدول، یه باکس خالی نمایش داده می‌شه. این باکس شامل آیکون و پیام «سفارشی برای نمایش وجود نداره» هست. این حالت خالی هم باید طراحی بشه تا کاربر سردرگم نشه.

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

نکته کاربردی این پروژه، یادگیری ساخت تب‌بندی با Bootstrap و مدیریت نمایش داده‌ها در دسکتاپ و موبایله. این مهارت توی هر بخش مدیریتی فروشگاه کاربرد داره.

در نهایت یه تاریخچه سفارشات کامل داری که می‌تونی ازش در پروژه‌های شخصی خودت استفاده کنی. سورس کامل پروژه به صورت رایگان در دسترسه تا کدها رو بررسی کنی.

اگه می‌خوای این بخش‌ها رو در قالب یه پروژه فروشگاهی یکپارچه پیاده کنی، یادگیری کامل ساخت دیجی کالا با HTML و CSS می‌تونه انتخاب مناسبی باشه.