ساخت سبد خرید پیشرفته با Vanilla JS

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

در این قسمت، به بررسی ساختار HTML و CSS پروژه و نحوه‌ی فولدر بندی می‌پردازیم. این بخش شامل توضیحاتی درباره‌ی تنظیمات ابتدایی و سازماندهی فایل‌هاست، بدون ورود به جزئیات آموزش HTML و CSS که هدف دوره فقط تمرکز بر JavaScript است.

در این قسمت، به ایجاد مدال (پنجره بازشو) و پیاده‌سازی عملکرد آن با استفاده از JavaScript می‌پردازیم. شامل طراحی و تنظیمات مدال، و نوشتن کدهای جاوا اسکریپت برای نمایش و مخفی کردن آن بر اساس تعاملات کاربر است.

در این قسمت، به جای پیشبرد پروژه، به مفاهیم مرتبط با جاوا اسکریپت مانند Object.keys، Object.values و Object.entries می‌پردازیم. هدف این بخش، درک عمیق‌تر این متدها و چگونگی استفاده از آن‌ها در پروژه‌های واقعی است.

در این قسمت، به نحوه‌ی ذخیره‌سازی محصولات در Local Storage و به‌روزرسانی سبد خرید بر اساس داده‌های موجود در آن می‌پردازیم. شامل پیاده‌سازی عملکرد برای شمارش و نمایش تعداد محصولات موجود در سبد خرید با استفاده از متدهای JavaScript مانند Object.keys و filter است.

در این قسمت، به نحوه جمع‌آوری اطلاعات محصول از DOM (شامل تصویر، عنوان، قیمت و شناسه) و ایجاد یک شیء (Object) برای ذخیره‌ی این داده‌ها می‌پردازیم. این شیء شامل تمام جزئیات مورد نیاز محصول است که برای مدیریت سبد خرید به کار می‌رود.

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

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

در این بخش، به پیاده‌سازی و مدیریت تعاملات مربوط به سبد خرید پرداخته و نحوه‌ی حذف محصولات از Local Storage را بررسی خواهیم کرد. این بخش شامل نمایش پنجره مدال، افزودن و حذف محصولات از سبد خرید و به‌روزرسانی رابط کاربری بر اساس تغییرات است.

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

در این بخش، به بررسی و آشنایی با spread syntax در جاوااسکریپت می‌پردازیم. این مبحث شامل نحوه‌ی استفاده از spread برای گسترش مقادیر در آرایه‌ها و اشیاء، و کاربردهای آن در پروژه‌های عملی و به‌ویژه در پروژه‌ی جاری است.

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

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

در جلسه 14، بهبودهای مهمی روی کد پروژه انجام شد. توابع getCartItem و setCartItem برای مدیریت بهتر داده‌های ذخیره‌شده در localStorage اضافه شدند و استفاده از closest برای انتخاب عناصر به جای سلسله‌مراتب طولانی، کد را بهینه‌تر کرد. این تغییرات به افزایش کارایی و وضوح کد و بهبود تجربه کاربری کمک کرده‌اند.

در جلسه 15، بهبودهایی بر روی پروژه سبد خرید انجام شد. تغییرات شامل اصلاح عملکرد مدیریت تعداد محصولات در سبد خرید بود. به‌ویژه، عملکرد افزایشی و کاهشی برای تعداد محصولات با استفاده از تابع updateProductCount پیاده‌سازی شد که امکان افزایش یا کاهش تعداد محصولات را به‌صورت داینامیک فراهم می‌کند. همچنین، بهینه‌سازی‌هایی در نحوه نمایش محصولات در مدال انجام شد تا رابط کاربری بهبود یابد و کاربر به‌راحتی بتواند تعداد محصولات را تغییر داده و سبد خرید را مدیریت کند.

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