Repeater - Select Product Category Programmatically

Ask the community
,
1

I have a repeater and it works just fine. I want to programmatically change the Collection Name with some code. I know a bit of Javascript but am not sure how to approach it. Can anyone help me with this?

I would appreciate the help.

2

Hi,

Can you explain what are you trying to achieve?

3

First, thanks for responding.
I have a webpage with a slideshow at the top of the page below the heading. I have some javascript that allows it to cycle through all of it’s images (presently 10). Each image is on the screen about 10 seconds. These images visually represents the 10 categories (Collections) of products. I want the Repeater that occupies the lower 1/3 of the page below the slideshow. When the slideshow changes image, I want the Repeater to display the product from the corresponding category (Collection).

I hope this makes sense to you and thanks for any help.

4

Hi, you can probably use the onChange function for the slideshow, and inside that function run a query for the corresponding collection. Something like this maybe:

*Edit - Create the onChange event form the panel in the Editor.
*Edit 2 - Sorry I forgot to mention that you must rename the slides in the Editor according to your collections’ names. Therefore, if slide1 contains the image of CollectionA, then you must name it CollectionA, and so on.

import wixData from 'wix-data';

$w.onReady(function () {
 //TODO: write your page related code here...

});

export function fullWidthSlides1_change(event) {
 let slide = $w("#Slideshow").currentSlide
 let slideName = slide.name; // "Slide 1"

    $w("#repeater1").onItemReady( ($w, itemData, index) => {
        $w("#text1Repeater").text = itemData.title
        $w("#text2Repeater").text = itemData.description
        $w("#imageRepeater").src = itemData.productImage
    });

    wixData.query(slideName)
    .limit(1)
    .find()
    .then((results) => {
        $w("#repeater1").data = results.items
    })
}

Replace the text in blue with your ID’s. I used “title” “description” and “productImage” as field keys for this example but you must use yours (you can check for them in your collection). Now this means that you should have the same field keys in each collection. Lets say you have a field called Product Name, its field key should be productName, and you may want to have it on every collection for this code to work properly. Otherwise you may want to run a query with .eq and .or, or something like that.

In addition, I used .limit assuming that you have more than one item in your collections, and you want to display information of one of them. Now, if I’m not wrong it will be the most recent.

5

I appreciate your response and the time you spent on it.
I think I have simplified the problem. I need to show this to my client in the next few days so I want to make it as simple as I can while I am learning WIX.

I now have the Repeater defined as follows:

  1. The repeater is driven off of the Stores/Products Dataset
  2. The Dataset has a filter that uses the SKU field of the items to have the Repeater show the proper
    items matching the current slide in the Slideshow.

Below is the code I have added that triggers on the Slideshow change event. I want to code the part that is in pseudo code below.

import wixData from ‘wix-data’;
var i = 0;
var category = [“Kids Tools”,“Furnature”,“Stuffed Animals”,“Books”,“Wall Art”,“Rocking Things”,“Ride On”,“Clothing”,“Towels & Things”,“Stickers”]
var category_name = “NONE”;

export function slideshow1_change(event) {
i = i + 1;
category_name = category[i];
$w(‘#textDISPLAY’).text = category_name;

*# Pseudo code follows ********
# . 1. let filterVal = first 2 characters of the category_name
# 2. Set the filter on the Repeater to - Condition = “starts with”
# 3. Set the filter on the Repeater to Value = filterVal
*# Pseudo code end here *************

if (i === 2) {i = -1}
}

That way as the slides cycle through their category name (the first 2 letters) should drive what the Repeater shows.

I hope this is simpler.

Thanks
Fred

6

I tried to implement the Pseudo Code above and it looks correct to me, but it does not work. The Repeater still shows all of the products.

Can anyone shed some light on why this does not seem to filter dataset1?

HERE IS THE CODE THAT WORKS OFF OF THE slideshow1_change(event) EVENT

import wixData from ‘wix-data’;
var i = 0;
var category = [“Kids Tools”,“Furnature”,“Stuffed Animals”,“Books”,“Wall Art”,“Rocking Things”,“Ride On”,“Clothing”,“Towels & Things”,“Stickers”]
var category_name = “NONE”;

export function slideshow1_change(event) {

var prefix = “”
// Set up for starting matrix pointer
i = i + 1;
category_name = category[i];

// Set 2 character prefix = first 2 characters of the category_name
prefix = category_name.substring(0,2)
// USED FOR DEBUGGING → $w(‘#textDISPLAY’).text = prefix
$w(“#dataset1”).setFilter( wixData.filter()
.startsWith(“SKU”, prefix)
)
// Check to see if we need to cycle around again
if (i === 2) {i = -1}
}

7

Does the console throw some error? I assume #textDISPLAY is showing “prefix” according to the slide that is currently being displayed, therefore your code should be ok until there and the problem must be with the filter or with the connection between repeater/database. Just in case -I’m not 100% sure- try using the field key value as property for .startsWith, meaning “sku” instead of “SKU”. And regarding the connection, I would think the repeater updates automatically when the on change event triggers.

8

Rodney, thank you, Thank You, THANK YOU. It was the sku instead of SKU.
It works!!!

9

Great!