Purpose:
I've noticed that if I scroll down to the 50th or whatever product in my store page and click on said product, when I click back it loads back to the top. I've written a script that is suppose to load the repeater until it reaches the index that is added to the queryParam before the user went to that product page and then scroll down to that row.
Background/the Code:
I have the following function that uses $w('#element').scrollTo()
async function scrollTo(index){
if(!index){
let queryParam = wixLocation.query
index = queryParam['i']
if (!index) {
return
}
}
// PART ONE
let productData = $w('#productsRepeater').data
if (index >= productData.length) {
await loadMoreProducts()
scrollTo(index)
}
// PART TWO
else{
let targetID = productData[index]._id
$w('#productsRepeater').forItems([targetID], ($item)=>{
$item('#productContainer').scrollTo()
})
}
}
the loadMoreProducts() function is simply using .loadMore() along with expanding/collapsing various things to show that its loading more products
export async function loadMoreProducts(event) {
if($w('#productsList').hasNext()){
$w('#loadingMoreAnimation').expand()
await $w('#productsList').loadMore()
.then(() => {
$w('#loadingMoreAnimation').collapse()
$w('#stripLoadMore').expand()
})
}
else{
$w('#stripLoadMore').collapse()
}
}
For the purpose of testing, I've set the pageSize to 4 otherwise all the products will be loaded at once, and I get a better idea of how fast it runs. I've also created a button that runs scrollTo(35) to eliminate the need to click into the product and then back out as well as eliminate any question about it being related to the queryParam.
The test site: https://briapril30.wixsite.com/website-3/shop
Problem:
When I click on the button the first time (when it has not loaded the target index yet), it loads more products properly, but gives the error "Uncaught (in promise) TypeError: Cannot read property 'getBoundingClientRect' of null" in the developer console. This shows that everything in PART ONE does as expected and something seems to be wrong with PART TWO.
However when I click the button a second time (when the target product has been loaded), it scrolls properly to the target index, so clearly PART TWO on its own works as well, despite the documentation saying it doesn't work on elements in repeaters.
For whatever reason when running the code the when the target index has not loaded yet causes PART TWO to not work and results in that type error.
Things I've Already Tested:
I thought it was due to the loadMoreProduct function finishing without the ('#productContainer') element finish rendering, but it still gave me that error when I add a if(('#productContainer').render) test.
I tried separating the two parts into two different scripts and then have a partOne().then(partTwo()) type of thing but that didn't work either.
I commented out $item('#productContainer').scrollTo() and didnt get that error, so the error is definitely involving that line of code.
Any help or suggestions would be appreciated