Configurable product swatches not displayed as crossed out when out of stock

This article provides a patch for the known Magento Commerce 2.2.2 issue related to the configurable product swatches being out of stock not displayed as crossed out on the store front.

Issue

When you have a configurable product and for certain combination of options the related simple product is out of stock, the swatch is still available and can be selected on the store front. 

Steps to reproduce:

1. In the Magento Admin, create a configurable product with options for two attributes: color(red, black) and size (S,M,L).
2. Set Quantity as "1" for each corresponding simple product.
3. On the store front, add red,M product to cart and checkout.
4. In the Admin, process the order so that the item quantity is updated to "0".
5. Make sure backorders are not allowed.
6. On the store front, navigate to the same product page and select the same options: red, M.

Expected result:

The red,M swatch has a red slash and cannot selected.

Actual result:
The red,M swatch can be selected. 

Patch

The patch is attached to this article. To download it, scroll down to the end of the article and click the file name, or click the following link:

Download MDVA-8215_EE_2.2.2_v1.composer.patch

Compatible Magento versions:

The patch was created for:

• Magento Commerce 2.2.2

The patch is also compatible (but might not solve the issue) with the following Magento versions and editions:

• Magento Commerce, Magento Commerce Cloud
• 2.2.0-2.2.3

How to apply the patch

We strongly recommend applying and testing the patch on the Integration/Staging environment, before applying it Production. We also recommend to have a recent backup before any manipulations.

How to apply this patch for Magento Commerce Cloud

1. If you do not have a directory named m2-hotfixes in the project root, please create one.
2. Copy the MDVA-8215_EE_2.2.2_v1.composer.patch file to the m2-hotfixes directory.

3. Add, commit, and push your code changes:

   git add -A && git commit -m "Apply patch MDVA-8215_EE_2.2.2_v1.composer.patch" && git push origin

How to apply this patch for Magento Commerce

1. Upload the patch to your Magento root directory.
2. Run the following SSH command:

   patch -p1 < MDVA-8215_EE_2.2.2_v1.composer.patch

   (If the above command does not work, try using -p2 instead of -p1)
3. For the changes to be reflected, refresh the cache in the Admin under System > Cache Management.

Useful links

Apply custom patches to Magento Commerce (Cloud)

Attached Files