The showAlert action displays a modal-style popup alert with a title, message, and optional action buttons.
JSX
Superfans.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
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" }
JavaScript HTML CSS
const variant_to_be_added=Superfans.variables.product.selectedVariant.id;
function addItemToCart(variantId, quantity) {
Superfans.actions.addToCart([{ variantId, quantity }])
.then(() => {
Superfans.actions.showAlert({
title: "Congratulations!!!",
message: "You have unlocked an exclusive offer!!"
});
})
.catch((err) => {
Superfans.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;
}
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.
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.
