I have created a product database collection as shown below image:
I tried to create a Dynamic Category Page that only show the 3 Series from Car Audio and when I click the Series name, it will go to the Dynamic Item Page. But I have no clue how to do it.
Below is what I did:
Create a new page and add a Dataset that connect to my product database collection
Under dataset setting, create a filter that only show when Category field is “Car Audio”
Add a Repeater under List & Grids then connect it to product dataset
However, the result shows all 6 items from Car Audio instead of the 3 series names.
Can anyone know how to fix it that will only show the 3 series names: Blade Series, Dark Series, and Skull Series?
First , add a dataset and a repeater to your page and connect only the dataset to the database collection. Second, filter your dataset to present only the category “Car Audio”. Third , had an event handler that run when the dataset’s ready and follow the code below:
1. let checkSeries = [];
2. let objects = [];
3. $w.onReady(() => {
4. $w('#dataset').onReady(async () => {
5. let count = $w('#dataset').getTotalCount();
6. let results = await $w('#dataset').getItems(0, count);
7. createObjects(results.items, count);
8. $w('#repeater').onItemReady(($w, itemData, index) => {
9. $w('#text').text = itemData.point
})
10. $w('#repeater').data = objects
});
});
11. function createObjects(items, count) {
12. for (let i = 0; i < count; i++) {
13. if (!(checkSeries.includes(items[i].series))) {
14. checkSeries.push(items[i].series);
15. objects.push(items[i]);
}
}
}
Explanations:
Line 4: Create an event handler that run when the dataset is ready.
Line 5: Get the number of items (The dataset is already filtered).
Line 6: The resolve of the promise is all of the dataset’s items.
Here you can read more about getItems() function.
Here you can read more about async and await.
Line 8: Set the onItemReady function for the repeater, and connect each element at the repeater to the relevant field from the collection.
Here you can read more about onItemReady() function.
Line 10: Sets the repeater data- the data is going to be an array of objects that includes only unique series.
Here you can read more about that.
Line 11-15: The function gets as parameters, array of items and the number of items from the dataset.
In the loop, we check for each item, if the series is already existed at the checkSeries array.
If not, insert this series to the array and also insert the current item to the objects array.
Use the onReady() function for code you want to run before the user starts interacting with your page.
This function runs when all the page elements have finished loading.
