3

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

4 Answers 4

3

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:

enter image description here

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

0
0

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.

1
  • Thank you for your reply, I have tried with the default Luma theme but issue is still. This issue facing after the upgrade. 2.4.4 to 2.4.5-p1 Dec 6, 2022 at 10:58
0

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();
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.