Adding items to cart php mysql. Cart for an online store at the front or Writing modular javascript

“Which basket? And why suddenly a basket? - you may be surprised after reading the title. So, the shopping cart is the most common one - the one we all use when buying something in an online store. And I decided to publish an article about its creation for one, only reason: I couldn’t resist the wonderful and beautiful solution.

Don't believe me? you can see the result. And if you are interested in how this is done, read on.

Introduction

In this article, we are going to create a shopping cart that is powered by Ajax technology. All products will be recorded in a MySQL database and the data will be processed using PHP.

JQuery will run Ajax on the page, in addition, the simpletip plugin will add interactivity to the entire process.

So let's get started, download the demo files, and start reading.

Step 1 – MySQL Database

If you want to get a working demo, you will need to run the following SQL query in your database control panel (i.e. phpMyAdmin). This query will create a table and enter several products. This query code is also available in the table.sql file in the demo files.

table.sql

CREATE TABLE IF NOT EXISTS internet_shop (id int(6) NOT NULL auto_increment, img varchar(32) collate utf8_unicode_ci NOT NULL default "", name varchar(64) collate utf8_unicode_ci NOT NULL default "", description text collate utf8_unicode_ci NOT NULL, price double NOT NULL default "0", PRIMARY KEY (id), UNIQUE KEY img (img)) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ; INSERT INTO internet_shop VALUES(1, "iPod.png", "iPod", "The original and popular iPod.", 200); INSERT INTO internet_shop VALUES(2, "iMac.png", "iMac", "The iMac computer.", 1200); INSERT INTO internet_shop VALUES(3, "iPhone.png", "iPhone", "This is the new iPhone.", 400); INSERT INTO internet_shop VALUES(4, "iPod-Shuffle.png", "iPod Shuffle", "The new iPod shuffle.", 49); INSERT INTO internet_shop VALUES(5, "iPod-Nano.png", "iPod Nano", "The new iPod Nano.", 99); INSERT INTO internet_shop VALUES(6, "Apple-TV.png", "Apple TV", "The new Apple TV. Buy it now!", 300);

After this, you need to fill in your MySQL account details in the connect.php file.

Step 2 - XHTML

First we'll create the basic markup.

demo.php

Cart The best products, at the best prices Products // php code that generates the products Cart Design

As you may have noticed from the above code, we have placed our content in two main sections, completely identical in terms of XHTML markup. In the first column we display all our products, the second column acts as a shopping cart.

Below, you can see a detailed representation of the structure of our product section.

The products are generated using our PHP code, as can be seen on line 18. We'll look at this in more detail in a few minutes. Now, let's take a look at how we process the XHTML markup to produce the final design.

Step 3 – CSS

This time, the CSS code was very long, so I split it into two parts.

demo.css

Body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label( /* reset to original styles, for browser compatibility */ margin:0px; padding:0px; font-family :Arial, Helvetica, sans-serif; ) body( color:#555555; font-size:13px; background-color:#282828; ) .clear( /* clear-fix hack for cleaning the stream from floats */ clear:both ; ) #main-container( /* this is the main container containing two sections */ width:700px; margin:20px auto; ) .container( /* the main container for the content sections - products and cart */ margin-bottom:40px; ) .top-label( /* outer span, including the section name */ background: url(img/label_bg.png) no-repeat; /* display the left side of label_bg.png - a wide image with rounded edges */ display: inline-block; margin-left:20px; position:relative; margin-bottom:-15px; /* the section title is adjacent to the top edge of the product section*/ .label-txt( /* the inner span is outlined in red in the picture above*/ background: url(img/label_bg.png) no-repeat top right; /* display the right side of the image label_bg.png */ display:inline-block;

Pay attention to the tooltip class. It is created automatically by the simpletip plugin, but does not have any styles by default. That's why we assign it a style here. I used the border-radius property, which is not yet supported by all browsers, but will not cause much harm to those who do not support it.

Now, let's take a look at the CSS styles for the cart section.

#cart-icon( /* div that contains the cart icon */ width:128px; float:left; position:relative; /* set relative positioning so that the ajax loader is positioned relative to the div*/ ) #ajax- loader( position:absolute; /* absolute positioning positions the element on the page relative to its parent element, which is assigned relative positioning */ top:0px; left:0px; visibility:hidden; ) #item-list( /* the contents of the cart will be positioned in this block */ float:left; width:490px; padding-top:15px; 10px; text-transform:uppercase; ) #total( /* block, with total amount */ clear:both; float:right; font-size:10px; font-weight:bold; padding:10px 12px; text-transform: uppercase; ) #item-list table( /* each item in the cart is positioned inside the item-list block*/ background-color:#F7F7F7; border:1px solid #EFEFEF; margin-top:5px; padding:4px; ) a.button,a.button:visited( /* Checkout button */ display:none; height:29px; width:136px; padding-top:15px; margin:0 auto; overflow:hidden; color:white; font -size:12px; font-weight:bold; text-transform:uppercase; background:url(img/button.png) no-repeat center top; /* display only the top of the background image */ ) a.button:hover( background-position:bottom; /* on hover, we show the bottom of the background image */ text-decoration:none; ) /* Some less interesting styles */ a, a:visited ( color:#00BBFF ; text-decoration:none; outline:none; ) a:hover( text-decoration:underline; ) h1( font-size:28px; font-weight:bold; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; ) h2( font-weight:normal; font-size:20px; color:#666666; text-indent:30px; margin:20px 0; ) .tutorialzine h1( color:white; margin-bottom:10px; font-size:48px; ) .tutorialzine h3( color:#F5F5F5; font-size:10px; font-weight:bold; margin-bottom:30px;

text-transform:uppercase; ) .tutorial-info( color:white; text-align:center; padding:10px; margin-top:-20px; )

Any developer will tell us that we missed something here. As you probably guessed, there are special treatment procedures for IE6.

But, in any case, here's what we need to make IE6 understand what we want it to do:

demo.php

.pngfix ( behavior: url(pngfix/iepngfix.htc);) /* this is a special htc file that fixes the IE6 transparency issues */ .tooltip(width:200px;); /* provide a default width for the tooltips */

Great. Now, let's take a look at the final PHP.