ProductAttribute.ts throws "TypeError: parsedValues.split is not a function"

[phoenixdev-kl]

Current behavior

When product attribute value is of type Number, we get the following error in browser console

Error in render: "TypeError: parsedValues.split is not a function"

Expected behavior

No error message should occur :)

Steps to reproduce the issue

As it would be a pain to setup your system with according product data you might want to set a breakpoint in core/modules/catalog/components/ProductAttribute.ts at or after line 22

let parsedValues = this.product[this.attribute.attribute_code]

and while debugging set the value of parsedValues to lets say 37 or whatever number.

Repository

https://github.com/DivanteLtd/vue-storefront/blob/master/core/modules/catalog/components/ProductAttribute.ts

Can you handle fixing this bug by yourself?

MAYBE, depends if the following is a suitable approach. I would change

let parsedValues = this.product[this.attribute.attribute_code]

to

let parsedValues = this.product[this.attribute.attribute_code].toString()

Environment details

• Browser: Google Chrome 71.0.3578.98
• OS: macOS 10.14.2 (18C54) Mojave
• Node: 5.6.0

Additional information

• VSF connected to Magento 1
• Dockerized

[pkarw]

Thanks! This should work, maybe we could just add type checking. Running this split makes sense just when the value is a string

[phoenixdev-kl]

So, we could change line 27

parsedValues = parsedValues.split(',')

to

parsedValues = typeof parsedValues === 'string' ? parsedValues.split(',') : parsedValues

[pkarw]

Correct. Please do!

[phoenixdev-kl]

@pkarw Sorry I didn't manage to create a pull request last year. Thank you so much for fixing! 🙏

[phoenixdev-kl]

@pkarw I've just noticed an unwanted side effect to this fix: Now another JavaScript error occurs in src/themes/default/components/core/ProductAttribute.vue, line 4:

<span class="weight-700">{{ value|htmlDecode }}</span>

In case value is of type number, htmlDecode fails, as it tries to execute replace() on a number ("TypeError: html.replace is not a function").

We could either add .toString() in src/themes/default/components/core/ProductAttribute.vue or in core/modules/catalog/components/ProductAttribute.ts (to variable parsedValues - as mentioned in initial idea in issue description above)?

[pkarw]

Ok! I think we should add it in *.ts - previously (before this fix you’ve applied) the values were always of type string. So they should keep to this type

[pkarw]

OK I've added this as I wass fixing some other bug related to ProductAttribute

[phoenixdev-kl]

IMHO we have to change

parsedValues = typeof parsedValues === 'string' ? parsedValues.split(',') : parsedValues

to

parsedValues = typeof parsedValues === 'string' ? parsedValues.split(',') : [ parsedValues ]

(return parsedValues as an array) as otherwise computed function value will return an empty string for select attributes. Because for loop two lines later has nothing to loop through:

        let results = []
        for (let parsedVal of parsedValues) {
            ...
        }
        return results.join(', ')