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

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

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

کاروسل شامل هفت مرحله‌ست که مسیر سفارش رو از لحظه ثبت تا تحویل نشون می‌ده. مراحل به ترتیب شامل تایید سفارش، آماده‌سازی، خروج از مرکز پردازش، تحویل به پست، مرکز مبادلات و تحویل به مشتری هستن. مرحله اول هم که «لغو شده» است، برای سفارش‌های کنسل‌شده در نظر گرفته شده.

مراحلی که انجام شدن، با ظاهر متفاوتی مشخص شدن. این مراحل یه آیکون تیک روشون دارن و تصویرشون رنگی و واضحه. متنشون هم با رنگ آبی نمایش داده می‌شه. مراحل انجام‌نشده کدرتر هستن و تیک ندارن.

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

بالای کاروسل، عنوان «مرسوله 1 از 1» و لینک «لغو دریافت مرسوله» قرار داره. این بخش به کاربر می‌گه چند مرسوله در حال پیگیریه و امکان لغو دریافت هم داره.

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

استایل‌دهی کاروسل با CSS سفارشی انجام شده. کادر کاروسل سفید با گوشه‌های گرد و سایه ملایمه. دکمه‌های ناوبری به شکل دایره‌های سفید با سایه طراحی شدن و حالت غیرفعالشون مخفی می‌شه.

نکته کاربردی این پروژه، یادگیری نمایش وضعیت‌های چندمرحله‌ای با Owl Carousel و مدیریت حالت فعال در آیتم‌هاست. این مهارت در هر سیستم پیگیری یا فرآیند چندمرحله‌ای کاربرد داره.

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

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