Ajax Shopping Cart in PHP using Bootstrap Popover

hello friends in this video tutorial we are going to make shopping cart in PHP with Ajax by using bootstrap papaver we have published many video tutorial on shopping cart by using PHP but now we will implement shopping cart by using bootstrap papaver here we will display card details under bootstrap papaver that means when we have add item into cart then that details will be display under bootstrap papaver plugin we will use Ajax for creating shopping cart then we will add item into cart without refresh of webpage now let's start discussing this topics so this is our test database and under this we have one product table with column like ID name image and price under this table we have already inserted some item data for a display product on webpage for add item into cart this is our index page and on this page we have already included JavaScript library and bootstrap library we will use functionality of both library for make this shopping cart here we have already write bootstrap nav bar source code for display header menu under this bootstrap nav bar we have right division tag with ID is equal to navbar cart under this we will display shopping cart with total amount of cart under this we have right in order list with class is equal to nav and nav bar nav under this we have right list tag and in list tag we have right anchor tag with ID is equal to cart popov our data placement is equal to bottom and title is equal to shopping cart here we have defined one anchor tag so when we have click on this tag bootstrap papaver will be slide down on webpage on bottom of this tag with title shopping cart under this anchor tag we have right span class is equal to badge under this class we will display total number of item added into Cart after this we have again right span tag with attribute class is equal to total price under this class we will display total of Cart now here we have right division tag with ID is equal to papaver content wrapper with style is equal to display:none we will convert this tag in to bootstrap papaver under this we have right span tag with ID is equal to cart details under this tag we will display shopping cart item in table format below this we have right anchor tag with ID is equal to checkout cart by click on this button we can check out from cart and proceed for next step same way for clear whole shopping cart we have right anchor tag with ID is equal to clear cart by click on this cart we remove all item from cart lastly here we have write the vision tag with ID is equal to display item under this tag we will list item for add into Cart button now we have moved to write jQuery code first we want to load product with Add to Cart button on webpage so here we have make load product function under this function we have right ajax.request and under this first we have right URL option set to fetch item dot PHP here we have send request to this page in second option we have right method and here we have right post we have used post method for send data to server after this we have rightt success callback function this function has been called if request completed successfully and it will receive data from server under this function we have right dollar with division tag ID display item with HTML method and under this we have write data this method will display product on web page with Add to Cart button now we have moved to write PHP code so first we have make database connection so here we have write dollar connect variable as equal to new class with three argument like my SQL host set to local host database name set to test username set to root and password set to blank now we have go to fetch item dot PHP page and here we have write include database connection dot PHP this code will make database connection after this we have write dollar query variable is equal to select star from product table order by ID in descending order below this we have write dollars statement variable is equal to dollar connect variable with prepare statement with dollar query variable this statement make query for execution now we have write if statement and under condition we have write dollars statement variable with execute method if query successfully run then it will execute if block of code after this we have write for each loop and under condition we have write dollar result variable as dollar row variable after this we have right for each loop and under condition we have right dollar result variable as dollar row variable under this loop we have right dollar output and under this variable we have append HTML code in which first we want to display product image so we have right image tag with attribute source is equal to images folder slash dollar row image variable below this image we want to display product name so we have right dollar row name variable same way we want to display product price so we have right dollar price variable after this we have right input type is equal to text with name is equal to quantity ID is equal to quantity plus dollar row ID variable for a generate unique ID name and value is equal to 1 under this user can define number of quantity for a particular item which he want to add into cart now we have right input type is equal to hidden name is equal to hidden name ID is equal to name plus dollar row ID variable and value is equal to dollar row name variable here we have store product name under hidden field after this we have write input type is equal to hidden name is equal to hidden price ID is equal to price dollar row ID variable and value is equal to dollar row price variable here we have store particular product price under hidden field lastly we have write input type is equal to button name is equal to add to cart' ID is equal to dollar row ID variable by click on this button user can add particular item into cart you this way we have store product list data in dollar output variable now we want to send to Ajax requests so we have right echo statement with dollar output variable now we have go to index page and called load product variable function so when page has been load into browser then this function has been called friends here we can see when page has been load into browser then we can see item on web page with Add to Cart button and above list of item we can see shopping cart symbol when we have add item into cart then here we can total of whole shopping cart and when we have click on this symbol then we can see whole shopping cart now we have go to index page and we have make another load cart data function this function will return shopping cart details on web page under this function we have start right Ajax request and under this first we have right URL option set to fetch cart dot PHP we have send request to this URL in second option we have right method set to post here we have used post method for send data to server in third option we have write data type and here we have write JSON here we will receive data in JSON format lastly we have write success callback function this function has been called if request completed successfully and it will receive data from server under this cart we have write dollar with division tag ID card details with HTML method and under this we have write data dot card details this code will display shopping cart details under this Tagg below this we have right dollar with span tag class total price with text method and under this we have right date a total price this code will display total of whole cart under this tag after this we have right dollar with span tag class patch with text method and under this we have right date a dot total item this code will display total number of item which we have added into cart now we have moved to right PHP code on fetch cart dot PHP page and on this page first we have write session start function this function will start session on this page below this we have defined two variable like dollar total price and total item is equal to zero after this we have write dollar output variable is equal to division tag with attribute is equal to order table after this we have start right table tag with first table column like product name quantity price of product total amount of particular product and action now we have write if statement and under condition we have write not empty function and under this we have write dollar session shopping cart variable this condition will check if this dollar session shopping cart variable is not blank then it will execute if block of code otherwise it will execute else block of code suppose we have already includes some item into cart then this variable is not blank and it will execute if block of code and under this block we have write for each loop with dollar session shopping cart variable as dollar keys and dollar value under this we right dollar output variable and under this variable we have a pen table HTML code here we have defined one table row and in this we have write first table data tag and between this we have write dollar value product name variable it will print product name under this column in second column we want to display quantity so here we have write dollar values product quantity variable for display product price we have right there table data tag and under this we have right dollar values product price variable same way for display total amount of particular product so we have defined table data tag and between this we have right dollar values product quantity variable into dollar values product price variable lastly for remove button we have right button with name is equal to delete class is equal to delete ID is equal to dollar values product ID variable by click on this button we can remove particular item from shopping cart now here we have right dollar total price variable is equal to dollar total price plus dollar values product quantity into dollar values product price this code will calculate total of whole shopping cart below this we have right dollar total item is equal to dollar total item plus 1 here we have increased this variable value by 1 which returned number of item add into shopping cart after this we have again right dollar output variable and in this we have append HTML table code and here we have right dollar total price variable it will display total of whole shopping cart this way we have store shopping cart details in HTML table format which we have store under dollar output variable now we have right dollar data variable as equal to array and in this first key we have right card details value get from dollar output variable after this we have right totalprice key with value get from dollar total price variable and lastly we have right total item key with value get from dollar total item variable so this way we have store data in dollar data variable in a Rea format now we want send this data to Ajax request so we have right echo statement with JSON encode function with dollar data variable this will convert PHP array into JSON encoded string now we have go to index page and we have called load card data function so when page has been load this function will called and it will display cart data on webpage now we want to initialize bootstrap papaver on web page when we have click on anchor tag with ID card papaver which we define under navbar so here we have write dollar with anchor tag ID card papaver with popover method by using this method we can initialize bootstrap papaver plugin under this we have write HTML option set to true that means we can fill papaver body by HTML code and in second option container set to body after this we have right content callback function and under this function we have write return statement with division tag ID papaver content wrapper dot HTML method friend first we have refresh page and now we have click on shopping cart then papaver slide down on webpage and under this we can see shopping cart with 0 item added into cart with checkout and button now we have moved to write code of add item into shopping cart by using Ajax in PHP so here we have write document with on method and under this we have right click event with button class addto-button then this code will execute under this we have write product ID variable is equal to dollar this with attribute method and under this we have write ID this code will fetch value from ID attribute below this we have write product name variable is equal to dollar with hidden tag ID name with Product ID variable with value method here we have fetch value of item name from hidden name variable after this we have write product price variable is equal to dollar with hidden price tag ID price with Product ID variable with value method here we have fetch value of item price from hidden price variable same way we have write product quantity variable is equal to dollar with quantity textbox ID quantity with product ID variable with value method here we have fetch value of quantity textbox below this we have right action variable as equal to add here we have define action at here we have set add item into shopping cart now we have write if statement and under condition we have write product quantity variable value is greater than 0 if this condition true then it will execute if block of code but suppose above condition false then it will acute else block of code and under this we have right alert with message like please enter number of quantity but suppose above condition true then it will execute if block of code and under this we have start right Ajax request and under this we have right URL option set to action dot PHP in second option we have right method option and here we have right post that means we will use post method for send data to server in third option we have right data option and in this we can define which data we want send to server so here we have write product ID product name product price product quantity and action variable which data we have send to server lastly we have write success callback function this function has been called if request completed successfully under this we have called load cart data function this function will display latest shopping cart details on webpage lastly under this we have write alert statement with message like item has been added into cart now we have moved to write PHP code at action dot PHP page and on this page first we write session start function this function will start session on this page below this we have write if statement and condition we have write is set function and under this we have write dollar post action variable if this variable value is set then it will execute if block of code under this block we have write if statement and under condition we have write dollar post action variable value is equal to add if this condition true then it will execute if block of code here we will store shopping cart data into one session variable so we can access that data in system from any page so here we have write if statement and under condition we have write is set function with dollar session shopping cart variable this condition will check if this variable value is set then it will execute if block of code but suppose we have add first item into cart that means the session shopping cart value will not be set and it will execute else block of code so here we have write dollar item array variable is equal to array with product ID key value get from Dollar post product ID variable product name key value get from Dollar post product name variable same way product price key value get from Dollar post product price variable and product quantity key value get from Dollar post product quantity variable this way we have store product data into this dollar item array variable now we have write dollar session shopping cart variable is equal to dollar item array variable so here we have store dollar item array data into the session shopping cart variable but suppose we have already item added into cart and we have again add item into cart that means dollar session shopping cart variable already created and it will execute if block of code so here first we have defined dollar is available variable as equal to 0 this variable value will be increase if we have add same product two or more time first we want to check particular product we have already added into cart or not if we have already added into cart then we have to just increase particular product quantity in cart for this we have right for each loop and under condition we have right dollar session shopping variable as Dollar keys variable with dollar values variable under this loop we have right if statement and condition we have right dollar session shopping cart variable with Dollar keys index with product ID variable is equal to dollar post product ID variable this condition will value a particular product ID which we have add into cart is already added into cart or not if Dollar post product ID variable value is matched with cart product that means we have already particular item added into cart so we have do not want to add again particular product into cart but we have to just increase quantity of particular product so here we have right dollar is available variable value increase by one for increase particular cart product quantity we have right dollar session shopping cart variable dollar keys index product quantity is equal to dollar session shopping cart dollar keys index product quantity variable plus dollar post product quantity variable this code will increase particular product quantity with value of dollar post product quantity variable after this we have right if statement and under condition we have right dollar is available variable value is equal to zero this condition will true if we have not add same product into shopping cart under this block we have right dollar item or a variable is equal to array with product ID key value get from Dollar post product ID variable product name key value get from dollar post product name variable same way product price key value get from Dollar post product price variable and product quantity key value get from dollar post product quantity variable this way we have store product data into this dollar item or a variable now we have right dollar session shopping cart variable is equal to dollar item or a variable so here we have store dollar item or a data into the session shopping cart variable this way we can add item into shopping cart now we have check output in browser friends first we have refresh page and after this we can see different product on web page with Add to Cart button and above product we can see shopping cart with 0 now we have add one product into cart after this we have received item added into cart after this in cart we can see one item in cart with total price of whole shopping cart now we have click on shopping cart then we can see shopping cart has been slide down on web page which is bootstrap popover and under this we can see item details which we have added into cart here we can see check out and clear Cart button also if we want to remove particular item from cart then we can do by clicking on this remove button now we want to remove particular item from cart so here we have right dollar document with on method and under this we have right click event with remove button class delete so when we have click on removed button then this code will execute under this we have write product ID variable is equal to dollar this with attribute method and under this we have write ID this code will fetch value of ID attribute below this we have right action variable is equal to remove here we have defined action of remove a particular item from cart now we have write if statement and under condition we have write confirmed popup message like are you sure you want to remove this product if this condition true then it will execute if block of code under this block we have write ajax request and under this first we have write URL option is equal to action dot PHP here we have send a request to this page in second option we have right method option and under this we have write post that means we have used post method for send data to server in third option we have write data option here we can define which data we want send to server so here we have write Product ID variable and action variable lastly we have write success callback function this function has been called if request completes successfully under this function we have called load card data function this function will fetch latest shopping cart data on webpage after this we want to hide bootstrap popover we have rightt dollar with papaver ID card papaver with papaver method and under this we have right hide this code will hide bootstrap papaver on webpage lastly we have write alert statement and under this we have write item has been removed from cart this message will pop up on webpage now we have go to action dot PHP page and here we have write if statement and under condition we have write dollar post action variable value is equal to remove if this condition true then it will execute if block of code under this block we have write for each dollar session shopping-cart variable as dollar keys variable with dollar values variable under this loop we have write if statement and under condition we have write dollar values product ID variable is equal to dollar post product ID variable if this condition true then it will execute if block code under this block we have write unset function and under this we have write dollar session shopping-cart variable dollar keys variable this function will destroy particular session variable after this we have go-to index page and here we have write dollar with document selector with on method and under this we have right click event with clear button ID clear card so when we have click on clear card button then this code will execute under this first we have right action variable is equal to empty after this we have start right Ajax request for clear card so first we have right URL option set to action dot PHP in second option we have right method and here we have right post here we have used post method for send data to server in third option we have right data option in this option we can define which data we want send to server so here we have right action variable lastly we have right success callback function if request completed successfully then this function has been called under this we have called load card data function this function will display latest shopping cart details on webpage after this we want to hide bootstrap papaver so we have right dollar with papaver ID card papaver with papaver method and under this we have right hide this code will hide bootstrap papaver lastly we want to popup message so we have write alert with message like your cart has been clear now we have moved to write PHP code and here we have write if statement and under condition we have write dollar post action variable as equal to empty if this condition true then it will execute if block of code under this block we have write unset function and under this we have write dollar session shopping-cart variable this code will destroy the session shopping-cart variable now friends first we have refresh page and on webpage we can see one item has been added into cart after refresh of webpage also we can see shopping cart data because this data has been store in session variable now we want to add one more item into shopping cart so we have click on particular add to cart button and this item has been added into cart which we can see in bootstrap papaver after this we want to remove one item from shopping cart so we have click on that item row remove button after this papaver has been hide from webpage so here we can also see total price of shopping cart has been decrease and total number of item has been change now we have again click on shopping cart then we can see only one item in our cart and one has been removed from cart here we can see item name quantity price and total price of cart also now we have add two more item in our cart now we can see three item in our cart and here can see total price of cart in two side one is in papaver and second we can see on header menu also now we want to remove all item from cart so we have click on click button after click on clear button after click on clear button shopping cart all item has been removed from cart and we can see 0 item in our cart and total price of cart goes to 0 for check out from cart we can simply click on this checkout button which code we will not discuss here because here we have discussed how to make shopping cart cart by using bootstrap papaver with PHP and Ajax if you have any query regarding this video tutorial part please comment your query in comment box and if you like this video tutorial please share with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our youtube channel forget more update regarding release of future video lastly keep watching our youtube channel thanks for watching this video tutorial you

Channel: Webslesson

Views: 88,722

Keywords: shopping cart in php, php ajax shopping cart, php shopping cart, shopping cart, php shopping cart using popover, php ajax shopping cart script, php ajax shopping cart tutorial, php ajax shopping cart example, shopping cart using bootstrap popover, php mysql ajax shopping cart tutorial, php mysql ajax shopping cart, simple php ajax shopping cart, php ajax session shopping cart

Id: QW9z3D3-Spw

Length: 39min 41sec (2381 seconds)

Published: Thu Apr 19 2018