Preselect of variant and product tile image replacement isn't working properly on PLP for configurable products

[stefliekens]

When using (swatch) filters like color in a clean Magento installation with configurable products:

• the swatch/option is preselected on the product tile
• the images of the product tiles are replaced by the image of the corresponding product variant/option

After installation the elasticsuite module the default Magento behaviour for configurable products isn't working properly

Preconditions

Magento Version : 2.3.7-p3 ElasticSuite Version : 2.9.4 Environment : Developer and Production mode

Steps to reproduce

1. Create configurable products having different colors and sizes (use Magento's sample data)
2. Install the elasticsuite module
3. Make sure the color and/or size attribute is filterable as swatch in the layered navigation
4. Apply a one color filter on a category page

Expected result

When filtering one specific color/variant, we expect the same behaviour as default Magento as screenshot below.

• preselect the color/variant
• replace image based on the image of the color/variant product

When filtering multiple colors/variants, we expect the behaviour as is for now: no preselect and image of configurable product.

Actual result

When using elasticsuite layered navigation the preselect isn't working and the images aren't replaced properly during filtering by one color/swatch/variant.

Applied fixes

We have made those workarounds in our project:

We have created a mixin for the swatch-renderer.js to replace the DOM selector by option-label attribute instead of option-id to preselect options in product tiles on category pages after filtering with layered navigation.

        _EmulateSelected: function (selectedAttributes) {
            $.each(selectedAttributes, $.proxy(function (attributeCode, optionId) {
                var elem = this.element.find('.' + this.options.classes.attributeClass +
                        '[attribute-code="' + attributeCode + '"] [option-label="' + optionId + '"]'),
                    parentInput = elem.parent();

                if (elem.hasClass('selected')) {
                    return;
                }

                if (parentInput.hasClass(this.options.classes.selectClass)) {
                    parentInput.val(optionId);
                    parentInput.trigger('change');
                } else {
                    elem.trigger('click');
                }
            }, this));
        },

For images we have made a patch for \Smile\ElasticsuiteSwatches\Helper\Swatches to make sure the preSelectedGallery property of the JSON has the images of the variant/swatches.

--- a/vendor/smile/elasticsuite/src/module-elasticsuite-swatches/Helper/Swatches.php        2022-05-13 10:12:40.000000000 +0200
+++ b/vendor/smile/elasticsuite/src/module-elasticsuite-swatches/Helper/Swatches.php        2022-05-13 10:13:34.000000000 +0200
@@ -139,7 +139,10 @@

             foreach ($configurableAttributes as $attribute) {
                 foreach ($attribute->getOptions() as $option) {
-                    $allAttributesArray[$attribute['attribute_code']][] = (int) $option->getValue();
+                    if (isset($attributes[$attribute['attribute_code']]) &&
+                        $attributes[$attribute['attribute_code']] === $option->getLabel()) {
+                        $attributes[$attribute['attribute_code']] = (int) $option->getValue();
+                    }
                 }
             }

[romainruaud]

Hi @stefliekens

This is working here : http://demo.magento-elastic-suite.io/index.php/women/tops-women/jackets-women.html

The version of this environment is different from yours by the way, so maybe this is something specific to your version of Magento ?

[vahonc]

Hello @stefliekens,

I tried to reproduce this issue according to your preconditions with the only difference being that I was using Magento 2.3.7-p2 with default sample data and ES 2.9.4. But I don't think it matters much.

In any case, I didn't notice any problems with filtering one or more colors/variants, everything works as we expected. Just look at my screenshots.

As you can see, when filtering multiple colors/variants, we don't have pre-selected colors on products but images of configurable product s represent the selected colors.

Perhaps, we not clear understand your issue or in your environment there are some specific configuration of colors and images for your configurable products or it could be linked to some third-party modules.

So, please provide us more details with screenshots from your environment before you applied the fix that you suggested.

BR, Vadym

[romainruaud]

It seems that I misunderstood your issue, I probably read it too fast.

If I'm correct you want the following behavior :

• filter on blue : see all blue variations of products (working)
• filter on orage : see all orange variations of products (working)
• filter on blue AND orange : see DEFAULT variation of products (not working, because actually we display a mix of blue and orange variations).

If that's the case, I don't think that's something we'll implement on the product : having a mix of selected colors seems to be the better option for us.

Regards

[github-actions[bot]]

This issue was waiting update from the author for too long. Without any update, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away! Thanks for your contribution.

[stefliekens]

hi @romainruaud and @vahonc,

Frist of all, my apologies for my late reply.

I was wrong about the product images of the tiles. We had a custom implementation to show different images based on screen sizes (mobile & desktop).

But the preselect of the (color)option for each product tile isn't working when using one (color)filter. Below a screenshot of the default Magento functionality with indication of the preselect what I'm talking about: