Configurable Product Options Randomly Empty in Frontend

Question

On Magento 2.3.6-p1 we have an issue where customers cannot select a product's options because the options list is empty.

This is very inconsistent since different products with the same option attribute sometimes show the options list and sometimes don't.

Here is an example for an empty options list:

This is a working options list for the exact same options attribute:

Both products are identical besides the pictures and names.

It seems that just very seldomly options are shown for a product when most of the time it does not work; the reason for this is not known to me.

The problem exists since we upgraded from Magento 2.3.0 to 2.3.6-p1.

This issue has a heavy impact since most products sare sold as configurable products which customers are currently unable to buy. (My wife is killing me!)

Besides obvious hints like clearing caches, reindexing or making sure the products are in stock I found neither a solution nor any direction to look for to solve the problem. The server logs show no irregularities, the Magento cron job is running fine.

Any help is appreciated!

Edit 1: I was told that this issue already sometimes happened on Magento 2.3.0 but not as often.

Edit 2: I found a JS error which happens on the site when the page loads in this script:

    <script type="text/javascript">
    require(['jquery', 'jquery/ui', 'domReady!'], function($) {
        $('body').on('updatePrice', function (e, data) {

            var swatchWidget = $('.swatch-opt').data('mage-SwatchRenderer');
            if(swatchWidget) {
                var options = _.object(_.keys(swatchWidget.optionsMap), {});

                swatchWidget.element.find('.' + swatchWidget.options.classes.attributeClass + '[option-selected]').each(function () {
                    options[$(this).attr('attribute-id')] = $(this).attr('option-selected');
                });
                result = swatchWidget.options.jsonConfig.optionPrices[_.findKey(swatchWidget.options.jsonConfig.index, options)];
            } else {
                var configurableWidget = $('#product_addtocart_form').data('mage-configurable');

                var options = {};

                configurableWidget.element.find(configurableWidget.options.superSelector + ' option:selected').each(function () {
                    if($(this).val()) {
                        options[Number($(this).parent().prop('id').replace('attribute', ''))] = $(this).val();
                    }

                });

                var config = configurableWidget.option('spConfig');
                result = config.optionPrices[_.findKey(config.index, options)];
            }

            var basePriceField = $('.product-info-price .baseprice');
            if (typeof result != 'undefined' && result.magenerds_baseprice_text.length && basePriceField.length) {
                basePriceField.html(result.magenerds_baseprice_text);
            }
        });
    });
</script>

The script seems to be responsible for rendering the options. The error happens in the line configurableWidget.element.find(configurableWidget.options.superSelector + ' option:selected').each(function () {: Uncaught TypeError: Cannot read property 'element' of undefined

This indicates that something goes wrong in the line var configurableWidget = $('#product_addtocart_form').data('mage-configurable');.

The selected ID is definitely in the page, probably the data assigned to this element are missing.

Edit 3: I found out some weird behaviour in which for some products the selectable options list is already populated in the HTML document sent by the server. Those products work just fine. The HTML documents do not contain the script mentioned above!

Then there are pretty much identical products with the same option where the options list seems to be populated dynamically with the help of the script shown above. In those cases no option selection is possible.

I do not see any reason why products are handled differently

Answer 1

In Magento 2.3.5+ the configurable product variation option data element names changed from option-selected to data-option-selected

In your swatchWidget javascript you need to change the element name option-selected to data-option-selected

        swatchWidget.element.find('.' + swatchWidget.options.classes.attributeClass + '[data-option-selected]').each(function () {
            options[$(this).attr('attribute-id')] = $(this).attr('data-option-selected');
        });

Answer 2

I did some digging into the code and found out that the extension Magenerds_BasePrice injects the faulty Javascript code. After disabling the extension the configurable products options list worked as expected.

There already exists a GitHub issue for this problem: https://github.com/Magenerds/BasePrice/issues/34