Open Address

Description

The openAddresses() action is a navigation helper that directs the user to the "Saved Addresses" or "Address Book" section of their account dashboard. This is useful for shipping address validation flows, profile management sections, or custom checkout screens where users need to update their delivery information quickly.

Function Signature

Superfans.actions.openAddresses();

Structure of Response

Status	Response
Success	`{ "status": "success", "message": "Address page opened successfully" }`
Cart not accessible	`{ "status": "error", "errorId": 400, "errorHandle": "Address page -not-accessible", "message": "Address page not accessible at the moment, please try again" }`
Unexpected Error	`{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }`

Example Usage

function openAddress()
{
Superfans.actions.openAddresses();
}

:root {
    --primary-clr: #4f46e5;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-sub: #64748b;
    --border-radius: 16px;
    --transition: all 0.25s ease;
}
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    color: var(--text-main);
}
.account-container {
    /* width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    padding: 2.5rem 1.5rem;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04); */
}
/* Header Styles */
.profile-header {
    text-align: center;
    margin-bottom: 2rem;
}
.avatar-container {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.2rem;
}
#avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 8px 16px rgba(79, 70, 229, 0.15);
}
.profile-header h1 {
    font-size: 1.4rem;
    margin: 0;
    color: var(--text-main);
}
.profile-header p {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin: 0.3rem 0 0;
}
/* Stats Section */
.stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
.stat-card {
    background: #f1f5f9;
    padding: 1rem;
    border-radius: var(--border-radius);
    text-align: center;
}
.stat-value {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
}
.stat-label {
    font-size: 0.75rem;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Action CTAs */
.action-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.action-item {
    display: flex;
    align-items: center;
    padding: 1.1rem;
    border: 1px solid #f1f5f9;
    background: #fff;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
}
.action-item:hover {
    border-color: var(--primary-clr);
    background: #fdfdff;
    transform: translateX(4px);
}
.action-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.3rem;
}
.address-icon { background: #eef2ff; color: #4f46e5; }
.settings-icon { background: #fff7ed; color: #f59e0b; }
.action-text { flex-grow: 1; text-align: left;}
.action-title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
}
.action-sub {
    font-size: 0.75rem;
    color: var(--text-sub);
}
.arrow {
    color: #cbd5e1;
    font-size: 1.2rem;
}
/* Footer */
.logout-btn {
    margin-top: 2rem;
    width: 100%;
    padding: 1rem;
    border: none;
    background: #fff1f2;
    color: #e11d48;
    font-weight: 600;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}
.logout-btn:hover { background: #ffe4e6; }

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Account</title>
    <link rel="stylesheet" href="style.css">
    <div class="account-container">
        <header class="profile-header">
            <div class="avatar-container">
                <img src="https://ui-avatars.com/api/?name=Alex+Johnson&amp;background=4f46e5&amp;color=fff&amp;size=128" alt="Profile Placeholder" id="avatar-img">
            </div>
            <h1 id="user-name">Alex Johnson</h1>
            <p id="user-email">[email protected]</p>
        </header>
        <section class="stats-container">
            <div class="stat-card">
                <span class="stat-value">12</span>
                <span class="stat-label">Orders</span>
            </div>
            <div class="stat-card">
                <span class="stat-value">5</span>
                <span class="stat-label">Reviews</span>
            </div>
        </section>
        <nav class="action-list">
            <button class="action-item" onclick="openAddress()">
        <div class="action-icon address-icon">
            <ion-icon name="location-sharp"></ion-icon> 
        </div>
        <div class="action-text">
            <span class="action-title">My Addresses</span>
            <span class="action-sub">Manage delivery locations</span>
        </div>
        <ion-icon name="chevron-forward-outline" class="arrow"></ion-icon>
    </button>
            <button class="action-item" onclick="openAccountSettings()">
        <div class="action-icon settings-icon">
            <ion-icon name="options-outline"></ion-icon>
        </div>
        <div class="action-text">
            <span class="action-title">Account Settings</span>
            <span class="action-sub">Privacy and Profile details</span>
        </div>
        <ion-icon name="chevron-forward-outline" class="arrow"></ion-icon>
    </button>
        </nav>
        <footer class="account-footer">
            <button class="logout-btn">Log Out</button>
        </footer>
    </div>

Best Practices

Authentication Check: Because address profiles contain personally identifiable information (PII), verify that the user is logged in via Superfans.variables.customer.isLoggedIn before executing this method to guarantee a seamless handoff.
Contextual Placement: Provide this option prominently within user profiles, sub-navigation panels, or as a helper link on custom checkout fallback flows.

Caveats

Guest Users: If a guest user triggers this action, the app will either prompt the user to register/login or display an empty address state, depending on your store’s routing policies.