0

I am currently working on coding a search results page which is set up using a repeater so that the repeater container is able to redirect users to a Dynamic Page.

The datasets used on both the repeater and the dynamic pages are linked by the 'number' field in the relevant collections. So if the repeater is showing the detail for "1" in the number field then the user can click on the container box and be redirected to the dynamic page for "1". I have managed to get this working fine in that I am redirected to the correct Dynamic Page when I click on the relevant container. However, some numbers which exist in the dataset for the repeater don't exist in the dataset for the Dynamic Pages. So I could have numbers 1-50 in the dataset for the repeater but only 20 of those exist in the dataset for the dynamic pages and at the moment if the container contains a number that doesn't exist in the dynamic page, it still tries to redirect but just leads to a 404 error page where I would prefer it that, in this situation, the container is simply not clickable.

I have so far tried the following code:

$w('#Dataset1').onReady(() => {
  wixData.query('Collection1')
    .eq('number', number1)
    .find()
    .then(res => {
      const number1 = res.number1;
    })
    .catch ((err) => {
      let errorMsg = err;
    });
    wixData.query('Collection2')
    .eq('number', number2)
    .find()
    .then(res => {
      const number2 = res.number2;
    })
    .catch ( (err) => {
      let errorMsg = err;
    });

    if (number1 === number2){
$w("#container2").onClick( (event) => {
    
    

 let $item =  $w.at(event.context);
 let currentItem = $item('#Dataset1').getCurrentItem();
 let dynamicPageID = `${currentItem.number}`
 let collectionID = `${currentItem.title}`
 
   console.log('https://www.mywebsite.com/'+collectionID+'/'+dynamicPageID);
 wixLocation.to('https://www.mywebsite.comk/'+collectionID+'/'+dynamicPageID);
 });
    }
});
}

But this still redirects to dynamic pages where the number doesn't exist and sends to a 404 error!

Could anyone kindly point me in the right direction please?

Thanks

After Sam's suggestion regarding async/await, I have been playing around with the code but still failing to find a working solution. I have tried the below:

async function linktodynamicpage () {
$w('#Dataset1').onReady(() => {
  wixData.query('Collection1')
    .eq('number', number1)
    .find()
    .then(async(res) => {
      const number1 = await res.number1;
    })
    .catch ((err) => {
      let errorMsg = err;
    });
    wixData.query('Collection2')
    .eq('number', number2)
    .find()
    .then(async(res) => {
      const number2 = await res.number2;
    })
    .catch ( (err) => {
      let errorMsg = err;
    });

    if (number1 === number2){
$w("#container2").onClick( (event) => {
    
    

 let $item =  $w.at(event.context);
 let currentItem = $item('#Dataset1').getCurrentItem();
 let dynamicPageID = `${currentItem.number}`
 let collectionID = `${currentItem.title}`
 
   console.log('https://www.mywebsite.com/'+collectionID+'/'+dynamicPageID);
 wixLocation.to('https://www.mywebsite.comk/'+collectionID+'/'+dynamicPageID);
 });
    }
});
}

I have tried a few variations of this, trying to move the async about but to no avail unfortunately.

Just thought I would see if I am getting the async code right or if there are errors. That way, at least I know if the async/await option is a viable solution to my problem.

Thanks

The_Train
  • 319
  • 3
  • 11

1 Answers1

0

My guess is that this has something to do with the Promises in your code. At the time you check if number1 is equal to number2 your queries have not resolved and they are therefore both undefined and always equal to each other.

To solve the problem, you can switch to using async/await syntax, or use Promise.all() to wait for both queries to resolve before doing the comparison.

The edit still doesn't wait for the queries to resolve. You need something more like this:

async function linktodynamicpage () {
  $w('#Dataset1').onReady(async () => {
    const number1 = await wixData.query('Collection1')
      .eq('number', number1)
      .find();
    
    const number2 = await wixData.query('Collection2')
      .eq('number', number2)
      .find();

    if (number1 === number2){
    
    // the rest of the code...
Sam
  • 886
  • 1
  • 5
  • 8
  • Thanks for your response @Sam - I have edited my original post with further details following on from your async/await suggestion. If you could check through it and let me know your thoughts it would be appreciated. Cheers – The_Train Apr 05 '21 at 19:24
  • @The_Train I have added an edit to address your edit. This code waits for the two queries to resolve before moving on. Theoretically, it would be better to use a `Promise.all` here so that you can run the queries in parallel. You can try that as well. – Sam Apr 06 '21 at 05:22
  • thanks for that extra info. I tried your code but it didn't work so I have attempted to build on it whilst also using Promise.all but to no avail so far - it is either a case that nothing is clickable or everything is clickable dependent on which route I take with the code. I think I need to read up more on Promise.all and then have another crack at it so will report back when I make further progress. Thanks for your help so far though – The_Train Apr 10 '21 at 13:29