Hello,
I m developing a product configurator for my website, based on this article
I am having an issue with the show function. I found another discussion with a near identical situation, but I do not understand what the solution was or what my problem is.
The problem appears to be with the for loop, which is meant to collapse all other categories when one is selected. I have pasted the code below, which is identical to how the article tells me to set it up (with the exception that I changed the id’s to what they are on my site). However, I am still getting the error, and the for loop which is meant to collapse all the other repeaters is not working when I preview the site. Even If you understand the conversation in the other discussion and could shed some light that would be great. Thank you.
function toggleFold(index) {
let $fold = $w(`#option${index}Box`);
let $downArrow = $w(`#downArrow${index}`);
let $upArrow = $w(`#upArrow${index}`);
if ($fold.collapsed) {
$fold.expand();
$downArrow.show();
$upArrow.hide();
} else {
$fold.collapse();
$downArrow.hide();
$upArrow.show();
}
for (let i = 1; i <= numberOfChoices; i++) {
if (i !== index) {
$w(`#option${i}Box`).collapse();
$w(`#downArrow${i}`).hide();
$w(`#upArrow${i}`).show();
}
}
}
The issue is stated as being on line 227 of your code, so what is on that specific line?
Also, this part of the product configurator code is another take on this example below with this one setup for using with repeaters.
https://www.wix.com/corvid/example/collapse-elements
So I would double check your setup and make sure that you have the correct id of elements in it and that you have also made sure that you have the correct containers set to be collapsed on load and not the repeaters which are inside the containers, along with the buttons that have the onClick function and not the up or down arrows.
As it states in the other article that you have linked, check what gets used for the error line in the options and double check that you have the right id names for them and that they are spelt correctly in your code with it always being a lowercase first. So it would be like this #myElementHere and not #MyElementHere
Also, double check your code for this line here as changing the example given will bring up an error with the number of choices being undefined unless it matches up with the const line at the start of your code
for (let i = 1; i <= numberOfChoices; i++) {
In example
for (let i = 1; i <= NUMBER_OF_CHOICES; i++) {
Have you got this line set as numberOfChoices?
const NUMBER_OF_CHOICES = 4;
Also the product configurator example it only has about 190 lines of code, so wondering how you get an error on line 227, do you have a lot of other code on this page or is it all for the product configurator?
numberOfChoices is what I set the variable to be in the beginning of the code, and I had to change in the loop from the example to match my code. so to answer your question, yes, I have that line you wrote set as “numberOfChoices”
Line 227 is for the for loop for the configurator, where I have the .show() function. The reason there is more code is because I have twelve options to be configured, rather than the four options in the example from the article.
@givemeawhisky I tried the alternative code from the article you linked. I changed the names of the id’s to match my own, and then ran it. I got the exact same error, and line 231 is where the .show() function is again. I am starting to feel like the error is actually somewhere else, or this is a bug, because I used two different methods to achieve the same outcome and I got the same error. Below is the code and screenshot.
function toggleFold(index) {
let $fold = $w('#option' + index);
let $arrowDown = $w('#downArrow' + index);
let $arrowUp = $w('#upArrow' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowUp.hide();
}
else {
$fold.collapse();
$arrowDown.hide();
$arrowUp.show();
}
// collapse the other folds
[1,2,3,4,5,6,7,8,9,10,11,12]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#option' + idx).collapse();
$w('#downArrow' + idx).hide();
$w('#upArrow' + idx).show();
})
}
You need to go back to the code from the product configurator and DO NOT use the fold toggle code from the other example as that is just setup for using it with containers on your page.
That was just to show you another similar example that uses the same principle of what you are doing here with the clicking of buttons to open and close your containers which contain your repeaters.
You need to use the code in the product example as that is specifically written to be used with repeaters which you are using in the tutorial.
Also, what is the full line of code that the show is not a function error message is for, as I have got the product configurator example open and it all works fine for me.
Which show function is causing the error message?
From the Wix example
$arrowDown.show();
or
$arrowUp.show();
or
$w(#arrowUp${i}).show();
From your code sample
$downArrow.show();
or
$upArrow.show();
or
$w(#upArrow${i}).show();
Whichever line that error message is on, then make sure that the element id in the code matches with the element id on your page.
And yes that does that all twelve (12) of your upArrow and all twelve (12) of your downArrow must match up exactly.
I figured out the issue. One of my id’s was the same was not unique, so it autocorrected to vectorImage and I didn’t realize it. Thank you for your help.
