 Welcome back to the channel. In today's video, we are going to make a couple of changes to our theme to see that it improves and we're going to fix a couple of bugs that are starting to crop up as we are developing. Now, one of those bugs was highlighted by Cameron that left it in one of the comments in the last video and I enjoy that. I enjoy that people can actually try some coding, try to do a couple of things and give me some feedback. So, I hope to see your comment in the next video. So, what he highlighted is that when we go to the individual pieces and maybe select pepperoni and then unselect it, our theme retains this value as still being selected. The other thing that we'll be able to do and fix in here is that when we go to our console currently and we click the different tabs, we now get this error showing up in here in our code and that's not also healthy. We need to fix that as well. The first thing that I will do is I'm going to open up my editor and I'm going to go in my functions file and right now, WordPress supports the version of jQuery which is 3.5.1 and that's what we wanted to have here as we brought in this script and also brought in the script. So, natively, what we're going to do is we're going to comment out this code and we're going to come back here and say jQuery is already supported. So, I'm going to just edit this and make this a dependency of the jQuery that's default in WordPress and then I'm also going to comment this same line out and do the same thing here and say we're going to bring in jQuery and that's our dependency. So, by saving this, coming back here and reloading, you'll see that when I click the different tabs, we're actually getting our tabs but we're not getting the console error log showing up here. Now, the next thing that I want to do is when we got here to select the different items, we should be able to get them in our cart without getting errors down here. So, I'll come back to our food.js which is a script that we are enqueuing only on the front end. In fact, I think I need to enqueue all these scripts and tiles up here like this bootstrap because we're only loading it on the front end. I'll also move that into my front end and the reason I'm doing that is because I want to make sure that we are enqueuing the scripts that we only need on particular pages which will improve our performance. So, I'll also bring the same font Osam down until I need it, then I can always push it out. And for now, we'll just leave this CSS rule working because we'll apply the CSS style probably to all the other pages. So, I'll remove this commented code to keep everything clean. I'll remove that. I'll of course add some comments bringing styles from bootstrap and I'll add bootstrap CSS right here and then font Osam. Bootstrap and font Osam CSS for our tab navigation. I'll also add the same comment down here. So, I'll save this. Let's go back to our front page. We reload everything. The tabs still work well without an error. We'll now test our pop-up form by clicking this, try to add two items, click add to cart and we get an issue here whereby it's saying the value is not defined. And that is simply because in our food.js we do not have anything running in the value here and yet we have Ajax saying that it requires a value to be passed to this URL. So, what we're going to do is just pass this Ajax into this section. We'll save this, come back and give this a hard reload and then I'll go to pizza and I'll click the button and you'll see that when I choose to add three items now click the add to cart button. You will see that we get an Ajax response because we are pushing a post request and if we reload here you will see that we have different items going inside this particular cart. So, let me clean out our cart so that we have no products and then we'll do a couple of changes. For example, I'm going to change all these va instances into a let so that we can always use the right and modern JavaScript and we did not declare these values here before we started using it. So, I'm going to copy this right here and I'll say let the values actually equal to unempty array for starters and then we will not need this let here because we've already declared it so we don't want to have any issues in our code. So, let me just change what we have here so that we can have something more clear like success and the error we don't want to get messages that we probably don't understand. So, after doing this I'll save this come back here give this a hard reload and after giving it a reload I'll come to pizza our tabs are still fine I'll click add to pizza when I click pepperoni and small olives click add to cuts we have two successes coming in we don't have anything showing up here because the page is not reloading to add these pieces of items so we see that now we have olives showing up here but we don't have our second set of items that we chose because of an error that's also as a bug but we see that our olives are coming in twice here now what I'm going to do is I need to be able to clear this form so that we don't have these coming up every time I click this button so in our code right here at the end of after looping through the values we're going to get the form that is selected then we're going to add the reset method that comes as part of javascript and it helps to clear forms so I'll come back here reload this come back to pizza when I click this of course we do not have anything showing in here but after adding medium pepperoni and medium olives click add cut we have a success there and when I come back and click this you'll see that this is empty it's not like before it was retaining the values so that's one bug that has been removed from our code now what we need to do is have active reloads so that our mini cut can change now I'll come back in here and by now we should have realized that this static URL that we're having here is not going to work for most of our themes and that is simply because not all our sites are always going to be local site and have all this information following what we have here so what we're going to do is we're going to use our Ajax inside this loop and we're going to make something a little bit different we're going to be able to have a different URL which is the admin-ajax.php file we need to have on the admin side which is going to work with our WordPress because it's inbuilt inside of WordPress it will allow us to trigger different php functions and as well work with our JavaScript so that we can have this working in a nice environment so the first thing that we're going to do is pass this URL to this particular food-add.js and we're going to do this inside our functions.php file so in here I'm actually going to come and localize our food-add.js right here I'll collapse this so that we can have better real estate and all I'm going to write is wp-localize script and this function is going to take in the handle of this particular JavaScript because it's the one we want to localize and the next thing we're going to do here is we're going to add an object name and the object name that we want to use is actually just say Ajax underscore object we can call this anything that we want but now I'm just going to call this Ajax underscore object and the next thing that we are going to do is we need to pass an array of information at this point so we'll add these square brackets to show our array and of course I need to add a semicolon at the end here so inside our array right here we are now going to add our Ajax underscore URL and we're going to say that is actually going to be mapped or it should equal to our admin underscore URL and since this is a function of WordPress to give us the admin URL it's basically going to just come here and it's going to give us this link and then on top of that it's going to add wp-admin that's what we are looking for so it's going to give us that URL dynamically and this will allow us to go into our server when we go to the wp-admin package we should be able to access this admin-ajax.php file now this particular file if I am to open it you'll be able to see that it has a constant of doing Ajax that we've used before in wukamas it then allows us to use different things like Ajax actions and also to be able to use all these available methods and different things and actions like the wp-ajax no-priv and also the wp-ajax action as well so this is the file that we are going to need when we are working with our custom code and inside this we just need to pass in one argument and we're going to say we want to add the admin dash ajax.php and once we do this we're going to be able to have this dynamic filled inside our javascript so I'll copy this I'll save this I'm going to come back to our food.js and I'm going to console log what we have just passed to this javascript so that we can see what's happening so console console log and inside here we're going to get our ajax object and we're going to add dot ajax URL so that we can be able to see it so I'll save this I'm going to come back to our page I'll open up my inspector I'll open the console I'll reload this and you're going to see that we now have this URL showing up and this is the URL we need to pass to our ajax so that it can work properly so I'll just copy what we have here I'll comment this out because we don't need it anymore I'll now come to our URL and I'm going to pass this URL alone right here inside our URL and I would say pass the admin dot ajax into URL so that we can remember what's happening here our type will be of course we'll have our success we'll also have our error showing up here and the new thing that we're going to do here because we want to pass from our javascript we're going to pass these values that we're getting and we're going to pass them onto our php on the other side of our functions php so here we want to have a data object of course add our brackets and then add a comma so that we don't break our javascript and in here our ajax is actually going to ask us for an action and this action is something that will pass onto one of the functions that you're going to see in a little while so we'll pass an action so we'll have food underscore ajax underscore add to cut and this action is something that we're going to use in our php on one of our functions we'll see that in a little while so after adding an action in this point we are going to look for a product underscore id so we want to pass the product id as well so we'll look for something called the product id for now and then here we're going to also look for the variation id so I'll look for variation id and then in here we shall pass in the value of what we're actually having here so let me just change this from value we'll call it variation id so that we don't get lost along the way so this is what we need right now now we need to go and create a function for this action so that we can be able to see what's going on so I'll go back to my functions php in here and the first thing that I'll do is create a function we'll have food underscore ajax add to cut I'll make this a full function right here and we always prefix this with our techiepress food underscore so I'm going to just copy this as well and then change this in here so that we have something very unique to avoid php errors so we have this new function that we have here and we should be able to add an action to be able to run this so I'm going to say add action and in this action we're going to look for the wp underscore ajax and then after that point we need to add our techiepress food ajax add to cut because we want to use wp ajax which is part of what press we need to prefix our action like this and then after taking in that we need to be able to add also our function that's running that action our function is just this what we have here and what we have down right here now this ajax works in wordpress and it requires for one to be logged in but in most cases our clients are going to be on the user side and they're not going to be logged in so we need to tell wordpress please approve and allow people who are not logged in to actually use this function of ajax and the way we do that is after writing our wp ajax in between here we just add an underscore and say no priv and this no priv says no privilages should be required for you to run this particular function so after doing that I'm going to save this sofa and if you remember when we open this file from our wp admin we can now use the actions that are involved in that file like the wp ajax no priv and the wp ajax itself which are actions that are available to us globally now the first thing we always do after running our ajax is run this function called wp die because it will allow us to avoid having continuous loops running of this particular function now after writing our wp die we're going to start writing things that are specific to wukamas so that we can have our ajax running to our wukamas and doing what we need to add everything inside our cut now there's one thing we did inside our food dash js and that is we added a product id but if you look at the information we were passing inside our values here we were only passing the variation id and this variation id came from our wukamas we went into the loop and then when we go to the add to cut here we were able to see these particular variation id being passed into our html right here so for example if I click this you'll be able to see that in the elements we are having this particular id passing from the inputs now we also need to be able to pass the product id so that we can be able to know we're working from this product id and this is the variation we're looking for so the first thing we're going to do is we're going to come back to our add to cut right here and inside our form we're actually going to have a new input field that is going to be hidden so we'll have an input and it's going to be a type of hidden because we don't want to show it on the front end we're just going to be running some little hack at the back end and we're going to give this a name of product id and after getting that name we're also going to give it a value that is actually going to be from the product id so I'll give this a value here I'll say it's equal to and in here we're going to run some php and in here we're going to echo the product so we're going to get the product and from the product we want to tap the get underscore id function and that will give us the id of the product so the last thing that we want to do is just copy this here and then we'll give this an id of product id so this will have an id of product id and we're going to go back to our front page and reload this quickly we'll go to pizza we'll click this plus symbol and every time you just open this in the console log you'll see that we have a hidden input here that's telling us that we're on the product which is 22 for the barbecue steak pizza and if we go to the margarita itself and then just right click this to inspect the element you're going to find that in our model if we check our margarita pizza here you'll see that we now have a product of value 10 we're going to see that this product id is going to be quite important in our function as we start to write wukama specific code inside our functions php right here but you realize that this product id and name id still appear inside our html if we go to the pizza and click this and then just check out the form you can clearly see that this is not it's not dynamic it's just giving us something that's static and we want to be able to get this value that is very unique so what I'm going to do is come back in here and I'm going to use this product slug that we have here and then I'm going to change it in this place where we have the product id and I'm going to add on one simple keyword of hidden right here I'll also get this to be hidden so that when we come back to our front end and reload this go to pizza click this model and then check inside our forms we should be able to have this id very unique to this as you can see here and then we should be able to also get magarita pizza come and check this and you will see that you also have magarita pizza hidden so that's going to give us this value uniquely as we search for it inside our food dash right here now in order to provide this value right here in the product id you need to come here and select the product id actually equal to and we're going to use what we have here so we're going to say document dot get element by id and the document by id we want to be able to get its value so in here the id that we are looking for we're going to get this form that is selected we want to be able to get its id and after getting that id we should be able to chain on one simple word which is dash hidden so we're going to save this so we're going to come here and console log this so that we can see that we actually have the right thing happening so I'll duplicate this and test all the little levels we have here so we have the form id we want to make sure that's what's selected properly I'll get this to see that it is formatted in the right way then we should also be able to get the product id paste it here I'll save this let's go back to our front end let's give this a hard reload I'll come back to pizza open my console I'll click the barbecue steak pizza click add to cut you'll see we get our barbecue steak pizza we get the hidden we get the value of 22 and then I'll go to margarita click add to cut we get this rightfully so as we need it to be so I'm just going to remove all these pieces that we're hoping as to debug what we have here and we know now that we're going to have the right product id when we need to have it down in this place