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

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

۱۷ صفحه، در چهار گروه. همه‌ی صفحات هدر، مگامنو، درور موبایل و فوتر مشترک دارند؛ صفحات داخلی پالت گرم (sp-theme--fresh) را می‌گیرند.

سه صفحه اصلی

هر کدام یک معماری چیدمان متفاوت است، نه صرفاً یک تعویض رنگ.

صفحهپالتچه چیزی را نشان می‌دهد
home-1-fresh.htmlگرم (نارنجی/سبز)هیرو کلاژی، برد دسته‌بندی با چیپ زیرشاخه، ریل‌های افقی کالا، فوتر کامل
home-2-aqua.htmlسرد (فیروزه‌ای/کهربایی)هیرو دوستونه با کارت زمان تحویل، شبکه‌ی دسته‌بندی، چیدمان بنتو، بنر ارسال رایگان
home-3-graphite.htmlتیره (لایم/نارنجی)هیرو بنری تیره، فهرست شماره‌دار قفسه‌ها، شبکه‌ی متراکم قیمت‌محور

پالت هر صفحه یک کلاس روی <body> است: sp-theme--fresh، sp-theme--aqua، sp-theme--graphite. برای عوض کردن پوسته‌ی کل فروشگاه، همان یک کلاس را در صفحات داخلی تغییر دهید.

فرآیند خرید

صفحهچه چیزی داردJS مخصوص
market.htmlفیلتر دسته/برند/قیمت، پنج حالت مرتب‌سازی، نمای شبکه یا لیست، صفحه‌بندیsuperium-market.js
product.htmlگالری تصویر، جعبه خرید، سایر فروشندگان، مشخصات، نظراتsuperium-product.js
cart.htmlاقلام سبد، تغییر تعداد، خلاصه‌ی چسبان فاکتورsuperium.js
vendors.htmlقیمت سبد شما در فروشگاه‌های اطراف، اقلام ناموجود و جایگزینsuperium.js
store.htmlویترین یک سوپرمارکت با جستجوی داخلی و سبد کنار صفحهsuperium.js

پارامترهای آدرس در market.html

پارامترکارنمونه
cفیلتر دسته‌بندیmarket.html?c=dairy
qجستجو در عنوان کالاmarket.html?c=dairy&q=ماست
sortمرتب‌سازیmarket.html?sort=discount

مقادیر sort: ‏relevance، discount، cheap، expensive، new.

تحویل و پرداخت

صفحهچه چیزی داردJS مخصوص
checkout.htmlکلید ارسال با پیک / دریافت حضوری، زمان آماده‌سازی، کد تخفیف، درگاهsuperium-checkout.js
address-map.htmlانتخابگر نقشه با پین ثابت در مرکز و نقشه‌ی متحرک زیر آنsuperium-map.js
address-add.htmlفرم آدرس با عنوان خانه/محل کار و موبایل تحویل‌گیرندهsuperium-map.js

کلید «ارسال / حضوری» فقط یک تب نیست: کل ستون سمت راست، هزینه‌ها و صورتحساب را عوض می‌کند.

حساب کاربری و پشتیبانی

صفحهچه چیزی داردJS مخصوص
login.htmlورود با موبایل و کد یک‌بارمصرف با شمارنده‌ی معکوسsuperium-auth.js
signup.htmlساخت حساب: مشخصات، موبایل، پذیرش قوانینsuperium-auth.js
profile.htmlاطلاعات حساب و آدرس پیش‌فرض-
profile-orders.htmlتاریخچه سفارش با وضعیت جاری، تحویل‌شده و لغوشده-
profile-addresses.htmlمدیریت آدرس‌های ذخیره‌شده-
support.htmlپرسش‌های متداول آکاردئونی و فرم تماس-

سه صفحه‌ی پروفایل یک سایدبار مشترک دارند.

صفحه‌ی معرفی

demo.html بخشی از فروشگاه نیست؛ ویترین خود قالب است: گالری اسکرین‌شات تمام‌صفحه با لایت‌باکس، کامپوننت‌ها در هر سه پالت، و فهرست ویژگی‌ها. پیش از تحویل به کارفرما می‌توانید حذفش کنید.

سبد نمونه با ?demo=1

صفحاتی که سبد لازم دارند، با سبد خالی حالت «خالی» را نشان می‌دهند. برای دیدن حالت پر:

cart.html?demo=1
vendors.html?demo=1
checkout.html?demo=1
store.html?demo=1
product.html?demo=1

گام بعدی