Add to Wishlist

Description

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.

Function Signature

VajroSDK.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.

Structure of Response

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" }`

Example Usage

const btnWishlist = document.getElementById("add-to-wishlist");
btnWishlist.addEventListener("click", async () => {
const product = VajroSDK.variables.product;
const variant = product?.selectedVariant;
const customerId = VajroSDK.variables.customer?.id;
  if (!customerId) {
await VajroSDK.actions.openAuthentication({ type: "login" });
    return;  
}
  VajroSDK.actions.addToWishlist({
        productId: product.id,
        variantId: variant.id,
      });

});

<button id="add-to-wishlist">Add to Wishlist</button>

Best Practices

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.

Caveats

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.