Codeigniter Shopping Cart with Ajax JQuery

hello friends this one more video tutorial on code I igniter framework in this video we are going to learn how to make simple shopping cart by using code igniter card library code ignite your card class set scorecard functionality in which you can add item into card update item remove items from cart subtotal of single row total of charts and remove all item from card this all function you can perform by using this card library this card library allows you to add card data into session so when you have refreshed page then after also we can do item in shopping cart you now let's start learning this topic this is our testing one database in this database we have one table product with five table column like product to add category add product name product price and product image we have already inserted data into this table so first we will fetch this product data from this table and display on web page without the Cart button we have store image into our working folder of images first we have make database connection so we have go to config folder and in this we have go to database dot PHP file here we have set configuration like hostname set the locale lost username set to root password set to blank and database name set the testing 1 this way we have make database connection then after we have going to config dot PHP file and here we have write base or is equal to local F slash tutorials flash code I igniter folder name this is our base URL for this application now first we have create controllers with names shopping card in this first we have write index function so when this controller has been low this function will be called under this function first we want the load shopping card model so we have write dollar this with loader class object load with model method and under this method we have write shopping cart model this method will load this model into this function after this we have write dollar data with product variable is equal to dollar this with shopping cart model with fetch all function this function will fetch data from product table and store into this dollar date of product variable now we have go to shopping cart model which we have created under models folder under this model first we have write function with name fetch all this function will fetch data from product table under this function we have write dollar query variable is equal to dollar this with database class object DB would get method under this method we have write table name product this method will make select query and execute query after this we want to return output of this function so we have write return statement with dollar query variable with result method this function will return query execution result now we have a gain go to shopping card controller index function and here we have write dollar this with loader class library load with view method with two argument in first argument we have write view file name shopping cart and in second argument we have write dollar data variable it will load this page under this function with product data so we have go to views file shopping cart on this file we will display product data under this file we have already load bootstrap framework link and JavaScript libraries query we will use functionality of both framework on this page now we have moved to write code for display product so we have write for each loop and under this we have write dollar product variable as dollar row here dollar product variable value has been get from shopping card controller so by using 4-inch lubricant fetch product data one by one under the sloop we have write our code statement and under this first we want to display product images so we have write image tag with attribute source is equal to base URL function with images folder slash dollar roll product image object it will display image on web page after this we want to display product name so we have write header for tag with dollar roll product name object it will display product name below product image then after we want to make one text box in which user can enter quantity so we have write input type is equal text width attribute name is equal to quantity and minute is equal dollar roll product is object ended we have stored dynamic product set value so in query we can fetch quantity based on this attributed now we want to make add to cart' button so we have right button tag with attribute type is equal to button class is equal to ad card with button we have ad product details like product name price product and data variable and in this variable we will store value from product table so inch query code we can easily fetch particular product information when we have click on this button friends here you can see when page has been loaded then you can see product details like image name price quantity textbox and Add to Cart button so when we have click on this button then particular product has been added into the card after display product on webpage without the Cart button now we have to find one more division tag with attribute that is equal to Cart details with text like cart is empty so when we have add item into cart then cart will be display onto this tag now we have moved to right query code on at the cart button click so we have right dollar with button class addto-button so when we have click on Add to Cart button then this code will be execute under this we have right variable product it is equal to dollar this with data method under this method we have write product in this method will fetch product data from this data variable same way we have right variable product name is equal to dollar this with data method and under this method we have write product name this method will fetch product name data from this data variable then after we want to fetch price of product so we have write variable product price is equal to dollar this with data method and under this method we have right price this method will fetch price data from this data variable lastly we want two steps value of quantity which user will enter into quantity textbox so we have write variable quantity is equal to dollar with hashtag plus product and variable with value method this method will fetch value of in a particular product in text box and store into this quantity variable now we have write a statement with condition like value of quantity variable is equal to blank and greater than zero this condition will check quantity variable has some value and that value must be greater than zero than it will execute if block of code but suppose this condition is not satisfied an Alexa q tells block of code and under this block we have write alert pop-up message like please enter quantity but quantity variable value is greater than zero then it will execute if block of code and under this block we have right Ajax request and under this request first we have write URL option set to echo statements with base URL function with controller name solving card slash function add we have send requested to this URL after this we have write second option method this method to find which method should we use for send data to server here we have used post method for sending data to server in third option we have write data in this option we can define which data we want send to server so here we have write variable light product product name product price and quantity we have send this variable value to server lastly we have write success callback function dysfunction has been called when request has been completed successfully under this function first we have write alert pop-up message like product added into card this function will receive card details an HTML code format so we want to display card details under card details division tag so we have we have right dollar with division tag in card details with HTML method under this method we have right data argument so it will display card details on webpage now we have moved the shopping card controller and here we have created one function add this function will add item into shopping cart by using shopping cart library under dysfunction first we want the load code ignite your card library so we have right dollar that's with low there class object load with library method and under this method we have right cart this will load card library under this function after this we have right dollar data variable is equal to arraign under this array we have write first key and with valued Dollar post product at variable and this key we can store it or SKU Kotov item you and second key we have right name with value like dollar post product name variable and this key we can store our product name in third key we have right quantity with value like dollar post quantity variable in this key we can store quantity value of item and in last key we have right price with value like dollar post product price variable in this key we can store price of product this are for indexes of code ignite or class library and we should have right and same spelling if we have min Sony index then it will not enter right from data and to card and it will display nothing so this for index must required in this card library if we want to add some extra attribute that our need to identify product then you can add in fifth key if there is more than one attribute then you can add into fifth index key as options and in value you can define an array format after storing all product details and dollar data array variable now we have right dollar this with card class object card with insert method and under this method we have right dollar data variable this method will insert single item into cards and it will return one dollar row in variable this is unique kids who identify particular product details so after inserting item empty card now we want to fetch which hides and we have store into shopping card so we have make one new function view this function will fetch items from shopping cart and display under HTML table format under this first we have load card library and then after we have defined one dollar output variable is equal to blank value in this variable we will store shopping cart details and table format after this we have a gain write dollar output variable and we have app and HTML table with five table column like name quantity price total in action and two dollar output variable then after we have rightt dollar count variable is equal to zero we will use this variable value to check there is any item add into the cart or not now we have right for each loop and under this we have right dollar this with card class subject card with contents method as dollar items this content method will return the array of card to item so by using four inch loop we can fetch item from card one by one on to this loop we have write dollar count plus plus here we have increment the value of count variable so here we have increment dollar count variable value by one after this we have write dollar output variable and in this variable we have app and HTML code like open and close table row tag in between this tag we have write open and close table data tag in between this tag we have write dollar items name variable this will display item name and second table data tag we have right dollar items quantity variable this will return quantity which we have added and Picard and third table data tag we have right dollar items price variable this will return items price and for table data tag we have right dollar item subtotal variable this variable the return value of quantity into price this variable has been used in card class and that returns subtotal of particular item and in last table data tag we have right to find remove button so we have right button tag with attribute type is equal to button name is equal to remove class is equal to remove inventory and it is equal to dollar items row add variable in this button we have story unique head a particular item and that value we have store in it attribute so Inge query code we can easily fetch this variable value for remove item from card after defining item details and table format now we want to display hold total of card so we have a gain right dollar output variable and in this variable we have app and HTML code on between this here we have write dollar this with cart library object card with total method here total method will return total of whole cart after the suppose we have remove all items from card them now we want to display card empty message so here we have write a statement and under condition we have write dollar count variable value is equal to zero this condition will check if value of dollar count variable is equal to zero then it will execute if block of code here dollar count variable value will be zero if there is no items in card because if there is one item into card and dollar count variable value will be increased by one under this block we have write dollar of what variable is equal to text message like card is empty now we want to return output a dysfunction so we have right return statement with doll or output variable this will return this value of dollar output variable so we have go to add function and here we have write our code statement with dollar this with you function so if we have add item and decart them it will item added into cart and it will call this function which return card details in HTML table format so our code is ready for add item into card so we have checked output in browser friends you can see then product has been display on webpage so we have directly click on any product Add to Cart button so it display alert message like please enter quantity so we have entered quantity 1 and again click on Add to Cart button it display item added into Cart message has been pop-up on browser and after the sip is play card and table format without add item into card this library has initialized session class and store all card details and session but when we have refreshed page has been removed from the page because we have write code on when we have click on Add to Cart button it will display card details on web page so now we want to write query code one page has been low than any items we have added into card has been display on web page so we have go view file shopping cart and here we have rights query code like dollar with division it card details is selector with load method and under this method we have write base URL function with shopping card controllers flash load function so one page has been loaded in dis load method will fetch data from this URL and display under this division tag now we have go to shopping card controller and here we have defined one load function on a dysfunction we have right echoed statement with dollar this view function here we have called view function which return cart details in HTML table format and display under division tag within cart details so friends here you can see now it is not display card details on webpage so we have refreshed page and now it has been display card details on web page because when we have refreshed the page then load method has been fetch card details from load function and display on web page now we want to write code for remove item from cart here and remove button you can see we have defined class is equal to remove inventory so we will use this name as selector and then it attribute we have stored all right go add variable which returned unique it of particular items added into card so we have go to shopping card view file and here we have write dollar document as selector with on method and under this method we have right click event with button class removed inventory as selector with function so when we have click on remove button then this code will execute under this method we have first right variable role it is equal to dollar this would attribute method and under this method we have right to add attribute so this method will return value of an attribute and store into role it variable then after we have write a statement with confirm message like are you sure you want to remove this so one pop confirmed message has been pop on webpage with ok and cancel button so when we have click on cancel button then it will execute else block of code and under this block we have write return false statement that means no action will be performed but suppose when we have click on OK button then we'll execute if block of code and under this we have write Ajax request with first option URL set to base URL function with shopping card controller slash remove function so we have send requested to this URL in seconds option we have defined methods at the post we have used post method for send data to server in third option we have write data option and we can define which data we want send to server here we have defined road variable value send to server and lastly we have write success callback function this function has been called if request completed successfully on to this function we have write alert message like product removed from cart and display updated card Thai team under tag within card details by using HTML method now we have moved the shopping card controller and here we have right one removed function this function will remove item from card on to dysfunction first we have load card library by writing dollar this with loader class object loaded with library method and under this method we have write cart this will load cart library under this function after this we have write dollar row and variable is equal to dollar post row it variable here we have store wrote a variable get to Ajax request and store into dollar row and variable now we have right dollar data variable is equal to array with key row it with value dollar row in variable and quantity key with value 0 here we have store to data and dollar data array here you can see roll it is a unique kid defined by card library when we have inserted them into card and quantity key with value 0 after this we have right dollar this was card library object card with updates method and under this method we have right dollar data variable it will update quantity to 0 of particular item based on value of row and this library will remove that item from cars array whose quantity is 0 that means it will automatically removed from card now we want to get the updated details of card in table format so we have right echo statement with dollar this with view function dysfunction has returned card details in HTML table format and it details will be visible to user on web page friends here you can see there is one item into card so we have click on this remove button when we have click on this button then one pop-up message has been pop on webpage so first we have click on cancel button then there is no action has been performed but when we have a gain click on remove button then now we have click on OK button then it display alert message like item has been removed from card so our code is working on how to remove single item from card now we want to write code remove all items from card so we have go to shopping card control or review function and here we have defined one button with that review type is equal to button it is equal to clear card so when we have click on this button then all cart items must to be removed from card you now we have moved the shopping cart view file and here we have rights query code like dollar with document as selector with on method with click event button it clear card and function so when we have click on cleared cart button then it will execute this block of code statement and in condition we have right confirm with message like are you sure you want to clear card with two okay and cancel button if we have click on castle but and then it will execute tells block of code and under this we have write return false statement that means no action has been performed but suppose we have click on OK button then we'll execute if block of code and under this block we have write ajax request with URL option set the base URL function with shopping-cart controller with clear function we have send requested to this URL and in second option we have write success callback function this function has been called if request successfully completed under this function we have right alert message like your cart has been clear and display updated Shopping Cart details under division tagged with hidden card details by using HTML method now we have moved to write PHP code that solving cards controller and first read player function and under this function we have load card library this function will remove all items from card after we have right dollar this with card library object cart with destroy method this method will remove all items from cart - removing all items from card now we want to display antique art message so we have write our code statement and after this we have write dollar this with view function so this function will display card empty message on webpage so our code is ready so we have check output and browser friends first we have ads some might mint to the card we have had three items into card after this we have click on cleared card button so when we have click on this button then if asked are you sure you want to clear card first we have click on cancel button and no action has been performed after this we have again click on cleared card button then we have click on OK button after click ok button we have received alert message like your card has been clear that means our code is working so friends this is our video tutorial on how to make simple card by using code ignitor shopping card library with ajax query in this card we can add item into card we can remove single item from card we can clear all items from cart by single click we can update card details by using this library we do want to write code for getting subtotal of single item total of whole card and many more we can perform this all operation with a refresh of webpage because we have used Ajax query with this shopping card library friends if you like this video tutorial please share this video 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 for getting update regarding future video upload thank you for watching this video

Channel: Webslesson

Views: 70,481

Keywords: codeigniter shopping cart, codeigniter ecommerce, codeigniter shopping cart ajax, cart in codeigniter, shopping cart class, ajax shopping cart in codeigniter, add to cart with ajax in Codeigniter, ajax jquery codeigniter cart, add to cart in codeigniter, add to cart using ajax, ajax codeigniter shopping cart, codeigniter cart tutorial

Id: XF7Bui6jUFc

Length: 28min 17sec (1697 seconds)

Published: Fri Mar 24 2017