Changing a product variant is not updating the widget prices/options

You have successfully added a product to your subscription plan and enabled the subscription widget. Now you are testing it and you notice the prices/options are not updating when you switch between the different product variants. This article will walk you through why that is happening and the steps you need to take to address the problem.

Table of contents

• Why is this happening
• Recommended approach
• Technical explanation
• Conclusion

Why is this happening?

For the subscription widget to update with variant changes, your online store theme needs to be set up to inform third-party apps when customers choose a new variant. Some custom and older themes do not have this implemented so our widget is not aware when this user action is taken. It can also be caused by conflicts with other third-party apps interfering with ours. This is most likely to happen if you have other subscription apps installed or have an old, custom or heavily modified theme.

Recommended approach

The best thing to do if you are experiencing this problem is to let support know through the live chat or by emailing support@subscriptions.super-simple.co. In order to be able to address the problem, we would also need the following:

1. Have at least 1 product in your subscription plan.
2. Have the subscription widget enabled in your online store.
3. If your online store is password-protected, please share the password with us in your request.

Technical explanation

If you are a developer or have one in your team, the following technical explanation can be used to debug the problem.

When the subscription widget loads on the product page, it attaches a change event listener to cart form variant input. Depending on your theme set up, this should be one of the following two elements:

• form[action$="/cart/add"] input[name="id"] or
• form[action$="/cart/add"] select[name="id"]

When a variant is selected, the app expects this element to fire a change event which refreshes the widget with the new options. The most common reason why that happens is that the input/select element does not fire a change event. Usually, this has to be done programatically using variantInputElement.dispatchEvent(new Event("change")).

If you want to programatically refresh the widget, we provide the following function on the window object in your online store:

$superSubscriptions.triggerProductVariantRefresh(event?: Event)

Please note the event parameter is optional and used when only when the widget cannot pick up the new variant ID on its own.

Conclusion

By following this guide, you should now have a better understanding of why your subscription widget may not be updating when switching between product variants and the steps required to resolve it. Please do not hesitate to get in touch - we are here to help you fix these theme incompatibility issues!

Updated on: 10/28/2024