Disabled configurable product swatch option is still visible on frontend with the crossed out

[imran9935]

Preconditions (*)

Tested in this versions:

1. Magento 2.4.7
2. Magento Developer branch

Description (*)

When creating configurable product with the multiple options ex -(color, size), and disabled one configurable product option, then that disabled option is still visible on frontend with crossed out, check below screenshots.

Screenshot 1:

Screenshot 2:

Screenshot 3:

Screenshot 4:

Steps to reproduce (*)

1. Access magento admin panel
2. Install sample data
3. Create size and color attribute with the type of text swatch sceenshot-3,4
4. Create configurable product by using that attributes
5. Disable one configurable product option screenshot-4
6. Run indexer and clear cache
7. Open that configurable product on frontend and select that disabled option screenshot-4
8. Now observe that option is showing as crossed out as it should not show

Expected result (*)

Disabled configurable product swatch option should be not visible

Actual result (*)

Disabled configurable product swatch option is still visible on frontend with the crossed out

Additional information (*)

As I have checked in this file (magento/module-swatches/view/base/web/js/swatch-renderer.js), on line no 959 the disabled class is being added. As it only checks products option is available or not and after checking that condition it adds disabled class. as it should check whether the product option is enabled or out of stock and if product is not enable then that option should be not visible. check below screenshot-5

Screenshot 5:

[m2-assistant]

Hi @imran9935. Thank you for your report.
To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

• @magento give me 2.4-develop instance - upcoming 2.4.x release
• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this
• To learn more about issue processing workflow, refer to the Code Contributions.

---

Join Magento Community Engineering Slack and ask your questions in #github channel.
⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.
🕙 You can find the schedule on the Magento Community Calendar page.
📞 The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[m2-assistant]

Hi @engcom-Dash. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
     Details

     - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
     - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
     - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[engcom-Dash]

Hi @imran9935

Thanks for reporting and collaboration.

Verified the issue on the Magento 2.4 dev instance but the issue is not reproducible.

We are not seeing the disabled configurable product search option on the UI.

Please look at the screenshots I've attached and let us know if we missed anything.

[imran9935]

Hello @engcom-Dash

As I can see you have not attached that black option with other variant, can you attach that black option with other variant as well, Please check below screenshots, As I have attached X size with Red variant as well as Black, and disabled that Red X variant, Now on frontent when selecting that Red variant then that disabled X option is showing as cross out.

[engcom-Dash]

Hi @imran9935

Verified the issue Magento 2.4 dev instance and the issue is reproducible.

Steps to reproduce :

1. Access magento admin panel
2. Install sample data
3. Create size and color attribute with the type of text swatch sceenshot-3,4
4. Create configurable product by using that attributes
5. Disable one configurable product option screenshot-4
6. Run indexer and clear cache
7. Open that configurable product on frontend and select that disabled option screenshot-4
8. Now observe that option is showing as crossed out as it should not show

Please refer to the attached screenshots.