Variant Change

Description

The variantChange event triggers whenever a customer selects a different product variant on the product detail page (PDP).
It allows you to update the UI or logic dynamically — for example, changing displayed price, inventory, or product image when a new variant is chosen.

Function Signature

VajroSDK.listeners.onVariantChanged(() => {
// Do the required logic
});

Example Usage

VajroSDK.listeners.onVariantChanged(() => {
  console.log('Variant changed:', VajroSDK.variables.product.selectedVariant);
	// show the price of the selected variant
  document.getElementById("price").innerText = `$${selectedVariant.price}`;
	// do any functionality
});

This listener is available only on PDP page embedded blocks

Best Practices

1. Update UI incrementally: Refresh only the price, stock, or image instead of re-rendering the entire PDP.
2. Guard against missing fields: Always check that selectedVariant exists before accessing properties.

Caveats

1. Scope limited to PDP: This event only fires on product detail pages.
2. No initial trigger: The listener won’t fire for the default variant when the page first loads.
3. Asynchronous updates: UI elements relying on the variant data should update inside the callback, not before it fires.