 Welcome back to the channel. In our previous video our custom theme is able to add different products by clicking the add to cart just to add a single product and when we go to our variable products like pizza and click this little plus sign we're able to get a model that allows us to add individual items to the cart by clicking that little link but this is not the best way we can use our theme we should be able to just check these different items and then have a button here that adds all these different pieces in one go that would be a better approach to using or having inside our own theme so what I'm going to do is make this work and if you want to do that please join me in the coding of the video so let's open up our editor and we shall be able to see where we were in the theme so the first thing that I'm going to do is make a little bit of cleanup and make sure everything is working as it should be so so you will see that we have a model title here we have these individual pieces I'm going to change these so that we can have something a little bit better so the way we do that is by going to our add to cart inside our wukamas and we're going to go to the loop and we shall go to add to cart.php and inside here I'm just going to choose the product slag for one and I'm going to change it here where we have the model title so I'm going to paste this php here and what I'm going to do is do a string replace and when I use string replace it expects the first item it expects is the dashes that I'm going to have I'm going to substitute those with the space and then I need to of course pass the string that I am working with right here so I'll close this off so that it doesn't break of course we need the semicolon here and then remove this one that's happening here then the next thing that we are going to do we're going to come down here and we're going to remove this extra piece of content that we have here so I'm going to just cut this and save the file then I'll come back and reload this let's go back to our pizza click the plus sign and you'll see that we now have barbecue steak pizza showing up here and then we can choose the different items from here same thing will happen if we go to margarita we have all of this showing up here we don't have those little links that we're adding the individual items now the next thing we are going to do is we are going to change a bit of the html structure that we have in here so for all this part where we are having all our content we're actually going to have a form so I'm going to close this off html with a form and then I'm going to open up a form above here so we'll have a form that's going to have an action that's empty and then we are going to say we want this form to have an id so I'm just going to give it the product slug so we'll have php here we'll click echo and we're going to use the product slug because I need to add and make this an arrow and then we'll add a semicolon here and save this we need to have that id and the next thing we need to do is have a method and the method that we're going to add here is a get method and then we'll close off our form right here now after adding our form I'm going to just stab this inside and then just before we close off our form we're going to have a button and our button will have an id of food add button that will be its id I'll add that and then inside this button I'm going to add an attribute of form that will allow us to choose which individual form we want to actually work with the reason I'm doing this is because we'll go back to our particular theme you'll see we have barbecue pits and we have margarita and all those are having their individual models and their individual forms so if we are looping through each one of those we shall need to have a particular form that we are targeting when we are doing our JavaScript so I'm going to give it a form and the form is going to just echo the same thing that we used up so we'll be using product slug semicolon right there and we'll say the button is the type of submit so in between our button here we're going to say add to cut using php I can actually translate this so that it can work with word press in terms of translation so add php underscore e that will allow us to echo at the same time also translate this so we shall add our text domain for our theme which I just need to get from our style.css and it's actually just techy food so I'm going to come here and add techy food and then I'll save this so let's go back and look at the html we have a reload what we have here and on reload you'll see that we have this I'll go to pizza click our plus sign we now have this one button and we're going to inspect it right down here you'll see we have idea of that we have a form that barbecue pizza it's a submit type and this is inside our form so you can see if you click our form we have a form of barbecue pizza and everything is working out well only issue we have here is that the idea and the names and the values of these particular items are their names so we're going to change that also into their IDs and what I mean by that is we need to get this full name I'll get all the different instances it has and then I'm going to change that into what we have as the product variation ID so I'll just copy this variation ID and then replace right here so I'm going to save this only leaving the full name to be called inside the label itself so I'm going to come back here reload our front page and then I'll go to pizza and then I'll click this little plus button and I'll just inspect under the hood to see what we have for each one of these and you'll see the input now has an ID of 24 it has a proper name of 24 and we have a value of 24 this will make it very easy for us as we are selecting the particular fields that have actually been chosen or selected as we use our JavaScript so this looks nice and I think we are now ready to start working on the particular button that we have here so I'll go back to the code and then what we're going to do is we're going to create a new file in our JavaScript folder which we're going to call food add to just and then we're going to have to enq this particular JavaScript inside our functions so I'll come back to our functions right here and then use this enq script that we have here what we are looking at doing is having something similar to what we have here so I'll copy this come back down here and paste it now this JavaScript is going to be of course with taking food add as an ID I'll change this here and then we'll get it from our directory stylesheet of course inside assets and inside JavaScript right here we have food add dash js so we'll have food dash add dot js it's going to be dependent on javascript on jQuery and the jQuery we want to use is not this slim because we want to use the ajax whenever you use the slim version of jQuery you don't have the particular dot ajax function inside it and we shall see where the problem comes in so for now we're going to add the version of one and then we shall select it be enq inside our footer so in order to tackle the issue of performance we know that this particular JavaScript is going to be added on every page that we load but we only want it to only load right here in this section so what I'm going to do is go back to the code and say since we are working on our front page we just need to add a new rule and say if we are on the front page or if we are not on the front page then we don't return that particular JavaScript so we'll say is front page so we can use that default wordpress function that helps to check that we are on the front page then we shall load this particular JavaScript so I'm going to save this and then I'm going to of course come back and then we're going to look at our network key and then a reload here with a hard reload and you're going to see that we now have a food-add.js loading right here so what we are going to do in our food.add is we're going to use our console log a lot more and the first thing that we shall do inside our food-js is we're going to introduce jQuery we will say jQuery and we're going to check if the document is ready then we'll add on the function of ready if our document is ready then we're going to run a function where we have a dollar sign saying let this reference of jQuery be replaced by this dollar sign so in every instance where we have the dollar sign we'll know that we are referencing jQuery inside there we'll close this off very well by adding that semicolon at the end and then inside here we're going to say let's look for so we'll use the dollar sign and we are saying let's find that target where we're having the id of food-add-btn so we're going to put this in our quotations so that we are now targeting the particular button and we'll say if we have this being clicked then we shall run a particular function and that function is going to get all the information inside the element of e so we're going to run this function and this function is going to get all the particular information about the click event and then the first thing that we shall do is say e prevent default to prevent default running of the button whenever it is clicked and then what we're going to do is just console log dot log we're just going to console log everything that comes in through the e so we'll insert this and then let's go back reload this of course sometimes you have to do a hard refresh and we'll click this and you'll see every time that we click this we get this event being loaded and if I inspect this object you will see that we are a current target that we have is our button of food-add.btn and that form and the type is that now inside it you're going to get the current target and you'll see that you have a number of items being shown in here and when we scroll down you'll actually see that where we're getting this particular click is in this parent node of barbecue steak form so I'll now go to the margarita pizza click that plus sign then click add when I click here you see we're not having this event triggering and that is simply because we are doing very bad html by adding an id right here we need to change this into a class so that it can be applied to any of the buttons that have that going through and then we're going to change from this pound into a class so we're saying anytime we find a button in that class and we click it please get the event that is being saved and then add it to our console log so I'm going to come back here hard refresh we go back to pizza we click this item click add you see that is being logged close that let me go to margarita and I click add you see that is being opened so let's first open the first two you see we're having the barbecue pizza being clicked on and if I go to the last one you'll see that we're working with the margarita pizza and that is what we need so the next thing that I'm going to do is inside this object I'm going to get the current target and inside the current target I'm also going to look for the parent element which is this and we shall look for the individual inputs or the individual items that are actually being ticked on and checked in here so the first thing we shall do is come back to our code and now what we're going to do instead of logging e we shall just form submitted as a string to show us every time we click the event and then inside here I'm just going to say let's get the form that has been selected so it's a var or variable form selected I'm going to store it and say e.current target dot parent element and of course I'm going to put that semicolon there we'll save that as a variable so down here let's get a variable and that variable is going to be called values and values will equal to an array number one that's going to come from and inside this I'll put a semicolon first we're going to say get document dot query selector all so we're going to say let's get all the individual items inside our document and we're going to look for the input so this needs to be in single quotes we are looking for the input and the input is going to be a type of checkbox type equals and then we're going to look for those that are actually checked so after doing that we're going to say let's chain on a map function so we want to get an array of all these items so in this map function we're going to say we'll get the item and that particular item we're going to get the item dot value so we're going to actually get the value of that selected I'll just right click this to inspect it to see where we're going with this so we're going to check for all the input fields and we're going to get the value of those checkboxes that have actually been ticked that's what we're saying in this long line of code right here so we're going to get the value and then we're going to store it as an array called values so let me console log the values that we have and then we shall be able to see what's happening and also console log the form selected so that you can know that we are doing the right thing so I'll come back to the front end I'll hard reload this we'll scroll down to pizza of course looking inside our console I'll click this plus symbol you see nothing happens when I trigger the add to cut our form is submitted and the array is empty but when I click on these two items three I'll click add you'll now see that we have the form submitted and inside our array it is empty and I'll come back to our code to see where the error is and it's just because here we chained on checked yet we're supposed to use a full colon so I'll come back here give it a hard reload when I come to pizza and then choose margarita for example click add the array will be empty you have nothing in there but we have the correct form if I choose to add small and medium extra cheese click add you'll now see that we're having our array being populated with 15 and 18 as the IDs I'll close this come back to barbecue steak pizza and add a large pepperoni olives and extra cheese click this you'll now see that we have 30 31 30 to 15 and 18 all being added so let's go back to our code in here and we say we're getting the right thing that we needed we're getting the correct form being selected and we're getting the right value being added so inside here we are going to just comment it out then we're going to come here and say we're going to use Ajax as a function in here the semi colon I'll open it up and inside our Ajax we're going to use a particular URL because we need to be pinging the right thing I'll add a comma here we need to add a type and the type we are doing right now is a post this needs to be in quotations as well and then we need to add when we have a success what happens so we'll have a function right here and say in here we need to pass a response and the response will be of success we'll have a function when that is done and then we need to also find out what happens when we have an error so I'll add an error there and then I'll say err for error and inside each individual one of these I want to console log and the console log we're going to have is a raise in here I'll duplicate this move this down and then in here we're going to console log the error that we get in case we don't have things that are happening right so after doing that let's work on our URL I'm going to come back here and I'm going to copy what we need to have here so you realize that every time we want to add on something into our cut let's say when you go to salads and click add to cut our page reloads with a particular ID of that if we add apple green salad you will see that what's changing is only the ID here so I'm going to copy the URL from here copy it come back inside here and I'll paste it as this this needs to be dynamic for all the different items so what we're going to do here is say for each one of those values so we'll use that for each function and we're going to say for each one of these values in here we need to say for each one of them we'll get the element the element is going to be that individual value so I'll say let's change this to value or it can remain as element it doesn't matter I will move the code into the loop up here we're going to run what we have here and we're going to say the URL is actually going to be equal to that and then we're going to use the plus symbol and we're going to say let's reference the value so that we can look through each ID that we actually have from our cut so we'll save that let's come back right here we'll reload this afresh we're going to come back to pizza you see nothing happens when you go to margarita choose large olives of course if I inspect this you're going to see that we're targeting the one of 20 I'll go back to the console click add you'll see that we have form submitted and then we have Ajax is not function now of course we get this error here saying Ajax is not a function because Ajax is not supposed to be second rate in here it's supposed to be outside these fields now of course this is not going to work just looking through the values and then just doing an Ajax function or a post of some sort so we need find an alternative method that helps us to loop through each one of these values then makes a post request to this URL of course including this value so we can either choose to use php or we can still try to do it inside our javascript by using things that are native for example using afresh function in here or trying to do a javascript post now this video has become a little bit long in the next video I'm going to show you how to properly handle Ajax inside WordPress so let's stay tuned for the next video if you enjoyed this please give it a thumbs up and if you'd like to see more of this please let me know in the comment section of what you want to see tackled or how you want to operate with all of this and don't forget to share with your friends don't forget to subscribe because on this channel we share WordPress solutions to help you in your everyday business otherwise enjoy your day