Hello,
I am working on a drag and drop interaction for a website using script.aculo.us drag n shop. What I need is for he User to drop chosen products into the cart and submit a message for the site admin to receive the users contact information and desired products. No actual payments or checkouts other than an email sent and a i.e. "thank you, please come by our store tomorrow to pay and pick up your order"
I can get the products into the cart but I'm stuck from there. I need an additional script that will allow a email sent with current the products placed inside the cart.
Please help or email me at <KEEP IT ON THE SITE - NO EMAILS IN POSTS>
Thanks,
Steven
Code I a
<script src="Javascript/prototype.js" type="text/javascript"></script>
<script src="Javascript/scriptaculous.js" type="text/javascript"></script>
<style media="screen" type="text/css">
body {
font-family:"Trebuchet MS";
font-size:12px;
}
#cart {
border:1px none gray;
height:500px;
width:500px;
padding:5px;
margin-top:10px;
overflow: auto;
float: right;
background-image: url(../Cupcake%20Artwork/flashFiles/box_cc.png);
background-repeat: no-repeat;
}
#products {
background-color:#FFF;
border:dashed gray 1px;
height:500px;
width:500px;
padding:5px;
}
.box {
border:1px none gray;
margin:10px;
padding:4px;
width:50px;
height:50px;
float:left;
cursor:pointer;
}
#loading {
display:none;
float:right;
}
#clearCart {
color:blue;
text-decoration:underline;
cursor:pointer;
float:right
}
#clearCart:hover {
background-color:#CCFFCC;
color:#000099;
}
</style>
<script language="javascript" type="text/javascript">
function addProduct(element, dropon, event) {
sendData(element.id);
}
function sendData (prod) {
var url = 'cart.php';
var rand = Math.random(9999);
var pars = 'product_id=' + prod + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function clearCart () {
var url = 'cart.php';
var rand = Math.random(9999);
var pars = 'clear=true&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function clearProduct (id) {
var url = 'cart.php';
var rand = Math.random(9999);
var pars = 'clearProduct=true&id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showResponse (originalRequest) {
$('loading').style.display = "none";
$('clearCart').style.display = "block";
$('cart').innerHTML = originalRequest.responseText;
}
function showLoad () {
$('clearCart').style.display = "none";
$('loading').style.display = "block";
}
</script>
</head>
<body>
<h1>Ajax Workshop 3: Shopping Cart using <a href="http://script.aculo.us">Script.aculo.us</a> </h1>
<h2>Drag the products into the shopping cart</h2>
<div id="products">
<div style="float:left; font-weight:bold">Products</div>
<div id="clearCart" onclick="clearCart();">Clear Cart</div>
<div id="loading"><img src="file:///HD/Users/stevenk/Downloads/scriptaculous-js-1.8.2/src/indicator.gif" alt="loading..." /></div>
<br style="clear:both" />
<div class="box" id="product_1"><img src="mocha.gif" width="50" height="50" /></div>
<div class="box" id="product_2">2</div>
<div class="box" id="product_3">3</div>
<div class="box" id="product_4">4</div>
<div class="box" id="product_5">5</div>
<div class="box" id="product_6">6</div>
<div class="box" id="product_7"><img src="mocha.gif" width="50" height="50" /></div>
<div class="box" id="product_8">2</div>
<div class="box" id="product_9">3</div>
<div class="box" id="product_10">4</div>
<div class="box" id="product_11">5</div>
<div class="box" id="product_12">6</div>
</div>
<div id="cart">
<div style="float:left; font-weight:bold">Shopping Cart</div>
</div>
<script type="text/javascript">
var products = document.getElementsByClassName('box');
for (var i = 0; i < products.length; i++) {
new Draggable(products[i].id, {ghosting:true, revert:true})
}
Droppables.add('cart', {onDrop:addProduct})
</script>
</body>
</html>