Type 'Number' not assignable to type 'String' error

I have setup a custom product page for stockists of my candle store. I am using a repeater connected to the Products collection via a dataset. The dataset is filtered to display only products in the store contained in the Wholesale collection.

I have added some other custom dropdowns for product options (colour, fragrance, glass type) which are also connected to respective datasets containing the options for each dropdown selection.

The problem I am having is with custom buttons and an input (set to type Number) I have placed inside the repeater.

I am trying to increment the #quantity field using a plus or minus button.

I am getting an error in the code on all $item ( ‘#quantity’ ). value= lines.

My code is as follows, any pointers as to what is going wrong here would be greatly appreciated.

import wixData from ‘wix-data’ ;

$w . onReady ( function () {

$w ( “#dataset5” ). onReady (() => {
let current = $w ( ‘#dataset5’ ). getCurrentItem ();
$w ( ‘#repeater1’ ). onItemReady ( ( $w , $iteitemData , index ) => {
$w ( “#repeater1” ). forEachItem ( ( $item , itemData , index ) => {
$w ( ‘#Glass’ ). hide ()
$w ( ‘#colour’ ). hide ()
$w ( ‘#fragrance’ ). hide ()
$w ( ‘#glasschoice’ ). hide ()
if ( $w ( ‘#Glass’ ). value === “False” ){
$w ( ‘#glasslabel’ ). hide ()
$w ( ‘#glassMedStd’ ). hide ()
}
$w ( “#cart” ). onClick ( ( event ) => {
let currentValue = Number ( $item ( ‘#quantity’ ). value );
let id = itemData . _id ;
console . log ( "Id: " + id );
console . log ( itemData . checkoutReference );
$w ( ‘#shoppingCartIcon1’ ). addToCart ( id , currentValue )
. then (() => {
console . log ( “Product added” );
})
. catch (( error ) => {
console . log ( error );

$item ( ‘#decreaseqty’ ). onClick (() => {
if ( currentValue < 1 ) {
$item ( ‘#quantity’ ). value = 0 ;
} else {
console . log ( "Current value: " + currentValue );
let minusValue = currentValue - 1 ;
console . log ( "Minus value: " + minusValue );
$item ( ‘#quantity’ ). value = minusValue ;
}
});
$item ( ‘#increaseqty’ ). onClick (() => {
let currentValue = Number ( $item ( ‘#quantity’ ). value );
console . log ( "Current value: " + currentValue );
let plusValue = Number ( currentValue ) + 1 ;
console . log ( "Plus value: " + plusValue );
$item ( ‘#quantity’ ). value = plusValue ;
})
} )
})
})
})
})
})

The input type is a text input, which can be set to accept only numbers, but it will return and accept ONLY strings (“text-input”). To get rid of the error, you will have to do a type conversion back and forth: to set it in

$item('#quantity').value=0;

you will need to set it to a string first, like “0” , not 0. When you read it back or save it to a number field in a collection, you will have to type-convert again, using parseInt() or parseFloat() or NUmber, like you did before.
It’s a pain, I know, but that’s the way it is, for now.

Kindly elaborate on this. I am stuck on this issue too.


Kindly help me out.

Try this:

$item('#quantity').value = "0"

Or if you want it to be a number string:

$item('#quantity').value = minusValue.toString()

Just like Zano said before, if you want to set it back to a number string, you have to use parseInt(), or parseFloat()

Happy coding!

Thanks a ton Alex. If possible can you please send code using parseInt(), or parseFloat()., Like where to put exact. And as u mentioned Number, How to use it. I am not able to add products to my cart. Plz help.
Thanks in advance : )

@onlinesanawad

So this is a string:

let string = "0"

This is a number:

let number = 0

A string has quotation marks around it, a number doesn’t. A text element can only display strings, not numbers. Thats why you have to do this:

$w('#TEXT_ELEMENT').text = number.toString()

The way to convert a string, to a number is using parseFloat(). Like this:

let number = parseFloat(string)

You can then use this for math equations.

In regards to the add to cart button not working, do you get any errors?

You could also try using this API: addProducts - Velo API Reference - Wix.com

I prefer it to the one you are using

@alexobc Thank you so much Alexobc, I will try to understand and learn. Thanks for this effort for me.