Jason
353 lines
10 KiB
Markdown
353 lines
10 KiB
Markdown
# URL State Example - Navigation Flow
|
|
|
|
## 📍 Visual Journey Through URL Changes
|
|
|
|
### Step 1: Page Load
|
|
```
|
|
URL: https://yoursite.com/
|
|
State: Fresh start, no parameters
|
|
Bit Value: 0
|
|
```
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ What are you looking for? │
|
|
│ ┌─────┐ ┌─────┐ │
|
|
│ │ 🚪 │ │ 🪟 │ │
|
|
│ │Door │ │Window│ │
|
|
│ └─────┘ └─────┘ │
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Step 2: User Selects "Door"
|
|
```
|
|
URL: https://yoursite.com/?b=1&q=q-door-type
|
|
↑
|
|
Bit 0 set (Door)
|
|
State: Door selected
|
|
Bit Value: 1 (binary: 1)
|
|
Bits Active: Door
|
|
```
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ What type of door? │
|
|
│ ┌──────────┐ ┌──────────┐ │
|
|
│ │Storm Door│ │Patio Door│ │
|
|
│ └──────────┘ └──────────┘ │
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Step 3: User Selects "Storm Door"
|
|
```
|
|
URL: https://yoursite.com/?b=16385&q=q-material-storm-door
|
|
↑
|
|
16385 = 1 (Door) + 16384 (Storm Door)
|
|
State: Door + Storm Door selected
|
|
Bit Value: 16385 (binary: 100000000000001)
|
|
Bits Active: Door, Storm Door subtype
|
|
|
|
Calculation:
|
|
Bit 0 (Door) = 1
|
|
Bit 14 (Storm Door)= 16384
|
|
Total = 16385
|
|
```
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ Select Material │
|
|
│ CONDITIONAL: Only showing │
|
|
│ because some storm doors have │
|
|
│ multiple materials │
|
|
│ ┌─────────┐ ┌─────────┐ │
|
|
│ │Aluminum │ │ Vinyl │ │
|
|
│ └─────────┘ └─────────┘ │
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Step 4: User Selects "Aluminum"
|
|
```
|
|
URL: https://yoursite.com/?b=16401&q=q-color-storm-door
|
|
↑
|
|
16401 = 1 + 16 + 16384
|
|
State: Door + Aluminum + Storm Door
|
|
Bit Value: 16401 (binary: 100000000010001)
|
|
Bits Active: Door, Aluminum, Storm Door subtype
|
|
|
|
Calculation:
|
|
Bit 0 (Door) = 1
|
|
Bit 4 (Aluminum) = 16
|
|
Bit 14 (Storm Door)= 16384
|
|
Total = 16401
|
|
```
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ Select Color │
|
|
│ ┌───────┐ ┌───────┐ ┌───────┐ │
|
|
│ │ Black │ │ White │ │Bronze │ │
|
|
│ └───────┘ └───────┘ └───────┘ │
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Step 5: User Selects "White"
|
|
```
|
|
URL: https://yoursite.com/?b=16529&q=q-dimensions
|
|
↑
|
|
16529 = 1 + 16 + 128 + 16384
|
|
State: Door + Aluminum + White + Storm Door
|
|
Bit Value: 16529 (binary: 100000010010001)
|
|
Bits Active: Door, Aluminum, White, Storm Door
|
|
|
|
Calculation:
|
|
Bit 0 (Door) = 1
|
|
Bit 4 (Aluminum) = 16
|
|
Bit 7 (White) = 128
|
|
Bit 14 (Storm Door)= 16384
|
|
Total = 16529
|
|
```
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ Enter Dimensions │
|
|
│ Width: [______] inches │
|
|
│ Height: [______] inches │
|
|
│ [Continue →] │
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Step 6: View Results
|
|
```
|
|
URL: https://yoursite.com/?b=16529&q=results
|
|
State: Showing filtered products
|
|
Bit Value: 16529
|
|
Products Matched: All doors that are:
|
|
✓ Storm Door type (bit 14)
|
|
✓ Aluminum material (bit 4)
|
|
✓ Available in White (bit 7)
|
|
```
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ Found 3 Products │
|
|
│ ┌─────────────────────────┐ │
|
|
│ │ STAR 6100 FULL VIEW │ │
|
|
│ │ Code: 6100I │ │
|
|
│ │ Aluminum, White, Bronze │ │
|
|
│ │ [View Details] │ │
|
|
│ └─────────────────────────┘ │
|
|
│ ┌─────────────────────────┐ │
|
|
│ │ COLUMBIA COBRA │ │
|
|
│ │ Code: COBRAI │ │
|
|
│ │ [View Details] │ │
|
|
│ └─────────────────────────┘ │
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Step 7: Click Product Detail
|
|
```
|
|
URL: https://yoursite.com/?p=6100I&b=16529
|
|
↑
|
|
Product code added
|
|
State: Viewing specific product 6100I
|
|
Bit Value: 16529 (preserved for "back" navigation)
|
|
```
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ STAR 6100 FULL VIEW STORM DOOR │
|
|
│ ────────────────────────────────── │
|
|
│ Product Code: 6100I │
|
|
│ Category: STD │
|
|
│ Materials: Aluminum │
|
|
│ Colors: White, Bronze │
|
|
│ │
|
|
│ Compatible Accessories: │
|
|
│ • BGIST - Inserts for Storm Doors │
|
|
│ • TGIODD - Top Glass Inserts │
|
|
│ │
|
|
│ [← Back] [Start Over] [🔗 Share] │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### Step 8: Copy & Share URL
|
|
```
|
|
User clicks "🔗 Share" button
|
|
Copies: https://yoursite.com/?p=6100I&b=16529
|
|
|
|
Someone else pastes this URL in their browser:
|
|
→ Instantly shows product 6100I
|
|
→ Navigation state preserved (b=16529)
|
|
→ Back button navigates through original path
|
|
```
|
|
|
|
---
|
|
|
|
### Step 9: Browser Back Button
|
|
```
|
|
User clicks browser back button
|
|
|
|
URL Changes:
|
|
https://yoursite.com/?p=6100I&b=16529
|
|
↓
|
|
https://yoursite.com/?b=16529&q=results
|
|
↓
|
|
https://yoursite.com/?b=16529&q=q-dimensions
|
|
↓
|
|
https://yoursite.com/?b=16401&q=q-color-storm-door
|
|
↓
|
|
https://yoursite.com/?b=16385&q=q-material-storm-door
|
|
↓
|
|
https://yoursite.com/?b=1&q=q-door-type
|
|
↓
|
|
https://yoursite.com/
|
|
|
|
Each step backward:
|
|
✓ Restores question state
|
|
✓ Maintains bit value
|
|
✓ Shows correct UI
|
|
```
|
|
|
|
---
|
|
|
|
### Step 10: Refresh Page
|
|
```
|
|
At any point, user presses F5 to refresh
|
|
|
|
Before Refresh: https://yoursite.com/?b=16529&q=q-dimensions
|
|
After Refresh: https://yoursite.com/?b=16529&q=q-dimensions
|
|
|
|
Result:
|
|
✓ Returns to same question
|
|
✓ Previous answers restored
|
|
✓ Accumulated selections preserved
|
|
✓ Can continue where they left off
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Bit Value Breakdown Reference
|
|
|
|
### Common Values You'll See
|
|
|
|
| Bit Value | Decimal | What It Means |
|
|
|-----------|---------|---------------|
|
|
| `0000...0001` | 1 | Door selected |
|
|
| `0000...0010` | 2 | Window selected |
|
|
| `0001...0001` | 16385 | Door + Storm Door |
|
|
| `0001...0011` | 16387 | Door + Window + Storm Door |
|
|
| `0001...0011` | 16401 | Door + Aluminum + Storm Door |
|
|
| `0010...0010` | 16529 | Door + Aluminum + White + Storm Door |
|
|
|
|
### Quick Decode Formula
|
|
```
|
|
To check if a bit is set:
|
|
if (bitValue & (1 << bitPosition)) {
|
|
// That attribute is selected
|
|
}
|
|
|
|
Examples:
|
|
16529 & 1 = 1 → Door is selected ✓
|
|
16529 & 2 = 0 → Window is NOT selected
|
|
16529 & 16 = 16 → Aluminum is selected ✓
|
|
16529 & 128 = 128 → White is selected ✓
|
|
16529 & 16384 = 16384 → Storm Door is selected ✓
|
|
```
|
|
|
|
---
|
|
|
|
## 🔗 URL Patterns
|
|
|
|
### Navigation State
|
|
```
|
|
Pattern: /?b={bitValue}&q={questionKey}
|
|
Example: /?b=16529&q=q-dimensions
|
|
Use: Bookmark navigation progress
|
|
```
|
|
|
|
### Product View
|
|
```
|
|
Pattern: /?p={productCode}&b={bitValue}
|
|
Example: /?p=6100I&b=16529
|
|
Use: Direct link to product with context
|
|
```
|
|
|
|
### Initial State
|
|
```
|
|
Pattern: /
|
|
Example: https://yoursite.com/
|
|
Use: Fresh start, no parameters
|
|
```
|
|
|
|
---
|
|
|
|
## 💡 Power User Features
|
|
|
|
### Hack the URL
|
|
Users can manually modify URLs:
|
|
|
|
```
|
|
Original: /?b=16529&q=q-dimensions
|
|
(Door + Aluminum + White + Storm Door)
|
|
|
|
Modified: /?b=34&q=q-dimensions
|
|
(Vinyl only)
|
|
|
|
Result: Jumps directly to Vinyl products
|
|
```
|
|
|
|
### Preset Configurations
|
|
Your sales team can create bookmarks:
|
|
|
|
```
|
|
Residential Storm Doors:
|
|
/?b=16401&q=results
|
|
|
|
Commercial Windows:
|
|
/?b=8194&q=results
|
|
|
|
Budget Options (Vinyl):
|
|
/?b=32&q=start
|
|
```
|
|
|
|
### Analytics Tracking
|
|
Track which combinations are popular:
|
|
|
|
```
|
|
Top URLs:
|
|
/?b=16529 → White Aluminum Storm Doors (2,453 views)
|
|
/?b=8226 → White Vinyl Windows (1,834 views)
|
|
/?b=272 → Bronze products (892 views)
|
|
```
|
|
|
|
---
|
|
|
|
## 🎓 Learning Example
|
|
|
|
### Try This Exercise:
|
|
1. Start at homepage (b=0)
|
|
2. Select Window (b=2)
|
|
3. Select Primary Window (b=8194)
|
|
4. Select Vinyl (b=8226)
|
|
5. Select White (b=8354)
|
|
|
|
Your URL should be: `/?b=8354&q=q-dimensions`
|
|
|
|
Decode: 8354 in binary = 10000010100010
|
|
- Bit 1 (2) = Window ✓
|
|
- Bit 5 (32) = Vinyl ✓
|
|
- Bit 7 (128) = White ✓
|
|
- Bit 13 (8192) = Primary Window ✓
|
|
Total: 2 + 32 + 128 + 8192 = 8354 ✓
|
|
|
|
---
|
|
|
|
Ready to implement! 🚀
|