Sync Bundle Variant with Product Form Variant

By default, our Bundle app tries to sync the Bundle Product variant with the product form variant, basically, when the customer changes the options in the product form it automatically switches to another variant id, we detect this change and update the Bundle variant accordingly.

This feature works just on Product Pages, not on other pages. 

But this feature just works if your HTML has a specific structure, I will describe below the required HTML structure to make the auto-detection of this change work fine and the flow of how we detect this change:

1. We do start by detecting any changes on the product option fields, we use this selector [class*=single-option-] to found the product options and then we monitor the changes on this field
2. After that, if we do detect a change we search the form element that this option tag(select or radio) belongs to.
3. And finally, we do search for an id field inside this form, this id field is the variant id that changed with the options changes, we use this selector to detect the id field: [name=id]

If you are looking to fix the Bundle variant sync, please check the steps above and make sure they match with your HTML structure, for most of the themes it will work just fine without any manual action, but for more customized themes it might not work, in this cases, you can create a clone form with the characteristics above and use as a mirror of your custom form.

If you have difficulties making this work, please contact our support at [email protected] and let us know your questions, we will be happy to help ;)