طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

نمایش سریع محصولات همانند آمازون با php و ajax


نمایش سریع محصولات همانند آمازون با php و ajax

در فروشگاه های آنلاینی مانند آمازون و یا ژاکت , معمولا در صفحات اصلی محصولات را با اطلاعات محدودی مثل قیمت و عنوان و .. نشان می دهند. اگر قصد دارید که یک نمایش سریع برای اطلاعات بیشتر در مورد محصولات را ببینیم, پس در یک پنجره مودال (modal) بدون ریدایرکت صفحه نشان می دهیم.

در این آموزش PHP قصد داریم به شما نحوه نمایش سریع محصولات همانند آمازون را در پنجره مودال با کلیک روی دکمه “نمایش سریع” “Quick Look” را  در سبد خرید PHP را نمایش بدیم.

 

یک اپلیکیشن تحت وب برای نمایش ریسپانسیو گالری محصولات سبد خرید را ساختیم . این گالری تصاویر را در حالت نمایشی کارت مانند نشان میدهد. هنگامی که روی المان کارت ماوس را نگه می داریم (رویداد hover) , دکمه “Quick look” را با حالت روح در بالای تصویر محصول نمایش می دهیم.

با کلیک روی این دکمه, تابع AJAX جی کوئری برای دریافت اطلاعات محصول فراخوانی و در یک پنجره مودال نمایش می دهد. این مودال شامل نام محصول, تصویر پیشنمایش بزرگ شده , قیمت و اطلاعات دیگر خواهد بود.

 

کد HTML برای نمایش گالری محصول با کنترل نمایش سریع

ما گالری تصویر را با استفاده از اطلاعات کش رفته از نتایج دیتابیس ایجاد کردیم. نتیجه دیتابیس با تکرار در حلقه, تصاویر گالری محصول را با دکمه کنترل Quick Look نمایش می دهد. این دکمه با افکت نمایش/مخفی کردن با هاور شدن روی المنت کارت مانند گالری اضافه می شود.

رویداد کلیک این دکمه ها شامل تابعی برای نمایش “پنحره مودال به همراه اطلاعات بیشتر محصول” است.

تابع اجکس جی کویری برا نمایش مودال

کد jQuery زیر تابع  Ajax را برای ارسال درخواست به صفحه PHP به منظور دریافت اطلاعات محصول نشان می دهد. که با پاس دادن id محصول به عنوان پارامتر با درخوست AJAX انجام می شود.

حتما بخوانید  insert درون خطی توسط AJAX در جی کوئری

این پارامتر در بخش PHP دریافت و در کوئری MySQL برای بیرون کشیدن اطلاعات محصول استفاده می شود. در صفحه PHP , نتیجه اطلاعات محصول برای ایجاد کد HTML و نمایش آن در پنجره مودال, استفاده می شود. این HTML به عنوان پاسخ به درخواست AJAX برگشت داده می شود.

فایل get-product-info.php

خروجی نمایش سریع محصولات همانند آمازون در PHP

اسکرین شات زیر به شما خروجی نمایش سریع محصولات همانند آمازون را با کنترل درخواست quick look نشان میدهد.

حتما بخوانید  افزودن و حذف تصویر با AJAX در جی کوئری

نمایش سریع محصولات همانند آمازون با php و ajax

امیدوارم از آموزش نمایش سریع محصولات همانند آمازون با php و ajax نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

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

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

دیدگاه کاربران

دیدگاهتان را بنویسید

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

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش طراحی وب سایت

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

نظر شما برای ما بسیار مهم است

Loading ... Loading ...

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه