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.
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!