Coding the repeaters in Wix Code

Discussion Ask a question
,
1

In this video you will learn how to code with repeaters and making a dropdown a dynamic filter for your repeater. This is really powerful and useful in all projects. Happy coding.

7 Likes
2

Nice work Andreas. Thanks so much for sharing this.

1 Like
3

You are all welcome to send wishes for videos to hello@wixshow.com

1 Like
4

Where can I find the source code for this?

5

Hey
Code will be sent to all that has a Pro Subscription or you can buy the code for 5$ in our shop. I hope you understand that we have to find all ways of getting supported, we work full time trying to teach Wix Code and need some kind of income :frowning: Hope that you want to support us too.

3 Likes
6

I have a premium plan , unlimited with unused $300 ad vouchers, Site booster app, form builder app
Refer attached and kindly advise?

As a customer I am disappointed that you are asking to pay for sample code. Sample code should be a part of your help / video article. This is a unprofessional business business practice and you should forward this feedback to the decision makers in your company.

218Ɨ590 8.27 KB

1 Like
7

Hey, I am not a part of Wix team, I run wixshow.com as a online site for teaching Wix Code. So donā€™t missunderstand me or the offers. I am just trying to help people and make a living doing so. But please do note that me or my Wix Show project is not connected to Wix in any way so donā€™t get confused in anyway please.

Send me an email to hello@wicxshow.com and I will attach the code for you for free because of the unlucky missunderstanding of my business.

4 Likes
8

Apologies for the confusion.

-Yashika

3 Likes
9

Hello Andreas

You said code will be sent to all that has a ā€˜Pro Subscriptionā€™!

How do premium members request for the codes, please elaborate.

Thanks in advance.

Anupam Dubey

10

hey Anupam!
When you have a subscription on wixshow.com in the PRO Video Channel I will get notified and then you will get a coupon for the codes available in our shop. Simple but works. Happy New Year!

11

Great explanation video. Iā€™ll checkout the others too.

12

Hi,
Thanks a lot for the video.

I was desperately looking for an easy way to create a filter / research bar just like you did.

If you can provide me a code that will do that, Iā€™d be willing to compensate your effort.

To sum up my needs :

Forms : each user will be able to submit their own content to the database, which will be displayed on the ā€œallā€ items page

  • users will have the ability to post their own content (UGS website) through a form

  • they will be able to choose which category the item belongs to via a dropdown menu in the form
    List pages: each item will be displayed on a ā€œall itemsā€ page

  • item list pages will have a filter menu (dropdown, search bar) so users can select which category to display or not

  • Iā€™d like users to be able to enable/disable various options such as ā€œhide expired itemsā€ or a price range slider
    All these mentioned above are very similar to a basic e-shop scheme.

If you think youā€™ll be able to fulfill those criteria, donā€™t hesitate to send me an email : tristan.breon@gmail.com

I might even have other features Iā€™d like to see on my website.

Thanks !

13

Hi Andreas Kviby,

Good day!
I register my self once in your free video tutorial on Wixshow, it was awesome, I learn new things, Thank you! But I like the most is that when you enroll in one of the course the website will provide an ID Code

909Ɨ258 6.34 KB

I also need that kind of function, currently, Iā€™m working on a website that has the same function but struggling how to get that. Could you please lend some of your knowledge how to do it.

14 
function makeid(l)
{
var text = "";
var char_list = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for(var i=0; i < l; i++ )
{  
text += char_list.charAt(Math.floor(Math.random() * char_list.length));
}
return text;
}
console.log(makeid(8));

I use this function when I need codes, just set the length of the string you need and set the allowed characters in the char_list. happy coding.

1 Like
15

So if Iā€™m not a pro member I can still give you $5 for any code I want? Please say yesā€¦ Thatā€™d be super coolā€¦

1 Like
16

yes

17

Andreas Kirby, do you have any code for auto fill for user submit forms? I have users setting up profile. Then then later can input an article to a database. Want the user info (name, bio, contact info, personal photo) to auto fill into the form so they do not have to complete each time they are submitting a new article.

18
  1. Query the data collection for the info you need
  2. Take the results.items[0].fieldkey you need and insert it into the text input fields you want to auto fill like below.

$w(ā€œ#inputfield-idā€).value = results.items[0].fieldkey;

That will take the value from your data collection and pre fill the input text field with that value.

19

Andreas Kirby,

I know something I see many would like to see is search bar work for repeaters. It a bit of a nightmare for us ameteurs but a necessity.

Here is code I used for this pageā€¦but issue I have is that the category drop down then shows duplication of category for every database entry and that is worthless in trying to provide a filter (who wants to have to go thru all those categories to get to filter needed!!!) Not sure how to limit that. Let me know if you can provide a fix for that and a cost.

Also tried setting up two type search boxes for repeater but getting nowhere fast.

https://www.ourozarks.com/search-our-ozarks

Code used:

import wixData from ā€œwix-dataā€;

$w.onReady(() => {
wixData.query (ā€œCategoryā€)
.find()
.then(res => {
let options = [{ā€˜valueā€™: ā€œā€, ā€œlabelā€: ā€œAll Categoriesā€}];
options.push(ā€¦res.items.map(category => {
return {ā€œvalueā€: category.title, ā€œlabelā€: category.title};
}));
$w(ā€œ#iCategoryā€).options = options;
});
});

let lastFilterDescription;
let lastFilterCategory;

let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(ā€œ#iTitleā€).value, lastFilterCategory);
}, 200);
}

function filter(description, category) {
if (lastFilterDescription !==description || lastFilterCategory !== category) {
let newFilter = wixData.filter();
if (description)
newFilter = newFilter.contains(ā€˜descriptionā€™, description);
if (category)
newFilter = newFilter.eq(ā€˜categoryā€™, category);
$w(ā€œ#dataset1ā€).setFilter(newFilter);
lastFilterDescription = description;
lastFilterCategory = category;

}

}

export function iCategory_change(event, $w) {
filter(lastFilterDescription, $w(ā€œ#iCategoryā€).value);
}

20

Hi Andreas Kviby

Can you tell me what Iā€™m doing wrong with the code below. For some reason itā€™s not working. Would really appreciate your help, thanks.

CODE USED

import wixData from 'wix-data';

$w.onReady(function() {
 
})

let propertytype = "";

export function typefilter_change(event) {
    wixData.query("Accommodations")
    .eq("propertytype", "typefilter").value()
    .find()
    .then((results) =>{
 let firstitem = results.items[0] ;
        propertytype = firstitem._id;

        wixData.query("Accommodations")
        .eq("propertytype",)
        .find()
        .then((results) =>{
            $w("repeater1").data = results.items;
            $w('#pagetitletext').text = "Accommodation - " + $w("typefilter").value; 
        })
        .catch((err) =>{
 let errormsg = err;

        });
    });  
}

export function clearbutton_click(event) {
    wixData.query("Accommodations")
    .find()
    .then((results) => {
        $w('#repeater1').data = results.items;
        $w('#pagetitletext').text = "Accommodation - All";
    })
    .catch((err) =>{
 let errormsg = err;
    }) 
}