مرور کلی
فرم ثبت سفارش آنلاین React و WordPress یک SPA مشتریمحور سطح نمونهکار برای MG+ Store و فروشگاههای WooCommerce ایرانی است. بهجای checkout شلوغ قالب، تجربهای متمرکز در /order/ ارائه میدهد: احراز هویت OTP پیامکی، کاتالوگ زنده از WooCommerce از طریق namespace REST پلاگین وردپرس (mgplus/v1)، انتخاب استان/شهر، سبد بر اساس تعداد، آپلود اختیاری رسید بانکی و صفحه فاکتور با تاریخ شمسی—همه در RTL فارسی با فونت BYekan و UI شیشهای سبز ملایم.
چالش
کارفرما در WooCommerce محصولات گیاهی میفروخت اما برای مشتریان اینستاگرام و تلفنی به کانال سفارش موبایلمحور نیاز داشت. الزامات شامل اعتبارسنجی موبایل ایران، OTP بهجای رمز، dropdown استان/شهر، sync محصولات WooCommerce بدون دوبارهکاری کاتالوگ، آپلود رسید واریز و فاکتور قابل اشتراک بود—در حالی که مدیریت ادمین داخل وردپرس بماند نه در React.
رویکرد
SPA با Vite و React 19 روی subdomain استاتیک (order.mgplusstore) با rewrite آپاچی deploy شد. فرانتاند فقط با پلاگین وردپرس همراه صحبت میکند: /wp-json/mgplus/v1 برای OTP، محصولات، سفارش و آپلود رسید. دستهبندیها سمت کلاینت از آرایه category محصولات استخراج میشود. Formik + Yup اعتبارسنجی؛ TanStack React Query کش و mutation. OrderForm به بخشهای composable تقسیم شده. AuthContext توکن و form_user_id را در localStorage نگه میدارد؛ interceptorهای Axios Bearer و re-login روی 401.
معماری
ورود: main.tsx → QueryProvider → AuthProvider → App با routeهای lazy (/, /verify, /order, /invoice/:orderId). لایه API در src/api/. Hookها React Query را wrap میکنند. داده استان/شهر از province-city.json lazy-load میشود. تصاویر محصول از URL آپلود وردپرس normalize میشوند. config متمرکز VITE_API_BASE_URL، timeout (۶۰ ثانیه، ۱۲۰ برای آپلود) و کلیدهای storage. پلاگین بکاند (خارج از این repo) سفارش را در wp_mgplus_orders ذخیره، OTP SMS میفرستد و محصولات WooCommerce را expose میکند—پنل ادمین در وردپرس است.
مصالحهها
فرانتاند و پلاگین وردپرس جدا هستند—این repo فقط SPA است و دمو به هر دو deploy نیاز دارد. هنوز ریپوی GitHub منتشر نشده. hook خروج وجود دارد اما دکمه UI ندارد. html2canvas نصب است اما اسکرینشات فاکتور دستی است. endpoint جدا برای دستهبندی نیست. override محلی /photo/ برای یک دسته در deploy لازم است. checkout WooCommerce و این فرم همزیستی دارند؛ سفارشها در جدول اختصاصی ذخیره میشوند مگر sync سمت سرور.
نتایج
مشتری مسیر سریع RTL دارد: موبایل → OTP → انتخاب محصول → ثبت با رسید اختیاری → فاکتور قابل چاپ. تیم فروشگاه کاتالوگ و مدیریت را در وردپرس نگه میدارد. کدبیس الگوهای SPA تولیدی—code splitting، قرارداد API تایپشده، toast خطا، بخشهای accessible فرم و config محیطی—را نشان میدهد و ابزار pitch برای پورتال سفارش React + WordPress است.
درسهای آموختهشده
استخراج دستهبندی سمت کلاینت endpoint اضافه نمیخواهد اما UI را به شکل payload وابسته میکند—قرارداد را مستند کنید. lazy-load JSON استان/شهر bundle اولیه را سبک نگه میدارد. فیلتر محصول قیمت صفر قبل از submit رد بکاند را جلوگیری میکند. state روتر فاکتور فوری میدهد و GET /orders/:id refresh را پوشش میدهد. interceptor Bearer + پاکسازی 401 وقتی OTP منقضی میشود حیاتی است. قوانین .htaccess SPA و assetهای hash شده Vite باید با هم deploy شوند.