Open Order

Description

The openOrders() action is a navigation helper that directs the user to the "My Orders" section. This is particularly useful for post-purchase flows, "Track Order" buttons in custom blocks, or customer support interfaces where the user needs quick access to their purchase history.

Function Signature

VajroSDK.actions.openOrders()

Structure of Response

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

Example Usage

async function handleOpenOrders() {
    // Check login status first for best practice
        VajroSDK.actions.openOrders();
    }

:root {
  --primary-blue: #007AFF;
  --success-green: #34C759;
  --card-bg: #ffffff;
  --text-main: #1C1C1E;
  --text-sub: #8E8E93;
  --bg-color: #F2F2F7;
}
.sdk-dashboard {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-color);
  padding: 20px;
  min-height: 100vh;
}
.dashboard-header {
  margin-bottom: 24px;
}
.dashboard-header h2 {
  margin: 0;
  font-size: 24px;
  color: var(--text-main);
}
.dashboard-header p {
  margin: 4px 0 0;
  color: var(--text-sub);
}
.action-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.action-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.action-card:active {
  transform: scale(0.98);
  background: #FAFAFA;
}
.icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.orders-bg { background: #E5F1FF; }
.camera-bg { background: #FFF4E5; }
.location-bg { background: #E5FFE9; }
.security-bg { background: #F2EBFF; }
.card-content h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-main);
}
.card-content p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-sub);
}
.permission-card {
  border: 1px dashed #D1D1D6;
}

<div class="sdk-dashboard">
  <header class="dashboard-header">
    <h2>App Services</h2>
    <p>Manage your account and device features</p>
  </header>
  <div class="action-grid">
    <div class="action-card" onclick="handleOpenOrders()">
      <div class="icon-wrapper orders-bg">📦</div>
      <div class="card-content">
        <h3>My Orders</h3>
        <p>Track your active shipments and history.</p>
      </div>
    </div>
	</div>
</div>

Best Practices

Authentication Check: Since order history is private, ensure the user is logged in using VajroSDK.variables.customer.isLoggedIn before calling this action to ensure a smooth transition.
Call to Action: Use this on "Thank You" pages or profile dashboards to reduce friction for customers looking for status updates.

Caveats

Session Required: If the user’s session has expired or they are logged out, this action may redirect them to the Login/Authentication screen instead of the Orders page, depending on your store’s configuration.
Sync Delay: In some cases, there may be a slight delay between a successful checkout and the order appearing in the list returned by this view due to Shopify/e-commerce platform sync times.