تکنولوژیها و کتابخانهها
فهرست کوتاه
| کتابخانه | نسخه | کجا | چرا |
|---|---|---|---|
| Alpine.js | ۳.۱۴.۹ | همه صفحات | حالت و تعامل، بدون مرحله build |
| Swiper | ۱۲.۰.۲ | صفحات اصلی، کالا | ریلهای افقی و گالری |
| Leaflet | ۱.۹.۴ | نقشهها | نقشهی واقعی بدون کلید API |
| Tailwind CSS | ۴.۱.۱۸ | output.css | فقط خروجی از پیش ساختهشده؛ نصب لازم نیست |
| وزیرمتن / رخ | متغیر (woff2) | همه صفحات | فونت فارسی داخل بسته |
همهی اینها داخل بسته هستند. قالب هیچ <script src="https://..."> ندارد.
Alpine.js
هر صفحه یک کامپوننت ریشه روی <body> دارد:
<body class="sp-page sp-theme--fresh" x-data="superium()" x-init="init()">
superium() در assets/js/superium.js تعریف شده و سبد، علاقهمندیها، درور موبایل و توست را نگه میدارد. صفحاتی که تعامل بیشتری دارند، یک کامپوننت دوم روی همان صفحه سوار میکنند:
<div class="sp-container" x-data="superiumMarket()" x-init="initMarket($el)">
چرا Alpine و نه React؟ چون قالب باید بدون npm و بدون build کار کند. Alpine مستقیم روی همان HTML مینشیند که به مرورگر میرود - و همان HTML به هر بکاندی قابل انتقال است.
Swiper
ریلهای کالا و گالری صفحهی کالا با Swiper ساخته شدهاند. راهاندازی در superium.js انجام میشود و به هر عنصری با data-sp-rail وصل میشود:
<div class="swiper" data-sp-rail>
<div class="swiper-wrapper"> … </div>
</div>
دکمههای قبلی/بعدی با data-sp-rail-prev و data-sp-rail-next در همان بخش (data-sp-rail-scope) پیدا میشوند.
Leaflet و نقشه
assets/js/superium-map.js دو حالت دارد که با data-interactive انتخاب میشوند:
- ۰ پیشنمایش ثابت با نشانگر (تسویه حساب، افزودن آدرس)
- ۱ انتخابگر قابل جابهجایی؛ پین در مرکز قاب ثابت است و نقشه زیرش حرکت میکند - همان رفتاری که اپهای تحویل دارند
تنها درخواستهای خارجی کل قالب همینجاست:
| سرویس | برای چه |
|---|---|
tile.openstreetmap.org | کاشیهای نقشه |
| Nominatim | تبدیل مختصات به آدرس (reverse geocoding) |
هر دو بدون کلید API کار میکنند. برای تعویض، TILES و ATTRIBUTION را در همان فایل عوض کنید و reverseGeocode() را با سرویس خودتان جایگزین کنید.
⚠ سرور عمومی OpenStreetMap برای ترافیک سنگین مناسب نیست. برای سایت واقعی از سرویس کاشی خودتان استفاده کنید.
Tailwind
assets/css/output.css خروجی از پیشساختهی Tailwind است و فقط برای چند ابزار کمکی به کار میرود. برای استفاده از قالب لازم نیست Tailwind نصب کنید. استایل اصلی قالب دستنویس است و در superium*.css زندگی میکند.
اگر Tailwind را در پروژهی خودتان دارید، میتوانید output.css را حذف کنید و کلاسهای کمکی را با خروجی خودتان تأمین کنید.
فونتها
| فونت | نقش | مسیر |
|---|---|---|
| وزیرمتن | متن اصلی | assets/fonts/Vazirmatn/Vazirmatn[wght].woff2 |
| رخ | تیترها | assets/fonts/Rokh/Rokh[wght].woff2 |
هر دو متغیر هستند (وزن ۱۰۰ تا ۹۰۰ در یک فایل) و با @font-face در بالای superium.css تعریف شدهاند. توکنهای --sp-font و --sp-font-display تعیین میکنند کجا کدام استفاده شود.
تصاویر
همهی تصاویر WebP هستند:
- کالا: مربعی، ۶۰۰ پیکسل برای کارت و صفحهی کالا، و نسخهی
-smبا ۳۰۰ پیکسل برای سبد و لیستهای کوچک - دستهبندی: ۶۰۰×۶۰۰
- اسکرینشاتهای
demo.html: تمامصفحه، از هدر تا فوتر
مرورگرهای پشتیبانیشده
نسخههای بهروز Chrome، Edge، Firefox و Safari. استایلها از ویژگیهای منطقی CSS (inline-size، inset-inline، margin-block) و در چند جا color-mix() استفاده میکنند؛ همهجا یک مقدار جایگزین قبل از آن نوشته شده تا مرورگرهای قدیمیتر هم درست دیده شوند.