CGW-Quote-Builder/information/URL_EXAMPLES.md

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! 🚀