Configurable product swatches not displayed crossed out when out of stock in Magento 2.4.5-p1

Question

Configurable product swatches not displayed crossed out when out of stock after upgrade Magento 2.4.5-p1

Answer 1

i am in Magento 2.4.5-p1

Searching y found a solution. It final fix will be released in Magento 2.4.6

But for now i try this solution, and work for me:

Original post: https://github.com/magento/magento2/issues/35319#issuecomment-1111842395

Comment out the original lines in vendor/magento/module-configurable-product/Helper/Data.php (lines 93 - 119) and add these lines:

public function getOptions($currentProduct, $allowedProducts)
    {
        $options = [];
        $allowAttributes = $this->getAllowAttributes($currentProduct);
        foreach ($allowedProducts as $product) {
            $productId = $product->getId();
            foreach ($allowAttributes as $attribute) {
                $productAttribute = $attribute->getProductAttribute();
                $productAttributeId = $productAttribute->getId();
                $attributeValue = $product->getData($productAttribute->getAttributeCode());
                if ($product->isSalable()) {
                    $options[$productAttributeId][$attributeValue][] = $productId;
                }
                $options['index'][$productId][$productAttributeId] = $attributeValue;
            }
        }
        return $options;
    }

Then run commands:

composer update 
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy es_CO en_US (your local...)

and run file permissions

:) Good Coding

Answer 2

Check your custom theme. In the last update the json handling the swatches are notyceable different. There are a new attribute called something like "saleable", and this is the array with the in stock products.

Answer 3

The selected answer did not work for me, but after scrolling through the linked Magento GitHub issue, I found a solution, which involved modifying the swatch-renderer.js

https://github.com/magento/magento2/commit/1fe7184e67ca089294787cd45c98c44cb0b13bac

I copied the swatch-renderer.js file into app/design/Vendor/theme/Magento_Swatches/web/js/swatch-renderer.js, and added the following code:

At line 501:
disableSwatchForOutOfStockProducts: function () {
    let $widget = this, container = this.element;

    $.each(this.options.jsonConfig.attributes, function () {
        let item = this;

        if ($widget.options.jsonConfig.canDisplayShowOutOfStockStatus) {
            let salableProducts = $widget.options.jsonConfig.salable[item.id],
                swatchOptions = container.find('.swatch-option');

            swatchOptions.each(function (key, value) {
                let optionId = $(value).data('option-id');

                if (!salableProducts.hasOwnProperty(optionId)) {
                    $(value).attr('disabled', true).addClass('disabled');
                }
            });
        }
    });
},


At line 912, in the _Rewind function
this.disableSwatchForOutOfStockProducts();

Answer 4

I am having this bug on 2.4.5p1. I implemented the swatch_renderer.js solution from cjochum above which fixed my problem on single-swatch products, but broke two-swatch products (color and size). I fixed this by wrapping in a conditional:

            disableSwatchForOutOfStockProducts: function () {
                let swatchOptArr = document.getElementsByClassName('swatch-attribute');
                let pdpCheck = document.getElementsByClassName('catalog-product-view');
            if (swatchOptArr.length <= 1 && pdpCheck.length >= 1) {
                let $widget = this, container = this.element;

                $.each(this.options.jsonConfig.attributes, function () {
                    let item = this;

                    if ($widget.options.jsonConfig.canDisplayShowOutOfStockStatus) {
                        let salableProducts = $widget.options.jsonConfig.salable[item.id],
                            swatchOptions = container.find('.swatch-option');

                        swatchOptions.each(function (key, value) {
                            let optionId = $(value).data('option-id');

                            if (!salableProducts.hasOwnProperty(optionId)) {
                                $(value).attr('disabled', true).addClass('disabled');
                            }
                        });
                    }
                });
            }
        },

Then calling this.disableSwatchForOutOfStockProducts(); at the very end of _Rewind() to run the function