Ajax Drag And Drop Online Shopping Cart Using jQuery and PHP ~ Softaox

--
-- Table structure for table `stock`
--

CREATE TABLE `stock` (
  `id` int(11) NOT NULL,
  `img` varchar(100) NOT NULL,
  `name` varchar(100) NOT NULL,
  `description` text NOT NULL,
  `price` double(8,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `stock`
--

INSERT INTO `stock` (`id`, `img`, `name`, `description`, `price`) VALUES
(7, 'imac-4k.png', '21.5-inch iMac', '3.1GHz quad-core Intel Core i5, Turbo Boost up to 3.6GHz', 1499.00),
(8, '13-macbook-pro.png', '13-inch MacBook Pro - Silver', '2.9GHz dual-core Intel Core i5 processor, Turbo Boost up to 3.3GHz', 1999.00),
(9, 'ipad-pro.png', '12.9-inch iPad Pro', '64-bit A9X chip gives iPad Pro', 1129.00),
(10, 'iphone7-plus.png', 'iPhone 7 Plus', '5.5-inch (diagonal) LED-backlit widescreen', 969.00),
(11, 'apple-watch.png', 'Apple Watch Hermès', 'Built-in GPS, water resistant 50m, dual-core processor, watchOS 3', 1499.00),
(12, 'Apple-TV.png', 'Apple TV', 'The future of television is here.', 199.00);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `stock`
--
ALTER TABLE `stock`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `stock`
--
ALTER TABLE `stock`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=13;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

--

-- Table structure for table `stock`

--

CREATE TABLE `stock` (

`id` int(11) NOT NULL,

`img` varchar(100) NOT NULL,

`name` varchar(100) NOT NULL,

`description` text NOT NULL,

`price` double(8,2) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--

-- Dumping data for table `stock`

--

INSERT INTO `stock` (`id`, `img`, `name`, `description`, `price`) VALUES

(7, 'imac-4k.png', '21.5-inch iMac', '3.1GHz quad-core Intel Core i5, Turbo Boost up to 3.6GHz', 1499.00),

(8, '13-macbook-pro.png', '13-inch MacBook Pro - Silver', '2.9GHz dual-core Intel Core i5 processor, Turbo Boost up to 3.3GHz', 1999.00),

(9, 'ipad-pro.png', '12.9-inch iPad Pro', '64-bit A9X chip gives iPad Pro', 1129.00),

(10, 'iphone7-plus.png', 'iPhone 7 Plus', '5.5-inch (diagonal) LED-backlit widescreen', 969.00),

(11, 'apple-watch.png', 'Apple Watch Hermès', 'Built-in GPS, water resistant 50m, dual-core processor, watchOS 3', 1499.00),

(12, 'Apple-TV.png', 'Apple TV', 'The future of television is here.', 199.00);

--

-- Indexes for dumped tables

--

-- Indexes for table `stock`

--

ALTER TABLE `stock`

ADD PRIMARY KEY (`id`);

--

-- AUTO_INCREMENT for dumped tables

--

-- AUTO_INCREMENT for table `stock`

--

ALTER TABLE `stock`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=13;

/*!40101 SET [email protected]_CHARACTER_SET_CLIENT */;

/*!40101 SET [email protected]_CHARACTER_SET_RESULTS */;

/*!40101 SET [email protected]_COLLATION_CONNECTION */;

<?php
if(!defined('INCLUDE_CHECK')) die('NO Permission to execute this file directly');

/* DB Connection */
$db_host= 'localhost';
$db_user= 'root';
$db_pass= '';
$db_database= 'shopping';

$conn = mysql_connect($db_host, $db_user, $db_pass) or die('Database Connection Error');

mysql_select_db($db_database, $conn);
mysql_query("SET names UTF8");
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<?php

if(!defined('INCLUDE_CHECK')) die('NO Permission to execute this file directly');

/* DB Connection */

$db_host= 'localhost';

$db_user= 'root';

$db_pass= '';

$db_database= 'shopping';

$conn = mysql_connect($db_host, $db_user, $db_pass) or die('Database Connection Error');

mysql_select_db($db_database, $conn);

mysql_query("SET names UTF8");

?>

<?php
define('INCLUDE_CHECK',1);
require "conn.php";
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
		<title>SoftAOX Shopping Cart</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
	<body>
		<div class="col-100">
			<div class="col-70">
				<h1>SoftAOX</h1>
				<h3>Online Apple Shopping</h3>
				<?php
				$result = mysql_query("SELECT * FROM stock");
				while($row=mysql_fetch_assoc($result))
				{
					echo '
				<div class="item">
					<img src="images/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'"/>
				</div>';
				}
				?>
			</div>
			<div class="col-30">
					<h1 class="label-txt">My Shopping Bag</h1>
				<div class="content drop-box">
					<span>Drop your Products Here</span>
					<form name="checkoutForm" method="post" action="checkout.php">
						<div id="item-list"></div>
					</form>
					<div id="total"></div>
					<a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
		<script type="text/javascript" src="https://cdn.css.net/files/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.pack.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
	</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<?php

define('INCLUDE_CHECK',1);

require "conn.php";

?>

<!doctype html>

<html>

<head>

<title>SoftAOX Shopping Cart</title>

</head>

<body>

<h1>SoftAOX</h1>

<h3>Online Apple Shopping</h3>

<?php

$result = mysql_query("SELECT * FROM stock");

while($row=mysql_fetch_assoc($result))

{

echo '

</div>';

}

?>

</div>

<h1 class="label-txt">My Shopping Bag</h1>

<span>Drop your Products Here</span>

</form>

<a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a>

</div>

</body>

</html>

@charset "UTF-8";
/* CSS Document */
body {
  font-size: 15px;
  background-color: #FFF;
}

.col-100 {
  padding: 10px;
}

.col-70 {
  width: 69%;
  float: left;
}

.col-30 {
  width: 29%;
  float: left;
}

.item {
  width: 30%;
  height: 200px;
  text-align: center;
  padding: 5px;
  margin: 10px 5px;
  float: left;
  border: 1px solid #ececec;
}

.item img {
  cursor: move;
}

.tooltip {
  position: absolute;
  margin-left: 62px;
  z-index: 3;
  display: none;
  background-color: #ffffff;
  border: 1px double #e8e8e8;
  box-shadow: 0px 0px 1px 1px #e8e8e8;
  color: #252525;
  padding: 15px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
}

.drop-box {
  width: 100%;
  height: 300px;
  padding: 15px;
  margin-top: 70px;
  border: 1px dotted #999;
}

#item-list table {
  border-top: 1px dotted #cecece;
  border-bottom: 1px dotted #cecece;
  padding: 5px;
}

#total {
  text-transform: capitalize;
  font-size: 16px;
  padding: 5px;
  font-weight: 600;
}

.button {
  background: #2f2f2f;
  width: 15%;
  padding: 4px;
  text-decoration: none;
  color: #FFF;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  text-align: center;
}

.remove {
  color: #FFF;
  background: #fd0c00;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  border-radius: 3px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

@charset "UTF-8";

/* CSS Document */

body {

font-size: 15px;

background-color: #FFF;

}

.col-100 {

padding: 10px;

}

.col-70 {

width: 69%;

float: left;

}

.col-30 {

width: 29%;

float: left;

}

.item {

width: 30%;

height: 200px;

text-align: center;

padding: 5px;

margin: 10px 5px;

float: left;

border: 1px solid #ececec;

}

.item img {

cursor: move;

}

.tooltip {

position: absolute;

margin-left: 62px;

z-index: 3;

display: none;

background-color: #ffffff;

border: 1px double #e8e8e8;

box-shadow: 0px 0px 1px 1px #e8e8e8;

color: #252525;

padding: 15px;

-moz-border-radius: 12px;

-webkit-border-radius: 12px;

border-radius: 12px;

}

.drop-box {

width: 100%;

height: 300px;

padding: 15px;

margin-top: 70px;

border: 1px dotted #999;

}

#item-list table {

border-top: 1px dotted #cecece;

border-bottom: 1px dotted #cecece;

padding: 5px;

}

#total {

text-transform: capitalize;

font-size: 16px;

padding: 5px;

font-weight: 600;

}

.button {

background: #2f2f2f;

width: 15%;

padding: 4px;

text-decoration: none;

color: #FFF;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

text-align: center;

}

.remove {

color: #FFF;

background: #fd0c00;

padding: 5px 10px 5px 10px;

text-decoration: none;

border-radius: 3px;

}

var purchased = new Array();
var totalprice = 0;

$(document).ready(function() {

 $('.item').simpletip({

  offset: [40, 0],
  onShow: function() {

   var param = this.getParent().find('img').attr('src');

   if ($.browser.msie && $.browser.version == '6.0') {
    param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);
    param = param[1];
   }

   this.load('js/tooltip.php', {
    img: param
   });
  }

 });

 $(".item img").draggable({

  containment: 'document',
  opacity: 0.6,
  revert: 'invalid',
  helper: 'clone',
  zIndex: 100

 });

 $("div.content.drop-box").droppable({

  drop: function(e, ui) {
   var param = $(ui.draggable).attr('src');

   if ($.browser.msie && $.browser.version == '6.0') {
    param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
    param = param[1];
   }

   addlist(param);
  }

 });

});


function addlist(param) {
 $.ajax({
  type: "POST",
  url: "js/cart.php",
  data: 'img=' + encodeURIComponent(param),
  dataType: 'json',
  success: function(msg) {

   if (parseInt(msg.status) != 1) {
    return false;
   } else {
    var check = false;
    var cnt = false;

    for (var i = 0; i < purchased.length; i++) {
     if (purchased[i].id == msg.id) {
      check = true;
      cnt = purchased[i].cnt;

      break;
     }
    }

    if (!cnt)
     $('#item-list').append(msg.txt);

    if (!check) {
     purchased.push({
      id: msg.id,
      cnt: 1,
      price: msg.price
     });
    } else {
     if (cnt >= 10) return false;

     purchased[i].cnt++;
     $('#' + msg.id + '_cnt').val(purchased[i].cnt);
    }

    totalprice += msg.price;
    total_update();

   }

   $('.tooltip').hide();

  }
 });
}

function findpos(id) {
 for (var i = 0; i < purchased.length; i++) {
  if (purchased[i].id == id)
   return i;
 }

 return false;
}

function remove(id) {
 var i = findpos(id);

 totalprice -= purchased[i].price * purchased[i].cnt;
 purchased[i].cnt = 0;

 $('#table_' + id).remove();
 total_update();
}

function change(id) {
 var i = findpos(id);

 totalprice += (parseInt($('#' + id + '_cnt').val()) - purchased[i].cnt) * purchased[i].price;

 purchased[i].cnt = parseInt($('#' + id + '_cnt').val());
 total_update();
}

function total_update() {
 if (totalprice) {
  $('#total').html('total: $' + totalprice);
  $('a.button').css('display', 'block');
 } else {
  $('#total').html('');
  $('a.button').hide();
 }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

var purchased = new Array();

var totalprice = 0;

$(document).ready(function() {

$('.item').simpletip({

offset: [40, 0],

onShow: function() {

var param = this.getParent().find('img').attr('src');

if ($.browser.msie && $.browser.version == '6.0') {

param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);

param = param[1];

}

this.load('js/tooltip.php', {

img: param

});

}

});

$(".item img").draggable({

containment: 'document',

opacity: 0.6,

revert: 'invalid',

helper: 'clone',

zIndex: 100

});

$("div.content.drop-box").droppable({

drop: function(e, ui) {

var param = $(ui.draggable).attr('src');

if ($.browser.msie && $.browser.version == '6.0') {

param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);

param = param[1];

}

addlist(param);

}

});

function addlist(param) {

$.ajax({

type: "POST",

url: "js/cart.php",

data: 'img=' + encodeURIComponent(param),

dataType: 'json',

success: function(msg) {

if (parseInt(msg.status) != 1) {

return false;

} else {

var check = false;

var cnt = false;

for (var i = 0; i < purchased.length; i++) {

if (purchased[i].id == msg.id) {

check = true;

cnt = purchased[i].cnt;

break;

}

if (!cnt)

$('#item-list').append(msg.txt);

if (!check) {

purchased.push({

id: msg.id,

cnt: 1,

price: msg.price

});

} else {

if (cnt >= 10) return false;

purchased[i].cnt++;

$('#' + msg.id + '_cnt').val(purchased[i].cnt);

}

totalprice += msg.price;

total_update();

}

$('.tooltip').hide();

}

});

}

function findpos(id) {

for (var i = 0; i < purchased.length; i++) {

if (purchased[i].id == id)

return i;

}

return false;

}

function remove(id) {

var i = findpos(id);

totalprice -= purchased[i].price * purchased[i].cnt;

purchased[i].cnt = 0;

$('#table_' + id).remove();

total_update();

}

function change(id) {

var i = findpos(id);

totalprice += (parseInt($('#' + id + '_cnt').val()) - purchased[i].cnt) * purchased[i].price;

purchased[i].cnt = parseInt($('#' + id + '_cnt').val());

total_update();

}

function total_update() {

if (totalprice) {

$('#total').html('total: $' + totalprice);

$('a.button').css('display', 'block');

} else {

$('#total').html('');

$('a.button').hide();

}

<?php
define('INCLUDE_CHECK',1);

require "../conn.php";

if(!$_POST['img']) die("There is no such product!");

$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));

$row=mysql_fetch_assoc(mysql_query("SELECT * FROM stock WHERE img='".$img."'"));

if(!$row) die("There is no such product!");

echo '<strong>'.$row['name'].'</strong>

<p>'.$row['description'].'</p>

<strong>price: $'.$row['price'].'</strong>
<small>Drag it to your shopping cart to purchase it</small>';
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<?php

define('INCLUDE_CHECK',1);

require "../conn.php";

if(!$_POST['img']) die("There is no such product!");

$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));

$row=mysql_fetch_assoc(mysql_query("SELECT * FROM stock WHERE img='".$img."'"));

if(!$row) die("There is no such product!");

echo '<strong>'.$row['name'].'</strong>

<p>'.$row['description'].'</p>

<strong>price: $'.$row['price'].'</strong>

<small>Drag it to your shopping cart to purchase it</small>';

?>

<?php
define('INCLUDE_CHECK',1);
require "../conn.php";

if(!$_POST['img']) die("There is no such product!");

$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));
$row=mysql_fetch_assoc(mysql_query("SELECT * FROM stock WHERE img='".$img."'"));

echo json_encode(array(
	'status' => 1,
	'id' => $row['id'],
	'price' => (float)$row['price'],
	'txt' => '<table width="100%" id="table_'.$row['id'].'">
  <tr>
    <td width="55%">'.$row['name'].'</td>
    <td width="15%">$'.$row['price'].'</td>
    <td width="15%">
	<select name="'.$row['id'].'_cnt" id="'.$row['id'].'_cnt" onchange="change('.$row['id'].');">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	</slect>
	</td>
	<td width="15%"><a href="#" onclick="window.remove('.$row['id'].');return false;" class="remove">x</a></td>
  </tr>
</table>'
));
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<?php

define('INCLUDE_CHECK',1);

require "../conn.php";

if(!$_POST['img']) die("There is no such product!");

$img=mysql_real_escape_string(end(explode('/',$_POST['img'])));

$row=mysql_fetch_assoc(mysql_query("SELECT * FROM stock WHERE img='".$img."'"));

echo json_encode(array(

'status' => 1,

'id' => $row['id'],

'price' => (float)$row['price'],

'txt' => '<table width="100%" id="table_'.$row['id'].'">

<tr>

<td width="15%">$'.$row['price'].'</td>

</slect>

</td>

</tr>

</table>'

));

?>

<?php
define('INCLUDE_CHECK',1);
require "conn.php";

if(!$_POST)
{

	if($_SERVER['HTTP_REFERER'])
	header('Location : '.$_SERVER['HTTP_REFERER']);

	exit;

}
?>
    <!doctype html>
    <html>

    <head>
        <meta charset="UTF-8">
        <title>My Shopping Bag | SoftAOX</title>

    </head>

    <body>

        <div class="content">
            <table width="40%" align="center" frame="box" border="1">
                <tr>
                    <td colspan="3" align="center">
                        <h1>My Shopping Bag</h1></td>
                </tr>
                <tr>
                    <td width="10%">Qty.</td>
                    <td width="85%">Product</td>
                </tr>
                <?php

				$cnt = array();
				$products = array();
				$total = 0;

				foreach($_POST as $key=>$value)
				{
					$key=(int)str_replace('_cnt','',$key);

					$products[]=$key;
					$cnt[$key]=$value;
				}

				$result = mysql_query("SELECT * FROM stock WHERE id IN(".join($products,',').")");

				if(!mysql_num_rows($result))
				{
					echo '<p>There was an error processing your order.</p>';
				}
				else
				{

					$sno = 1;

					while($row=mysql_fetch_assoc($result))
					{

						echo '<tr>';
						echo '<td>'.$cnt[$row['id']].' </td><td> '.$row['name'].'</td>';
						echo '</tr>';

						$total+=$cnt[$row['id']]*$row['price'];
					}

				}
				?>
                    <tr>
                        <td colspan="3" align="right">
                            <h4>Total: $<?php echo $total; ?></h4></td>
                    </tr>
            </table>
        </div>
    </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<?php

define('INCLUDE_CHECK',1);

require "conn.php";

if(!$_POST)

{

if($_SERVER['HTTP_REFERER'])

header('Location : '.$_SERVER['HTTP_REFERER']);

exit;

}

?>

<!doctype html>

<html>

<head>

<title>My Shopping Bag | SoftAOX</title>

</head>

<body>

<tr>

<h1>My Shopping Bag</h1></td>

</tr>

<tr>

<td width="85%">Product</td>

</tr>

<?php

$cnt = array();

$products = array();

$total = 0;

foreach($_POST as $key=>$value)

{

$key=(int)str_replace('_cnt','',$key);

$products[]=$key;

$cnt[$key]=$value;

}

$result = mysql_query("SELECT * FROM stock WHERE id IN(".join($products,',').")");

if(!mysql_num_rows($result))

{

echo '<p>There was an error processing your order.</p>';

}

else

{

$sno = 1;

while($row=mysql_fetch_assoc($result))

{

echo '<tr>';

echo '<td>'.$cnt[$row['id']].' </td><td> '.$row['name'].'</td>';

echo '</tr>';

$total+=$cnt[$row['id']]*$row['price'];

}

?>

<tr>

<h4>Total: $<?php echo $total; ?></h4></td>

</tr>

</table>

</div>

</body>

</html>

Ajax Drag And Drop Online Shopping Cart Using jQuery & PHP

Don't miss on latest updates

Ajax Drag And Drop Online Shopping Cart Using jQuery & PHP

Share:

Ajax Drag And Drop Online Shopping Cart Using jQuery & PHP | Part – 1

Ajax Drag And Drop Online Shopping Cart Using jQuery & PHP | Part – 2

Ajax Drag And Drop Online Shopping Cart Using jQuery & PHP | Part – 3

database

conn.php

index.php

style.css

script.js

tooltip.php

cart.php

checkout.php

Preview & Download

Mraj

Don't miss on latest updates