Your name:
Your address:
Your report:
Insert code:

Latest resources:

Hello again, dear friends!
I said yesterday that I'm gonna continue this shopping cart tutorial so I am keeping my promise.

If you haven't read the first part of the tutorial, you can click here to have a look.

Considering the concepts presented yesterday, we will see now how to add an item to the cart, how to delete an item and not only.

Let's imagine the user visiting our website and getting interested in buying one or more items.
We will follow several steps between the access of the user on the page and the final placement of the order.

In the previous part of the tutorial we saw that as soon as the user visits your site, the visited page verifies if the user has a shopping cart already set and if not, it proceeds to setting the user's personal cart.

After that routine check, we can build the page that the user will see, just like in the example bellow:



In the left side of the screen we can place the items along with buttons in order to perform several commands. As you can see, we display an image for every single item, so we are going to need another field into the items table to store the image's URL.
What you have to do, is alter the table by inserting the newt code into your MySql:




Now we can finally build the page!
To do so, we need to access the database and extract the information that we will send to the browser.
Watch the code bellow:




I have extracted only the information related to the items and now we need to add the functionalityes.
Let's start with adding items to the shopping cart.

In order to do this, we need to send a request to a page that will perform the task. The request can be sent in many ways (a form that uses POST as method, a link that passes the information through URL, also known as GET method).
I will use the second choice so the example will be more obvious and easy to understand.

Now, remember that when we extracted the information, we also extracted the ID of every single item from the database. Because it's the unique identifier of the item, we will use this ID in the request along with other information that the page will need in order to understand what it has to do with it.

The request could look like this: www.mywebsite.com/mypage.php?action=add&item=H69FGS42S5

The page mypage.php is accessed and it receives two parameters (action and item) through GET method. Once the page is accessed, we have to do several checks to process the task.

Take a glance at the code bellow:




I have decided to use a switch because, further on I will add another action (the delete one).
Let's focus to the add action now.
Once the page knows what kind of request it got, you need to build the code that will perform the selected request.
Remember that the ID of the desired item was also passe to the page and now all you have to do is link the passed ID of the item with the ID of the user's shopping cart.

We will ask for the cookie containing the shopping cart ID and after that we will perform the MySql query that links the cart with the item.

This is the code to do it:




Anyway, the code is incomplete. We have not passed the number of items.
Resuming what said until now, we can assemble the whole code, assuming that the request will look like www.mywebsite.com/mypage.php?action=add&item=H69FGS42S5&quantity=1




You should now obtain something like this:



Now the user's shopping cart contains the selected item. Congratulations!
Let's see now how we can send the request.

The request will have a different URL for every specific item, according to the item's ID and quantity.
To launch a request we need to build the link for every request dynamically, when we start building the page.

Here is an example of code:




The resulting page will look like this:



Very good! You have sent the request, you have registered the new data, all you have to do now is show in the right upper corner the number of different items contained in the shopping cart.

All you have to do is a simple query like this, and print the resulting information to screen:




Friends, this is kind about all reguarding add elements to the shopping cart.

I will show you now how to delete an item from the cart.
Just like in case of the add process, we have to send a request to a page.
We will use GET method for this too. The request URL could look like this: www.mywebsite.com/mypage.php?action=delete&item=H69FGS42S5
Unlike the add request, the delete request does not have to contain the number of items.
Take an overview of the beginning of this tutorial and you will notice the switch showed before. I will add another case to that switch so that the page can make the difference between the requests and that it can perform the requested task.

After adding the code, the block will look loke this:




Inside the case selector we will add the code that will perform the task.
It could look like this:




Finally, the whole block of code, now looks like this:




When building the HTML on the page, the link for the delete request could be built like this:




Depending on your needs, you can choose which one of the links to show when assembling HTML (or maybe both of them.)

Having finished this part of the tutorial, i will show you how to place an order, how to count the total amount of the client's expense, how to change the number of items per every item inside the shopping cart and much more. All of these questions, in the next part of the tutorial.

I hope you liked it!

See you the next time!

The author decided not to share a resource for this tutorial.

Total comments: 6

Home | Privacy Policy | Advertise | Help & FAQ | Copyright Policy | Contact Us