The addToWishlist action adds a product to the logged-in customer’s wishlist. It helps users save products for later, enhancing engagement and retention while allowing personalized shopping experiences.
JavaScript
Superfans.actions.addToWishlist({productId: "1234234342", variantId: "2342134234"})Parameter Type Required Description productId String Yes Unique ID of the product available in Shopify. variantId String Yes Unique ID of the variant available in Shopify.
Status Response Success { "status": "success", "message": "Added to Wishlist" }Invalid Product Id { "status": "error", "errorId": 400, "errorHandle": "invalid-product-Id", "message": "Invalid Product Id" }User Not Logged In { "status": "error", "errorId": 400, "errorHandle": "user-not-logged-in", "message": "The user is not logged in" }Unexpected Error { "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }
JavaScript HTML
const btnWishlist = document.getElementById("add-to-wishlist");
btnWishlist.addEventListener("click", async () => {
const product = Superfans.variables.product;
const variant = product?.selectedVariant;
const customerId = Superfans.variables.customer?.id;
if (!customerId) {
await Superfans.actions.openAuthentication({ type: "login" });
return;
}
Superfans.actions.addToWishlist({
productId: product.id,
variantId: variant.id,
});
});
<button id="add-to-wishlist">Add to Wishlist</button>
Ensure login: Always check if the customer is authenticated before calling this action.
Show instant feedback: Use showToast or update the UI immediately for a responsive experience.
Sync UI state: Pair with wishlistUpdated listener to automatically refresh icons or counters.
Avoid spamming: Prevent rapid repeated clicks to avoid duplicate entries.
Track engagement: Log wishlist additions to understand product interest.
Requires login: Only available to authenticated customers.
App-only: Works inside the Superfans mobile app environment.
Async behavior: Returns a Promise — handle responses gracefully.
Immediate sync: Wishlist updates happen instantly but may take a moment to reflect in UI.
Error handling: Always include .catch() for failed attempts or connectivity issues.
