feat: Customer SPA reads initial route from data attribute

Changes:
- App.tsx reads data-initial-route attribute from #woonoow-customer-app
- Root route (/) redirects to initial route based on SPA mode
- Fallback route (*) also redirects to initial route
- Full SPA mode: initial route = /shop
- Checkout Only mode: initial route = /cart

Flow:
1. User visits /store page (SPA entry page)
2. PHP template sets data-initial-route based on spa_mode setting
3. React reads attribute and navigates to correct initial route
4. HashRouter handles rest: /#/product/123, /#/checkout, etc.

Example:
- Full SPA: /store loads → redirects to /#/shop
- Checkout Only: /store loads → redirects to /#/cart
- User can navigate: /#/product/abc, /#/checkout, etc.

Next: Add direct-to-cart functionality with product parameter
This commit is contained in:
Dwindi Ramadhana
2025-12-30 20:34:40 +07:00
parent fe98e6233d
commit 2c4050451c

View File

@@ -56,14 +56,25 @@ function App() {
const appearanceSettings = getAppearanceSettings();
const toastPosition = (appearanceSettings?.general?.toast_position || 'top-right') as any;
// Get initial route from data attribute (set by PHP based on SPA mode)
const getInitialRoute = () => {
const appEl = document.getElementById('woonoow-customer-app');
const initialRoute = appEl?.getAttribute('data-initial-route');
return initialRoute || '/shop'; // Default to shop if not specified
};
const initialRoute = getInitialRoute();
return (
<QueryClientProvider client={queryClient}>
<ThemeProvider config={themeConfig}>
<HashRouter>
<BaseLayout>
<Routes>
{/* Root route redirects to initial route based on SPA mode */}
<Route path="/" element={<Navigate to={initialRoute} replace />} />
{/* Shop Routes */}
<Route path="/" element={<Shop />} />
<Route path="/shop" element={<Shop />} />
<Route path="/product/:slug" element={<Product />} />
@@ -78,8 +89,8 @@ function App() {
{/* My Account */}
<Route path="/my-account/*" element={<Account />} />
{/* Fallback */}
<Route path="*" element={<Navigate to="/shop" replace />} />
{/* Fallback to initial route */}
<Route path="*" element={<Navigate to={initialRoute} replace />} />
</Routes>
</BaseLayout>
</HashRouter>