wixLocation.to(path) doesn't load dynamic pages properly

Ask the community
,
1

When I view my page in preview, it works fine; when I load my page, it works fine; but when I use wixLocation.to(path) to move from one dynamic page to another, certain elements in repeaters don’t load properly. Things like setting the element.style property and .show()/.hide() don’t seem to work.
When logging within the onItemReady() of the repeater, it shows the correct values being logged, but the code seems to interact with the elements BEFORE the page is done switching to the new dynamic page but then load the default values of said elements.

wixLocation.to(baseUrl+path) works, but that seems to reload the page entirely as if you were going to a different site rather than navigating within the same site, if that makes any sense.

For example: the color options on the right are suppose to load with a red outline indicating the current color, when I click to another product, you can see the white is deselected and the yellow circle shrinks (which is part of the script so that the red outline and the actual color has some empty space in between), however then it just goes back to the default color of the circle element (which is the same red as the outline)

// the page's onReady calls a function that calls loadColorOptions()
async function loadColorOptions(color, product) {
 let skuP1 = product['skuP1']
 let currentColor = product[color][0]['value']
    $w('#' + color + 'Text').text = 'Color: ' + currentColor
    $w('#' + color + 'Repeater').onItemReady(($r, option) => {
        colorOnReady($r, option, color, product)
 })
 await wixData.query('MyStore')
 .limit(100)
 .eq('skuP1', skuP1)
 .distinct(color)
 .then((result) => {
            $w('#' + color + 'Repeater').data = result.items.sort(function (a, b) {
 return sortColors(a, b)
 })
            $w('#' + color + 'Repeater').show()
 })
}

function colorOnReady($r, option, color, product) {
 let currentColorHex = product[color][0]['hex']
 let currentColor = product[color][0]['value']
 $r('#' + color + 'OptionCircle').style.backgroundColor = option.hex
 if (option.hex === currentColorHex) {
        $r('#' + color + 'OptionCircle').style.borderWidth = '4px'
        $r('#' + color + 'OptionCircle').style.borderColor = '#FFFFFF'
        $r('#' + color + 'OptionCircleOutline').show()
 } else {
        $r('#' + color + 'OptionCircle').style.borderWidth = '1px'
        $r('#' + color + 'OptionCircle').style.borderColor = '#000000'
        $r('#' + color + 'OptionCircleOutline').hide()
 }
}

I have tried calling the functions using onChange(), after the wixLocation.to(), placing it in the dataset.onReady, but none of those work.
Is this a bug or what am I missing here?

2

It’s not easy to answer, as posted only parts of the code (for example: you call the sortColors() but we don’t know what this function does. + the issue can be somewhere else in the code you haven’t posted).
One comment: you don’t need the await (but the problem is somewhere else).

3

I could post the whole code, but doubt people want to decode the whole thing. Which is why I posted as little as possible to show the concept of what is suppose to happen. All sortColors() does is sort the list of colors by hues/saturation. And I know for sure that isn’t the root because another repeater that involves show/hide doesn’t work either and doesn’t use that function. You can see the left side all of the pictures gets a red line underneath when it should only be one (the one that is in the main display).

Any idea why it loads perfectly fine when loading it normally, refreshing it, etc. but won’t work when using wixLocation.to() to go from one dynamic page item to another?

And as I’ve said, the only work around seems to be using wixLocation.to(baseUrl+path) instead of just (path). In terms of load times for me, it seems to be fine, but I don’t know if it will affect SEO, data consumption, etc.

4

@briapril30 I don’t know, and I’m not sure you posted all the info that might be relevant.
But I’d try, instead of using repeater.onItemReady(), to use repeater.forEachItem() and put the forEachItem after you assign the data to the repeater.