Show Alert

Description

The showAlert action displays a modal-style popup alert with a title, message, and optional action buttons.
It’s ideal for critical notifications, confirmations, or error messages that require user attention.

Function Signature

VajroSDK.actions.showAlert({ 
	title: 'String',
	message: 'String',
})

Parameter	Type	Required	Description
title	String	Yes	The title of the Alert Message
message	String	Yes	The content to be displayed in the Alert

Structure of Response

Status	Response
Success	`{ "status": "success", "message": "Alert displayed successfully" }`
Invalid Params	`{ "status": "error", "errorId": 400, "errorHandle": "invalid-params", "message": "Invalid params" }`
Unexpected Error	`{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }`

Example Usage

const variant_to_be_added=VajroSDK.variables.product.selectedVariant.id;
function addItemToCart(variantId, quantity) {
    VajroSDK.actions.addToCart([{ variantId, quantity }])
        .then(() => {
            VajroSDK.actions.showAlert({
                title: "Congratulations!!!",
                message: "You have unlocked an exclusive offer!!"
            });
        })
        .catch((err) => {
            VajroSDK.actions.showToast({
                title: "Error",
                message: "Failed to add item to cart."
            });
            console.error("Add to cart error:", err);
        });
}
document.getElementById("openCartButton").addEventListener('click',()=>{
	// Example usage
	addItemToCart(variant_to_be_added, 1); // Replace "12345" with the actual variant ID
})

<div class="cart-container" id="ct">
  <button class="open-cart-btn" id="openCartButton">Add to Cart</button>
</div>

.cart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.open-cart-btn {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.open-cart-btn:hover {
  background-color: #218838;
}

Best Practices

Use for blocking alerts only: Reserve alerts for critical actions or confirmations.
Short and clear messages: Avoid large text blocks — keep it concise.
Avoid repetitive alerts: Don’t trigger multiple alerts in quick succession.
Combine with toasts: Use showToast for follow-up feedback after closing an alert.
Catch errors: Always include .catch() for unexpected UI handling failures.

Caveats

Blocking behavior: The alert blocks user interaction until dismissed.
No multiple alerts: Only one alert can be active at a time.
App-only context: Works exclusively inside the Superfans mobile app.
Async flow: Returns a Promise that resolves after the user dismisses the alert.