I have finally found a way to make the drag and drop cart in th
shopping cart work with PHP and sessions.
In my code (ajax.updater statement in the droppables javascript) I
call the page cart.php with parameters, go through a SWITCH series.
But it is a bit clumsy since I want to use Object Oriented
Programming. I want to call a php function directly like add()
How do I do that? It seems the ajax.updater cannot accept it.
CODE :
<?php
error_reporting(E_ALL ^ E_NOTICE);
session_start();
$products = array(1 => ''Mug'', 2 =>
''T-Shirt'');
switch($_POST[''action''])
{
case ''add'':
add();
break;
case ''remove'':
remove();
break;
default:
index();
break;
}
function add()
{
$parts = explode(''_'', $_POST[''id'']);
$id = (int)$parts[1];
$_SESSION[''cart''][$id] ++;
doCart();
return;
}
function doCart()
{
global $products;
if(is_array($_SESSION[''cart'']))
{
foreach($_SESSION[''cart''] AS $item => $qty) {
?>
<div>
<?php for($i = 0; $i < $qty; $i++) { ?>
<img alt="Product1" class="cart-items"
id="item_<?php echo $item?>_<?php echo $i?>" src="shop_files/product<?php echo
$item?>.png"
style="position: relative;">
<script type="text/javascript">new
Draggable(''item_<?php echo $item?>_<?php echo $i?>'', {revert:true})</script>
<?php } ?>
<span class="title">
<?php echo $products[$item]?> (<?php echo $qty ?>)
</span>
</div>
<?php
}
}
if(empty($_SESSION[''cart'']))
{
echo "Your Cart Is Empty";
}
}
function remove()
{
$parts = explode(''_'', $_POST[''id'']);
$id = (int)$parts[1];
$_SESSION[''cart''][$id] --;
if($_SESSION[''cart''][$id] == 0)
{
unset($_SESSION[''cart''][$id]);
}
doCart();
return;
}
function index()
{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"><head><title>CyberDummy - script.aculo.us php
Cart Demo</
title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<link href="shop_files/script.css" media="screen"
rel="Stylesheet"
type="text/css">
<script src="js/prototype.js"
type="text/javascript"></script>
<script src="js/effects.js"
type="text/javascript"></script>
<script src="js/dragdrop.js"
type="text/javascript"></script>
<script src="js/controls.js"
type="text/javascript"></script>
<style type="text/css">
div.auto_complete {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}
ul.contacts {
list-style-type: none;
margin:0px;
padding:0px;
}
ul.contacts li.selected { background-color: #ffb; }
li.contact {
list-style-type: none;
display:block;
margin:0;
padding:2px;
height:32px;
}
li.contact div.image {
float:left;
width:32px;
height:32px;
margin-right:8px;
}
li.contact div.name {
font-weight:bold;
font-size:12px;
line-height:1.2em;
}
li.contact div.email {
font-size:10px;
color:#888;
}
#list {
margin:0;
margin-top:10px;
padding:0;
list-style-type: none;
width:250px;
}
#list li {
margin:0;
margin-bottom:4px;
padding:5px;
border:1px solid #888;
cursor:move;
}
</style></head>
<body>
<div id="content">
<h1>Silly easy shopping</h1>
<p>Drag products to the cart to fill it:</p>
<div style="margin-bottom: 20px; height: 120px;">
<img style="position: relative; z-index: 0; opacity: 0.99999; top:
0px; left: 0px;" alt="Mug" class="products"
id="product_1"
src="shop_files/product1.png">
<script type="text/javascript">new
Draggable(''product_1'',
{revert:true})</script>
<img style="position: relative; z-index: 0; opacity: 0.99999; top:
0px; left: 0px;" alt="T-Shirt" class="products"
id="product_2"
src="shop_files/product2.png">
<script type="text/javascript">new
Draggable(''product_2'',
{revert:true})</script>
</div>
<h2>Your cart:</h2>
<div id="cart" class="cart" style="clear: left;
height: 132px; margin-
top: 10px; position: relative;">
<div id="items">
<?php doCart();?>
</div>
</div>
<div class="" id="wastebin">
Drop items here to remove them from the cart.
</div>
<div style="height: 40px; padding-top: 10px;">
<p id="indicator" style="margin-top: 0px; display:
none;">
<img alt="Indicator"
src="shop_files/indicator.gif"> Updating
cart...
</p>
</div>
<script
type="text/javascript">Droppables.add(''cart'',
{accept:''products'', onDrop:function(element){new
Ajax.Updater(''items'',
''cart.php'',
{onLoading:function(request){Element.show(''indicator'')},
onComplete:function(request){Element.hide(''indicator'')},
parameters:''action=add&id='' +
encodeURIComponent(element.id),
evalScripts:true, asynchronous:true})},
hoverclass:''cart-active''})</
script>
<script
type="text/javascript">Droppables.add(''wastebin'',
{accept:''cart-items'',
onDrop:function(element){Element.hide(element);
new Ajax.Updater(''items'', ''cart.php'',
{onLoading:function(request)
{Element.show(''indicator'')}, onComplete:function(request)
{Element.hide(''indicator'')},
parameters:''action=remove&id='' +
encodeURIComponent(element.id), evalScripts:true,
asynchronous:true})},
hoverclass:''wastebin-active''})</script>
View the <a href="cart.phps">source php</a> code.<br
/>
<a href="http://www.cyberdummy.co.uk/2005/12/28/drag-drop-shopping-
cart-php/">Comments</a>
</div>
</body>
</html>
<?php
}
?>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
i''ve been working with php for a few years now and the way you have
here is
just about the quickest way to go about doing it without writing up
individual files for each switch case and then altering all of your
ajax.updaters to point to different files
ie. ajax.additem.php ajax.removeitem.php ajax.
as for object oriented... that''s going to require a lot of work to
convert
you have the functions here.. but there''s a lot more that will need to
be
done.
to start make a file like cartfuncs.php with <? class Cart { <insert all
of
the functions you have above except for index() here> } ?>
then include cartfuncs.php in this listed file
for example:
<?php
error_reporting(E_ALL ^ E_NOTICE);
session_start();
include_once("cartfuncs.php");
$products = array(1 => ''Mug'', 2 =>
''T-Shirt'');
switch($_POST[''action''])
{
case ''add'':
$cart = new Cart();
Cart::addItem($_POST[product_id]);
doCart();
break;
case ''remove'':
Cart::remove($_POST[product_id]);
doCart();
break;
default:
index();
break;
}
function index(){...}
?>
that''s about the best i can come up with off the top of my head without
messing with anything - at least i hope it''s right, my brain has been
fried
today.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Thanks Brian.
I have made a workable version (scriptaculous is in the dir: js and
I have some images in the dir: shop_files).
Im new to OOP and I used functions in separate files to separate as
much of the code from the design as possible. But I have a feeling
that Im making some clumsy coding in this example. I mean I just do
objects instead of functions and still use switches. Should I just
stick with doing functions? Or am I on the right track and will the
advantages be more apparent when I code the rest of my application?
---------------------------------------------------------
index.php:
---------------------------------------------------------
<?php include_once(''cart.php''); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Drag shop</title>
<script src="js/prototype.js"
type="text/javascript"></script>
<script src="js/scriptaculous.js"
type="text/javascript"></script>
<link href="script.css" media="screen"
rel="Stylesheet" type="text/
css">
</head>
<body>
<img alt="Mug" class="products"
id="product_1" src="shop_files/
product1.png"> <script type="text/javascript">
new Draggable(''product_1'', {revert:true})
</script>
<img alt="T-Shirt" class="products"
id="product_2" src="shop_files/
product2.png"> <script type="text/javascript">
new Draggable(''product_2'', {revert:true})
</script>
<?php Cart::shopping_cart(); ?>
<?php Cart::wastebin(); ?>
</body>
</html>
---------------------------------------------------------
cart.php
---------------------------------------------------------
<?php
error_reporting(E_ALL ^ E_NOTICE);
session_start();
switch($_POST[''action''])
{
case ''add'':
Cart::add_item();
break;
case ''remove'':
Cart::remove_item();
break;
}
class Cart {
function add_item() {
$id = $_POST[''id''];
$_SESSION[''items''][$id] ++;
print_r (Cart::show_cart());
return;
}
function remove_item() {
$id = $_POST[''id''];
$_SESSION[''items''][$id] --;
print_r (Cart::show_cart());
return;
}
function show_cart() {
return $_SESSION[''items''];
}
function clear_cart() {
unset($_SESSION[''items'']);
}
function wastebin() {
echo ''<div id="wastebin">Drop items here to remove
them from the
cart.</div>'';
echo "<script
type=\"text/javascript\">Droppables.add(''wastebin'',
{accept:''cart-items'',
onDrop:function(element){Element.hide(element);
new Ajax.Updater(''items'', ''cart.php'',
{onLoading:function(request)
{Element.show(''indicator'')}, onComplete:function(request)
{Element.hide(''indicator'')},
parameters:''action=remove&id='' +
encodeURIComponent(element.id), evalScripts:true,
asynchronous:true})},
hoverclass:''wastebin-active''})</script>";
}
function shopping_cart() {
echo ''<div id="cart"><div
id="items"><?php print_r
(Cart::show_cart()); ?>Drop items here</div></div>'';
echo "<script
type=\"text/javascript\">Droppables.add(''cart'',
{accept:''products'', onDrop:function(element){new
Ajax.Updater(''items'',
''cart.php'',
{onLoading:function(request){Element.show(''indicator'')},
onComplete:function(request){Element.hide(''indicator'')},
parameters:''action=add&id='' +
encodeURIComponent(element.id),
evalScripts:true, asynchronous:true})},
hoverclass:''cart-active''})</
script>";
}
}
?>
---------------------------------------------------------
script.css
---------------------------------------------------------
#cart {
clear:both;
border:1px solid #E8A400;
background-color:white;
padding:8px;
width:500px;
height: 200px;
border:1px solid #000;
}
#wastebin {
width:500px;
height: 200px;
padding:8px;
margin-top:8px;
height:25px;
color:#ccc;
border:1px solid #000;
font-size:20px;
font-weight:bold;
text-align:center;
}
.cart-active {
background-color: #FFF4D8;
}
#wastebin-active {
background-color: #FFF4D8;
border:1px solid #000;
}
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
the advantage of the objects will become more obvious over the course of
building the application.
if you plan on having multiple categories of products it will be a very big
help by using class objects/functions/methods
say you have fruit, vegetables and candy
instead of having addFruitItem(...){} addVegetableItem(...){} etc
you''ll have Fruit::addItem(..){} Veg::addItem(...){} etc
this may not seem like a very good example and it probably looks as if it
makes things very complicated for a script that is this small right now, but
as you develop bigger more complex applications it''ll very quickly come
in
handy to be able to keep all of those classes seperate - it will come in
even more handy when you start writing administrative backends for either
yourself or clients.
something else i recommend is start get yourself into a pattern of keeping
the same kinds of files in the same place over different applications/sites
something like
/
/classes
/includes
/images
/jslib
something like that so that you know, no matter what site/app you are
working on where the file you want is and where the functions are.
I still have problems with that myself sometimes, but it''s very handy
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---