معرفی قالب سوپردوپر مارکت
سوپردوپر مارکت چیست؟
یک قالب فرانتاند استاتیک برای سوپرمارکت آنلاین. همهچیز با HTML، CSS و JavaScript ساخته شده و بدون بکاند و دیتابیس اجرا میشود.
تفاوت اصلیاش با یک فروشگاه تکفروشنده، مدل چندفروشگاهی است:
- کاربر سبد خرید را میبندد.
- قیمت همان سبد بین سوپرمارکتهای اطراف مقایسه میشود (vendors.html).
- فروشنده انتخاب میشود - با نمایش اقلام ناموجود و جایگزینها.
- تحویل با پیک یا دریافت حضوری انجام میشود (checkout.html).
برای چه کسانی مناسب است؟
- توسعهدهندگان فرانتاند که یک UI کامل و آماده میخواهند
- آژانسهایی که قالب را پایهی پروژهی مشتری قرار میدهند
- تیمهایی که قصد دارند UI را به WordPress، Laravel، Django، React یا هر فریمورک دیگری منتقل کنند
- کسبوکارهایی که ابتدا یک دمو یا ارائه به سرمایهگذار لازم دارند و بکاند را بعداً اضافه میکنند
آنچه در بسته هست
| بخش | توضیح |
|---|---|
| ۱۷ صفحه HTML | سه صفحه اصلی، فرآیند خرید، تحویل و پرداخت، حساب کاربری و پشتیبانی |
| صفحه معرفی | demo.html با گالری اسکرینشات تمامصفحه و لایتباکس |
| ۳ پالت مستقل | گرم، سرد و تیره - هرکدام با چیدمان متفاوت، نه فقط رنگ متفاوت |
| ۲۰۰ کالای نمونه | در ۱۰ دستهبندی، با عنوان فارسی، قیمت تومانی و درصد تخفیف |
| کتابخانه تصاویر | عکس مربعی WebP برای هر کالا در دو اندازه |
| مستندات | همین پوشهی help/ |
| ابزار ساخت | اسکریپتهای پایتون برای بازتولید صفحات، تصاویر و اسکرینشاتها (اختیاری) |
آنچه در بسته نیست
- بکاند، API یا دیتابیس
- درگاه پرداخت واقعی
- احراز هویت سمت سرور (صفحه ورود فقط UI است)
- پنل مدیریت
- سیستم واقعی ثبت و پیگیری سفارش
دادهی کالا، سبد خرید و کاربر بهصورت نمونه (mock) در JavaScript پیاده شده تا رابط کاربری کامل کار کند.
ویژگیهای کلیدی
- مقایسه فروشگاهها: قیمت سبد در چند فروشگاه، با اختلاف قیمت و اقلام ناموجود
- ارسال یا دریافت حضوری: یک کلید، کل صفحهی پرداخت را عوض میکند
- انتخابگر نقشه: پین قابل جابهجایی روی نقشهی واقعی، بدون کلید API
- فیلتر و مرتبسازی زنده: دسته، برند، بازهی قیمت و پنج حالت مرتبسازی، همه سمت کاربر
- سبد ماندگار: سبد خرید در
localStorageذخیره میشود و بین صفحات باقی میماند - راستبهچپ اصولی: فقط ویژگیهای منطقی CSS؛ هیچ
left/rightفیزیکی در استایلها نیست - فونت محلی: وزیرمتن و رخ بهصورت woff2 داخل بسته، بدون وابستگی به CDN
- بدون مرحله build: فایل را باز کنید، کار میکند
محدودیتها
⚠ تصاویر کالاها عکاسی محصولِ تولیدکنندگان است. برای نمونهسازی و ارائه به کارفرما مشکلی ندارد، اما پیش از فروش یا انتشار مجدد قالب باید جایگزین شوند. جزئیات و دستور بازتولید در ابزارهای ساخت.
- نقشه از سرور کاشی OpenStreetMap استفاده میکند؛ تنها درخواست خارجی قالب همین است (تکنولوژیها).
- شمارهها و قیمتها نمونهاند و به هیچ منبع واقعی وصل نیستند.
- جستجوی سراسری هدر، UI است؛ فیلتر واقعی روی صفحهی market.html پیاده شده.