این پروژه با هدف حذف منوهای کاغذی و ایجاد یک پل ارتباطی مستقیم و داینامیک بین مشتری و آشپزخانه طراحی شد. چالش اصلی در این پروژه، نمایش حجم زیادی از دادهها (تصویر، قیمت، ترکیبات) در یک فضای محدود موبایلی بود، بدون آنکه کاربر احساس سردرگمی کند.
???? جزئیات فنی و پیادهسازی (Technical Stack)
| بخش |
تکنولوژی / ابزار |
| هسته سیستم |
PHP (Core) + WordPress Engine |
| مدیریت محصولات |
WooCommerce Integration |
| فرانتاند |
Vanilla JS (ES6+) & Modern CSS |
| رابط کاربری |
Dark Mode Optimized UI |
???? چالشها و راهکارهای پیادهسازی
-
معماری Dark UI و اشتهاآوری: برخلاف سایتهای فروشگاهی معمولی، در این پروژه از تم تاریک (Dark Mode) با کنتراست بالای رنگ زرد استفاده شد تا علاوه بر تمرکز روی تصاویر باکیفیت غذا، تجربه کاربری لوکس و مدرنی در محیط رستوران ایجاد شود.
-
دسترسی سریع (Category Slider): پیادهسازی اسلایدر دستهبندی در هدر سایت با استفاده از JavaScript، که به کاربر اجازه میدهد بدون اسکرولهای طولانی، بین دستههای پیتزا، برگر و نوشیدنی جابهجا شود.
-
یکپارچگی با ووکامرس (Dynamic Data): تمامی محصولات، قیمتها و وضعیت موجودی به صورت مستقیم از هسته ووکامرس فراخوانی میشوند. این یعنی مدیر رستوران با تغییر یک قیمت در پنل مدیریت، بلافاصله منوی روی میز مشتریان را بهروزرسانی میکند.
-
بهینهسازی برای سفارش موبایلی: طراحی دکمههای “Add to Cart” با ابعاد استاندارد برای کلیکهای لمسی (Touch-friendly) و حذف مراحل اضافه برای رسیدن به مرحله نهایی ثبت سفارش.
???? نتایج و دستاوردها
-
Minimalist Ordering Flow: کاهش زمان انتخاب تا ثبت سفارش به حداقل ممکن از طریق حذف نویزهای بصری.
-
Mobile-First Approach: بهینهسازی ۱۰۰ درصدی برای مرورگرهای موبایل (Safari/Chrome) که بیشترین سهم را در اسکن QR کدهای روی میز دارند.
-
Scalability: کدنویسی بهینه در بخش PHP که اجازه میدهد صدها محصول بدون افت سرعت در منو لود شوند.