Piotnet Grid Update | Facets that work with Oxygen Repeater

in this video we're going to see the pnet grid builder and how it can work with the oxygen repeater element hi my name is stratos and i'm constantly producing videos about oxygen please subscribe to my channel for more videos like this pnet grid builder couple days ago released a new version and if we go to the change log we're going to see that the 1.0.17 version says that it can filter now oxygen repeater oxygen easy post and the oxygen woocommerce product list now this version had a problem and they released an update with 1.0.18 and this has fixed the issue that they had with the oxygen repeater so if you are using uh pnet grid be sure to update to the latest version or else it will not work as you want now let's go and see the price at this moment they have a lifetime deal for 119 dollars for 100 websites okay let's close these two tabs so this is the page that we're going to work and we have here some projects as you can see and this is a custom post type it's using the repeater element and it's fetching us the posts here so what we're going to do is going into the back end and we're going straight down that says but not grid and we're going into faucets i'm going to open that in a new tab and here i'm going to add new and i'm going to select here and type the name and that will be the project filter project filters let's go with that you can name it whatever you want so let's publish that and i'm going to open that in a new tab with oxygen and back to the pyrnet grid let's edit with beard net grid here we're going to create our faucets and the first thing that we're going to do is grab a section and we're going to drop it inside okay now that this section is inside i'm going to click here and click the facets and drag and drop it inside the section and here let's start with the facet name this will be a category okay i'm going to copy that and i'm going to put that also as a facet label but i don't want the label to be sold up in the front end so i'm going to hide that and then for the facet action you can select filter you can select load or sort i'm going to leave it as filter after that the faucet placeholder will be all for everything and then since it is a select if you click it you will see all the other terms you can also select something different for the filter type and we have slider radio check boxes buttons color picker image select search date and a to z this is for sorting out i'm going to choose the buttons because i do like how they look after that as you can see these are the buttons and i'm going to hide the choice count i don't like that okay and as you can see we have multiple selections so this is an end or an or if you want then we have the filter data source which can be taxonomy post date post field or author sorry custom field and author here for the custom field you can select whatever field you have from an acf or a meta box or something custom made here we're going to select the taxonomy after that we have the taxonomy and we're going to select and as you can see we have many options here and i'm going to select the project category this is the one that i want after that i can click save also we have to exclude taxonomy turns if we want and here the options are to add custom images as our filters so we're not going to do any of that so by hitting save i have saved the facets and then i can go into the oxygen page here i'm going to structure and i have a section here i'm going to add a new section i'm going to put that on top okay let's go up on top and here i'm going to click add and then click peer net grid then i'm going to click the facets i'm going to select the facet and i have only one at this moment the project filters and then i can select the apply for grid now the grid is if you go into the building grid you will see here the grids so you can select whatever grid you have but at this moment i'm not using any grid from building grid i'm using the oxygen repeater element and this is the update so we can select now the oxygen here after that it says that we have to use a unique id that will always start with the pyrnet grid hyphen id hyphen and then the number now this i would like to be a little better i would like to auto auto generate the id here the unique id and of course it should be editable if you want to change that but i would like that to be auto generated because i don't want every time to go into my facets and see whatever i have created and whatever id i have used already because maybe i have used four or five different ids and i can't remember uh what was the last number that i used so i would like something better inside here also i don't know why we should write the python grid hyphen id hyphen it should be easier if it was something like p g for p net grid hyphen id hyphen something like that uh be sure to type correctly because if you misspell it it will not work so p net and it didn't get my n p net the end doesn't want to come and of course you cannot copy it from here this is not something that you can just copy so appear net grid hyphen hyphen hyphen id hyphen okay and we're going to put one now if you go to the change log and you click the article for the oxygen it will say the peanut grid the somewhere in 2d manual and you can copy that from their website but i was i wish i could do that also from here i would like to copy it here or at least have it auto-regenerate auto-generated and i don't have to remember every time the last number that i used so we have the pnet grid hyphen id hyphen one i'm going to copy that and i'm going to select the repeater element so let's go into the section let's go into the repeater and i have to go into here to the classes and i'm going to paste that inside here i'm going to add classes and this means that now these two are connected so i'm going to save that as it is and i'm going into the front end i'm going to refresh and i'm going to see right away if it works if it works so let's click the competition and let's see yeah it filters out the results this is the laser this is the residential and then the retail so the filter is working fine after that we can go and style it as we want of course this styling cannot be happened inside the oxygen page here you have to go inside the grid builder and you have it style it here which is a little bit difficult because you don't know the page that is inside so you don't have anything to work with you have to save it every time go into the front end refresh and see how it looks then make another change and do the same the only thing that you can select inside the oxygen is the element uh the whole element so i can select the background but this will be for the whole element not the buttons not the choices that i have here i cannot edit the colors or the size or anything else or the spacing inside here i can only play with how this element the whole element looks like and not every choice that i have inside here so i have to go here and i have select here for those to be in the middle or something different if we go to the style we will see the faucet label and i don't have any because i hit i have hidden it so let's go for the facet buttons and here i can select that to be in the center after that i can go and select if i want some padding this is the padding inside the buttons inside here then we have the item spacing i can go for zero and this will look like this we don't have any space here also they have some border radius as you can see so i can go and select the zero here and they will be like sharp corners like that and you can select the colors for the unchecked and checked options that we have here let's save that once again and let's go into the front end and refresh here and as we can see now they are connected here and we have no radius here if we want to put that in the middle we have to click click here and we have select of course the center and this will go into the middle so i can go something like that and i'm going to leave it as it is i'm not going to style it anymore so this is how it looks let's refresh that and let's see one more time that we have here the filters and they're working fine okay now let's go into the shop page and here we have the sub page and as you can see we have already the items from the dummy items from the woocommerce and let's go back here let's close that let's click let's close also this one and let's go into the oxygen templates and i'm going to edit the project the product archive this is the one so let's add that and let's go here into the pnet grid facets and we're going to create something new let's open the product archive page with oxygen and let's go back to the facets add new and here we're going to have something like product filters filters okay let's publish that edit with oxygen and i want to refresh the product page here the archive page because i didn't save the the facet before this has loaded so let's refresh that okay now that we are here let's grab a section and we're going to put that inside here and after that we're going to go here grab a facet and put that in here okay so the facet name will be color because i do know that those products have a color attribute so color the facet label will be color okay we have a filter and here we're going to leave it as select now let's change that to check boxes and that way we can see all the results that we have and after that i'm not going to show the choices count i'm going not going to so i'm going to leave it as this and for the taxonomy i'm going to select here and i'm going to select the product color this is how it's going to be let's save that and let's go back on top and i'm going to go and grab a new facet also and i'm going to put that underneath that and here i have the size also attribute that i want to filter out so let's select here and select size size okay the label will be size as well and remember that the faucet name must be unique for the whole website okay in order for that to work then we have the filters then we have also here something like a check boxes i'm going to leave it at check boxes that also and i'm going to select here to have the product size okay let's save that and now i can go into the oxygen and let's go into the structure let's open this section inside the section i'm going to add two columns this is the columns okay i'm going for 40 60 and open that and i'm going to grab the product and i'm going to put that on the bottom div inside here okay let's go into the div and put that to be width of 20 something like that and inside here i'm going to add the faucet so let's go for the pertinent grid and let's select here the faucet okay i'm going to select the product filter and the apply for grid will be again oxygen okay so we're going to type here the pnet grid id but net grid i'm missing it i okay hyphen id hyphen two okay let's copy that pnet grid okay i have typed it correctly so let's go to the repeater element the product list it's not the repeater element it's a product list and i'm going to click here and add that class here add the class and now let's save that and let's go into the front end and refresh the page okay now that i have here everything i can select the blue and this will filter out the results and will show me only the blue now i can also select to have the large and this means that those two are going to be combined into one so we have only the blue color and the size is large if i unselect the blue here we will see all the products that are in large size but we do have only one product in large size in the whole shop so this is why we cannot see anything different so let's uncheck this to see all the products and we're going also to add something else inside here let's click here and let's go for the active facets and i'm going to put that on top okay so the alignment is default and i'm going to save that and i'm not going to style the colors but if you want you can just click it and then go into style style and then select the text color and the background color and have it as you want so let's save that again and let's go into the front end and refresh here okay so now whenever i select something here as you can see this will drop me the blue here this is the item that i have selected and i can go here and remove it from here also you can create here a clear old button or you can do something different and have here a search option and you can do a search filter and everything will work fine so as you can see the product is working great and we don't have any problems with that i know that the ui and the ux is not too great and i don't like the fact that you have to go back and forth in order to style it and here you're when you're styling the product you don't have the page layout here you don't have the option to see the page when you're styling all the forms here and i know also that there are some things that they could improve but for the price that they have the great builder i think it's a bargain uh no question asked you can just buy it and use it in whichever side that you want okay so that was the video thanks for watching guys and i will see you all in the next one bye

Channel: Stratos Tutorials

Views: 234

Keywords: Piotnet Grid, Piotnet Grid with Oxygen, Pitonet Grid Oxygen, Filter Oxygen, Facets for Oxygen builder, filter Oxygen Builder, sorting Oxygen Builder

Id: RwHF8T3oeNc

Length: 15min 38sec (938 seconds)

Published: Fri Dec 03 2021