Uncovered a bit of an issue regarding setting custom options for a product, well 2 main issues really.
The first regards checkboxes - any fixed price linked to a checkbox is added to the display price for a product regardless of if you tick or untick it, and unticking it does not remove any additional prices to it.
This can be replicated in the demo storefront - go to https://demo.vuestorefront.io/gear/gear-3/wayfarer-messenger-bag-custom-options-4.html and try to check/uncheck the checkbox options and you will (hopefully) see that the price doesn’t behave quite as it should.
The other I think is a bit more serious in that it seems to be affecting the display price of a product on load (this is a bit more digging orelated to Product prices being altered on page load by the way).
After looking at
ProductCustomOptions.ts, in the
setupInputFields method called from
created, it is making an assumption about the custom options selected and setting the value to the first option. What this means is that, if the first option has a fixed price attached to it, it will be automatically added to the product price.
I can see why this assumption is made, as I presume it’s basing it on the options being pre-selected with the first value. However, we have 2 check box options that are optional, but when checked they apply a price change to the product. Because the option has a fixed price, it is being added when the page is loaded.
This is related to the above issue with checkboxes I think. Although the model is showing the value as
setupInputFields method is ignoring this. Likewise, it seems that the
optionChanged method doesn’t seem to handle false values, or doesn’t seem to be taking into account the unticking of boxes.
I’m just putting this here to see if these are issues you are aware of, or if anyone has come across and found solutions for. I like to think that I’m not the first person to have tried to use checkboxes for custom options, so any pointers from anyone (that aren’t update to 1.11 ) would be greatly appreciated