Implements direct-to-cart functionality for landing page CTAs.
Features:
- Parse URL parameters: ?add-to-cart=123
- Support simple products: ?add-to-cart=123
- Support variable products: ?add-to-cart=123&variation_id=456
- Support quantity: ?add-to-cart=123&quantity=2
- Auto-navigate to cart after adding
- Clean URL after adding (remove parameters)
- Toast notification on success/error
Usage examples:
1. Simple product:
https://site.com/store?add-to-cart=332
2. Variable product:
https://site.com/store?add-to-cart=332&variation_id=456
3. With quantity:
https://site.com/store?add-to-cart=332&quantity=3
Flow:
- User clicks CTA on landing page
- Redirects to SPA with add-to-cart parameter
- SPA loads, hook detects parameter
- Adds product to cart via API
- Navigates to cart page
- Shows success toast
Works with both SPA modes:
- Full SPA: loads shop, adds to cart, navigates to cart
- Checkout Only: loads cart, adds to cart, stays on cart
User feedback: 'SPA means Single Page, why 4 pages?'
Correct architecture:
- 1 SPA entry page (e.g., /store)
- SPA Mode determines initial route:
* Full SPA → starts at shop page
* Checkout Only → starts at cart page
* Disabled → never loads
- React Router handles rest via /#/ routing
Changes:
- Admin UI: Changed from 4 page selectors to 1 SPA entry page
- Backend: spa_pages array → spa_page integer
- Template: Initial route based on spa_mode setting
- Simplified is_spa_page() checks (single ID comparison)
Benefits:
- User can set /store as homepage (Settings → Reading)
- Landing page → CTA → direct to cart/checkout
- Clean single entry point
- Mode controls behavior, not multiple pages
Example flow:
- Visit https://site.com/store
- Full SPA: loads shop, navigate via /#/product/123
- Checkout Only: loads cart, navigate via /#/checkout
- Homepage: set /store as homepage, SPA loads on site root
Next: Add direct-to-cart CTA with product parameter