نسخهٔ ۱.۰ · پنج فریم‌ورک در یک بسته

فراز مارت

راهنمای نصب برای HTML، React، Vue، Next.js و Laravel Livewire. همان چهل‌ودو صفحهٔ فروشگاه ساعت در پنج پوشه؛ پوشه‌ای را باز کنید که با پشتهٔ فنی‌تان یکی است. تبدیل از HTML به فریم‌ورک را خودتان انجام نمی‌دهید.

HTML	`html` — فایل را باز کنید؛ بیلد لازم نیست
React	`react` — Vite · `npm run dev` · پورت ۵۱۷۳
Vue	`vue` — Vue ۳ · `npm run dev` · پورت ۵۱۷۴
Next.js	`next` — Pages Router · `npm run dev` · پورت ۳۰۰۰
Laravel	`livewire` — Livewire ۳ · `artisan serve` · پورت ۸۰۰۰

HTML · React · Vue · Next.js · Laravel Livewire فونت رابط: وزیرمتن

فراز مارتفهرست

بسته پنج پوشه است، نه یک قالب HTML که بعداً باید به React یا Next تبدیل شود. هر نسخه همان خانه، محصول، سبد، تسویه و حساب کاربری را دارد. فقط همان پوشه‌ای را نصب کنید که با پشتهٔ فنی‌تان می‌خواند.

۱. پیش از نصب

HTML	مرورگر به‌روز. برای سرو فایل‌ها در صورت نیاز: یک سرور محلی ساده
React / Vue / Next	Node.js ۱۸ یا جدیدتر، npm
Laravel	PHP ۸.۱ یا جدیدتر، Composer

ویرایشگر کد و یک ترمینال کافی است. دیتابیس برای دمو لازم نیست؛ سبد، سفارش و حساب با دادهٔ نمونه در localStorage کار می‌کنند.

۲. پنج نسخه در یک بسته

منبع ظاهر نسخهٔ HTML است. React، Vue، Next.js و Laravel Livewire از همان صفحات ساخته شده‌اند. دارایی‌ها داخل هر پوشه کپی شده‌اند تا همان نسخه به‌تنهایی اجرا شود.

نسخه	پوشه	اجرا	آدرس
HTML	`html`	باز کردن `index.html`	فایل محلی
React	`react`	`npm run dev`	`127.0.0.1:5173`
Vue	`vue`	`npm run dev`	`127.0.0.1:5174`
Next.js	`next`	`npm run dev`	`127.0.0.1:3000`
Laravel	`livewire`	`php artisan serve`	`127.0.0.1:8000`

لازم نیست هر پنج تا را نصب کنید. HTML برای نشان‌دادن به مشتری همان روز است. React و Next برای تیم اکوسیستم React. Vue برای تیمی که Vue می‌نویسد. Laravel برای بک‌اند PHP بدون فرانت جدا.

فراز مارت — راهنمای نصبHTML · React · Vue

۳. HTML — دمو بدون بیلد

اگر فقط می‌خواهید فروشگاه را ببینید یا به مشتری نشان دهید، همین نسخه کافی است. پوشهٔ html را باز کنید و فایل index.html را در مرورگر ببینید. Node لازم نیست.

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

cd faraz-mart
php -S 127.0.0.1:8765

آدرس دمو: http://127.0.0.1:8765/info/demo.html

استایل‌ها در html/assets/css هستند؛ رنگ و فاصلهٔ اختصاصی فراز مارت در theme-faraz.css و storefront.css است. برای برندینگ همان فایل‌ها را عوض کنید، نه تک‌تک صفحات.

۴. React — Vite و React Router

اگر فرانت پروژه React است، این پوشه را بردارید — نه HTML را برای تبدیل دستی. همان چهل‌ودو صفحه به‌صورت اپ تک‌صفحه‌ای است.

cd react
npm install
npm run dev

آدرس پیش‌فرض: http://127.0.0.1:5173

ساخت نسخهٔ نهایی: npm run build. مسیریابی با React Router است. پوستهٔ هدر و فوتر در src/components و صفحات در src/pages قرار دارند.

۵. Vue — Vue ۳ و Vue Router

تیم Vue لازم نیست HTML را به کامپوننت ترجمه کند. پوشهٔ vue همان طرح را با Vue ۳ می‌دهد. پورت ۵۱۷۴ کنار React تداخل ندارد.

cd vue
npm install
npm run dev

آدرس پیش‌فرض: http://127.0.0.1:5174. ساخت: npm run build.

فراز مارت — راهنمای نصبNext.js · Laravel

۶. Next.js — Pages Router

اگر React را با Next جلو می‌برید، next از قبل آماده است. همان صفحات فروشگاه، با Pages Router و بارگذاری سمت کلاینت، جدا از نسخهٔ Vite.

cd next
npm install
npm run dev

آدرس پیش‌فرض: http://127.0.0.1:3000

برای تولید: npm run build و سپس npm start. نشانگر دایره‌ای Dev Tools در این بسته خاموش است.

۷. Laravel Livewire — PHP سروری

اگر بک‌اند PHP است، فرانت جدا از HTML/React نمی‌سازید. همان هدر، ویترین و صفحات حساب روی Laravel ۱۰ و Livewire ۳ است.

cd livewire
composer install
copy .env.example .env
php artisan key:generate
php artisan serve

آدرس پیش‌فرض: http://127.0.0.1:8000

در ویندوز از copy استفاده شده؛ در لینوکس و مک cp .env.example .env. دیتابیس برای دمو الزامی نیست؛ پیش‌فرض SQLite فقط برای خود لاراول است.

صفحات Livewire در app/Livewire و نماها در resources/views هستند. استایل و اسکریپت از public/assets خوانده می‌شود.

فراز مارت — راهنمای نصبظاهر و رفتار

۸. شخصی‌سازی ظاهر در هر پنج نسخه

رنگ برند، شعاع گوشه، سایه و فاصله در فایل‌های CSS قالب با متغیرهایی مثل رنگ برند فراز تعریف شده‌اند. همان دارایی‌ها در HTML زیر assets/css و در بقیه زیر public/assets/css یا معادل آن قرار دارند.

نام فروشگاه را در هدر، فوتر و عنوان صفحات عوض کنید.
لوگوی ساعت در هدر یک SVG است؛ با لوگوی برند جایگزین کنید.
برای صفحهٔ تازه، یکی از صفحات موجود را الگو بگیرید تا فاصله و کارت‌ها یکدست بمانند.

۹. سبد خرید و حالت تاریک

سبد خرید، مقایسه و وضعیت ورود در localStorage مرورگر ذخیره می‌شوند. کلیدهای مهم: faraz_cart (یا نسخهٔ دمو)، faraz_compare، faraz_user و faraz_theme.

حالت تاریک با کلاس dark روی html و مقدار faraz_theme برابر dark یا light ذخیره می‌شود. سوییچ موجود در هدر همان را عوض می‌کند.

دمو ورود: شماره موبایل با الگوی 09xxxxxxxxx و هر کد پنج‌رقمی. دمو تخفیف پرداخت: کد FARAZ10.

فراز مارت — راهنمای نصبعیب‌یابی

۱۰. اگر چیزی بالا نیامد

صفحه سفید در React یا Vue	نصب را کامل کنید. پورت را در ترمینال چک کنید. کش مرورگر را یک‌بار خالی کنید.
استایل نمی‌آید	مسیر `/assets/css/` باید از ریشهٔ همان نسخه سرو شود.
تصویر محصول خالی است	فایل‌ها در `assets/img/` یا `public/assets/img/` هستند. آدرس نسبی `assets/img/...` را حفظ کنید.
سبد خالی می‌ماند	localStorage مرورگر را پاک نکرده باشید. در حالت خصوصی محدودیت ذخیره را چک کنید.
بعد از OTP به ورود برمی‌گردد	شماره را در حافظه نگه دارید؛ پس از تأیید، `faraz_otp_mobile` پاک می‌شود و نباید دوباره خوانده شود.
Laravel کلید ندارد	`php artisan key:generate` را بعد از ساخت `.env` اجرا کنید.
فونت فارسی نیست	اتصال برای بارگذاری Vazirmatn از Google Fonts لازم است، مگر فونت را محلی کنید.
پیش‌نمایش info کار نمی‌کند	از ریشهٔ `faraz-mart` سرور بزنید تا هم `info` و هم `html` دیده شوند.

محدودهٔ این نسخه

فراز مارت یک قالب رابط فروشگاهی است با دادهٔ نمونه. احراز هویت واقعی، اتصال درگاه و منطق انبار را باید روی همین اسکلت بسازید. پنج نسخه — HTML، React، Vue، Next.js و Laravel — برای انتخاب پشته است، نه برای اجرای هم‌زمان همه روی یک دامنه.

فراز مارت — HTML · React · Vue · Next.js · Laravel Livewire
راهنمای نصب · نسخهٔ ۱.۰