 Welcome back to the channel. In today's video, we are going to make our particular shopping area where people will be able to see our products and are going to get the add to button and they'll be able to send that into their cart for shopping. So we are going to work on the shopping area where you'll be able to see the different categories of food that are available. You'll see the different items listed under each section and we shall be able to add that into our cart at the end of the day. So let's dive into that. So you already see we have our tab that is working just well with Bootstrap and now we just need to add our dynamic data into this location. We shall later do the styling to make this look like what we have here so that we don't have these lines that are cutting over the borders but we just have a small line under our particular selections of the foods. So let's go into the code. Now I'll keep this partially open so that you can visualize what's going on here and also in the code. But what I will do is I'll get some real estate here by closing out my ID and we are going to work on particularly the list items and these divs here. Now the one thing you will notice is that we have our items here and they have a presentation role. They have the class here but in this link tag that we have here we have one that's active and all the others are not active so we need to separate one from the other. But the first thing that we're going to do is get the category. So we need to write this ourselves. So the first thing that I'll do is I'm going to call the categories. So I'll just say product cuts. I'm going to say this is an array. Now you can use this old way of doing this or you can just have the square brackets. They all work the same. There's no difference. I'll just go with the old method to support all the PHP and once we're here we are going to start on getting we're going to get the products. We're going to the products is equal to the new WP underscore query and it requires some arguments. Now this is the way you query for posts in a particular WordPress install. You use this class of WordPress and then you pass in arguments specifying what you need. In our arguments, which is an array, I want to pass in two things. I want to pass in my post type because I'm going to be querying only one particular post type and that means I need to go into the admin area. So let me go to the admin and I'll show you which post type I'm looking for. So if you look at the bottom right here where my cursor is, you'll see when I go over posts, we have a link that tells us that post type is of product. So we're going to go back to our code and we're going to look for product. Now the other thing is we need all the products that are available. So we'll go for posts per page to get all the posts that exist in our database and I'll put minus one. And the reason this is is because WordPress by default only gives you 10 posts per page if you request for a WP query. So when you do a minus one, it means you're getting all of them right back. Now that we've passed our arguments here, we are able to, we're going to adapt this and see what we have. It's always good to check if you are receiving any data on the front end whenever you make any queries of any kind. So I reload this and you're going to see that we have a proper query here that has so many things into it. And we are at the end of the day going to find our different products like roasted pumpkin and so on. So that shows we are on the right path. So what I will do is let me comment this out, come back here and I'm going to use an if statement. And I'll say if products is actually having posts. So if products have posts, and this is something that we get from WordPress, it's a function in this loop that we can use if we have posts, then we are going to do particular things. So else, if we do not have the post, then we're going to just say no posts. So I'll echo this and say no posts. No products listed in the admin. So this can always be changed. Now if you want to have this translatable, you are going to do this. I'm going to just escape this. And I'll say escape attributes to remove any attributes. And I'm going to use the underscore E so that I can display this on the front end. I'll cut this string that we have here, put it in here, then I'm going to add a particular text domain. Let's go back to our style sheet. And we'll see that our text domain is take your food. Then I'm going to come back here and just add this. So I'll save this and we can always use it later. Let's say if we delist our products and we don't have anything, we can use this particular thing. So let me just do that. Go to products. And then what I'm going to do is use a bulk action here, say edit, apply. And I'm going to change all of these to draft. So I'll click updates. And then when I come back here and reload, you will see that we have the no products listed in the admin. It would be nice for us to just add these at the bottom or make sure that if nothing is happening, then we don't actually show this whole UI and div and everything. So that kind of gives me this whole idea. So instead of having this here, I'm going to have this above the nav here. I'll just clean that out so that we can see. So what we're going to choose here and say if we don't have any posts, then we don't do this whole thing that we're going through. So let me pass this in right here. So I'll get this. I'm going to cut all this URL and the div that we have here. And then I'm going to choose to pass them in here when we have posts. So first thing is close this PHP, open it again, and then I'll pass in our URL and our divs. I'll tab this in just to leave it clean and save this. So what happens when we reload here, we just have this whole no products listed in that mean. So our admin knows that they need to go in here and add some products. So I'll edit this, change the status to published, and then hit update. When I do that, I'll be able to get this showing up here. Just with any statement, we've been able to do so much in terms of our theme and how our users can actually interact with it. Now, of course, you can style this up and make it look much better than what I've done. And that's okay. You can still do that. Let's go back and focus on what we had here. So if we have posts, then the next thing that we want to do is we're going to say while we have those posts, then we shall have this particular thing running. So I'm going to copy this while posts, put it here, and I'm going to say then products, it's going to equal to the post. So I'm just going to say while we have products, then products is going to just equal to that particular post. And in this particular section, we are able to let's say, just echo, get the title. Now, when we get the title, we're getting the different titles of the different posts. Let me come back here, reload this. So we have an error here on half posts. Let me go back to my code. Look at this. This is right. This is right. The only problem that I see here is that we've said products is equal to the post, yet products should be a mirror of the post. So let me go back here, reload, and you will see that we get all our different titles for the different products showing up right here. So we are on the right step. That's why I always have to debug to make sure that every step is giving me the data that I need, while other people will use a test driven development, which is a good thing. So you write tests for your particular theme or your plugin to make sure that everything is running very well. Now what we're going to do is we are still going to add to our product categories array. Now what we are going to do is we're going to look for every single category that each product has, and we can get that using the get terms function of wordpress. And it also requires particular arguments to be passed to it. Now in here, we're going to get product. So then get product categories from get the terms. Now the arguments that are in here are you have to pass in the product ID. So the first thing that we'll do is get that we shall get the ID, which is for each individual post. And after getting the ID, we are going to pass in the taxonomy that we should be using. Now the taxonomy is basically this little limit. Let me go into one individual post. The taxonomy is what you see in these particular places like the product categories, that's a taxonomy. And when we come here and just look down at the link at the bottom, when I go to categories, you're going to see that we have a taxonomy of product underscore cut. So that's what we are looking for. So we're going to add product dash cut. Now you can get how these terms are used. You can go to the codex of wordpress.org. You'll type in your get terms, press enter. And this will be able to show you the different items, you'll be able to get links to the different resources. You can know what kind of arguments to add to the different queries that you have. So for example, I would like to hide any terms that come back and they don't have any content in them, because I don't want to show an empty category here. It's like having a menu that you cannot fulfill. So what I'm going to do is I'm going to choose to hide empty. So I'll copy that, come back to my code here. And I see I cannot add it in here because I made a mistake. This is supposed to be get the terms. And so when I copy this get the terms, come back and search for it in here. We'll get another link. So in here we need to pass in the wordpress post ID. And we need to pass in the taxonomy. So you can see the parameters are described here in full, what's optional, what's required. And you can actually see particular examples down here. So you have so many options right here for you. Now let's close this and go back to our code. So that we keep focused, let's not stray a lot. So what we'll do here is we'll say for each, because we're going to be getting back so many terms from here. I actually didn't add this, but we're going to be able to see what's going to happen. So for each of the product categories that are returned from each page, we're going to get it as a product category. So I'll get this something and then I'll change this to singular so that we can use that. And then what we're going to do here, let's lower down to see what kind of data we're getting back. And then we shall use that. So copy this, add it in here, serve this, reload, and you're going to see that we get different terms. We have salads, salads, drinks, drinks, drinks, drinks, soups, pizza, and you'll see some of them are doubling. But I want to have one array that doesn't have doubles. So I need to remove the duplicates from here. Now the easiest way for me to do this is to use in array. And in array helps you to basically check your array. If there's something that is there, then don't do anything. If it's not there, then do something with it. So I'm going to have if not in array. And the array we are looking for is what we have here as products cut. So I'll copy this and say, so if not in array, I'll close this off. And that's where we're going to sort of add all our things. And what we're going to look for is the product name in here. So I'm going to get the product category from the product categories. But you need to remember that this is a multi dimensional kind of array that we have here on our side. So we need to pick things like the name and so on. So I'm going to come back here. And what I'm going to need to append is let me just show you this is since it's an object, I'm going to be getting the product name. Let me just random this. And of course, our inner will not allow us to work because it requires two arguments. But let's see this again. So you'll see we're having salad, salad, salad, salad. And that's what we're going to pick from this for each loop. So I'll turn on our if in array again, right here. And it expects two particular things. So it expects this product name. What my code editor or what PHP calls the needle. And then we're going to pass in the array of data, which is our products cut right here. So we're going to look for the category name and look for it in products cut and find out whether it is actually there. So if it's not in the array, then what we are going to do is we're going to add that particular item to our array. And that calls for one other PHP function, which is array push. So we're going to push the individual products name into our products cut. And the way we do that is we just add a comma here, and then pass that in, I'll remove this extra comma. So we're going to push into our products cut, and we're going to add this category name. So we just need to get our products cut from here. And I'm going to add a bit here so that we can see what we have for data. So I can actually move out of this for loop and see if we still have our data here. So now we have our array finally, after going through all these loops, you'll find that we have our array having these four items. So this is what we are going to use to populate these different items in our list element. So we'll use this at a later time. So I'll clean up what is here to remove all those bad amps that I do have, remove this echo, remove this bad amp here, and just keep everything nice and clean and neat. And then I'll open up PHP here. And what we're going to do is we're going to need to pass in a list tag here. Of course, now it's not recognizing this, but we're going to do up for each statement again. And we're going to say for each of the products cuts that we have here, so copy this and say for each of the products cuts that we have. So we'll say as products, as products cut product category for each one of those, we are going to get the products. And we're just going to say key, and then we shall map on our particular product. So as key. So we're going to add the key so that we can get the key, which was going to be the one, zero and two. And then we shall pass in the product value, the category value, which is a salad drinks and soups. And then for each one of those, we are going to pass in this element here. So I'll cut this, come back close PHP and open it up again. So that this is neat. Pass this here. And then what we need to change in this particular instance are the few things that are changeable. For example, this name. So I'll just write this in PHP. PHP again, open it up and we're going to say product cut. So copy this and then I'll echo product cut and then hit save here. But let's first see what comes up here. So I'll save this, come back, reload. And you see, we have our salads, drinks, soups and pizza. And this is what we are looking for. Of course, it's not going to change much. And when I reload, you see, we don't have any active title showing up here. So we need to fix that. We are going to use some PHP to solve that. So in order to have our active showing up here, we're going to use some PHP. So before our follow that we have here, I'm going to add a counter. So I'll say our counter is equal to zero. And then I'll also add the class and say the class that we do have is going to equal to empty. Now, why am I doing that? Because I want to use an if statement and then just count through what we have here. At the end of the for each loop, I'm going to get my counter and I'm going to increment it so that we know what's happening. So the first thing we'll do here is say if for each if the counter, if the counter is equal to one, I need to move this inside the PHP. And goodness, I have a code editor to help me that. So I'm going to say if the counter is equal to one, then we're going to get our class to equal to something that is active. So we're going to get our cost equal to active right here. Now, all I need to do is come back to our class here and add some PHP. So PHP, and then I'll echo the class. So that simply means if we are not on the first item, we're not going to have this class at all, it's going to be empty. So we've sort of reused what we have and made it work the better for us. So let's see how this is going to look on the front end with our counter. Save this reload. So we're getting an error here. And if I go back to my code, and we have an error showing up right here. Now that means my code is messed up in terms of the counter. Now the first thing that I'm going to do is because arrays start counting from zero, that's why I have this zero here. So I'm going to push my counter from down here and make it the first thing that happens when we do the loop. So meaning my counter will eventually equal to one. However, this is a mistake that all programmers make when we are working with loops. When we want to check if a number is equal to something, we have to use two equal signs or three. The three makes it check for whether it's the same data type, and it is the same value. If you have two, you're just saying, can it just be the same value? So I'll set that to one. And then I'm going to just add an else statement here and say, if the class is not active, then the class should just be empty. So I'll paste that here, save this, come back here, reload, and you will see that we have our salads working out drinks, soups, and everything is working out as it should be. So the next thing that we're going to do is actually just put our products in their respective areas. So I'll come back here, and we are going to work with the div that we have here. Now before I forget, I need to stop to reset this post that I am getting here, this loop that I've made here. I'm going to come here after the else, and I'm going to do a WP reset post data, set that, and then that will help us to allow us to query other things. I'm going to clean up what we have here, remove the excess lines, just have this inwards to make it make sense. If you want, you can make this a one liner, but I did this so that the code is readable. So once I have this done, let me move on to the next step, which is doing what we've exactly done here, and then just output it here. So I'm going to get my PHP again, because this loop works just fine. And then I'm going to drop it here in the tab content. But what I'm going to be looking for for PHP is basically one of these tabs. So the tabs here that are active have the show and they have the active right there. So I'm going to just get one of these, copy it, paste it here. And then we're going to get a couple of things. So get the class, cut here, paste here to allow that. And then we are going to get our show and active, then get our show plus active, cut it, paste it here. And then I'm going to take out everything that is here. Now, we'll also get the name of the category showing up here. So I'll get this right here, cut it, replace it with the words that are here to make it dynamic. So we have to remove this list item and save this. Let's see what happens. So when I reload, we have salads, drinks, salads, soups, salads, we need to make a correction right there. So what's happening with each of the categories, get the category cut, counter one, show active, that's working well. So let me just cross check with what's happening in my HTML. Now, the issue that I see is because we did not change area labeled by and we did not change that IDs of the different sections here. So we need to do the same thing. So I'm going to just cut this product name from here. And then I'm going to add it to the ID and save. After changing the ID here, we are also going to come to our area label and change the first part of this section here. So I'll save this. And then let's come back and reload. You'll see that our IDs have changed. And we also have the area label changed by. So when I click on drinks and soups and pizzas, nothing is changing because in our list item, when we were making the href reference also, we forgot to add that. So I need to come back here, get this echo and so on. And then I'm going to just replace at the href here. And then we are going to change also the area controls so that our accessibility is done right. And we are going to change the ID right here. So I'll save this, come back and reload. When we click on drinks, we have the right things happening. So you need to make sure that everything is moving smoothly by making sure that all the data that is static is actually changed to be dynamic. Now we are at the best position right now. In this section, we're just going to look for all the products that are under this category. And then just place them here. And then we'll have all our details of the particular items that are sold under each one of those categories. Let's jump into that. So in this div tags, we're going to open our PHP again, because we're going to do a WP query at PHP. Then what we're going to do is look for the div products. And we're going to say that's going to equal to a new WP underscore query. And then we shall pass in the arguments that are needed for that. Now in arguments, we're going to define an array of parameters that are needed. For example, we shall need to pass our post type. And the post type we are looking for is product. So we'll pass in our post type and we'll pass in a post type of product. We're going to add in our posts per page. So we want to get everything posts per page. So we'll pass in minus one. And then we are now going to pass in a tax query, which is a taxonomy query, not necessarily to do with our finances. So we have a tax query. And that tax query is going to take an array of arguments as well. So let me pass those in. So inside that array, we're going to have another array. And in that array is where we're going to pass in the taxonomy name. And of course, we're going to pass in the product cut because that's the category or the taxonomy of our products. And in there, we shall be looking for one particular field. So in there, we'll be looking for the slug because we already have it. It's similar to the name. And then we shall pass in the terms. So the terms we're going to be looking for are just for the individual name that we already have here. So we'll have to get our product cut here. And then we're going to pass it in as an array. So usually you're looking for more than one. That's why this is made as an array. So we'll just pass in only one, because we want to pass in only one thing. So when we go to salads, we want to get only salads. When we go to drinks, we get only drinks. So we'll pass in the terms of that. And then finally, we're going to pass in an operator to say to our database, please make sure that it is in. So we have that. I'll save this. And then we're going to come here to our WP query, we've got our divs, and we're going to do something similar to what we did here. So I'm going to check if we have and then set the post in the while loop. So I'll pass this here. And I'm going to change the div products to if we have div products, have posts, while we have those posts, let the div products equal to the post, then I'm going to close this off with the if statement. And finally, I am going to echo, get the title. I'll echo the title in here. And then after this whole check of the if and doing the WP query, I need to WP reset post data. So that our loop can continue without being affected by this. So I'll save this, come back here, reload. And you'll see in our salads, we have salads, we have roasted pumpkin, we have soup lentil and green apple salad, which are if you look at our products here in salads, we had roast pumpkin soup and lentil green apple. So let me check. So we have roasted pumpkin soup and then lentil and green apple salad here. I go to drinks, we have fresh juice bottled water, diet soda and Mediterranean chicken kebab. So go to drinks. We have yes, one drink that shouldn't be among the drinks, but we have juice bottled water diet. So I'll quickly just edit this, change it from drinks and add it to the salads. I'll hit update here. And then inside our code, I'm going to remove one thing. I'm going to remove this PHP echo so that we don't have this one drinks appearing when we do this. So when we reload this, we have our roasted pumpkin soup, lentil and apple salad, then Mediterranean chicken kebab salad. We have our fresh juice, bottled water, diet soda. We have soups. We have only one. And then our pizza. We have two pieces of pizza. So this is looking like what we want to have. Okay. And we are getting there. So please don't give up. Let's continue. So now that we have all of these, we're able to get a couple of things. So let's look at our particular design. We need to get our image. We need to get the title. Then we need to get the description. So those are the things I'm going to pass in. So for now, let me escape our PHP again. And then in here, I'm going to pass in an image. So we'll have an image with a source. And then we're going to have an H2. I can just make it an H3. And that's where we shall pass our PHP. So passing PHP, close this off. I'll make this one line. I'll get rid of this title because we're using it up there. We don't need it anymore. And then I'm going to also get a description which I'll add in the paragraph here. And then finally, we shall need to add an add button that sends it to our cut. So in here, we need to get our image. And so for our image, I'll add some PHP here. And I would say image. Then I'll get our image. And I'll say it's going to equal to WP, get attachment, image source. And in here, we're going to pass in the attachment ID. And we'll get that is by saying we use the method of get post thumbnail ID. And inside that we pass in the post ID. So I'll just get the ID. And that's the method we want to use of WordPress. Rather, this is uppercase. So get the ID, use that method. And then in here, we're going to pass in a thumbnail because we want it to be a bit small. And then all we need to do is just remove this icon because that's optional. Save it, come here, reload. And let's go and see what's happening. So I'll check the elements here. And we see that we have an array showing up in our image. So what I'm going to do is just that dump this. So I'll that down to see what I need to do with this. So I'll image, save this, come back, reload. And you'll see that we have an array, we have string zero, we have integers, and we have the booleans. I want to get zero, which is a string and our URL. So all I need to do is just come here, add those brackets, add my zero, move this VADAM, or I could have just gotten this and added it here. But let's leave that for another time. Reload this. And you see that we have a small image showing up here. Very optimal. We could have got the full size of the image, but that will make our page load really, really, really late. Now all you need to do is just style this up. And then we shall be able to push it inside our cart. So let's look at that. Now, for this step, WooCommerce has already done a lot for us. So what I'm going to do is I'm going to come to my root folder in my website. I will go to plugins, then I'm going to look up WooCommerce. And then I'm just going to drag it here so that I can use it for my reference. So I'll add it to my workspace. And then here you will see a part that says templates. When you unfold it, you will find that you have different things like loops, cards, and so on. So these templates are what you can actually use and drop them in your own thing to make them work better. But for now, I'm going to work straight out of our folder. So I'm going to look in the cart here. And you'll see add to cut as a button already has all of this thrown in for us. So what I'm going to do is just reference this by saying WC get template. So what I'm going to do is just come here to my theme right here under my PHP is WP get template, WC get template. And this is a function of WooCommerce to help you get a template. And all you need to do is just add in the name of the particular template you want. So I want to get the add, add dash to dash cut. And when I save this, let's come here, reload this. And you see that it's telling us there's nothing like this inside our own templates. So I'm going to add the PHP here. So we have templates, we have loop. So I'm going to come here in my template. I'm going to add this first of all add WooCommerce because that's a requirement. Then after that, I'm going to add templates. And then inside that is where I will add my add to cut. So I'm going to just copy this, come to this template, and then I'll paste that. And you'll see that we have this in here working very well. So I can edit this without the worry that I'll one day I'll wake up and this will not be working as it should be. WooCommerce allows us to edit its templates so that we can use them. So I'll reload this. And you're going to see that we have WooCommerce templates add to cut. We need to add the loop to that. And then I'm going to come back, reload. And you'll see that now we have the add to cut button showing us for the different items. So after every item we have the add to cut, we just need to style this up so that it stops looking. But so when I click add to cut, you'll see that was added to cut. And if I go to my cut by going here, then go to cut. You will not see much because I haven't styled everything else. But with the little mini cut we're going to make, you're going to realize that every time we click add to cut, we're going to be able to add those different items. And if you look down here at the bottom when I click on one, you'll see it says add to cut 45, add to cut 44, add to cut 36. And even if I go to pizza, you'll see that we have now the options of select the option of the pizza you want. And then you can do different things. So I am going to clean out so that when we do the selections, we still stay in this particular location. But let's first sort out our mini cut so that we can see things happening in here. Then we can work on the grouped items and how they work with the particular add to cut button by staying here. So in the next video, let's see how to add our mini cut to our theme.