User Profile Tabs

A container block that provides tabbed navigation for customer account sections. Organizes User Profile, Address, and Orders blocks into separate tabs with client-side tab switching.

What It Does

The User Profile Tabs block creates a tabbed interface for organizing customer account information. It acts as a parent container that holds up to three child blocks (User Profile, Address, Orders) and provides tab navigation to switch between them.

Think of it like: A tabbed file folder that organizes different sections of a customer’s account page.

Use cases:

• Account dashboard pages with multiple sections
• Self-service customer portals
• Profile management interfaces
• Order history and address management combined view

How to Add It

1. Edit an account page or template
2. Click the + button
3. Search for “User Profile Tabs”
4. Click to insert
5. Add child blocks inside:
   • User Profile block (for Details tab)
   • Address block (for Addresses tab)
   • Orders block (for Orders tab)

Block Settings

Alignment

• Full width (default) - Tabs span full content width
• Wide - Wider than content but not full width
• None - Standard content width

Tab Configuration

Configure which tabs appear and their labels:

• Details Tab - Shows User Profile block content
  • Default label: “Details”
  • Customizable tab text
• Addresses Tab - Shows Address block content
  • Default label: “Addresses”
  • Customizable tab text
• Orders Tab - Shows Orders block content
  • Default label: “Orders”
  • Customizable tab text

Tab Appearance

Customize the visual design of tabs:

• Tab padding - Space inside each tab button (default: 12px 24px)
• Font size - Tab label text size (default: 16px)
• Font weight - Regular tab weight (default: 500)
• Active font weight - Selected tab weight (default: 600)
• Tab color - Inactive tab text color (default: #000000)
• Active tab color - Selected tab text color (default: #7A45E5)
• Border width - Active tab underline thickness (default: 2px)
• Active border color - Selected tab underline color (default: #7A45E5)
• Background color - Tab bar background (default: transparent)
• Border color - Bottom border of tab bar (default: #cccccc)
• Container padding - Space around tab bar (default: 0px)
• Container max width - Maximum width of tab container (default: 100%)
• Inherit theme - Use theme’s font family (default: enabled)

Allowed Child Blocks

Only these blocks work inside User Profile Tabs:

• User Profile (wpe-mustang/user-profile) - Customer profile details (Details tab)
• Address (wpe-mustang/address) - Customer addresses (Addresses tab)
• Orders (wpe-mustang/orders) - Order history (Orders tab)

Important: Each child block corresponds to a specific tab. Add only the blocks for the tabs you want to display.

Common Patterns

Full Account Dashboard

Complete customer account interface with all three tabs:

User Profile Tabs (Full width)
├── User Profile block → Details tab
│   ├── Customer name, email, phone
│   └── Account status and info
├── Address block → Addresses tab
│   ├── Saved shipping addresses
│   └── Add/edit address forms
└── Orders block → Orders tab
    ├── Order history list
    └── Order details links

Minimal Account View

Just profile and orders (no addresses):

User Profile Tabs (Wide)
├── User Profile block → Details tab
└── Orders block → Orders tab

Note: Addresses tab won’t appear because Address block is not added.

Orders and Addresses Only

Skip profile details, focus on transactional data:

User Profile Tabs (Full width)
├── Address block → Addresses tab
└── Orders block → Orders tab

Note: Details tab won’t appear because User Profile block is not added.

How Tab Switching Works

Client-Side Navigation

The User Profile Tabs block uses a viewScript for tab switching without page reloads:

1. Tab Click - Customer clicks a tab button
2. Hash Update - URL hash changes (e.g., #addresses)
3. Content Swap - Active tab content is dynamically rendered
4. State Persistence - Selected tab is remembered in URL

Benefits:

• Fast navigation (no page reload)
• Shareable URLs with tab state (/my-account#orders)
• Browser back/forward button support
• Bookmark-able tab views

URL Hash Integration

The block uses URL hashes to track active tab:

• /my-account → Defaults to Details tab
• /my-account#details → Shows Details tab
• /my-account#addresses → Shows Addresses tab
• /my-account#orders → Shows Orders tab

Use cases:

• Link directly to Orders tab from email: https://example.com/my-account#orders
• Link to Addresses from checkout: https://example.com/my-account#addresses
• Customer bookmarks their preferred tab view

Default Tab

The block determines which tab to show on page load:

1. If URL has hash (#details, #addresses, #orders) → Show that tab
2. If URL has invalid/missing hash → Default to Details tab
3. If Details block is missing → Default to first available tab

Customization

Tab Bar Styling

/* Style the tab bar container */
.mustang-user-profile-tabs-container {
  background: linear-gradient(to bottom, #f9f9f9, #ffffff);
  border-bottom: 2px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Customize individual tab buttons */
.mustang-user-profile-tabs-tab {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Style the active tab */
.mustang-user-profile-tabs-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  background: rgba(37, 99, 235, 0.05);
}

/* Hover state for tabs */
.mustang-user-profile-tabs-tab:hover {
  background: rgba(0, 0, 0, 0.03);
}

Tab Content Area Styling

/* Add padding around content area */
.mustang-user-profile-tabs-content-wrapper {
  padding: 2rem;
  background: #ffffff;
}

/* Style content inside tabs */
.mustang-user-profile-tabs-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* Container for each tab's child block */
.user-profile-container,
.address-container,
.orders-container {
  min-height: 400px;
}

Mobile Responsive Tabs

/* Stack tabs vertically on mobile */
@media (max-width: 768px) {
  .mustang-user-profile-tabs-tabs {
    flex-direction: column;
    width: 100%;
  }

  .mustang-user-profile-tabs-tab {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    border-left: 3px solid transparent;
  }

  .mustang-user-profile-tabs-tab.active {
    border-bottom: 1px solid #e0e0e0;
    border-left-color: #7a45e5;
  }

  .mustang-user-profile-tabs-content-wrapper {
    padding: 1rem;
  }
}

Custom Tab Icons

/* Add icons before tab labels */
.mustang-user-profile-tabs-tab::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-size: contain;
  vertical-align: middle;
}

/* Details tab icon */
.mustang-user-profile-tabs-tab:nth-child(1)::before {
  background-image: url('/icons/user.svg');
}

/* Addresses tab icon */
.mustang-user-profile-tabs-tab:nth-child(2)::before {
  background-image: url('/icons/location.svg');
}

/* Orders tab icon */
.mustang-user-profile-tabs-tab:nth-child(3)::before {
  background-image: url('/icons/shopping-bag.svg');
}

Block Context

Provides context: None (this is a container block that doesn’t pass context to children)

Receives context: None (this is a top-level block)

Allowed child blocks:

• wpe-mustang/user-profile (Details tab)
• wpe-mustang/address (Addresses tab)
• wpe-mustang/orders (Orders tab)

Block hierarchy:

User Profile Tabs (container)
  └─→ User Profile (child - renders in Details tab)
  └─→ Address (child - renders in Addresses tab)
  └─→ Orders (child - renders in Orders tab)

Technical Details

Block name: wpe-mustang/user-profile-tabs

Attributes:

• align (string) - Block alignment (wide, full)
  • Default: "full"
• settingsId (string) - Settings configuration identifier
  • Default: ""

Supports:

• Alignment (wide, full)
• Custom CSS classes

Does not support:

• HTML editing
• Typography controls (configured via settings)
• Color controls (configured via settings)
• Multiple instances on same page (may cause tab state conflicts)

Scripts:

• editorScript - Block editor interface
• editorStyle - Editor-specific styling
• style - Frontend styling
• viewScript - Tab switching functionality (client-side)

viewScript behavior:

• Listens for tab clicks and hash changes
• Dynamically renders child block components in tab content areas
• Uses React roots to mount/unmount child blocks
• Manages active tab state with URL hash integration
• Supports browser back/forward navigation

Troubleshooting

Tabs not switching when clicked

Check:

1. JavaScript is enabled in browser
2. Browser console for JavaScript errors
3. viewScript is loading correctly
4. No JavaScript conflicts with other plugins

Fix:

• Review browser console for errors
• Disable other JavaScript plugins to test for conflicts
• Clear browser cache and reload page
• Verify child blocks are properly added

Child block content not displaying in tab

Check:

1. Child block is added directly inside User Profile Tabs
2. Child block corresponds to the tab you’re viewing
3. Child blocks are not nested deeper than first level
4. Customer is logged in (required for all child blocks)

Fix:

• Remove and re-add child block
• Verify block is direct child, not nested in another container
• Check that customer session is active
• Review browser network requests for API errors

Wrong tab shows on page load

The block checks URL hash to determine initial tab:

• #details → Details tab
• #addresses → Addresses tab
• #orders → Orders tab
• No hash or invalid hash → Defaults to Details (or first available)

Fix:

• Check URL for hash parameter
• Clear browser history/cache
• Ensure hash is valid (details, addresses, or orders)
• Verify child block exists for the requested tab

Tab state not persisting across page reloads

This is expected behavior. Tab state is stored in URL hash:

• If customer bookmarks /my-account#orders, that tab will show on return
• If customer navigates to /my-account (no hash), defaults to Details

Not a bug: The block intentionally uses URL hash for state, which is lost if user navigates to page without hash.

Multiple tabs showing at once

This should never happen. If multiple tab contents are visible simultaneously:

Check:

1. Custom CSS is not overriding display rules
2. JavaScript is running without errors
3. Only one User Profile Tabs block exists on page

Fix:

• Review custom CSS for .mustang-user-profile-tabs-content overrides
• Check browser console for JavaScript errors
• Remove duplicate User Profile Tabs blocks

Tab styling not matching settings

Check:

1. Settings are saved and page is refreshed
2. Custom CSS is not overriding block settings
3. Theme styles are not conflicting

Fix:

• Re-save block settings and refresh
• Review browser inspector for CSS specificity issues
• Temporarily disable custom CSS to test
• Check theme for conflicting tab styles

Customer sees login prompt in all tabs

This is expected if customer is not logged in. All three child blocks (User Profile, Address, Orders) require authentication.

Fix:

• Customer needs to log in first
• Verify customer session is active
• Check that login functionality is working
• Review authentication flow

URL hash not updating when switching tabs

Check:

1. JavaScript is running without errors
2. Browser supports pushState or hash navigation
3. No conflicts with other plugins manipulating URL

Fix:

• Check browser console for errors
• Test in different browser to rule out compatibility issue
• Disable other plugins that modify URLs
• Verify viewScript is loading correctly

Tabs appear but content area is blank

Check:

1. Child blocks are added inside User Profile Tabs
2. Child blocks correspond to the active tab
3. Customer is logged in (required for content)
4. API connection to BigCommerce is working

Fix:

• Add appropriate child blocks (User Profile, Address, Orders)
• Verify customer authentication
• Check browser network tab for failed API requests
• Review BigCommerce API connection status

Related Blocks

• User Profile - Display customer details (Details tab content)
• Address - Manage customer addresses (Addresses tab content)
• Account Orders - Order history list (Orders tab content)
• Account - Parent container for account blocks (alternative pattern)