Limiting number of results in Gift Quiz repeater

Ask the community
, ,
1

Hi there.

I’ve built a gift quiz for my website following the this tutorial: https://support.wix.com/en/article/corvid-tutorial-adding-a-gift-quiz-to-a-wix-stores-site .

Everything is working well, however sometimes if there are more than 3 matching products, the results no longer fit into the screen, or require me to make the page size quite large to fit them in.

Is there a way to limit the number of repeater items? I’d like to have a maximum of three items show each time.

Sorry if this doesn’t make sense. I’m a bit out of my depth with it all!

Thanks

2

Unless you are connecting a dataset you will need to do this in code using onClick events from a previous and next button.

The repeater displays whatever you give it in the data property. So you need to break your manually created data into “pages”. Then assign each “page” of data to the repeater’s data property.

When the relevant onClick event is handled you simply overwrite the data property with your next “page” (or previous) and use forEachItem() to render the data.

If you use a data collection connected to a dataset the. You can wire up the dataset API to do this or via the Wix Editor.

https://www.wix.com/code/reference/$w.Repeater.html

Also take a look at the limit( ) function on the data query: https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html#limit
The limit() function defines the number of results a query returns in each page.
You can create a query, add a limit, and run it.

3

Unfortunately, though not incorrect, Yevheniia 's response doesn’t pertain to the Gift Quiz example, which Tim is referring to: https://www.wix.com/velo/example/gift-quiz

When I use the .limit (3) function on the query result, it does then limit the results to only 3, but then you always get the same 3 results, no matter what answers you select. eg:

async function getProductsData(productsIds) {
 // Query the "Products" collection for products whose ID is one of the specified IDs.
 const productsData = await wixData.query("Stores/Products")
        .limit(3)
        .hasSome("_id", productsIds)
        .find();
 // Return the matching products.
 return productsData.items;
}

It appears the .limit(3) overrides the getRandomItemsFromArray function?

According to the Gift Quiz example tutorial video, we should be able to limit the number of items displayed under the getRandomItemsFromArray using numberOfItems:

// Get a specified number of random items from the specified array.
function getRandomItemsFromArray(productsArr, numberOfItems){
 // List for storing the randomly selected products.
 const productsIds = [];
 // Number of products in the specified array.
 const numberOfProducts = productsArr.length;

 // For specified the number of items or the number of products that were specified, whichever is lower: 
 for (let i = 0; i < (numberOfItems && i < numberOfProducts); i++){
 // Get a random valid index.
 const randomIndex = getRandomInt(0, numberOfProducts -1 );
 // Add the product at that random index to the list of selected products.
        productsIds.push(productsArr[randomIndex]);
 // Remove the already selected product from the list of products to select from.
        productsIds.splice(randomIndex, 1);
    }
 // Return the randomly selected products.
 return productsIds;
}

In the tutorial the Wix guide says (video timestamp 08:12: https://youtu.be/qZCRivHafeQ?t=492 or see Step 8 on this Wix Tutorial here: https://support.wix.com/en/article/velo-tutorial-adding-a-gift-quiz-to-a-wix-stores-site),

“For this example, we set the number of displayed items to the number of slides in the slideshow.”
But they don’t clarify how or where. Also, I notice on the Gift Quiz Example page, the number of results (up to 10 products available in the database) often comes back higher than the number of slides (only 3 slides total) in the quiz. So, it’s not entirely clear what they mean by the above quote.

However, it appears the “numberofItems” is declared on this line:

for (let i = 0; i < (numberOfItems && i < numberOfProducts); i++)

So, to answer @Tim’s question, “Is there a way to limit the number of repeater items?” Yes, according to the tutorial there should be and I believe it happens on this line of code “for (let i = 0; i < (numberOfItems && i < numberOfProducts); i++)”

If @Yevheniia Semenina or someone else at Wix could clarify that would be greatly appreciated!