WebsiteX5.info - The ultimate guide for Incomedia's WebsiteX5

This tip is for Evolution 8. The script for version 7 can be found on this page...



Enhanced version 14 November 2011
- placed shoppingcart info in a <div>, so you can add your own styles to it
- added an id to the table, so you can style the table ass well
- severial minor enhancements

With this script you can show information about the contents of the shopping cart on, for example the home page of your website. It shows the number of products in the cart, the price, the percentage and the amount of VAT and the total amount of the items in the cart. It does not show the shipping costs because that can only be calculated when a customer places the order and chooses a shipping method.

In this new version I added the possiblity to style the information you see on the screen...

It could look something like:

To use the script add a HTML-object anywhere on the page. Edit this HTML-object and copy/paste the following script in it

<script type="text/javascript" src="res/x5cart.js"></script>
<script type="text/javascript" src="res/x5products.js"></script>
<script type="text/javascript">
//
// Show shoppingcart info on you home page
// Version for WebsiteX5 Evolution 8
// 2010 - Rbbrt
//
// Load the WX5 shoppingcartsystem

imCLoad("");

// Constant values. Change to suit your language
// or pull appropriate values from Language.ini
var strProducts="products";
var strSubtotal="Subtotal";
var strVAT = "VAT";
var strTotal = imLocale["TotalVAT"];
var strEmpty = imLocale["Err_EmptyCart"];
var strGoToCart = "Go to your Shoppingcart";


var iNumberOfProducts=0; // for counting the number of products
var iTotal = 0; // for calculating the total of the order
var fVAT = 0;
var sBuf ="<div id='myDiv'>";

// Load the shopingcartfunction.
var sCart = imGetCookie("imOrder");
var aCart = "";

// set the results in a table...
sBuf +="<table id='myTable'>";

// split the contents of the shoppingcart into an array.
if(sCart != null && sCart != "" ) {
aCart = sCart.split("|");
}
else {
aCart = new Array();
}

// If the cart is empty show 'EmptyCart'.
// This is defined in the languagedefinition.
// Otherwise count the number of ordered articles
// and calculate the total orderprice (ex shipment and VAT.

if(aCart.length == 0) {
sBuf += strEmpty;
}
else {
for ( var i = 0; i < aCart.length; i++) {
aCartProd = aCart[i].split(":");
aProd = imCGetProduct(aCartProd[0],aCartProd[1]);
iNumberOfProducts += Number(aCartProd[3]);
iTotal += aProd[4]*aCartProd[3];
}

// Create output:
// remove the lines you don't need in your output by
// placing two forward slashed before them!

// First report the number of products and the amount ex VAT.
sBuf +="<tr><td style='text-align: left;'>" + iNumberOfProducts + " " +
strProducts + "</td>";
sBuf +="<td align='right'>" + imCFormat(iTotal,false) + "</td></tr>";

// Caluclate the amount of VAT
fVAT = iTotal * Number( imVAT/100 );

// Next report the amount of VAT
sBuf += "<tr><td style='text-align:left;'>" + strVAT + " (" + imVAT + "%)" + "</td>";
sBuf += "<td style='text-align:right;'>" + imCFormat(fVAT,false) + "</td></tr>";

// calculate the total including VAT
iTotal += fVAT;
sBuf +="<tr><td style='text-align: left;'>" + strTotal + "</td>";
sBuf +="<td align='right'><b>" + imCFormat(iTotal,false) + "</b></td></tr>";
}
sBuf += "</table>";
sBuf +=" <p>&nbsp</p>";

// add a link to go to the shoppingcart...
sBuf +="<a title='' href='imcart.html'>" + strGoToCart + "</a>";

// Close the div...
sBuf+="</div>";

// and output the buffer...
document.write(sBuf);
</script>

Change the language labels (the ones in green) in the texts which are appropriate for your language and click on OK (ignore the error. The script works fine! This is a rather persistent issue in WebsiteX5!)

That's it...

Now for the styling part...
First of all you can format the blocks using the WX5 cell-format functionality. With this you can for example set a title for the block, set the background color of the div, etc.

For additional formatting, for example the font of open the HTML Code block with the script and go to the secont tab, marked 'CSS'.

The contents of the Shoppingcart info is enclosed between <div id='myDiv'> and </div> and the generated table also has an id 'myTable'. We can use this to set CSS-statements for the shoppingcart info...
For example if you want to set the font to Verdana, 12 and have the a space of 15 pixels between the border of the div and the text.

You can also do some formatting on the table. For exmaple a green background white letters and the table must use the complete available width (excluding of couse 15 pix on the left and 15 pix on the right for the padding...

For this put the following text in the CSS-tab of the HTML Code block...

#myDiv {
font-family: Verdana;
font-size: 12px;
padding: 15px;
}

#myTable {
width: 100%;
background-color: #016A42;
color: white;
}

That's it, basically...

Have fun experimenting with this script!

Rbbrt