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:
@@ -56,14 +56,25 @@ function App() {
|
|||||||
const appearanceSettings = getAppearanceSettings();
|
const appearanceSettings = getAppearanceSettings();
|
||||||
const toastPosition = (appearanceSettings?.general?.toast_position || 'top-right') as any;
|
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 (
|
return (
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<ThemeProvider config={themeConfig}>
|
<ThemeProvider config={themeConfig}>
|
||||||
<HashRouter>
|
<HashRouter>
|
||||||
<BaseLayout>
|
<BaseLayout>
|
||||||
<Routes>
|
<Routes>
|
||||||
|
{/* Root route redirects to initial route based on SPA mode */}
|
||||||
|
<Route path="/" element={<Navigate to={initialRoute} replace />} />
|
||||||
|
|
||||||
{/* Shop Routes */}
|
{/* Shop Routes */}
|
||||||
<Route path="/" element={<Shop />} />
|
|
||||||
<Route path="/shop" element={<Shop />} />
|
<Route path="/shop" element={<Shop />} />
|
||||||
<Route path="/product/:slug" element={<Product />} />
|
<Route path="/product/:slug" element={<Product />} />
|
||||||
|
|
||||||
@@ -78,8 +89,8 @@ function App() {
|
|||||||
{/* My Account */}
|
{/* My Account */}
|
||||||
<Route path="/my-account/*" element={<Account />} />
|
<Route path="/my-account/*" element={<Account />} />
|
||||||
|
|
||||||
{/* Fallback */}
|
{/* Fallback to initial route */}
|
||||||
<Route path="*" element={<Navigate to="/shop" replace />} />
|
<Route path="*" element={<Navigate to={initialRoute} replace />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
</HashRouter>
|
</HashRouter>
|
||||||
|
|||||||
Reference in New Issue
Block a user