I posted the code in that topic above that Koibito posted.
It came from another forum user named 'Dee' (i think), so I wont & cant take their credit...
The next step up from this is a proper mini cart that looks like this:
On my cart, it sits on the right hand side of all my products and when somebody orders something it refreshes the page and does not go to the managecart page.
p.s. as you can see by my images i dont set the shipping price per product (i have included shipping for everyone), rather i set this via a dropdown list that the user selects on the managecart page, but we wont get into that
You need to add more code and reposition stuff so its not very straight forward but here goes
you should make a copy of your nopcart files just incase it does not work for you for some reason, so you dont loose too many hours of sleep 
place above validate cart in the nopcart.js file
- Code: Select all
///////////////////////////////////////////////////////////////////////////////////////////////////////////
// short basket code
function SmallCart( ) {
var iNumberOrdered = 0; //Number of products ordered
var fTotal = 0; //Total cost of order
var fTax = 0; //Tax amount
var fShipping = 0; //Shipping amount
var strTotal = ""; //Total cost formatted as money
var strTax = ""; //Total tax formatted as money
var strShipping = ""; //Total shipping formatted as money
var strOutput = ""; //String to be written to page
var bDisplay = true; //Whether to write string to the page (here for programmers)
iNumberOrdered = GetCookie("NumberOrdered");
if ( iNumberOrdered == null )
iNumberOrdered = 0;
if ( bDisplay )
strOutput = "<TABLE width=140 cellspacing=0 cellpadding=5 CLASS=\"nopcart\"><TR>" +
// "<TD CLASS=\"nopheader\"><B>"+strILabel+"</B></TD>" +
"<TD bgcolor=#FFFFFF CLASS=\"nopheader\"><B>"+strDLabel+"</B></TD>" +
"<TD bgcolor=#FFFFFF CLASS=\"nopheader\"><B>"+strPLabel+"</B></TD>" +
"<TD bgcolor=#FFFFFF CLASS=\"nopheader\"><B>"+strQLabel+"</B></TD>" +
(DisplayShippingColumn?"<TD bgcolor=#FFFFFF CLASS=\"nopheader\"><B>"+strSLabel+"</B></TD>":"") +
"</TR>";
if ( iNumberOrdered == 0 ) {
strOutput += "<TR><TD bgcolor=#FFFFFF COLSPAN=6 CLASS=\"nopentry\"><CENTER><BR><B>Your Basket is
empty</B><BR><BR></CENTER></TD></TR>";
}
for ( i = 1; i <= iNumberOrdered; i++ ) {
NewOrder = "Order." + i;
database = "";
database = GetCookie(NewOrder);
Token0 = database.indexOf("|", 0);
Token1 = database.indexOf("|", Token0+1);
Token2 = database.indexOf("|", Token1+1);
Token3 = database.indexOf("|", Token2+1);
Token4 = database.indexOf("|", Token3+1);
fields = new Array;
fields[0] = database.substring( 0, Token0 ); // Product ID
fields[1] = database.substring( Token0+1, Token1 ); // Quantity
fields[2] = database.substring( Token1+1, Token2 ); // Price
fields[3] = database.substring( Token2+1, Token3 ); // Product Name/Description
fields[4] = database.substring( Token3+1, Token4 ); // Shipping Cost
fields[5] = database.substring( Token4+1, database.length ); //Additional Information
fTotal += (parseInt(fields[1]) * parseFloat(fields[2]) );
fShipping += (parseInt(fields[1]) * parseFloat(fields[4]) );
fTax = (fTotal * TaxRate);
strTotal = moneyFormat(fTotal);
strTax = moneyFormat(fTax);
strShipping = moneyFormat(fShipping);
if ( bDisplay ) {
// strOutput += "<TR><TD CLASS=\"nopentry\">" + fields[0] + "</TD>";
if ( fields[5] == "" )
strOutput += "<TD bgcolor=#FFFFFF CLASS=\"nopentry\">" + fields[3] + "</TD>";
else
strOutput += "<TD bgcolor=#FFFFFF CLASS=\"nopentry\">" + fields[3];
strOutput += "<TD bgcolor=#FFFFFF CLASS=\"nopentry\">"+ MonetarySymbol + moneyFormat(fields[2]) + "</TD>";
strOutput += "<TD bgcolor=#FFFFFF CLASS=\"nopentry\"><INPUT TYPE=TEXT NAME=Q SIZE=1 VALUE=\"" + fields[1] + "\"
onChange=\"ChangeQuantity("+i+", this.value);\"></TD>";
if ( DisplayShippingColumn ) {
if ( parseFloat(fields[4]) > 0 )
strOutput += "<TD bgcolor=#FFFFFF CLASS=\"nopentry\">"+ MonetarySymbol + moneyFormat(fields[4]) +
"/ea</TD>";
else
strOutput += "<TD bgcolor=#FFFFFF CLASS=\"nopentry\">N/A</TD>";
}
strOutput += "<TR CLASS=\"nopentry\" ALIGN=CENTER></TR>";
strOutput += "<TD bgcolor=#FFFFFF CLASS=\"nopentry\" ALIGN=CENTER><input type=button value=\ Update \"
class=\"nopbutton\"></TD>";
strOutput += "<TD bgcolor=#FFFFFF CLASS=\"nopentry\" ALIGN=CENTER><input type=button value=\ "+strRButton+" \"
onClick=\"RemoveFromCart("+i+")\" class=\"nopbutton\"></TD>";
strOutput += "<TD bgcolor=#FFFFFF CLASS=\"nopentry\" ALIGN=CENTER></TD>";
strOutput += "</TR>";
}
if ( AppendItemNumToOutput ) {
strFooter = i;
} else {
strFooter = "";
}
}
if ( bDisplay ) {
strOutput += "<table width=320 bgcolor=#FFFFFF>";
}
g_TotalCost = (fTotal + fShipping + fTax);
document.write(strOutput);
document.close();
}
place at the very bottom of the nopcart.js file- Code: Select all
//=====================================================================||
// END NOP Design SmartPost Shopping Cart ||
//=====================================================================||
//---------------------------------------------------------------------||
// FUNCTION: Print_total ||
// PARAMETERS: true/false if you want MonetarySymbol added to string ||
// RETURNS: Total cost currently racked up by shopper ||
// PURPOSE: Aesthetics ||
//---------------------------------------------------------------------||
function Print_total(bSymbol) {
var strOutput = ""; //String to be written to page
var strTotal = ""; //Total cost formatted as money
var fTotal = 0;
var iNumberOrdered = 0; //Number of products ordered
var fShipping = 0; //Shipping amount
iNumberOrdered = GetCookie("NumberOrdered");
if ( iNumberOrdered == null )
iNumberOrdered = 0;
for ( i = 1; i <= iNumberOrdered; i++ ) {
NewOrder = "Order." + i;
database = "";
database = GetCookie(NewOrder);
Token0 = database.indexOf("|", 0);
Token1 = database.indexOf("|", Token0+1);
Token2 = database.indexOf("|", Token1+1);
Token3 = database.indexOf("|", Token2+1);
Token4 = database.indexOf("|", Token3+1);
fields = new Array;
fields[0] = database.substring( 0, Token0 ); // Product ID
fields[1] = database.substring( Token0+1, Token1 ); // Quantity
fields[2] = database.substring( Token1+1, Token2 ); // Price
fields[3] = database.substring( Token2+1, Token3 ); // Product Name/Description
fields[4] = database.substring( Token3+1, Token4 ); // Weight
fields[5] = database.substring( Token4+1, database.length ); //Additional Information
fShipping += (parseInt(fields[1]) * parseFloat(fields[4]) );
fTotal += (parseInt(fields[1]) * parseFloat(fields[2]));
}
strTotal = moneyFormat(fTotal+fShipping);
strOutput+=strTotal;
if ( bSymbol )
strOutput = MonetarySymbol + strOutput
document.write(strOutput);
}
//=====================================================================||
// END NOP Design SmartPost Shopping Cart ||
//=====================================================================||
now add this to every page that has productsit will add a table to the page that will display all the items prices shipping etc.
- Code: Select all
<table width="320" height ="300" border="0" bgcolor="#ffffff" cellpadding="0" cellspacing="0" align="right">
<tr>
<td width="149" valign="top"><SCRIPT>SmallCart();</SCRIPT>
</td>
</tr>
<tr>
<td align="right" valign="top"></td>
</tr><tr>
<td valign="top"><P align="right"><SPAN class=style26><font size="2"><strong>Total: $
</strong> <SCRIPT language=JavaScript>
Print_total();
</SCRIPT>
<br>
<br>
<br>
(go to managecart) <a href="managecart.html">click to continue</a>
</span></td>
</tr>
</table>
add this to the head section of those pages it will format the table
- Code: Select all
<STYLE>
.checkout {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}
.checkoutinput {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}
.nopcart {
background: #FFFFFF;
border: 1px #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
width: 200px;
}
.nopheader {background: #666666;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF;}
.nopentry {background: #FFFFFF;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000;}
.noptotal {background: #FFFFFF;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}
.nopbutton {background: #FFFFFF;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000;}
.price {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
}
</STYLE>
<SCRIPT SRC="language-en.js"></SCRIPT>
<SCRIPT SRC="nopcart.js">
//=====================================================================||
// NOP Design JavaScript Shopping Cart ||
// ||
// For more information on SmartSystems, or how NOPDesign can help you ||
// Please visit us on the WWW at http://www.nopdesign.com ||
// ||
// JavaScript Shop Module, V.4.4.0 ||
//=====================================================================||
</SCRIPT>
and now the last step, your products should look like this- Code: Select all
<FORM NAME=order ACTION="managecart.html" onSubmit="AddToCart(this);history.go(0);location.href;">
<font face="Arial, Helvetica, sans-serif"> <font size="1"> Quantity:
<input type=text size=2 maxlength=3 name=QUANTITY onchange=this.value=CKquantity(this.value) value="1">
<input name="image" type="image" value="Add to Cart" src="./images/buynow.gif" align=top border=0>
<input type=hidden name="PRICE" value="10.00">
<input type=hidden name="NAME" value="2004 Chenin Blanc">
<input type=hidden name="ID_NUM" value="CHBL2004">
[/FORM]
and if you are really smart you can eventually get it to do this
So far this is what my cart is able to do
//Drop down shipping including working with Paypal 'fshipping' ( i worked this out myself and there is no solution on the nop forums)
//Drop down shipping values and locations set by the Post company for Wine Cases
//Australian GST 10% of the order total
//Validate cart mod must order in multiples of 12 bottles
//Can not continue to managecart unless cart has been validated
//AdditionalInfo altered to hold a pre-set value (1 for bottles, 12 for cases) so can calculate cases or bottles for the validation process
//Can order via a 'CASE' on some items or by the 'BOTTLE' on others
//Small cart totals on side of page (no need to load managecart) thus the page refreshes when item is added to the cart
//Total cases & total bottles ordered loads under the small cart
//Precheckout section added so that person can choose to send money via Paypal or moneyorder/bank cheque/direct deposit
//Pop-up window altered when item is to be added to cart
//Increase items in the cart in my mini cart via text links not buttons, ie, add 1 more product to cart or subtract 1 product from cart
but that ^^^^^ is for another time
i hope i copied everything correctly and people get it to work, nopcart has given me the answers, I am giving back my solutions
