معماری جاوااسکریپت
لایه‌ها
premium-theme.js ← در head: تم روشن/تاریک پیش از نمایش صفحه
premium.js ← داده و منطق مشترک همه صفحه‌ها
premium-*.js ← داده و منطق هر صفحه
alpine.js ← اجرای x-data روی صفحه
pc.js ← رفتارهای نمایشی با data-attribute (بدون Alpine)
premium.js
| بخش | کاربرد |
|---|---|
DIGITAL_CATALOG | سرویس‌های اصلی: نام، دسته، پلن‌ها، قیمت، ویژگی‌ها، پرسش‌ها |
EXTRA_SERVICES | سرویس‌های اضافه فهرست قیمت (نمونه) |
CATALOG_META | نام کوتاه، نشان (marks/) و شماره عکس هر سرویس |
CATEGORY_LIST | دسته‌ها و ترتیبشان |
photo(id, crop) | آدرس عکس در یکی از سه برش |
formatPrice(n)، toFaDigits(v) | نمایش عدد و قیمت فارسی |
getProductBySlug(slug) | پیدا کردن سرویس از روی ?slug= |
premiumShared() | داده و توابع مشترک: سبد، شمارنده، منوی موبایل، تم، ساعت تحویل |
premium() | x-data صفحه‌های اول |
dsData و dsMix
premiumShared() چند getter دارد (مثل cartCount). پخش کردن آن با ... این getterها را منجمد می‌کند و شمارنده سبد دیگر به‌روز نمی‌شود. برای همین هر صفحه شیء خودش را با dsData برمی‌گرداند:
function premiumTerms() {
return dsData({
...premiumShared(),
activeSection: 'rules'
});
}
dsMix(a, b) دو شیء را با حفظ getterها ترکیب می‌کند؛ مثال: x-data="dsMix(premiumShared(), premiumAuth())".
سبد خرید
| تابع | کار |
|---|---|
addPlanToCart(product, planIndex) | افزودن یک پلن؛ شمارنده و toast به‌روز می‌شوند |
saveCart() | ذخیره سبد پس از هر تغییر |
dsLoadCart()، dsSaveCart(items) | خواندن و نوشتن در sessionStorage با کلید dsCart |
اتصال به سرور: بدنه dsLoadCart و dsSaveCart را با درخواست به API خودتان عوض کنید (مثلاً fetch('/api/cart')). بقیه کد فقط از این دو تابع استفاده می‌کند.
ورود
dsIsLoggedIn() کلید dsAuth را در sessionStorage می‌خواند. ورود دو مرحله دارد: شماره موبایل یا ایمیل (submitIdentifier) و کد یک‌بارمصرف (submitOtp) در premium-auth.js. برای ورود واقعی، این دو را به API ارسال و بررسی کد وصل کنید و پس از موفقیت همان کلید را بنویسید یا وضعیت را از کوکی سرور بخوانید.
پرداخت
premium-payment.js پس از کلیک روی «پرداخت» به checkout-complete.html?order=… می‌رود و سبد را خالی می‌کند. در نسخه واقعی، به‌جای این انتقال، کاربر را به درگاه بفرستید و صفحه تأیید را پس از بازگشت از درگاه نشان دهید.
pc.js
رفتارهای عمومی که با یک attribute روشن می‌شوند و بدون جاوااسکریپت هم محتوا را پنهان نمی‌کنند:
| attribute | رفتار |
|---|---|
data-reveal | یک بار هنگام رسیدن به صفحه ظاهر می‌شود؛ style="--i:2" ترتیب را تعیین می‌کند |
data-rise | ظاهر شدن هنگام لود (برای بالای صفحه) |
data-fit | یک خط را دقیقاً هم‌عرض ظرفش می‌کند (نام بزرگ فوتر) |
data-drag-row + data-drag-track + data-drag="next" | ردیف افقی با دکمه قبلی/بعدی و نوار پیشرفت |
data-ink و data-ground | رنگ هدر صفحه اول پوستر را با هر فصل عوض می‌کند |
data-specimen | کاشی صفحه اول کاتالوگ را با سرویس در حال اسکرول عوض می‌کند |
تم تاریک
premium-theme.js تابع dsInitTheme() را دارد که پیش از نمایش، data-theme را روی می‌گذارد. دکمه ماه/خورشید در نوار بالا toggleTheme() را صدا می‌زند و انتخاب در localStorage با کلید dsTheme می‌ماند.