Jason
10 KiB
10 KiB
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:
- Start at homepage (b=0)
- Select Window (b=2)
- Select Primary Window (b=8194)
- Select Vinyl (b=8226)
- 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! 🚀