Shopping cart query

1

<cfhttp url=“http://webservices.amazon.com/onca/xml?Service=AWSECommerceService&
AWSAccessKeyId=1MEQ9VMKAJS5A8DSHER2&Operation=ItemLookup&IdType=UPC&SearchIndex=DVD
&ItemId=#url.upc#&ResponseGroup=Small,ItemAttributes,Images” throwOnError=“yes”
charset=“UTF-8”></cfhttp>
<cfset myXMLdoc = XmlParse(cfhttp.filecontent)>
<CFSET xnProduct = myXMLdoc.xmlRoot>
<cfscript>
addItem = StructNew();
addItem.qty = 1;
addItem.upc = xnProduct.Items.Item.ItemAttributes.UPC.XmlText;
addItem.title = xnProduct.Items.Item.ItemAttributes.Title.XmlText;
addItem.image = xnProduct.Items.Item.SmallImage.URL.XmlText;
addItem.price = xnProduct.Items.Item.ItemAttributes.ListPrice.FormattedPrice.XmlText;
</cfscript>

thats the script i was given to add products to the shopping cart but what i was wondering is how do i change it to use my database on my server?

2

Er, it’s not that simple - this is calling an amazon web service, there’s a lot of technicalities here which are beyond the scope of a simple post - what are you after exactly? Are you looking at writing a shopping cart enabled site?

3

right now i have a site written. i wanna add a shopping cart to the site and i want it drag and droppable so i went to a tutorial, but the tutorial uses the amazon web service as the product database. now i would like to change it so that the products being used are the products that would be in a database that i create. as well as the shopping cart being able to increase quantity of items, etc… what i tried to do was implement the drag and drop shopping cart mention in the tutorial into the site i already had. what happend was i was able to drag a picture to an area called the shopping cart but it never gets added.

4

Is the site in Flash or is it HTML based? It looks like you’ve got some ColdFusion code, is it written in ColdFusion presently?

5

welll i think thats the problem im having the tutorial is a coldfusion site and mine is html and im thinking thats why the scripts i implemented arnt working correctly. if u wanna see the code to my site here it is.

[COLOR=Red]<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<title>MrAmerican.us</title>
<link rel=“stylesheet” href=“tshirtstyleone.css”>
<style type=“text/css”>
<!–
.style9 {
font-size: 48px
}
–>
</style>
<head>
<script src="./srs/prototype.js" type=“text/javascript”></script>
<script src="./srs/scriptaculous.js" type=“text/javascript”></script> </head>

<style type=“text/css”>
<!–
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style2 {
font-family: “Courier New”, Courier, monospace;
color: #990000;
font-size: 36px;
}
.style3 {
font-family: “Courier New”, Courier, monospace;
font-size: 18;
}
.style5 {
font-family: “Courier New”, Courier, monospace;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
}
.style6 {
font-size: 18px;
color: #0066FF;
font-family: “Courier New”, Courier, monospace;
font-weight: bold;
}
.style8 {
color: #000000;
font-size: 20px;
font-weight: bold;
font-family: “Courier New”, Courier, monospace;
}
.style10 {font-size: 24px}
–>
[/COLOR][COLOR=Red]</style>

<body onLoad=“body_onLoad()”>
<script type=“text/javascript”>
function body_onLoad() {
// create an SRS gateway to the cart.cfm page
objGateway = new gateway(“srs/cart.cfm”);
// update cart in case of return visit
// code for this function is below
updateCart();
}
</script>
<script type=“text/javascript”>
function cartPacket_onReceive(packet) { // generates an HTML table of cart items

var theTable = document.getElementById('tableCart');
var tbody = document.createElement("tbody");
var tr, td;

if ( packet.upc.length == 0 ) { // if no results just send back empty cart
	tr = document.createElement("tr");
	td = document.createElement("td");
	td.colSpan = 4;
	td.innerHTML = "Your cart is empty.";
	tr.appendChild(td);
	tbody.appendChild(tr);
}
else
	for ( var i = 0 ; i &lt; packet.upc.length; i++ ) { // loop and create new row
		tr = document.createElement("tr");
		td = document.createElement("td");
		td.innerHTML = packet.qty*;
		tr.appendChild(td);
		td = document.createElement("td");
		td.innerHTML = '&lt;img src="' + packet.image* + '"&gt;';
		tr.appendChild(td);
		td = document.createElement("td");
		td.innerHTML = packet.title*;
		tr.appendChild(td);
		td = document.createElement("td");
		td.innerHTML = packet.price*;
		tr.appendChild(td);
		tbody.appendChild(tr);
	}

theTable.replaceChild(tbody, theTable.childNodes[1]);

}
</script>

<!-- Site navigation menu -->
<ul class=“navbar”>
<li><a href=“index.html”>Home page</a></li><li><a href=“events.html”>events </a></li><li><a href=“shirts.html”> Information</a></li><li><a href=“links.html”> Links</a></li>
[/COLOR][COLOR=Red]</ul>

<!-- Main content -->
<div class=“container”>
<h1 class=“style2 style9”>MrAmerican.us</h1>
<p class=“style5”><span class=“style10”>Take Pride In Your Ride!!! Ride American!</span>!!</p>
<p class=“style6 style10”>Our Merchandise:drag to shopping cart</p>
</div>

<!-- shirts -->
<div class=“container2”><img src=“toxict.jpg” width=“116” height=“123” longdesc=“armydeathspadet.jpg” id=“drag_me”></div>
<script type=“text/javascript”>
new Draggable(‘drag_me’, { revert: true, snap: [40, 40] });
</script>
[/COLOR][COLOR=Red]<!-- shopping cart -->
<div class=“shoppingcart” >
<fieldset style=“width:400px;” id=“shoppingcart”>
<legend><span class=“style8”>Your shopping cart</span></legend>
<table width=“230” height=“419” border=“0” cellpadding=“5” cellspacing=“0” id=“tableCart”>
<thead></thead><tbody><td width=“220” height=“419”></tbody>
</table>
<button onClick=“emptyCartButton_onClick()” id=“emptyCartButton”>
Clear Shopping Cart</button>
</fieldset>
</div>
<script type=“text/javascript”>
function emptyCartButton_onClick() {
if ( confirm(‘Are you sure you want to empty your cart?’) ) clearCart();
}

function clearCart() {
objGateway.setListener(‘cartPacket_onReceive’).setArguments( {action:‘clearCart’}
).request();
}
</script>
<script type=“text/javascript”>
Droppables.add(‘shoppingcart’,{ onDrop:function(element) {
alert(‘Added UPC ’ + element.id + ’ to your shopping cart.’);
addToCart(element.id);
Element.hide(element.id);}})
[/COLOR][COLOR=Red]</script>
<script type=“text/javascript”>
function addToCart(upc) {
objGateway.setListener(‘cartPacket_onReceive’).setArguments( { action:‘addToCart’,upc:upc }
).request();
}
</script>
<!-- the address -->
<div align=“center” class=“style3”>
<address class=“container1 style1”>
made may 19 2008 by tobin carroll
</address>
</div>

</body>

</html>

[/COLOR]

6

Well yes you will need to at least have a ColdFusion enabled server in the very least, your pages should also be suffixed with .cfm instead of .html or .htm. You might want to consider looking into PHP or a .NET technology (ASP.NET) - though the learning curve is probably a bit more on the PHP side it’s also a lot cheaper (free!)

7

yea i figured i needed to learn php, i knoe a lil. how do i find out if my server has coldfusion or can i upload it on to it?

i knoe it has python, perl, php, and mysql. now would it be wise for me to start my whole shopping cart over or can i implement my database for getting items vs amazon web service, and getting the shopping car to except items

8

Nope, the amazon web service is probably exclusively accessible for amazon pages - i.e. there’s probably some authentication required and a connection from a certain domain/ip. I may be wrong but I’d imagine that there’s not much you can do with the current code.

I’d start writing your own shopping cart - if you want drag and drop you will need to write some javascript to do it - you can probably steal some of the current script and just change a few of the drop parameters - most likely the drop function triggers a form submission with a bunch of POST parameters, you just need to edit that.

9

<cfswitch expression="#action#">

<cfcase value=“getCart”>
<cfparam name=“session.cart” default="#ArrayNew(1)#">
<cfset cartQuery = QueryNew(“qty,upc,title,image,price”)>
<cfloop from=“1” to="#ArrayLen(session.cart)#" index=“i”>
<cfset queryAddRow(cartQuery)>
<cfset querySetCell(cartQuery, “qty”, session.cart*.qty, i)>
<cfset querySetCell(cartQuery, “upc”, session.cart*.upc, i)>
<cfset querySetCell(cartQuery, “title”, session.cart*.title, i)>
<cfset querySetCell(cartQuery, “image”, session.cart*.image, i)>
<cfset querySetCell(cartQuery, “price”, session.cart*.price, i)>
</cfloop>
<cfset request.response = cartQuery>
</cfcase>

[COLOR=Red]<cfcase value=“addToCart”>
<cfparam name=“session.cart” default="#ArrayNew(1)#

<cfhttp url=“http://webservices.amazon.com/onca/xml?Service=AWSECommerceService&
AWSAccessKeyId=1MEQ9VMKAJS5A8DSHER2&Operation=ItemLookup&IdType=UPC&SearchIndex=DVD
&ItemId=#url.upc#&ResponseGroup=Small,ItemAttributes,Images” throwOnError="yes"
charset=“UTF-8”></cfhttp>
<cfset myXMLdoc = XmlParse(cfhttp.filecontent)>
<CFSET xnProduct = myXMLdoc.xmlRoot>
<cfscript>
addItem = StructNew();
addItem.qty = 1;
addItem.upc = xnProduct.Items.Item.ItemAttributes.UPC.XmlText;
addItem.title = xnProduct.Items.Item.ItemAttributes.Title.XmlText;
addItem.image = xnProduct.Items.Item.SmallImage.URL.XmlText;
addItem.price = xnProduct.Items.Item.ItemAttributes.ListPrice.FormattedPrice.XmlText;[/COLOR]
</cfscript>
<cfset ArrayAppend(session.cart,addItem)>

<cfset cartQuery = QueryNew(“qty,upc,title,image,price”)>
<cfloop from=“1” to="#ArrayLen(session.cart)#" index=“i”>
<cfset queryAddRow(cartQuery)>
<cfset querySetCell(cartQuery, “qty”, session.cart*.qty, i)>
<cfset querySetCell(cartQuery, “upc”, session.cart*.upc, i)>
<cfset querySetCell(cartQuery, “title”, session.cart*.title, i)>
<cfset querySetCell(cartQuery, “image”, session.cart*.image, i)>
<cfset querySetCell(cartQuery, “price”, session.cart*.price, i)>
</cfloop>
<cfset request.response = cartQuery>

<cfcase value=“clearCart”>
<cfset ArrayClear(session.cart)>
<cfset cartQuery = QueryNew(“qty,upc,title,image,price”)>
<cfset request.response = cartQuery>
</cfcase>

</cfswitch

></cfcase>

ok this is the cart.cfm page i believe all i would have to change is the red syntax. is that true? and if so how do i go about linking my database to it? so it uses the items on the database and not amazon web service.

10

Unless you have a coldfusion server it’s not going to work, and furthermore, you need to make sure your server is set up in a similar fashion to whatever site you ripped this from.

It looks as if this code reads XML data from the amazon web service, deserializes and then inserts the data into an array

Of course you will need to interpret that array to display the cart data on the page - this also doesn’t help your items code - you will need to make sure the correct data gets posted when you drag/drop. It looks like the CF code interprets the GET query string and uses the ‘action’ property to decide what you are doing on the page.

You can actually call the Amazon web service to get the XML to see what data it provides but I haven’t got a valid item number

http://webservices.amazon.com/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=1MEQ9VMKAJS5A8DSHER2&Operation=ItemLookup&IdType=UPC&SearchIndex=DVD&ItemId=1&ResponseGroup=Small,ItemAttributes,Images

Click the link above, that’s what the ColdFusion code is interpreting - then it inserts the data into an array

Are you sure you even have a CF server?

11

no i dont think i do so ill just have to re write it in php. so how would i go about to re write the script? i dont knoe that much php

12

Well unless you already have a drag and drop script you might want to check out

http://www.webreference.com/programming/javascript/mk/column2/index.html

When you are done with that, you should visit

http://www.php.net/download-docs.php

and download the PHP manual. I usually get the CHM format as it seems the most accessible. It should give you an overview of the language

Read up on that and I can help you if you get stuck

How much experience of programming have you had anyway?

13

i knoe a good amount of python, i can write html and css scripts fairly well but other than those not much experience at all

14

Well I’d look at the PHP manual as there are some programming exercises to get you started, but like I said, if you get stuck or have some specific question, let me know!