مستندات پریمیوم کارت معرفی قالب صفحه اول

راهنمای صفحه‌ها

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

صفحه‌های اول

فایلپوستهایدهCSS اختصاصی
index.htmlcardکیف پولی از پوشه‌های دسته‌بندی؛ ویترین با ساعت تحویل زنده، ردیف «از پرداخت تا ورود»، فهرست قیمت و پرسش‌هاpc-home-card.css
index-alt.htmlspecimenهر سرویس روی کاشی رنگی که هنگام اسکرول عوض می‌شود؛ قیمت‌ها به تفکیک دستهpc-home-specimen.css
index-dark.htmlposterپوستر خیابانی: تیتر درشت، قیمت داخل جمله، فصل‌های رنگیpc-home-poster.css

هر سه از x-data="premium()" استفاده می‌کنند و نوار بالا و فوتر خودشان را دارند (همگام‌سازی روی آن‌ها اثر ندارد).

صفحه‌های داخلی

فایلx-dataجاوااسکریپت صفحه
product.html?slug=…premiumProduct()premium-product.js
cart.htmlpremiumCart()premium-cart.js
shipping.htmlpremiumShipping()premium-shipping.js
payment.htmlpremiumPayment()premium-payment.js
checkout-complete.htmlpremiumCheckoutComplete()premium-payment.js
login-singup.htmldsMix(premiumShared(), premiumAuth())premium-auth.js
profile.html و profile-*.htmlpremiumProfile('بخش')premium-profile.js
blog.htmlpremiumBlog()premium-blog.js
blog-post.htmlpremiumBlogPost()premium-blog-post.js
about.htmlpremiumAbout()premium-about.js
contact.htmlpremiumContact()premium-contact.js
terms.htmlpremiumTerms()premium-terms.js

همه از pc-pages.css استفاده می‌کنند و دارند. صفحه‌های خرید، پنل و ورود data-app هم دارند که تیتر را کوچک‌تر و فضا را فشرده‌تر می‌کند.

پنل کاربری

فایلبخش
profile.htmlپیشخوان (سفارش‌ها و کیف پول)
profile-empty.htmlپیشخوان بدون سفارش
profile-info.htmlاطلاعات حساب
profile-addresses.html، profile-addresses-empty.htmlآدرس‌های فاکتور
profile-comments.html، profile-comments-empty.htmlدیدگاه‌ها و پرسش‌ها
profile-giftcards.html، profile-giftcards-empty.htmlکارت هدیه
profile-orders.htmlفقط انتقال به profile.html?tab=orders

ترتیب فایل‌ها در هر صفحه


  
  
  
  
  
  
  
  
  

…

   


premium.js باید پیش از فایل صفحه بیاید و alpine.js با defer بعد از هر دو.

ساختن صفحه تازه

  1. یک صفحه داخلی مشابه (مثلاً terms.html) را کپی کنید.
  2. title، description و محتوای
    را عوض کنید.
  3. بلوک‌های ، ، و را نگه دارید تا همگام‌سازی آن‌ها را به‌روز کند.
  4. اگر داده خاصی لازم دارد، یک تابع در premium-نام.js بسازید که return dsData({ ...premiumShared(), ... }) برگرداند.

گام بعدی