شروع سریع
این راهنما قالب را در کمتر از ۵ دقیقه روی سیستم شما راه میاندازد.
گام ۱ - استخراج فایلها
بسته را در پوشهای مثل superdouper-market استخراج کنید. ساختار باید چنین باشد:
superdouper-market/
├── index.html ← انتقال خودکار به صفحه اصلی
├── demo.html ← معرفی و گالری صفحات
├── home-1-fresh.html ← صفحه اصلی، پالت گرم
├── assets/
├── help/ ← همین مستندات
└── tools/ ← اختیاری، برای بازتولید صفحات
گام ۲ - باز کردن در مرورگر
سادهترین راه: روی demo.html دابلکلیک کنید. همهی صفحات با اسکرینشات آنجا فهرست شدهاند.
راه بهتر: یک سرور محلی اجرا کنید - یک خط دستور، و همهچیز دقیقاً مثل هاست واقعی رفتار میکند. جزئیات در اجرای محلی.
قالب طوری نوشته شده که با
file://هم کار کند: دادهی کالاها بهجایfetchبا یک تگ<script>بارگذاری میشود. فقط نقشه برای گرفتن کاشیها به اینترنت نیاز دارد.
گام ۳ - مرور صفحات
- demo.html - گالری همه صفحات با پیشنمایش تمامصفحه
- home-1-fresh.html - صفحه اصلی گرم
- market.html - لیست کالا با فیلتر و مرتبسازی
- product.html - جزئیات کالا
- cart.html - سبد خرید
- vendors.html - مقایسه قیمت سبد بین فروشگاهها
- checkout.html - تسویه حساب
برای دیدن صفحاتی که به سبد پر نیاز دارند، پارامتر
?demo=1را به آدرس اضافه کنید:cart.html?demo=1یک سبد نمونه میسازد.
گام ۴ - اولین شخصیسازیها
| چه چیزی | کجا |
|---|---|
| رنگ برند و همهی توکنها | superium-palettes.css |
| نام برند و لوگو | logo_mark() و BRAND در tools/layout.py، یا مستقیم در فایلهای HTML |
| فاویکون | assets/images/brand/favicon.svg |
| کالاها و دستهبندیها | assets/data/products.js |
| متنهای صفحه | مستقیم داخل همان فایل .html |
جزئیات کامل در شخصیسازی.
چکلیست سلامت
پس از باز کردن home-1-fresh.html اینها را بررسی کنید:
- فونت فارسی (وزیرمتن) درست نمایش داده میشود
- هدر، مگامنو و فوتر دیده میشوند
- ریلهای کالا با دکمههای قبلی/بعدی حرکت میکنند
- با زدن دکمهی
+روی یک کالا، شمارندهی سبد در هدر زیاد میشود - در کنسول مرورگر (کلید F12) خطای قرمز نیست
اگر چیزی کار نکرد → عیبیابی