Looking for Best Practice for How to Set Repeater

Ask the community
,
1

Hi Wix

I’m wondering if someone could point me in the right direction in terms of best practice for setting repeaters with code.

I’ve got a few items in a repeater that need to search different collections before they are set.

Is it best to go…


$w.onReady(function () {

    $w("#myDataset").onReady(() => {

        $w("#myRepeater").forEachItem(($item, itemData, index) => {

            doThing1($item, itemData);
            doThing2($item, itemData);

        });

    });

});
    
function doThing1($item, itemData) {
    
    // do wix data query collection 1
    $item("#image1").src = itemData.src1;
    
}
    
function doThing2($item, itemData) {
    
    // do wix data query collection 2
    $item("#image2").src = itemData.src2;
    
}

or …


$w.onReady(function () {

    $w("#myDataset").onReady(() => {

        $w("#myRepeater").forEachItem(($item, itemData, index) => {

            // do wix data query collection 1
            $item("#image1").src = itemData.src1;

        });

    });

});

$w.onReady(function () {

    $w("#myDataset").onReady(() => {

        $w("#myRepeater").forEachItem(($item, itemData, index) => {

            // do wix data query collection 2
            $item("#image2").src = itemData.src2;

        });

    });

});

Thanks in advance!

2

It’s really depends on what and where you use these collections.
Maybe it’ll be better to run an after_query data hook in backend/data.js, so all the additional info will go through the dataset (and if the queries are independent, run the in parallel within Promise.all([query1.find(),query2.find()])

https://support.wix.com/en/article/velo-using-data-hooks

https://www.wix.com/velo/reference/wix-data/hooks/afterquery

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

3

Hi JD

Thanks for the nudge in the right direction. I realize I probably wasn’t very descriptive before.

The first query is linked to a ‘stores’ collection. It just counts the number of stores the owner of the repeater item has.

The second query is linked to a ‘products’ collection. It counts the number of products the owner of the repeater item has.

Both then add a number to the repeater item. “XX Stores” and “XX Products”. Clicking it goes to their store page. Nothing too complex.

Do you still recommend the above? If so, I can start to dig into it and see if I can figure it out.

Thanks again and all the best!

4

So my suggestion should be relevant to your use case.

5

Hi JD

I’ve been trying to figure out the data-hooks and I can’t seem to find any examples or a complete how-to step-by-step I can copy from.

E.g. page code / backend code / set to repeater.

If I could see a complete example, I could likely just figure out the rest from there. Would you be able to help with something (very simple) I could use to just help upstand the steps? Then I could amend it to accommodate my needs after.

Thanks in advance if you are able to help!

6

Let’s say you connect a ‘Members’ dataset to the repeater and you want (in addition to the Member public info) to show how many stores and products each member has (I’ll assume for the sake of the example it’s not the Wix Store and Products system collections, but it’s doable for those collections as well with some adjustments).

So in data.js

export function Members_afterQuery(item) => {
 return Promise.all([
  wixData.query('Stores')
  .eq('_owner', item._id)
  .count({suppressAuth:true}),
  wixData.query('Products')
  .eq('_owner', item._id)
  .count({suppressAuth:true})
 ])
 .then(r => {
  item.numOfStores = r[0];
  item.numOfProducts = r[1];
  return item;
 })
}

Then you can use these data on the front-end (these fields will be added to your dataset and to your repeater.