A concept showing home page elements using advanced query with settings on an options page

in this video we're going to look at a practical application of the advanced query so here we have a slider here we have some products here we have a featured product we've just included the option to purchase on the home page and then we just have a list of the cheapest products on the website now to control these items normally you'd log into oxygen go into each item and then update but let's say i wanted to change the home page here it looks like it has t-shirts and i want to make that now instead of t-shirts and decor i want to change that to let's make that music and hoodies and we simply update head over to the home page refresh and you'll see now that we now have music the hoodies and hoodies on the home page in the slider if i scroll down and i look at the next section we have the oldest products and we say the oldest because they are now arranged by date um in an ascending order so let's make it a descending order and i'm just going to change the title then to youngest products and we'll update that we'll refresh the page and now you'll see that the heading changes to the youngest products and then these are all our newest products loaded on the website do you have one of these this is a random selection so if i head over here into the back end you'll see that it's random it's from hoodies and t-shirts but let's do a random one from music and decor let's just change that one out and we'll hit the enter button and now you'll see that we now have an album enter again it might change there we have the decor item so that's how that content section works and then here we have cheapest chips and those are the cheapest products on the website so under cheapest chips we have it price descending so i'm not going to make it expensive as chips update and now you'll see that we have the most expensive item listed down to the cheapest now all of these items then are controlled from the home page from the options page and it's very easy for us then to come along and mix it up in whatever way we like without having to touch the code in oxygen another way that we could do this is if we have a look at this maybe what we want to do here we have a lot of items here in descending with the youngest products maybe we just want to stick to and i'm purposely going to choose one that doesn't have a lot so let's just go with music and when we update that and you have a look then you'll see that we just have the music items displayed so i could quite easily just come along change that heading and i'll say um so music and decor and i simply choose music and decor from here update and i've essentially updated the home page to music and decor and i didn't have to log into oxygen to do it i could just do it straight from the options page so that is how this is put together and what we're going to do now is just have a look at each section and see what the setup is so here i am in oxygen and the first one we're going to look at here is the slider and in the slider i have a repeater and we'll head over to the query and we'll edit that query and you'll see here that the first thing we do is we have the taxonomy uh or the post type as product then we have a taxonomy query and you'll see here that what we're essentially doing now is although we've selected the term and we want the term id and the operator in you'll see that here we have a custom field that we're accessing in order to get the [Music] term ids so that's the product category ids and we've done that for each section and i'm just going to go down this query a bit more before coming back to that then we have the meta query so we first have the taxonomy query which is to identify the categories then we have the meta query and in the meta query here we're saying only display items that are on sale so you'll see we have the sale price and the sale and the min variation sale price so when you look at the items in the slider at the top they will or should always be items that are on sale and we just say with a value greater than zero so that they appear in the slider and then here we have the order by once again it's a custom field and then we have the order which is a custom field and then we have the meta query which is the relation just to say that we only want stock the stock status so we only want items that are in stock so that's the query as you have it now and we're just going to have a look and see so that's how that query is put together the next query that i'm going to look at then will be for the next section here and in this section here the query if we head over to the query and we edit that query you'll see how that it's once again product type post type is product post per page you're able to select it's a custom field here we have the taxonomy query and once again it's a custom field then we have the pagination disabled order by which is the custom field the order which is a custom field and then the meta query we're just looking for items that are in stock in the next query that we have which is this random item here we're also using a repeater and what we're doing here in the query is we've once again chosen the post type but we've set the post per page to one so it's only ever going to get the one item the order buys by custom field the order is a custom field and then here we have the taxonomy query which again is a custom field we have pagination set to no found rose true so there's no pagination and then here we see the meta query just to look for items that are in stock again and then we look at the last item and this item is all the cheapies the cheapest chips items and the query there the cheapest chips is something that we select on the front end but here we have this once again set up with the post type of product the post per page three the order buys a custom field the order is a custom field and then we have the taxonomy query once again um the taxonomy query actually isn't a custom field it's actually a function that's returned with the values of the categories and that's for all the categories that we've used in this home page demo and then we once again have no pagination and the meta query just looking at the stock items and here the sort the order bar is once again here by custom field but the meta key is price and the meta key is that's important because here we are generally sorting by price so that's how we've set up the oxygen and this is how you would update the options and now what we're going to do is just going to go and have a look at the custom fields for this particular setup so here we are in the field groups and in the field groups here i'm going to look at home page settings and this is where it's all been set up so these are the different sections and you'll see that these names then correlate to the sections that you see here so with a bit of styling you can make each section here a different color that can be done and that will make it easier i haven't done that but something to think of in the future so what we do is when it comes to selecting categories we use the taxonomy term selector and then we select the product category we say all terms check box term id is the return value the layout is horizontal now what's important to know joe is that when you use the custom field with the categories it returns an array but when working in the builder and we select the category so if i head over here and i go to my repeater and we go to the query and we go to the advanced query you'll see that the the list that is required here is a comma separated list not an array so what we do is we write a function that then just implodes that list that array and separates each item with a comma so to see what that looks like i'm going to head over to snippets and here in the snippets you'll see that we have this code here at the bottom and you'll see that each one of these is for each one of the sections on the home page so if i look at the section over here we're looking at the home top slider categories and if i have a look here at the custom field that we're looking at here that returns the values it's called ht slider categories and when i go to the snippet you'll see that there is that custom field so we get the fields we implode the values and then we output the list and then what we do is we just use that function name inside oxygen builder over here when we select data what we'll do then is we will select the php function return value we'll just paste in that function name so in this case it was that we'll just head over here paste it in there insert and then that will return that comma separated list of values which will then be used for the categories now in a similar way if we have a look here at for example order by you'll see it's a custom field and what we do here now is you'll see here when we go to order by what we've done here is we've created the order bar field as a select field with the radio button so you can only select the one and we've sorted it with title date now for the price to work the value needs to be meta value number and then we have rand for random so that's how we've set the order by the order is also a custom field that is inserted and here we've selected the values ascending and descending and here we've selected the post per page and we've set a default value here of three sometimes it's four sometimes it's one it just depends on the section on the website so if the person doesn't select we know that it will be the recommended value then we move to the next section so here once again we have the custom fields for the new section and these are h prod and the h prod section then we have the title and then we once again we have the categories so once again the categories are the taxonomy terms under relational and for advanced custom fields then we have the once again we've selected the product category we've said all terms checkbox and then term id you could actually restrict the selection then to specific terms so let's say that second section from the top i don't want to give people access to all terms what i can do then is just select say let's say we're going to select hoodies and because we want to keep it to clothing we're going to select hoodies and t-shirts and if i update that and i head over to my field here and i refresh you'll see now that in the section here under h prod i can only select from hoodies and t-shirts so i can even restrict the editor to only choosing from those two so if you want to have a specific flow of products and sliders and different modules then you can actually control that with the custom fields and limit them to specific categories so that's pretty much how how that would work i'm just going to remove those two so that it defaults to all the terms then um that's pretty much how everything is set up if we once again the order buys the same for all the different sections and that's pretty much how it is set up and then of course at the bottom we have the options page is equal to and then home page settings so that's how we've set it up and that's pretty much how it works because then you would simply go along to this section here so if i wanted to do that first section now the we know that the taxonomy query is that function that we've created so we've already checked that but if i wanted to do order by for example then i would select data wait for that to load then i would go to advanced custom field and you'll see that all these blue items here are from the options page and if you can't remember which of these you'd like to use or which one is relevant to that section and you'll see that with that prefix for example these are all eight prods then i would be able to go into my custom fields here and i see okay so h pride is for the second section ht is the first section so then when i if i'm going to be doing something on the first section then i make sure that i look for the ht if i'm looking for the second section i'll there's the hts then i would look for the h prod then we have the featured and then we also have the cheapest so by giving your custom fields accurate names they'll be much easier to identify here in this what can be quite a big list of custom fields after a while so that's just one simple trick to keep track of everything then you simply select the custom field and the connection is made and the right custom field is associated with the right area of content so that's just a very brief overview then of how you can use advanced custom fields with an options page and then create these custom areas just another thing to consider is that when building this demo we did use another plugin which is called advanced custom fields extended so acf extended then adds a whole lot of other functions to the advanced custom fields and one of those is a very easy way to create options pages and that's what we used but you can also manually you know create a function and then create the options pages so that's just a very brief overview then of how we've used this list of advanced custom fields we created an options page and then we've linked these advanced custom fields to the advanced query inside oxygen and then that's how we've been able to create then this interactive and dynamic home page so i hope you found that useful thank you for watching

Channel: Bruce Young

Views: 175

Keywords: oxygen builder, advanced query, acf

Id: V3WEwfG-nTA

Length: 17min 34sec (1054 seconds)

Published: Tue Dec 07 2021