Initial
This commit is contained in:
Jason
@@ -0,0 +1,352 @@
|
||||
# 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! 🚀
|
||||
Reference in New Issue
Block a user