Magento2: Magento 2 Color Swatches not working properly on Category page!!

[joebordo]

1. There is no point having color swatches on category page, if the user has to select the same color again on product page. When the user selects a color on category page, then click on the product to purchase, it just direct to category page where the user has to select again the same color then add to cart.
2. Second if the user chooses to click on the product image or the the title after selecting a swatch(color) it just goes to the standart product page without the selection. (like the selection never happend).
3. If the user "selects a color in layered navigation, let's say yellow. All yellow shirts are now shown and selected. When you click on add to card or "on product image or title" , same issues arrive like above.
   

   Preconditions

Magento 2.1.1 , PHP 7, Dedicated server.

Steps to reproduce

1. Make a product with color swatches or image swatches.
2. Select a color on category page or layered navigation

3. Click on product image or product title or add to cart.

   Expected result

4. Go to product page with already selected colors.

5. In case of add to cart, add the selected product in cart.

   Actual result

6. It just goes to the product page without any selection. The user has to select again. This makes the user feel that the site does not work properly and is bad user experience. It also makes the user not trust the site for the "not working behaviour".

[epadmin]

See Issue #5882. I believe this is what we have been working on already.

[joebordo]

Issue #5882 only describes the add to cart behavior I wanted to make sure they the dev team also knows the issue with just "selecting a color" then clicking on the image or title to go to the product page. So it's still selected.
But i think both issues are related and will be fixed at the same time.

Thanks for your reply epadmin!

[rkhoury82]

But this is useful to show what colours the product is available in and it also swaps the image.
The customer can browse the category pages without opening every product. just remove the add-to-cart piece for yourself?

[joebordo]

Rkoury82 , your suggestion does not fix the issue. It's like saying don't use your legs if you have leg problems, just sit all day and use a wheelchair.

The user , the true buyer, get's irritated. If you are for example buying shoes, (especially on mobile), you have 7 different colors of the same shoe. In category page you select your color, you like then click on it to go to the product page. The true buyer, not the window shopper, expect the product to be in right color because they clicked on the color image. Let's say they clicked on Brown shoes, now it goes to the product page with black shoes.

Again, he has to choose the brown shoes.

The issue is not the add to cart, the issue is that this is bad user experience.

Also alot of people use the "add to cart" as their wishlist, because you can add products to your cart without being a member, but you can't use the wishlist if you have no account.

And again, when someone clicks on a brown shoe, they expect on the product to be brown and nothing else.

I have this working on my magento 1 installation with an extension.

It should work like this, = > http://attributeswatches.mangoextensions.com/gallery_swatches/

After you hove over, you can click on the product page or title, or you can click the swatch, it will go to the product page and show the chosen color.

Hope it helps.

[epadmin]

joebordo after your explanation I have to disagree and add that this would be an UNWANTED feature by many including me and most of my customers.   What you are asking for would by default disable the ability to add a configurable product to cart from the category.   If you select the swatch on the category nothing should happen at all at that point.   If you want to view the product after you click the swatch, having it pre-load to that selection by clicking the picture or the text is fine but the act of clicking the swatch to open the product listing is a bad idea.   Nothing should happen until the add to cart button, thumbnail or text link is clicked.   I have not seen the user case that people expect to click on a swatch to open the product page with that child loaded and do not think it is the expected behavior by most.  It is expected that if you click the options/swatches and click add to cart that the item in the configuration selected is added to the cart.Please think about this as your suggestion to click on the swatch to go directly to the product page will override/eliminate any ability to add to cart from the category page

-------- Original Message --------
Subject: Re: [magento/magento2] Magento 2 Color Swatches not working
properly on Category page!! (#6572)
From: joebordo [email protected]
Date: Sun, September 11, 2016 11:00 pm
To: magento/magento2 [email protected]
Cc: epadmin [email protected], Comment
[email protected]

Rkoury82 , your suggestion does not fix the issue. It's like saying don't use your legs if you have leg problems, just sit all day and use a wheelchair. The user , the true buyer, get's irritated. If you are for example buying shoes, (especially on mobile), you have 7 different colors of the same shoe. In category page you select your color, you like then click on it to go to the product page. The true buyer, not the window shopper, expect the product to be in right color because they clicked on the color image. Let's say they clicked on Brown shoes, now it goes to the product page with black shoes. Again, he has to choose the brown shoes. The issue is not the add to cart, the issue is that this is bad user experience. Also alot of people use the "add to cart" as their wishlist, because you can add products to your cart without being a member, but you can't use the wishlist if you have no account. And again, when someone clicks on a brown shoe, they expect on the product to be brown and nothing else. I have this working on my magento 1 installation with an extension. It should work like this, = > http://attributeswatches.mangoextensions.com/gallery_swatches/ After you hove over, you can click on the product page or title, or you can click the swatch, it will go to the product page and show the chosen color. Hope it helps. —You are receiving this because you commented.Reply to this email directly, view it on GitHub, or mute the thread.

[antboiko]

Hi @joebordo , thanks for reporting. I reviewed the cases you described.
Let me inform you that we already have an internal ticket MAGETWO-47017 in our backlog to fix the issue with adding the product to cart from category page when all required options are specified.

The preserving of selected on category page swatch values is an improvement and should be submitted to the new Magento 2 Feature Requests and Improvements forum (see details here).

Thanks,
Anton.

[joebordo]

@epadmin I send the demo link for you to test the big image and the title (after you hove over it).
The swatches thing you can disable it if you want. So my suggestion was not to make the swatches link to the page. It just happens to do in the demo. I just wanted to show that after u hove over en select, and you click on the big image it goes to product page selected.

About the swatches being clickable, zalando.be (billion dollar company in europe, equivalent of zappos, even fb has investments in it) uses the hover and the click for it's users.

https://www.zalando.be/herenkleding-shirts/

You can scroll down and test it with the shirts. You hove over it changes, you click it goes to the page.

For magento 2
They can make it, with options the user can choose, "hover swatches with click, or no hover click to change only...

For me the most important one is "that when the user clicks the image or title after it's selected, it's preloaded in product page.

The magento team sees this as an improvement not a bug. I guess i will have to hire a magento developer to do it. I think it will take a long time before they work on improvement as they have to fix the bugs first.

[epadmin]

yeah the hover feature and then click to go to product page is fine.   I don't see it as that big of a deal but if its available it is a neat feature.   I didn't notice that the hover changed the color at first as that is not what I expect the swatches to do, but if they do that is OK as long as it doesn't disable the add to cart button

-------- Original Message --------
Subject: Re: [magento/magento2] Magento 2 Color Swatches not working
properly on Category page!! (#6572)
From: joebordo [email protected]
Date: Mon, September 12, 2016 9:21 am
To: magento/magento2 [email protected]
Cc: epadmin [email protected], Mention
[email protected]

@epadmin I send the demo link for you to test the big image and the title (after you hove over it). The swatches thing you can disable it if you want. So my suggestion was not to make the swatches link to the page. It just happens to do in the demo. I just wanted to show that after u hove over en select, and you click on the big image it goes to product page selected. About the swatches being clickable, zalando.be (billion dollar company in europe, equivalent of zappos, even fb has investments in it) uses the hover and the click for it's users. https://www.zalando.be/herenkleding-shirts/ You can scroll down and test it with the shirts. You hove over it changes, you click it goes to the page. For magento 2 They can make it, with options the user can choose, "hover swatches with click, or no hover click to change only... For me the most important one is "that when the user clicks the image or title after it's selected, it's preloaded in product page. The magento team sees this as an improvement not a bug. I guess i will have to hire a magento developer to do it. I think it will take a long time before they work on improvement as they have to fix the bugs first. —You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread.

[ntoombs19]

I traced through the code to determine exactly why this problem exists. I found that any product that has the attribute 'required_options' set to true, will use the product URL as the "Add to cart" form action rather than the add to cart URL.
Product URL:
https://m2demo.dev/chaz-kangeroo-hoodie.html?options=cart
Add To Cart URL:
https://m2demo.dev/checkout/cart/add/uenc/aHR0cHM6Ly9yZWJhcmNlLmRldi9tZW4vdG9wcy1tZW4vaG9vZGllcy1hbmQtc3dlYXRzaGlydHMtbWVuLmh0bWw,/product/68/

The reason this isn't seen on many m2demo sites is because the sample data is imported with all products having the 'product_options' attribute set to false. It's not until you save the configurable product in the admin that the 'product_options' attribute is set to true. This is as it should be of course. However, the method Magento\Catalog\Block\Product\AbstractProduct::getAddToCartUrl() should not set the product URL as the form option if the only required options are swatch options set to display on the category page as these options can be configured from the Category page.

[rganin]

Fixed under MAGETWO-47017 ticket.

[erikhansen]

@rganin Can you re-open this issue, per my feedback below:

This issue was not fixed in 2.1.3. I tested this in a vanilla 2.1.3 installation with sample data.

As @ntoombs19 pointed out in his Oct 15th comment, the products that are added via the sample data modules can be added to cart. However new configurable products can _not_ be added:

As @ntoombs19 also mentioned, changing the catalog_product_entity.required_options from 1 to 0 and then flushing the cache fixes the issue:

I'm not sure what the proper solution to this problem is: I don't think the correct solution is to just make the catalog_product_entity.required_options field be 0. Instead, what @ntoombs19 mentioned should be implemented:

However, the method Magento\Catalog\Block\Product\AbstractProduct::getAddToCartUrl() should not set the product URL as the form option if the only required options are swatch options set to display on the category page as these options can be configured from the Category page.

[erikhansen]

@rganin Can you re-open this ticket, per my previous comment?