Responsive PHP Shopping Cart with Bootstrap Tutorial

hey guys what's going on it's clever techie and in this video we're gonna be creating a responsive PHP shopping cart with bootstrap this water shopping cart is going to look like it's going to display product images titles and prices we're gonna be able to add as many products as we like to our shopping cart by modifying the text field down here we're gonna display order details or a product name quantity price and a total for each individual product as well as the grand total for all the products combined that are in a shopping cart we can also remove products from the shopping cart by pressing the remove button and down here at the bottom we're gonna display the checkout button our shopping cart is going to be responsive so if I drag the window here at a first breakpoint it's going to reduce the image sizes at a second break point is going to display our shopping cart in two rows and finally at a last breaking point it's going to display one column making it responsive for tablets as well as cell phone devices and if I scroll down here you can see that the order details table has become scrollable making it responsive as well so that's our responsive PHP shopping cart with bootstrap let's go ahead and create it so the first thing I want to show you guys is an overview of all the steps that we're gonna be completing I've created this outline in Microsoft OneNote which is a free program that you can download and this just gives us an overview of all the steps that we're gonna be completing and we can keep track of how many we have completed by checking off this empty box right next to all the individual steps we can also write pseudocode which makes it easier to solve programming problems and organize our code better later on so as you can see there are six main steps we're gonna be completing we're gonna create the shopping cart database with a products table then we're gonna insert data into our products table then we're gonna display products we're gonna display order details which is gonna be the main part of our program then we're gonna add a remove button next to each product and finally we're gonna display checkout button if the shopping cart is not empty I also included a link in the description of this video where you guys can download this file so the first step is to create a shopping cart database and products table which is what we're gonna do right now so I'm gonna go ahead and open up the command prompt and I'm gonna connect to the database then I'm gonna create the database by typing create database cart then I'm gonna open up the browser and go to PHP myadmin that I already have open here and check if the database has been created and as you can see I have created card database which is empty right now so the next step is to create products table there are many ways to do this I have already typed up this code to create products table so I'm just gonna go ahead and copy this and go back to PHP myadmin I'm gonna paste it here in the console of PHP myadmin then I'm gonna press control enter and execute the Kure at this point our products table has been created and we're now ready to insert our product data into the table so in order to fill out a products table I'm gonna do exactly the same thing I did for the actual table I'm gonna go ahead and copy this insert statement and paste it back into PHP my admin console I'm gonna hit ctrl enter to execute the Kure and at this point our products table has been filled with the actual product names images and prices now if you guys are gonna be copying this insert statement just make sure that your PHP file and and image files are in the same folder otherwise it's not going to work because you'll have to specify the actual path names to the files and this is how I have my PHP files along with image names they're all in the same folder okay so at this point we have created the database and products table we have also inserted data into our products table the next step is to display our products and when we complete this next step which is displaying our products our shopping cart is going to look like this so it's going to display product image product title and product price along with all the Add to Cart buttons next to each individual product so let's go ahead and get started on displaying products now as you can see underneath display products we have three sub steps that we're going to be completing and the first one is to connect to the database and run MySQL query to select all products from our table then we're going to loop through all the product results to get the data of each individual product and finally we're going to display product data inside of our Add to Cart form with image name price quantity text field and Add to Cart button now before we start coding HTML and working with bootstrap CSS I just want to complete these two steps with pure PHP and later on we're gonna start working on formatting so let's complete this step first with PHP and connect to the database and run MySQL Kure to select all products from the products table as you can see I've already created a new PHP file here named cart that PHP I also have a card that's CSS which is gonna be our C cascading style sheet file to format our shopping cart I also have index dot PHP which has completed shopping cart code just so that I can show you guys what the completed shopping cart is going to look like throughout this video and I also have completed CSS as well so these are the two files that we're gonna be working with here car dot PHP and car that CSS okay so let's go ahead and connect to our database first and then select products from our table okay so I'm just gonna open up the PHP tag and then connect to the database I'm gonna store everything inside a variable called connect using a function called MySQL i underscore connect which takes in four parameters the first one is localhost username which is root password make sure to use your own password and the database name which is card in our case then we're gonna create the curie string and store it inside the curie variable and our statement is going to be selecting all the products from our products table so select all products from products order by ID ascending so now that we have the connection and the Curie we actually have to execute this Curie and store everything inside of our result variable so we're gonna use a MySQL a Curie function which takes in two parameters the first one is a MySQL connection and the second one is the Curie okay so now that we have our connection and we have executed the Curie we're going to check to make sure that the products table is not empty so we're just gonna say if result and we're also gonna check if the result is more than zero with MySQL I Nam Rose function so if my sqli num rows the result is greater than zero continuing running at this point we're ready to loop through all the product data we're gonna use a while loop and store everything inside of a product array and we're gonna use a function called MySQL I fetch associative result so this is this loop is just gonna look through all the data that's inside of our result and is gonna store everything inside of an associative array and we can also print out each individual product right now inside the while loop just to see what we have so far so we're gonna use a function called print our product and then view the result in a browser and products let's go fetch mmm select from products order oh I have a mistake in my keyring refresh I'm gonna go to view page source and as you can see I have all the product data and now we're ready to work with all these products and start formatting them so I'm gonna go ahead and go back to OneNote and check off these two steps here and the last one to complete our displaying products is going to be display product data inside of the card form and along with all the product image name price quantity and add the card button which is the formatting part that we're gonna be doing right now so the first thing I'm gonna do here is declare doctype HTML then provide some basic HTML tags for the title I'm gonna name this page shopping cart working and then then I'm gonna go ahead and include two style sheets the first one is going to be bootstrap CSS so I'm gonna say link rel equals stylesheet' href equals bootstrap CSS URL and same thing for our custom card that CSS stylesheet href is going to be card CSS for now car CSS is empty but we're gonna be working with it later I just want to make sure that we've included our bootstrap as well as a custom CSS for now now the next step is we're gonna be printing out all of our product data inside of a body tag so we want to go ahead and copy this PHP and paste it inside of this body tag here we also want to go ahead and end PHP with a closing PHP tag okay next up is we want to make sure that we're printing out all the products inside of a bootstrap container which is going to basically contain the whole code within this container and so we're going to go ahead and create this new div tag just after the body tag so div class equals container container what I make sure we end this tag just before the body tag down here okay so we want to be printing all of our product data inside of the while loop because this is where we're accessing all of our product data including price name etc so we want to go ahead and and PHP code here and reopen it down here because we're gonna be printing more HTML I'm also gonna go ahead and change the syntax to shorthand by replacing these opening curly brackets with a semi with a Colin and I'm gonna replace these closing brackets with the end while and end if statements just because it looks nicer and it's easier to organize our code like that okay so inside of this while loop we're gonna be accessing all our product data and we want to be printing all of our product data inside of bootstrap columns these columns are going to be responsive and they're gonna be changing their size based on the screen size resolution for our example we're gonna be using two column names small and medium and this is how we're gonna be accomplishing it so we're gonna create a new div class equals call sm4 and call md3 I'm gonna explain what this means right now before we want to make sure that we end this da eat and it's still inside of our while loop okay so what this means here SM and MD are our breaking points so if I go to bootstrap website you can see that it says small devices and this is our SM what what these SMI letters mean so media break point SM is going to be at 576 pixels and media breakpoint MD is going to be at 768 pixels so what this means is bootstrap is gonna change our column names to this number when the screen resolution changes to 576 for small devices and it's going to change our column width to number three for screens that are seven 768 pixels and up okay hopefully this makes sense here actually let me show you something else so this is a completed shopping cart and if I go ahead and change the screen resolution to 800 you can see that the column name has changed as well and if I open up web developer tools and go to inspector I can click on one of these columns and then select one of these columns here so I'm selecting these this product course sale crystal case and so if I change this column name here to 4 for example you can see that the size of this column has changed to a bigger width so that's how that works and you guys can go ahead and play around with it just to experiment and see how that works ok let's go back to our code so now that we're inside this responsive bootstrap CSS column we're ready to actually print out our form as well as as well as only the other product information so I'm gonna go ahead and type form method is going to be post we're gonna be posting all our product data and for the action we want to make sure that we have that we provide a URL which contains our Product ID because we're gonna be accessing our Product ID so that we know which exact product is being added to the card so I'm gonna say the page name which is index dot PHP and and then question mark action equals ad that's gonna be our action name and then the second variable I'm gonna separate with an ampersand and provide ID equals our product ID and for that I have to actually reopen the PHP tag and then close it again then I'm gonna close the string with a double quote and close the HTML tag and something it's not right okay so inside of the PHP tag I'm gonna print out the actual Product ID just like that hmm okay got to delete this double quote here okay so if you remember from our print our statement I'm actually gonna do this again here product I'm gonna print our product so that I can show you guys how this works I'm gonna go to view source and so this is our array that we accessing and you can see that the product ID is our associative name ID and that's how we're gonna be accessing all of our product IDs so that's what we're doing here when when we are printing out the Product ID inside of the URL so that we know which exact product we're gonna be accessing can you go ahead and close this form tag okay so next up I want to make sure that all the products are nicely formatted so we're gonna create another div and name it products and this is a class that we're going to be creating later on inside of the card that CSS so that our columns look nice now we're ready to print out product image name and price so for the image I'm gonna say image SRC equals and then provide the actual product image name which is product image which is actual this is the path where a product is located so he's gonna print it out inside the image source and then for the class I'm gonna say I am GE responsive sure we gonna end this here for the class I'm gonna say image responsive mm-hmm fix this here and what this is going to do is it's going to resize our image to a different size based on the screen resolution something is not right here okay I forgot to end this okay okay so image - response is just gonna change make our images responsive by changing their size based on the screen resolution next up is the name of the product and this one I'm just gonna put it inside the h4 and say class equals text - info and what this is gonna do is is just gonna change the link color to blue so if I go back to bootstrap website you can see that they have a bunch of different text colors and text info is gonna change it to infil ink which is blue so it's going to look like this okay so that's what that means and inside of the h4 tag I'm gonna go ahead and open up the PHP tags once again and print out product name okay it's not looking good so far but let's go ahead and print out product price next okay so h4 for the product price I'm also gonna be printing it out inside of the h4 and I'm gonna put the dollar sign here and then open up the PHP tags as usual inside of the PHP tags I'm gonna say echo product price so now we have our product image name and price next up we want to have the quantity of the products that we're going to be adding to the cart and this one is going to be changeable so we want to be so we want to make sure that it's inside of a text field so we're gonna say input type equals text we're gonna name it quantity so we're gonna be able to access this variable later on in our code for the class and this is another bootstrap class it's called form control and it's gonna form a tower a text field in a really good-looking way for the value it's going to be default value I'm gonna say one okay so now we have all our product data but we don't have a way of accessing our product name and price because we're just printing them out as HTML inside of our form so we want to make sure to add two more hidden text field types so that we able to access these variables inside of our code later on so I'm gonna say input type equals hidden and for the name is going to be product name and the value is going to be the actual name of the product so I'm gonna go ahead and open up the PHP tags and print out product name so that way we're gonna be able to access our product name and price inside of the variables once the form has been submitted I'm gonna do the same exact thing for the price so I'm just gonna go ahead and copy this product name here and replace the name to price here as well as here okay so now we're gonna be able to access all the variables once the form is submitted and the final thing inside of our form is going to be the Add to Cart button so that the form can be submitted so we're gonna say input type because submit name this one Add to Cart for the bootstrap class I'm gonna say BTN BTN info and this one is just gonna style our button really nicely for the value I'm going to say Add to Cart which is going to be the actual text of our button now I can see how this thing looks like in a browser and it looks terrible let's see Oh responsive okay so that's that's what's gonna happen if our images are not responsive to refresh the page and gonna go ahead and delete this print our statement and as you can see we're now printing out all of our product images titles prices as well as text fields and add card buttons now I'm gonna go ahead and add a little bit of a margin to our Add to Cart button just so it has a little bit of space between the text field so I'm gonna say style equals margin top 5px okay so now we have a little bit of space in here and we're now printing out all our products and the last part we're gonna do here is we're gonna add some custom CSS to our card that CSS file so that the columns look a little bit nicer okay so I'm gonna go ahead and go to card that CSS and if you remember we created this class equals products so this is exactly what we're gonna be working on in here so we're gonna create a new class named products and first we're gonna add a border to our column with 1px solid and the color is gonna be basically gray we're also gonna add background color which is also gonna be a gray background we're also gonna add that border radius which is going to be you know which is going to make our border rounded 5px gonna add padding to add a little bit of spacing as well as margin bottom let's see what this looks like now if i refresh in the page and as you can see our product products look a lot nicer now now if you guys don't understand what some of this CSS means you can always just open up the inspector tools you can click on each individual column and and navigate to products over here and you can go ahead and unselect all of the CSS that we just created and it's going to change CSS by removing it and adding it again so you can just play around with it and see what it does you can see that it's adding round borders and background color you can see where we're adding padding and we can see where the margin has been created as well so now our products are all being printed out really nicely and we are done with that part of the of our project so we can go back to our OneNote and check off display products so we're done with display products and now we're ready to work with display order details okay so the first part are displaying order details is we want to make sure if the Add to Cart form has been submitted then we want to make sure that the session shopping cart exists if the shopping cart exists we want to create a numeric product IDs array which will attract array keys and match them to product IDs this will make more sense as we get into coding this part of our project but basically what this means is we want to create a numeric array because our session is going to be an associative array and there won't be a way to match array keys to product IDs which is what we need to correctly add and delete products from the shopping cart so we're gonna create a counter to keep track of how many products are in the shopping cart so that we know what the arrow key is for the next product then we want to add next product to exist and shut accession shopping cart array using that counter as next array key on the other hand if the shopping cart doesn't exist we just want to create a session shopping cart array with submitted product data using the first array key which is 0 then we want to calculate individual product total we want to calculate grand total for all the products and we want to display all the order details on the page including product name quantity price total and grand total ok so now we're ready to start coding this part and the first thing we're gonna do is check if the add card form has been submitted let's go ahead and do that right now some I want to go ahead and then open up the PHP tags and listen this whole code is going to be on top of all of our code that we have already created first of all I want to start the session with a session underscore start function and I'm also gonna create a new array many product IDs this is gonna be an empty array for now and we're gonna be using it later on in our program okay so first thing we want to do is check if Add to Cart button has been submitted so I'm gonna say if filter input input Post Add to Cart which is the name of our button down here then we want to proceed so what this function does here is it basically checks if add the card variable has been set so this is how we check if the button has been in fact submitted so we're done with that part and we can check this off here and next we want to check if the session shopping cart exists so we're gonna say if is set session shopping cart just like that then we want to proceed with the next part of the program on the other hand if the shopping cart doesn't exist so we wanna add else then we want to do this part of the program okay I actually want to do this part first because it's very simple and you guys can see what's going on before we move on to a more trickier part of of this of this code so let's go ahead and take care of the else where our shopping cart doesn't yet exist okay so what we want to do here if the shopping cart doesn't exist is we just want to create a new session variable or rather array with a starting key 0 so let's add some commentaries here so that we know what's going on if the shopping cart doesn't exist create first product with Araki zero and over here we're gonna be creating array using submitted form data starting from p0 and fill it with valleys okay so let's go ahead and create our session shopping cart so I'm gonna say session name it shopping cart and I'm gonna provide the arrow key 0 which is the first array key and then I'm gonna say array and inside of this array we're gonna be accessing all the form data that's been submitted to this form so the first one is going to be ID of the product so ID filter input this one is gonna be accessed from the input get because as you recall we have provided this action URL with a product ID and this is inside of a get variable rather than post where all the other values are gonna be accessed because it's inside of this action URL so this one is an input get okay then we're gonna be accessing our name of the product which is been submitted inside of the input post and the same thing for all the other variables or values product price same thing it's been exit from post and finally the quantity of the product and now we have all of our shopping cart or product information inside of our shopping cart session so I can actually test this by printing out this session array that we have just created just to see what's going on so far though before we do that I actually want to create a new custom function so that it prints out HTML tags pre which is gonna display our array in a very nicely formatted way so I'm gonna say function name the function pre R which is going to take in our EPS array and then what its gonna do is it's just gonna print out the pre tags so the opening pre tag that is gonna print out the array using the regular built-in print our function and then I want to close the pre HTML tag down here that I just want to replace this with pre R so that we use our new custom function also we want to make sure that our session is empty so we want to make sure to use a function called session destroy' otherwise there might be some other variables inside of our session so now I'm gonna go back to the browser and see what this looks like okay at this point our array is empty but if I click on add to cart on what are the products you can see that our session array has been created with all the values inside of the session starting with array key 0 and as you can see with the pre tags it's printing out the array in a nicely formatted way so that we can see what's going on right away so now we know that this part of the code is working so we can go back to OneNote and check off this step okay now let's move on to the part where if the shopping cart exists and we were also already completed the shopping cart exists okay so for this part we want to make sure to create a counter that's gonna keep track of how many products are in the shopping cart so that we know that the Araki so that we know the Araki for the next product so this is what we're gonna do right now okay so inside of our shopping cart where it exists this is what we want to do I want to create a new variable called count and we want to use a simple function called count which is going to count our session array shopping cart to see how many products are in it and that's how simple it is so now we have a counter and we're gonna use it in place of the arrow key to so that we know which product key to use which array key to use for the next product that's been added to the cart okay so I'm gonna comment this and say keep track of how many products are in my shopping cart okay we're done with this part and now we want to create a numeric product IDs array which will tracked array keys and mesh them to product IDs this part is necessary because our session shopping cart array is an associative array as you can see here and it's very difficult if not impossible to match this array key to the product ID in this way so what we're gonna be doing is creating a new array called product IDs which is gonna be a numeric array with arrow keys and product IDs only and we're gonna accomplish that with a function called array column so this array that we created earlier we're gonna say product IDs equals array column session shopping cart and we want to provide our the air a column takes in two parameters the first one is an array and the second parameter is the column which will want to isolate from the array okay so I'm gonna add a comment and say create sequential array for matching array piece to product IDs and I'm gonna go ahead and print out this product IDs array here so that I can explain it a little bit better I'm gonna comment out session here a comment out session destroy' got to go back to the browser refresh the page Add to Cart okay so you can see that for now our program is only allowing us to add one product to the card but that's basically what it's doing so it's isolating product ID and it's matching it up with air a key which is the first array key which is zero so that's how our product IDs is going to look like and this is just for knowing which exact product is being added to the card and providing correct array key for that product okay so next up we want to make sure that the product being added to the card does not already exist in the array so we're gonna say if not in array with an exclamation mark filter input input get ID so this is gonna check if if the if the product with this ID already exists in in the shopping cart array and if it doesn't exist it's going to proceed with the program and here we want to do the same thing as we did inside of our doesn't exist statement so I'm just gonna go ahead and copy this whole part it's gonna be a little bit different in place of the of the Araki 0 here I'm just gonna put count just like that and now what it's gonna do is it's going to count how many products are in our shopping cart and it's going to use that count for the next arrow key so that it knows which product is next and we know which arrow key is going to be next as well ok so that's it for that part and the last one that we want to do is what we want to do in case if the product already exists in the shopping cart session variable and we simply want to increase the quantity of the the quantity key of that product that's in that's already in the shopping cart we don't want to be reading the product again to the shopping cart session and already in order for us to do that we want to create a new loop and look through our product IDs so we're gonna say I equals 0 I'm gonna create a for loop but I equals 0 and then count product IDs I plus plus so what we're doing is we're just looking through all the product IDs here and we're gonna say if product IDs equals the product has been added to the cart so if the product ideal which is already existing inside of the product IDs AIRAID is going to match up with a product which has been submitted from the forum inside of a get variable if that happens then we know that product already exists in the shopping cart so we simply want to increase the quantity key of our session shopping cart and that's exactly what we're gonna do here so session shopping cart I quantity plus equals filter input input post quantity so what this is doing here it's making sure that the arrow key is is the same and it's also using the quantity which is the quantity of the product and then I'm using plus eCos which is basically adding quantity to the existing quantity of the of this key and the quantity has been added is the quantity that's going to be provided from the form and basically it's going to add that quantity to the existing key so just to comment it a little bit so that we know what's going on add item quantity to the existing product in the array also over here match pair a key to ID of the product being added to the cart and product already this increased quantity okay so our session should be working now let's go ahead and test it out let's add one of the products in the cart in Eric specs these two parameters one given let's see okay let's go ahead and fix that I forgot to specify the actual product IDs here yeah because we're checking if the product ID exists inside of our product IDs array so make sure to add this area here okay let's go back and see what's going on undefined variable product IDs line 27 product product IDs okay should be working now so let's go ahead and print our our session to see what's going on and as you can see our session has all the products that I've just been adding to the session so I'm gonna go ahead and add some more products and now that product has also been added to the session and as you can see all the products are inside of our session variable and the quantity for Corsair is 4 right now and if I click on it again the quantity is now 5 so we can see that that part of the pen program is working as well okay so you can go ahead and experiment with this and see how that works and hopefully this makes sense and now this part of the program is completed and we can go ahead and go back to OneNote and check off all these checkboxes here so the main part of the program is completed and now we we just have to calculate the individual product total calculate the grand total for all the prod and finally display all this information on the order details page so let's go ahead and get started on that okay so for this part of the program where we're gonna be calculating individual product total calculating grand total and then display an order details on page including product name quantity price and total and grand total I actually chose to copy and paste the completed code on the page because the code is actually very basic but it would take forever to type and I want to save some time in this video and if you guys are gonna be pasting this whole code make sure that you're still inside of the div class equals container otherwise it's not gonna look good so this is the new code that I've pasted here and I'll explain what's going on here right now okay so first of all we're using a class bootstrap class called table responsive so that when our shopping cart is really small the table is going to be scrollable as you can see here okay so that's what that does it's a really nice feature for of bootstrap next we're using a regular class table and inside of this table we have our table headers which are which is this part here and then we're looping through our session array which is our array that we have created earlier in the video so I'm gonna add some more products to the session so this is the area the shopping cart area that we're gonna be looping through in order to display all this quantity price and total along with product name data okay so we're looking through the array make sure that it's not empty then we're creating a new variable called total which is going which is what we're gonna be using to calculate grand total of all the products then we're creating a for each loop to look through our shopping cart array and now we're accessing all those all those values inside of our shopping cart array and we're just printing them out so we'll print it out product name quantity price so that part is what's so this is the product name here quantity and price which is exactly what's inside of our shopping cart session variable next we are calculating the total for the individual for the individual product by multiplying quantity by price and we're using a function called number format to format this number nicely and this is what's being printed out here next up is the remove button which is this red button here and we're gonna be hand coding this part later in the video but for now we're basically using an action called delete so that we know or what kind of action is being it's been submitted so that we know to remove the product from our session and we're printing out product ID in the same way that we have done in our form over here where the product has been added to the cart so basically that's how we know which product to remove from the cart and for the bootstrap CSS we're using BTN - danger which is what's making this button red down here we have that turtle that we have to that we set to zero previously and we're just adding more turtle to the existing turtle by multiplying the product quantity by price and that's how we create grand total for all the products which has been printed out at the bottom here okay so that's it for all the data this is where we actually printed out the grand total and we're using a line right to align this number to the right side of the screen finally we have a check button and this button we only want to display if the shopping cart is not empty so we're checking if the shopping cart is not empty and we're making sure that the shopping cart contains more than zero products and only then we're printing this button with a custom CSS and as you can see here in car that CSS I've also chosen to pace the remaining CSS here and this is just gonna be a lot more productive because you guys can play around with this with inspector tools in a similar way we've done with the columns and you can go ahead and check out this you can go ahead and check out this check out button and this is all the CSS that's been created for for this button so you can go ahead and play around with that by removing the background color alignment of the text padding and you can see what all the CSS does to the bottom to the button instead of typing all this code okay so that completes that part of the program so we can go ahead and come check all the check boxes here along with a display checkout button and the last part that we're gonna do is we're gonna remove is we're gonna add the remove button to next to each product as you can see the button has already been added now we're just gonna have to hanko this part of the program by simply removing or unsetting the product from the session so we're gonna look through the session shopping cart variable and match it with a get ID of the product that's being deleted then we're gonna unset our a key of the product and a session variable and finally we're gonna reset array keys in a session of the product car so that the mesh for the product IDs array alright let's go ahead and do that right now okay so the first thing we want to make sure is the that the link with the action delete has been clicked which is this URL down here so that we know that the user actually wants to remove the product from the cart so we want to make sure to check for action delete alright let's go ahead and do that right now okay so we're gonna say if filter input and put get action equals delete and that's how we're gonna check that the user has clicked on that action next we're gonna look through our session shopping cart look through all products in the shopping cart until it matches with get ID variable okay so down here inside of our delete URL you can see that the product ID is provided so we're just gonna take this Product ID and match it with our shopping cart idea the product so that we know which product to remove all right so let's create a for each loop to look through our session shopping cart as key product so now we're looping through our shopping cart array and now we're gonna check if the product ID matches with our get ID that the user is trying to delete so if product ID equals get ID and that's how we're gonna know one second if product ID okay so okay so we're looking through the product IDs and we're matching them with a get ID that's been provided from the actual URL of the product that's been deleted and so now we know which product to remove from our shopping cart so we're gonna use a simple function called unset session shopping cart and we're gonna unset the key of that product so that's gonna remove the product from the shopping cart when it matches with a get ID commenter remove product from the shopping cart when it matches what they get ID okay so now this is gonna remove the product from our session and lastly what we want to do is we want to reset session era keys so they match for the product IDs numeric array otherwise when our products are deleted from the cart they're no longer gonna be matched with the with a session so we want to reset session array keys so they match with product IDs numeric array and this is to make sure that the right products are being added and deleted to the card otherwise it's gonna mess it up and in order to resort our shopping cart we're gonna use a function called array values so we wanna say session shopping cart equals array values session shopping cart and just like that is gonna resort our array it's gonna sort our arrays so that all the keys match with product IDs array over here okay we can now go ahead and test that out by open up the browser you can refresh the page and try to remove one of the products and it says use of undefined constant ID online 5051 let's go ahead and check out what's to see what's going on oh okay make sure this is a string here now let's go back to the browser Add to Cart add all the products to the cart test out the remove button and everything is working you can also resize the window to see that our cart is in fact responsive and as you can see everything is working and our shopping cart is now complete so you can go ahead and check off all the remaining check boxes in our project and our response to PHP shopping cart with bootstrap is now complete clever techie out

Channel: Clever Techie

Views: 140,969

Keywords: php shopping cart, php shopping cart tutorial, php shopping cart using sessions, php shopping cart tutorial mysql, bootstrap tutorial, php bootstrap tutorial, php bootstrap shopping cart, php mysql shopping cart, php mysql tutorial

Id: YvXaKDnHKVk

Length: 56min 40sec (3400 seconds)

Published: Sun Dec 24 2017