Divi Machine 7 - Ajax Filters

hi I'm Pete and welcome to this video regarding giving machine this is the tutorial series we'll be doing in this series we show you how to use the the the plugin it's not specific just to cars but we only we are creating a car list and website so in the previous video we created this archive loop with all the different cars and you obviously can click on that it takes you through to the single page it had a load more button as well so what we want to do in this one is create a filter so we want to filter the the posts how do we go about doing that so let's jump back in to Divi theme builder and go to our carve page now the filter post module at the time of recording we haven't we haven't done the visual builder side yet so in this video you are going to you not gonna be able to see the vision builder unfortunately however we are working on this says add a new module and let's add filters you can stop and filter posts so here you'll just get the full post is not visible compared compatible yet however it does work on the front end okay so just bear with it for a second so let's change this column to be like this oh that looks terrible move that over there let's just change this but I like the four column I think that looks too small so that's good good options change that to be a three column on tablet we wanted to be - and then my Row one again now the filters you have full control on what you want to filter first options we have a look at is the filter location so do we want it on the side or do we want on the top at the moment I'm just gonna have it on the side and then I'll move to the top and show you how it looks over there so let's just leave it on the side like this altar number of columns this is really when you add at the top one when you're on the full width column at the motor on the side so malicious leavers also there's no gap between the columns because it's a single column filter update tab so do you want to have a button that you click to filter or do you want to make it update each time you make a change I like to have it so it updates after each time I've made a change in the filter so I've chosen that one the filter style is toggle or normal delicious leave it as normal for now okay so I've done my main settings now I want to go ahead and add a new filter artim so the first one let's just add Cantabria category is quite a good one we need to choose the category post which is cause full width is perfectly fun and category so we're gonna make it a select as well and let's just update that so I'm just gonna have one filter for now just to show you how it works let's reload this page and it's filter see here we have all the convertible cars all the Cooper cars SUVs and that's how it works simple as that now you did you do notice you have that little filter animation this is in the previous video in the archive loop module we have this full to Anam to start update animation style and here you can change it to be something else three dots bouncing and i'll make it red update that and have a little look and see how it looks convertible hatchback that caused the state right cause SUV and everything something that actually was quite nice at that filter okay so we have that the other thing is this reset button looks pretty horrible like that so I'm just gonna go on here and go but in custom styles from the button make that takes like 12 fine text color background Watts I think we should have another option it's just going that's the whole yeah so I'm just gonna go into the pattern and just remove the border width and then that should be okay another thing I want to do is I want to add some more filter options so here we can have you know price we can have advanced custom field which is what we want to filter though or what it can't be priced out because that's you can to set this if you want the lines custom field name so here I want to have price filter top as much like the advanced custom field item module if you've seen that for the top is there is a number range I wanted to be full width so go to the number range okay I can have 0 100 thousand I want to be flats primary color red pretty far the text I'm not gonna go into all this detail because in the advanced custom field art and we spoke about this so the separator is a comma the form on add a pound symbol show the label that's fine okay so I have in this one I have the admin filter name cat appears and say body was this on the front of their see sisters categories body top is what I wanted to be point what I wanted to say so I can go out to element options and I can create a custom label body top ok so body top price what else do we have yeah I can also do sort posts or post dates I have search text so I can just have text in options okay so we're gonna have some text I'll put at the top I think sorry search text okay I want to price I also want to have another advanced custom field what are gonna call what is this one gonna be the mileage and if I go to my custom fields my mileage is a range I believe just want to see which one I use a I used a range so in here I want to make sure that they thought the top is a range and in the mileage I think I have up to 100 towels I'll have it was 200,000 actually so the number range filter on it make that zero to sixty thousand it read isn't you know I don't need to put a pound symbol because it's not a pound symbol yeah I want a pretty pretty far the text and put a comma okay so let's just update that and have a look and see what what's going on now okay so you can see one of the things you can see that cats breeze has now changed to body top and I have a price and mileage and I also have the reset button has changed the appearance says update the price for example and it's shove it down to 20,000 and you'll see it'll show the cause get up below 20 that are below 22 and under I push that up if you're pretty show some more cars the mileage let's check the mileage rack down and see what happens over yeah yeah so the mileage also changes and I can also search by tick so I can say I don't know jqr and no cars will show there today the Jago will show okay so I shall remove that I'm sure reset everything and have it and then you can also load more as well okay sorry yeah so that is how you do the filter also the other thing is sorry I should really show the other thing you can do is it's the color let's do color this is quite a cool one color I'm doing oh you are cuz I'm in the UK so ahead it's a bit different so here we are an advanced custom field it's a cause custom field name is color I'm gonna make that a checkbox radio full width checkbox radio let's just do normal for now I'm just going to have it as red and I don't want it in line because I want them underneath each other it's okay that and let's save the page you can see it's all Hello each other okay that looks quite nice but let's go back into the color option let's go into the check box radio filter options and let's changes to me tick boxes let's see what happens there black white or just to go back into here where you change the color for the the check boxes is in the design and the filter style in here you can change the color okay so the other thing was is the tick boxes another option is called buttons and this is no another you know unique way to show you the check box or the radio buttons and this has buttons like this so that's another cool way to do it and we'll keep on adding different styles like this in the future okay so that's the that's the filter module on the sidebar and you can see how we can have different things now let's say we want to have it on the top we can customize it and we and hopefully in the you know in the near future we'll actually had a visible as you can see it but let's do a full width column we want to make the columns auto I'm just going to do Auto a gap between the columns let's do it 10 pixels let's take a look at that and have a look at how it shows okay so you can see that it's kind of like it's also let me just remove this text field because I haven't started up so it looks a bit awkward not having this empty space so you can see I have this body top I have you know sort of our past mileage and color but it's not the best because it has a space so what do we do about this well here we go we can actually go in here and we can choose layout options choose toggle and what they would do is that will add an acetal toggle which will close and then you can toggle it to open it up and then you can close it and you can add in these modules you can add box-shadow you can add you know a border you can do different things over here you know to to make it sites it looks a bit better than at the moment you can see how you can really get you can really get into its and really make it exactly how you want it to look you can have so for example I'm just going to show you a quick example in the body type you know I could I could say I catch y'all want a border on the right and the border width is 1 pixels I'm just gonna use as an example the spacing might not be right but you can get an idea you know and then I just need to add a bit of padding and then I can make padding exactly right this you can have this you know these dividers between each one if you want okay so I think that I think that covers the filter module and I'm gonna actually remove that that border but I think this covers a fourth module enough for you to kind of play with it and make it exactly how you want it to look I hope this has been helpful and I hope this filter module I mean we love it as Ajax folders brilliance and it also works alongside the load more so let's just you know let's say I want to say I want to see all the coop a you know and then you can load more the coop A's so yeah so they work seamlessly together and they yeah it's just a brilliant way and I'm really we're really excited to have this as part of the plugin and I think you will love it too get in touch with any you know what what do you think any questions or any features that you might want to be adding to this we hope this would be helpful and we'll see you in the next video

Channel: Divi Engine

Views: 6,841

Keywords: divi machine, divi, custom post, acf, divi enigne, custom fields, ajax filter, ajax load more, search forms, divi listings

Id: f9nOw_HLgdE

Length: 15min 34sec (934 seconds)

Published: Wed Jul 01 2020