ساخت سبد خرید پیشرفته با 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 و تعاملات دینامیک است.