ساختار پوشه‌ها
نمای کلی
superdouper-market/
├── index.html انتقال به صفحه اصلی
├── demo.html معرفی قالب + گالری صفحات
├── home-1-fresh.html صفحه اصلی، پالت گرم
├── home-2-aqua.html صفحه اصلی، پالت سرد
├── home-3-graphite.html صفحه اصلی، پالت تیره
├── market.html product.html cart.html vendors.html store.html
├── checkout.html address-map.html address-add.html
├── login.html signup.html
├── profile.html profile-orders.html profile-addresses.html
├── support.html
├── assets/
├── help/ مستندات (همین پوشه)
├── docs/ یادداشت‌های طراحی و منبع تصاویر
└── tools/ ابزار توسعه - جزو محصول نهایی نیست
داخل assets/
assets/
├── css/
│ ├── output.css خروجی Tailwind (ابزارهای کمکی)
│ ├── superium-palettes.css تنها فایلی که رنگ‌ها را مقدار می‌دهد
│ ├── superium.css استایل پایه و همه‌ی کامپوننت‌ها
│ ├── superium-home.css فقط سه صفحه اصلی
│ ├── superium-shop.css فروشگاه، کالا، سبد، مقایسه
│ ├── superium-flow.css تسویه، نقشه، آدرس
│ ├── superium-account.css ورود، پروفایل، پشتیبانی
│ ├── superium-demo.css فقط demo.html
│ └── swiper-bundle.min.css اسلایدر
├── js/
│ ├── alpine.js Alpine.js ۳.۱۴.۹
│ ├── swiper-bundle.min.js Swiper ۱۲.۰.۲
│ ├── superium.js سبد، علاقه‌مندی، ریل‌ها، توست - در همه صفحات
│ ├── superium-market.js فیلتر، مرتب‌سازی، صفحه‌بندی
│ ├── superium-product.js گالری کالا
│ ├── superium-checkout.js پیک/حضوری، کد تخفیف، صورتحساب
│ ├── superium-auth.js شماره موبایل ← کد یک‌بارمصرف
│ ├── superium-map.js نقشه و پین قابل جابه‌جایی
│ └── superium-demo.js لایت‌باکس صفحه‌ی معرفی
├── vendor/leaflet/ Leaflet ۱.۹.۴ - بدون CDN
├── fonts/
│ ├── Vazirmatn/ وزیرمتن متغیر (متن) + پروانه OFL
│ └── Rokh/ رخ متغیر (تیترها)
├── data/
│ ├── products.json کاتالوگ - منبع حقیقت
│ └── products.js همان داده برای مرورگر
└── images/
├── products/<دسته>/۰۱.webp و ۰۱-sm.webp … ۲۰
├── categories/ کاشی هر دسته‌بندی
├── banners/ تصاویر تزئینی بنرها
├── brand/favicon.svg
└── shots/ اسکرین‌شات تمام‌صفحه برای demo.html
چه چیزی را کجا عوض کنم؟
| می‌خواهم … | فایل |
|---|
| رنگ‌ها را عوض کنم | assets/css/superium-palettes.css |
| یک کامپوننت را تغییر دهم | assets/css/superium.css |
| فقط صفحه اصلی را تغییر دهم | assets/css/superium-home.css |
| رفتار سبد را تغییر دهم | assets/js/superium.js |
| فیلترهای فروشگاه را تغییر دهم | assets/js/superium-market.js |
| کالاها را عوض کنم | assets/data/products.js |
| متن یک صفحه را عوض کنم | همان فایل .html |
| سرویس نقشه را عوض کنم | assets/js/superium-map.js |
پوشه‌هایی که لازم نیست آپلود شوند
| پوشه | چرا |
|---|
tools/ | اسکریپت‌های پایتون توسعه؛ روی سایت کاربردی ندارند |
docs/ | یادداشت داخلی طراحی و فهرست منبع تصاویر |
help/ | مستندات؛ اگر نمی‌خواهید عمومی باشد حذفش کنید |
ترتیب بارگذاری فایل‌ها در هر صفحه
<!-- در <head> -->
output.css → swiper-bundle.min.css → superium-palettes.css
→ superium.css → superium-<گروه صفحه>.css
<!-- پیش از </body> -->
products.js → swiper-bundle.min.js → superium.js
→ superium-<صفحه>.js → alpine.js
alpine.js عمداً آخرین اسکریپت است: Alpine در لحظه‌ی بارگذاری، DOM را می‌خواند و کامپوننت‌های ثبت‌شده را راه می‌اندازد. اگر آن را بالاتر ببرید، توابعی مثل superiumMarket() هنوز تعریف نشده‌اند و صفحه خطا می‌دهد.
گام بعدی