ساخت سبد خرید با php و جی کوئری به صورت drag & drop

  • آپدیت شده در تاریخ

ساخت سبد خرید با php و جی کوئری به صورت drag & drop

در این سری از آموزش ساخت سبد خرید با php قصد داریم به شما نحوه ساخت سبد خرید با php و جی کوئری به صورت drag & drop (کشیدن و رها کردن) را نشان می دهیم . در آموزش قبلی ساخت سبد خرید با php و ajax را یاد گرفیتیم .

در این مثال ، ما یک سری محصول داریم که می توانیم آن ها را با کشیدن و رها کردن در سبد خرید به صورت ajaxی به سبد خریدمان اضافه کنیم . در هنگام کشیدن و رها کردن محصولات در قسمت سبد خرید ، در پشت صحنه یک عملیات ajax انجام می شود . از رویداد drag (کشیدن) برای دسترسی به داده های محصول استفاده شده می کنیم.

ساخت سبد خرید با php و جی کوئری به صورت drag & drop

صفحه html محصولات

کد HTML زیر برای نمایش لیستی از عکس های محصولات همراه با اسم و قیمت هرکدام از دیتابیس استفاده شده است . می توانیم این عکس ها را در قسمت div سبد خرید drag and drop کنیم.

عملیات drag and drop (کشیدن و رها کردن) با جی کوئری

کد زیر برای مدیریت عملیات افزودن به سبد خرید با php و جی کوئری به صورت drag & drop استفاده شده است .

کد زیر id عکس های محصولات ما  را برای درگ کردن دریافت می کند . با داشتن id المنت ، هنگامی که محصول مورد نظر در محل سبد خرید دراپ (drop) می شود ، یک درخواست ajax برای بروز رسانی مقدار سبد خرید در دیتابیس اجرا می شود .

کد jQuery برای درخواست ajax

تابع cartAction یک درخواست اجکس بر اساس عملیات مورد نظر (افزودن به سبد خرید – add ، حذف محصول از سبد خرید – remove ، خالی کردن سبد خرید – empty ) را که توسط کاربر درخواست شده است را اجرا می کند .

کد php اجرای عملیات سبد خرید

کد php زیر شامل توابعی برای اجرای درخواست ajaxی که ارسال می شود است . همچنین یک فیلد برای ویرایش تعداد محصول اضافه شده به سبد خرید را نمایش می دهد .

بعد از افزودن به سبد خرید با php و جی کوئری به صورت drag & drop می توانیم تعداد رو هم تغییر بدیم .  بر اساس مقدار عددی که کاربر تعیین می کند مقدار مبلع کل سبد به صورت لحظه ای با کد زیر تغییر می کند .

امیدوارم از آموزش ساخت سبد خرید با php و جی کوئری به صورت drag & drop لذت برده باشید و با توجه به آموزش های قبل سبد خریدی که در پروژه هاتون استفاده می کندی را توسعه بدید .

اگر آموزش های قبلی ساخت سبد خرید را دنبال نکردید ، می توانید از سورس کد مورد نظر که برای دانلود کذاشتیم ، استفاده کنید و به راحتی آن را بر روی سایت یا لوکال هاست برای تمرین پیاده سازی کنید.

برای دانلود سورس کد کامل ساخت سبد خرید با php و جی کوئری به صورت drag & drop از باکس دانلود استفاده کنید

موفق و پیروز باشید.

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره های آموزشی