swatch-renderer-mixin.js is broken PDP

[fernandofauth]

swatch-renderer-mixin.js is broken PDP when config is undefined

if (_.isUndefined(config.jsonConfig.images)) return create(config, element);

[jordanvector]

This breaks all config products with a js type error on the page that looks like this

swatch-renderer-mixin.js:11 Uncaught TypeError: Cannot read property 'jsonConfig' of undefined
    at Object.<anonymous> (swatch-renderer-mixin.js:11)
    at new <anonymous> (wrapper.js:78)
    at Function.$.widget (widget.js:75)
    at swatch-renderer.js:1
    at mixins.js:105
    at Array.forEach (<anonymous>)
    at applyMixins (mixins.js:104)
    at mixins.js:129
    at Object.execCb (require.js:1650)
    at Module.check (require.js:866)

[jorgb90]

Serious problem.. Any idea how to fix it? We rely heavily on configurable products.

Edit:

For now removed the swatch-renderer-mixin.js from the requirejs-config.js to temporarily solve the above problem.

[jordanvector]

@jorgb90 We downgraded for now to fix this issue

[vvuksan]

Thanks for the report. We have pulled the 1.2.157 version while we address the issue.

[Lukas713]

Hi @jordanvector, @fernandofauth , I've added an additional validation. PR

Can you give me example of configurable product that has empty or undefined config object at pdp.
Thanks

[jorgb90]

@Lukas713 We literally had it for every configurable product on our website.

[Lukas713]

@jorgb90 is there a chance that you send me a link to a staging server. Or gie me a magento store version.

[Lukas713]

@jorgb90 @jordanvector @fernandofauth

the mixin is tested with Magento 2.3.0 and Magento 2.4.2 with various configurable products. Can you give me scenario where config object is empty but images are rendered.

[pmarki]

We have the same issue with latest Magento 2.3.6-p1.

[Lukas713]

Hi @pmarki

I've just tested with magento 2.3.6 using luma theme. Can you give me more info to reproduce the issue.

Thanks

[Lukas713]

Hi @pmarki , @jorgb90 , @jordanvector, @fernandofauth

I've made commit that also validates config object at swatch-renderer-mixin.

I've tested it with magento 2.3.6, 2.4.0 and 2.4.2 with magento luma theme and sample data. It seems that it works as expected.

Can you give any feedback on this. Thanks

[DanilSA]

Please, do not use wrapper.wrap method to extend the jQuery Widget!

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_mixins.html#extend-jquery-widget

[jorgb90]

@Lukas713 We are running 2.4.2-p1. I can give you access to a dev environment, if you still want to. We are running configurables with visual and text swatches, not dropdowns.

[Lukas713]

@jorgb90 you can check here. Size and color are text value and swatch value. this.options property is not undefined.

However, I've added additional config validation to the pull request.

[dpotkoc]

Hello @jorgb90 it will be helpful if you could provide us access to dev server, also please send us exactly steps how to reproduce this issue.

Thanks in advance
Domagoj

[dpotkoc]

@pmarki @jordanvector @fernandofauth Please, could you send me exactly steps how to reproduce this issue.

Thanks in advance
Domagoj

[jorgb90]

@jorgb90 you can check here. Size and color are text value and swatch value. this.options property is not undefined.

However, I've added additional config validation to the pull request.

I dont see any visual or text swatches on your link? I only see dropdowns. You should set the attributes accordingly.

[Lukas713]

Hi @jorgb90 ,

size and color are changed in visual swatch and text swatch. this.options or this.options.jsonConfig properties are still not undefined, neither is config object undefined (if wrapper is used).

You can check here .

[dpotkoc]

Hi @jorgb90 @pmarki @jordanvector @fernandofauth any chance to get steps how to reproduce this issue.

I will be really appreciate.

I am testing on 2.4.2 and I can't get this error. In next days we will make update on swatch-renderer-mixin.js and make it on properly Magento way.

Thanks
Domagoj

[jorgb90]

Hi @jorgb90 ,

size and color are changed in visual swatch and text swatch. this.options or this.options.jsonConfig properties are still not undefined, neither is config object undefined (if wrapper is used).

You can check here .

You mean its working now with your commits or also without? I havent tested your commits as of yet.

[jorgb90]

Hi @jorgb90 @pmarki @jordanvector @fernandofauth any chance to get steps how to reproduce this issue.

I will be really appreciate.

I am testing on 2.4.2 and I can't get this error. In next days we will make update on swatch-renderer-mixin.js and make it on properly Magento way.

Thanks
Domagoj

I am not doing anything special just have configurable products in Magento which uses swatches. As I said above I havent tested the commits created by @Lukas713 as of yet, so I guess that will fix the issue?

I havent connected anything to the Fastly service at the moment, but I can try it out today on our dev. Hopefully @pmarki @jordanvector @fernandofauth can also provide some answers.

[jorgb90]

@dpotkoc @Lukas713 Sorry it took a while but with your commits everything is working as expected.

[vvuksan]

Fixed with #457. Will be part of 1.2.158.

[jordanvector]

I can confirm this is resolved in latest version 1.2.158