Fix #24091 - Selected configurable product attribute options are not displaying in wishlist page.

[Bartlomiejsz]

Description (*)

This fixes #24091 and #22503
The reason of the issue is that in add-to-wishlist.js there are event observers that are being triggered on for every configurable product on page after modifying one of them. So if the last product on page doesn't contain any option checked, no matter which will be added to wishlist, it won't contain options.

Related Pull Requests

Fixed Issues (if relevant)

Fixes #22503
Fixes #24091

Manual testing scenarios (*)

Check fixed issues for steps to test

1. Created two Configurable Product
2. The born products must be with one or more 'VisualSwatchOption', and related to one category.
3. Go to Category Page
4. Select 'VisualSwatchOption' for a first product in the list category and add to Wishlist
5. For added product must be present 'See Details' on Wishlist page

Questions or comments

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @Bartlomiejsz. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Guide documentation.

[gabrieldagama]

Hi @Bartlomiejsz thanks for the pull request, it looks great! Looking at the problem, I believe we can solve this just on the JS part, follow below my thoughts:

Since the _updateWishlistData is triggered by an event, we have the event.target that is the selector of the option that the user has changed within the product block (it can be the product page or an item within a product list), from that perspective we can extract the selected attribute values from the correct product and also on _updateAddToWishlistButton we can update the post data on the right add-to-wishlist element.

Using this approach, it won't be a need to have an object dataToAdd with productId, since the event gives us the context that we need to collect the data from the right product and update it's form.

We would still have to have some mechanism to figure out if we are on list or product page, but I think that can be done on JS as well, what do you think?

Please let me know if there are any questions.

[Bartlomiejsz]

Hi @gabrieldagama, that is great idea to limit execution of wishlist button update to only current product instead of lopping for every item possible. I managed to reduce js needed for it and also accomplish that, thank you.

However I'm not sure if checking if current page is product list via js is good idea.
This might cause some issues easier on modified themes with different structure/classes, and by assuming that we're checking i.e. body class - in the core there are already two possibilities (catalog-category-view, catalogsearch-result-index), and if somebody would like to add some custom products list page it would require to rewrite wishlist js just to make it work by adding additional class to check. With current solution this is only about adding one additional parameter to block.
Also, current solution is consistent with final price renderer, which is already part of the core.

Could you please check current solution after my changes and let me know what do you think?

[gabrieldagama]

Hi @Bartlomiejsz, thanks for the updates! Agree with your arguments there, please follow some very small suggestions to keep consistency, also we must cover all PRs will tests, the add-to-wishlist has a jasmine test that may need to be updated based on the changes and it would be great if we can cover this with MFTF tests, let me know if you need any help with the tests!

Thanks!

[gabrieldagama]

@magento run all tests

[engcom-Echo]

Hi @Bartlomiejsz. I'll take care of the test coverage if you don't mind.

[Bartlomiejsz]

@engcom-Echo i would not be able to do it this week so that's great, thank you!

[engcom-Echo]

@magento run all tests

[engcom-Echo]

@magento run all tests

[engcom-Echo]

@magento run Functional Tests B2B

[engcom-Echo]

@magento run Functional Tests B2B

[gabrieldagama]

@magento give me test instance with edition ee

[magento-deployment-service]

Hi @gabrieldagama. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service]

Hi @gabrieldagama, here is your Magento Instance: https://6ae7b32b33bba4c9ac25485f2e8b61fd.instances.magento-community.engineering
Admin access: https://6ae7b32b33bba4c9ac25485f2e8b61fd.instances.magento-community.engineering/admin_027e
Login: 92fe5020
Password: 8a1db3d27cac

[gabrieldagama]

@magento give me new instance with edition b2b

[magento-deployment-service]

Hi @gabrieldagama. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service]

Hi @gabrieldagama, here is your Magento Instance: https://6ae7b32b33bba4c9ac25485f2e8b61fd.instances.magento-community.engineering
Admin access: https://6ae7b32b33bba4c9ac25485f2e8b61fd.instances.magento-community.engineering/admin_2f80
Login: 38206084
Password: ba1fb6adf5a2

[gabrieldagama]

@magento run all tests

[gabrieldagama]

@magento run all tests

[gabrieldagama]

@magento run all tests

[gabrieldagama]

@magento run all tests

[engcom-Alfa]

✔️ QA Passed

Preconditions:

Magento 2.4-develop with sample data

Case 1

Manual testing scenario:

1. Log into the customer account.
2. Navigate to the product listing page.
3. Choose the configurable product and select preferred color and size options of any product expect last product which is listed in Product listing page ( It is working fine for last product of the listing page).
4. Click on the wishlist icon of the product.

Before: ✖️ The selected color and size is not visible in the wishlist page.

After: ✔️ The selected color and size is visible in the wishlist page.

Case 2

Manual testing scenario:

1. Log into the customer account.
2. Navigate to product listing page.
3. choose the configurable product and select preferred color and size options.
4. click on the wishlist icon of another configurable product on the same page without selecting any color/size options.
   For example:

After: ✔️ the system didn't assign different product options to the wishlist product.

[gabrieldagama]

@magento run Functional Tests B2B,Functional Tests EE

[m2-assistant]

Hi @Bartlomiejsz, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.