Dynamic Ajax Shopping Cart

georgisio · Thursday at 5:10 AM

This Dynamic Ajax Shopping Cart is a simple project written in AJAX, jQuery and PHP. This project created to make the shopping cart dynamically without using of internet for the presentation how the shopping cart works. The system has a products that you want to add to the cart and automatically total the expenses that you bought and create a checkout just like from the online shops.

Sample Code

Index.php - This script is for the query of products from the page and sum it all.

$(

document)

.ready

(

function

(

)

{
var

Arrays=

new

Array

(

)

;
$(

'.add-to-cart-button'

)

.click

(

function

(

)

{
var

thisID =

$(

this

)

.parent

(

)

.parent

(

)

.attr

(

'id'

)

.replace

(

'detail-'

,

''

)

;
var

itemname =

$(

this

)

.parent

(

)

.find

(

'.item_name'

)

.html

(

)

;
var

itemprice =

$(

this

)

.parent

(

)

.find

(

'.price'

)

.html

(

)

;
if

(

include(

Arrays,

thisID)

)
{
var

price =

$(

'#each-'

+

thisID)

.children

(

".shopp-price"

)

.find

(

'em'

)

.html

(

)

;
var

quantity =

$(

'#each-'

+

thisID)

.children

(

".shopp-quantity"

)

.html

(

)

;
quantity =

parseInt(

quantity)

+

parseInt(

1

)

;
var

total =

parseInt(

itemprice)

*

parseInt(

quantity)

;
$(

'#each-'

+

thisID)

.children

(

".shopp-price"

)

.find

(

'em'

)

.html

(

total)

;
$(

'#each-'

+

thisID)

.children

(

".shopp-quantity"

)

.html

(

quantity)

;
var

prev_charges =

$(

'.cart-total span'

)

.html

(

)

;
prev_charges =

parseInt(

prev_charges)

-

parseInt(

price)

;
prev_charges =

parseInt(

prev_charges)

+

parseInt(

total)

;
$(

'.cart-total span'

)

.html

(

prev_charges)

;
$(

'#total-hidden-charges'

)

.val

(

prev_charges)

;
}
else
{
Arrays.push

(

thisID)

;
var

prev_charges =

$(

'.cart-total span'

)

.html

(

)

;
prev_charges =

parseInt(

prev_charges)

+

parseInt(

itemprice)

;
$(

'.cart-total span'

)

.html

(

prev_charges)

;
$(

'#total-hidden-charges'

)

.val

(

prev_charges)

;
var

Height =

$(

'#cart_wrapper'

)

.height

(

)

;
$(

'#cart_wrapper'

)

.css

(

{

height:

Height+

parseInt(

45

)

}

)

;
$(

'#cart_wrapper .cart-info'

)

.append

(

'<div class="shopp" id="each-'

+

thisID+

'"><div class="label">'

+

itemname+

'</div><div class="shopp-price"> $<em>'

+

itemprice+

'</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>'

)

;
}
}

)

;
$(

'.remove'

)

.livequery

(

'click'

,

function

(

)

{
var

deduct =

$(

this

)

.parent

(

)

.children

(

".shopp-price"

)

.find

(

'em'

)

.html

(

)

;
var

prev_charges =

$(

'.cart-total span'

)

.html

(

)

;
var

thisID =

$(

this

)

.parent

(

)

.attr

(

'id'

)

.replace

(

'each-'

,

''

)

;
var

pos =

getpos(

Arrays,

thisID)

;
Arrays.splice

(

pos,

1

,

"0"

)
prev_charges =

parseInt(

prev_charges)

-

parseInt(

deduct)

;
$(

'.cart-total span'

)

.html

(

prev_charges)

;
$(

'#total-hidden-charges'

)

.val

(

prev_charges)

;
$(

this

)

.parent

(

)

.remove

(

)

;
}

)

;
$(

'#Submit'

)

.livequery

(

'click'

,

function

(

)

{
var

totalCharge =

$(

'#total-hidden-charges'

)

.val

(

)

;
$(

'#cart_wrapper'

)

.html

(

'Total Charges: $'

+

totalCharge)

;
return

false

;
}

)

;
var

single_li_offset =

200

;
var

current_opened_box =

-

1

;
$(

'#wrap li'

)

.click

(

function

(

)

{
var

thisID =

$(

this

)

.attr

(

'id'

)

;
var

$this =

$(

this

)

;
var

id =

$(

'#wrap li'

)

.index

(

$this)

;
if

(

current_opened_box ==

id)
{
$(

'#wrap .detail-view'

)

.slideUp

(

'slow'

)

;
return

false

;
}
$(

'#cart_wrapper'

)

.slideUp

(

'slow'

)

;
$(

'#wrap .detail-view'

)

.slideUp

(

'slow'

)

;
current_opened_box =

id;
var

targetOffset =

0

;
if

(

id<=

3

)
targetOffset =

0

;
else

if

(

id<=

7

)
targetOffset =

single_li_offset;
else

if

(

id<=

11

)
targetOffset =

single_li_offset*

2

;
else

if

(

id<=

15

)
targetOffset =

single_li_offset*

3

;
$(

"html:not(:animated),body:not(:animated)"

)

.animate

(

{

scrollTop:

targetOffset}

,

800

,

function

(

)

{
$(

'#wrap #detail-'

+

thisID)

.slideDown

(

500

)

;
return

false

;
}

)

;
}

)

;
$(

'.close a'

)

.click

(

function

(

)

{
$(

'#wrap .detail-view'

)

.slideUp

(

'slow'

)

;
}

)

;
$(

'.closeCart'

)

.click

(

function

(

)

{
$(

'#cart_wrapper'

)

.slideUp

(

)

;
}

)

;
$(

'#show_cart'

)

.click

(

function

(

)

{
$(

'#cart_wrapper'

)

.slideToggle

(

'slow'

)

;
}

)

;
}

)

;
function

include(

arr,

obj)

{
for

(

var

i=

0

;

i<

arr.length

;

i++

)

{
if

(

arr[

i]

==

obj)

return

true

;
}
}
function

getpos(

arr,

obj)

{
for

(

var

i=

0

;

i<

arr.length

;

i++

)

{
if

(

arr[

i]

==

obj)

return

i;
}
}
</

script>

Style.css - This file is for the dynamic design of the page and help for the nice output of process.

html,

body{
margin

:

0

;
padding

:

0

;
border

:

0

;
outline

:

0

;
}
h1{
text-shadow

:

1px

1px

3px

;
}
ul {
list-style-type

:

none

;
margin

:

0

;
padding

:

0

;
overflow

:

hidden

;
}
.header

ul{
background

:

#000

;
}
li {
float

:

left

;
}
li a {
display

:

block

;
color

:

white

;
text-align

:

center

;
padding

:

14px

16px

;
text-decoration

:

none

;
}
li a:

hover

{
background-color

:

#95e0eb

;
}
#wrap

{

width

:

100%

;

min-height

:

900px

;

top

:

0px

;

position

:

relative

;

bottom

:

0px

;

}
#wrap

ul{

margin

:

0px

;

padding

:

0px

;

width

:

700px

;

text-align

:

center

;

}
#wrap

.detail-view

{
border

:

1px

solid

#E2E2E2

;
border-top

:

1px

solid

#E2E2E2

;
left

:

0

;
height

:

380px

;
overflow

:

hidden

;
clear

:

both

;
display

:

none

;
margin-left

:

13px

;
margin-bottom

:

15px

;
width

:

96%

;
}
#wrap

.detail-view

.close

{

text-align

:

right

;

width

:

98%

;

margin

:

5px

;

}
#wrap

.close

a{

padding

:

6px

;

height

:

10px

;

width

:

20px

;

color

:

#525049

;

}
#wrap

.detail-view

.detail_images

{

float

:

left

}
#wrap

.detail-view

.detail_info

{
float

:

right

;
font-family

:

"Helvetica Neue"

,

Helvetica,

"Nimbus Sans L"

,

Arial,

sans-serif

;
color

:

#525049

;
margin-right

:

20px

;
margin-top

:

30px

;
text-align

:

justify

;
width

:

250px

;
font-size

:

12px

;
}
#wrap

.detail-view

.detail_info

label{

font-size

:

12px

;

text-transform

:

uppercase

;

letter-spacing

:

1px

;

line-height

:

60px

;

}
#wrap

.detail-view

.detail_info

p{

height

:

110px

;

}
a#show_cart

{
background

:

none

repeat

scroll

0

0

#95e0eb

;
border

:

1px

solid

#118da9

;
margin-left

:

800px

;
margin-top

:

4px

;
cursor

:

pointer

;
border-radius

:

3px

;
display

:

inline-block

;
font

:

9px

/21px

"Helvetica Neue"

,

Helvetica,

"Nimbus Sans L"

,

Arial,

sans-serif

;
letter-spacing

:

2px

;
color

:

#525049

;
padding

:

8px

;
text-decoration

:

none

;
text-transform

:

uppercase

;
}
.add-to-cart-button{
background

:

none

repeat

scroll

0

0

#95e0eb

;
border

:

1px

solid

#E8E7DC

;
cursor

:

pointer

;
display

:

inline-block

;
font

:

9px

/21px

"Helvetica Neue"

,

Helvetica,

"Nimbus Sans L"

,

Arial,

sans-serif

;
letter-spacing

:

2px

;
padding-top

:

10px

;

color

:

#525049

;
margin-top

:

15px

;
text-transform

:

uppercase

;
}
.add-to-cart-button

:

hover

{
background

:

none

repeat

scroll

0

0

#41cc65

;
}
.shopp

{

background

:

none

repeat

scroll

0

0

#F8F8F3

;

}
#wrap

ul li{
list-style-type

:

none

;
height

:

146px

;
width

:

160px

;
margin-left

:

10px

;
margin-bottom

:

15px

;
float

:

left

;
padding

:

15px

0px

0px

0px

;
font-family

:

"LubalGraphBdBTBold"

,

Tahoma;
font-size

:

2em

;
border

:

solid

#fff

1px

;
overflow

:

hidden

;
}
.footer

{

height

:

25px

;

background

:

#E2E2E2

}
#wrap

ul li:

hover

{

border

:

solid

#f3f4ee

1px

;

}
#wrap

ul li div{
height

:

31px

;
text-align

:

center

;
width

:

160px

;
margin-top

:

10px

;
position

:

relative

;
bottom

:

0px

;
padding-top

:

6px

;
padding-bottom

:

4px

;
background

:

#f3f4ee

;
font

:

12px

/21px

"Helvetica Neue"

,

Helvetica,

"Nimbus Sans L"

,

Arial,

sans-serif

;
opacity

:

0.8

;
color

:

#525049

;
text-shadow

:

0px

1px

0px

#555

;
}
img#cart

{

bottom

:

0px

;

position

:

fixed

;

margin-left

:

30px

;

}
#wrap

ul li {

cursor

:

pointer

;

}
#cart_wrapper

{
border

:

solid

#E8E7DC

1px

;
min-height

:

120px

;
width

:

100%

;
padding-top

:

15px

;
display

:

none

;
background

:

#E2E2E2

;
font

:

12px

/21px

"Helvetica Neue"

,

Helvetica,

"Nimbus Sans L"

,

Arial,

sans-serif

;
position

:

relative
}
#Submit

{
height

:

40px

;
float

:

left

;
width

:

100px

;
background

:

#95e0eb

;
}
#Submit

:

hover

{
background

:

#41cc65

;
}
.closeCart

{

cursor

:

pointer

;

}
button

{
background

:

none

repeat

scroll

0

0

#FFFFFF

;
border

:

1px

solid

#E8E7DC

;
width

:

140px

;
cursor

:

pointer

;
display

:

inline-block

;
font

:

9px

/21px

"Helvetica Neue"

,

Helvetica,

"Nimbus Sans L"

,

Arial,

sans-serif

;
letter-spacing

:

2px

;
padding-top

:

12px

;

color

:

#525049

;
margin-top

:

1px

;
border

:

solid

#ccc

1px

;

padding

:

8px

;
-webkit-border-radius:

8px

;
-moz-border-radius:

8px

;
margin-left

:

20px

;
text-transform

:

uppercase

;
}
button

:

hover

{
background

:

none

repeat

scroll

0

0

#F8F8F3

;
}
.cart-total

{

background

:

none

repeat

scroll

0

0

#F8F8F3

;

}
.shopp

,

.cart-total

{
border

:

solid

#E8E7DC

1px

;

padding

:

8px

;
-webkit-border-radius:

8px

;
-moz-border-radius:

8px

;

font-size

:

12px

;
background

:

url

(

remove.png

)

center

right

no-repeat

5px

;
border-radius

:

8px

;
font-family

:

"LubalGraphBdBTBold"

,

Tahoma;
margin-top

:

3px

;
width

:

320px

;
float

:

left

;
}
#cart_form

{

width

:

570px

;

padding-left

:

15px

;

}
div.shopp

span{

float

:

left

;

}
div.shopp

div.label

{

width

:

130px

;

float

:

left

;

}
div.shopp

div.shopp-price

{

width

:

70px

;

float

:

left

;

}
.quantity

{

float

:

left

;

margin-top

:

-3px

;

width

:

20px

;

}
img.remove

{

float

:

right

;

cursor

:

pointer

;

}
.cart-total

b{

width

:

130px

;

}

Hope that you learn from this tutorial and don't forget to Like & Share this project and the website. Enjoy Coding...!

Download

You must upgrade your account or reply in the thread to view the hidden content.

Dynamic Ajax Shopping Cart

More options

georgisio

452,496

335,402

335,410