تبلیغ جانبی
لپتاپ

بهترین لپتاپ ها با قیمت مناسب

موبایل

جدیدترین موبایل ها

لوازم جانبی

انواع لوازم جانبی

تبلیغ جانبی

چالش پیاده‌سازی سبد خرید

توضیحات چالش:

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

  • امکان اضافه کردن، حذف و ویرایش تعداد محصولات در سبد خرید
  • محاسبه خودکار هزینه ارسال بر اساس قیمت محصولات
  • محاسبه مالیات بر ارزش افزوده (10%)
  • نمایش جزئیات کامل سفارش و هزینه‌ها

قوانین محاسبه هزینه‌ها:

هزینه ارسال

محصولات بالای 100 هزار تومان: رایگان
محصولات زیر 100 هزار تومان: 5 هزار تومان به ازای هر محصول

مالیات بر ارزش افزوده

10% از مجموع هزینه‌های سبد خرید

نحوه پیاده‌سازی:

ساختار داده‌ها

از آرایه‌های JavaScript برای ذخیره اطلاعات محصولات و سبد خرید استفاده شده است.

محاسبات

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

به‌روزرسانی خودکار

با هر تغییر در سبد خرید، محاسبات به صورت خودکار انجام می‌شود.

نحوه پیاده‌سازی عملکردهای سامانه

الف) تعریف سبد خرید:

  • ابتدای فایل، سبد خرید از localStorage خوانده می‌شود یا در صورت عدم وجود، آرایه خالی تخصیص داده می‌شود.
  • این کار باعث می‌شود پس از بارگذاری مجدد صفحه، اطلاعات سبد خرید حفظ شود.

ب) تابع formatPrice(price):

  • عملکرد: فرمت کردن قیمت به‌شکل مناسب برای نمایش (با استفاده از Intl.NumberFormat و محلی‌سازی به زبان فارسی).
  • در صورت ورودی نامعتبر، 'نامشخص' برگردانده می‌شود.

ج) تابع calculateProductShipping(price):

  • عملکرد: تعیین هزینه ارسال محصول براساس قیمت.
  • اگر قیمت تبدیل به عدد نشود، هزینه پیش‌فرض ۵۰۰۰ ریال در نظر گرفته می‌شود؛ در غیر این صورت، در صورت بالاتر بودن از ۱۰۰۰۰۰، ارسال رایگان (۰) است.

د) تابع addToCart(productId):

  • عملکرد: افزودن محصول به سبد خرید با بررسی وجود آرایه global محصولات.
  • در صورت نبود محصول یا خطا، پیام متناسب به کاربر نمایش داده و از افزودن جلوگیری می‌شود.
  • اگر محصول قبلاً وجود داشته باشد، تعداد آن افزایش می‌یابد؛ در غیر این صورت، یک شی جدید به همراه اطلاعات (id، نام، قیمت، تصویر، تعداد اولیه و هزینه ارسال) اضافه می‌شود.
  • پس از تغییرات، تغییرات در localStorage ذخیره، UI به‌روز و یک Toast برای اطلاع‌رسانی نمایش داده می‌شود.

ه) تابع removeFromCart(productId):

  • عملکرد: حذف محصول از سبد خرید با فیلتر کردن آرایه و به‌روز رسانی ذخیره‌سازی و UI.

و) تابع updateQuantity(productId, newQuantity):

  • عملکرد: به‌روزرسانی تعداد یک محصول؛ در صورت وارد کردن تعداد نامعتبر، محصول حذف می‌شود.

ز) توابع محاسباتی هزینه‌های سبد خرید:

  • calculateShipping(): محاسبه مجموع هزینه‌های ارسال تمامی آیتم‌های سبد.
  • calculateSubtotal(): محاسبه جمع حاصل‌ضرب قیمت هر آیتم در تعداد (جمع جزء).
  • calculateTax(): محاسبه مالیات ۱۰٪ مربوط به جمع جزء (با استفاده از Math.floor).
  • calculateTotal(): محاسبه مبلغ نهایی با جمع کردن جمع جزء، هزینه ارسال و مالیات.

ح) تابع saveCart():

  • عملکرد: ذخیره وضعیت سبد خرید در localStorage. در صورت بروز خطا، پیام هشدار مناسب نمایش داده می‌شود.

ط) تابع updateCartUI():

  • عملکرد: به روز‌رسانی قسمت‌های مرتبط در UI؛ از جمله نمایش تعداد آیتم‌های سبد، جدول محصولات داخل مدال سبد خرید و بخش خلاصه خرید که شامل جمع جزء، هزینه ارسال، مالیات و مبلغ نهایی می‌باشد.

ی) تابع showToast(message, type):

  • عملکرد: ایجاد و نمایش پیام‌های Toast جهت ارائه اطلاع‌رسانی‌های سریع (موفقیت، هشدار یا خطا) به کاربر.

الف) رویداد آماده شدن صفحه:

  • با استفاده از jQuery، کدهای موجود در صفحه به محض بارگذاری کامل اجرا می‌شوند.

ب) مدیریت ناوبری – کلیک بر روی دسته‌بندی‌ها:

  • با کلیک روی المنت‌های دسته‌بندی (دارای کلاس category-item و data-category)، کاربر به صفحه محصولات هدایت شده و دسته‌بندی انتخابی به عنوان پارامتر ارسال می‌شود.

پ) مدیریت پروفایل:

  • با کلیک روی آیکن پروفایل، درخواست Ajax به profile-status.json ارسال می‌شود و در صورت موفقیت اطلاعات دریافت شده در یک مدال نمایش داده می‌شوند.
  • در صورت بروز خطا، خطا در کنسول ثبت می‌شود.

ت) بارگذاری محصولات منتخب (Featured Products):

  • تابع loadFeaturedProducts() از طریق Ajax فایل products.json را دریافت کرده، محصولات دارای ویژگی featured را فیلتر کرده و به صورت کارت‌های محصول در المنت #featuredProductGrid نمایش می‌دهد.

الف) آرایه global products:

  • آرایه‌ای شامل اطلاعات حدود ۳۰ محصول (با خصوصیات id، نام، قیمت، تصویر، دسته‌بندی، وضعیت و توضیحات) که توسط سایر توابع مورد استفاده قرار می‌گیرد.

ب) توابع فیلتر و نمایش محصولات:

  • عملکرد: فیلتر کردن محصولات بر اساس انتخاب‌های کاربر در دسته‌بندی، وضعیت و محدوده قیمتی.
  • نتیجه فیلتر به تابع displayProducts() ارسال شده تا به صورت کارت‌های محصول نمایش داده شود.

ج) تابع showQuickView(productId):

  • عملکرد: نمایش یک مدال جهت مشاهده سریع جزئیات محصول، شامل تصویر، نام، قیمت (با تخفیف در صورت وجود) و توضیحات.
  • در صورت بروز خطا یا عدم وجود محصول، پیام مناسب به کاربر نمایش داده می‌شود.

د) تابع initializeProducts():

  • عملکرد: تشخیص صفحه جاری (محصولات یا صفحه اصلی) و فراخوانی توابع مرتبط برای نمایش محصولات کامل یا محصولات منتخب.
  • در صفحه محصولات، پس از نمایش محصولات، فیلترها نیز توسط تابع setupFilters() فعال می‌شوند.

ه) تابع setupFilters():

  • عملکرد: افزودن event listener به المنت‌های فیلتر موجود (چک‌باکس‌ها و ورودی‌های قیمت) برای فیلتر خودکار محصولات هنگام تغییر مقادیر.