عیب‌یابی

صفحه بدون استایل باز می‌شود

نشانه: متن‌ها پشت سر هم و بدون رنگ و چیدمان.

علت رایج: پوشه‌ی assets/ کنار فایل HTML نیست، یا هنگام آپلود ناقص منتقل شده.

راه‌حل: مطمئن شوید assets/ دقیقاً در همان پوشه‌ی فایل‌های .html است. در کنسول مرورگر (F12 ← Network) خطاهای ۴۰۴ را ببینید.

فونت فارسی درست نیست

نشانه: متن با فونت پیش‌فرض سیستم دیده می‌شود.

بررسی کنید:

پوشه‌ی assets/fonts/ کامل آپلود شده باشد (فایل‌های .woff2).
سرور، نوع MIME فونت را بشناسد. روی Apache:

AddType font/woff2 .woff2

اگر قالب را داخل یک پروژه‌ی دیگر کپی کرده‌اید، مسیر نسبی ../fonts/ داخل @font-face هنوز درست باشد.

سبد خرید خالی می‌ماند

نشانه: با زدن + هیچ اتفاقی نمی‌افتد، یا شمارنده‌ی هدر صفر می‌ماند.

بررسی کنید:

کنسول مرورگر خطای superium is not defined می‌دهد؟ یعنی ترتیب اسکریپت‌ها به‌هم خورده. alpine.js باید آخرین اسکریپت باشد.
assets/data/products.js بارگذاری شده؟ در کنسول تایپ کنید:

window.SUPERIUM_PRODUCTS.products.length   // باید ۲۰۰ برگرداند

مرورگر در حالت ناشناس با localStorage مسدود اجرا نشده باشد.

برای دیدن صفحات با سبد پر، ?demo=1 را به آدرس اضافه کنید.

نقشه سفید یا خاکستری است

نشانه: قاب نقشه هست ولی کاشی‌ها نمی‌آیند.

علت: نقشه تنها بخشی از قالب است که به اینترنت نیاز دارد؛ کاشی‌ها از tile.openstreetmap.org می‌آیند.

راه‌حل:

اتصال اینترنت را بررسی کنید.
اگر سایت روی HTTP است، به HTTPS منتقلش کنید.
اگر سازمان شما دسترسی به OpenStreetMap را بسته، سرویس کاشی خودتان را در TILES داخل superium-map.js بگذارید.

تصاویر کالا نمایش داده نمی‌شوند

بررسی کنید:

پوشه‌ی assets/images/products/ آپلود شده باشد. (حجمش بالاست؛ در آپلودهای ناقص معمولاً همین جا می‌ماند.)
سرور image/webp را بشناسد:

AddType image/webp .webp

اگر کالاها را دستی ویرایش کرده‌اید، مقدار image و thumb هر کالا به فایل موجود اشاره کند.

اعداد انگلیسی نمایش داده می‌شوند

عددهایی که از جاوااسکریپت می‌آیند با تابع fa() فارسی می‌شوند. اگر عددی را دستی در HTML نوشته‌اید، خودتان با ارقام فارسی بنویسید:

<b>۴۵</b><span>دقیقه تا تحویل</span>

چیدمان برعکس شده

نشانه: بخش‌ها به چپ چسبیده‌اند یا متن چپ‌چین شده.

بررسی کنید: تگ <html> هر دو ویژگی را داشته باشد:

<html lang="fa" dir="rtl">

اگر CSS تازه‌ای نوشته‌اید، از left/right استفاده نکنید؛ به‌جایشان ویژگی‌های منطقی (CSS و استایل).

در عرض کم، صفحه افقی اسکرول می‌شود

معمولاً یک تصویر یا جدول تازه است که از ستونش بیرون زده. دو قاعده:

روی تصویر: inline-size: 100% کنار هر max-inline-size پیکسلی.
روی ستون گرید: minmax(0, 1fr) به‌جای 1fr.

بعد از اجرای مولد، ویرایش‌هایم از بین رفت

python tools/build_pages.py فایل‌های HTML را بازنویسی می‌کند. یا مستقیم روی HTML کار کنید و مولدها را اجرا نکنید، یا تغییرات را در tools/*.py اعمال کنید (ابزارهای ساخت).

تغییرات CSS دیده نمی‌شود

کش مرورگر. یک‌بار با Ctrl+Shift+R (مک: Cmd+Shift+R) رفرش کنید. اگر روی هاست است و کش طولانی گذاشته‌اید، نام فایل را نسخه‌بندی کنید:

<link rel="stylesheet" href="assets/css/superium.css?v=2" />

اسلایدرها حرکت نمی‌کنند

swiper-bundle.min.js و swiper-bundle.min.css هر دو بارگذاری شده باشند.
ساختار مورد انتظار حفظ شده باشد:

<div class="swiper" data-sp-rail>
  <div class="swiper-wrapper">
    <div class="swiper-slide"> … </div>
  </div>
</div>

هنوز حل نشد؟

کنسول مرورگر (F12) را باز کنید و متن دقیق خطا را یادداشت کنید.
بررسی کنید همان مشکل در فایل دست‌نخورده‌ی بسته هم هست یا نه.
نسخه‌ی مرورگر و سیستم‌عامل را همراه پیام پشتیبانی بفرستید.

گام بعدی

بازگشت به فهرست