The orderBar shopping cart system can be applied with simple html code. If you need to brush up on html we'd like to refer you to a highly rated course, W3C Schools. This well crafted, informative course will show you how to turn out professional looking web pages in just a few hours.
The orderBar can also be easily read by webpage template tools such as Dreamweaver, Frontpage, or any software package that reads html code. Moreover some will provide convenient parameter entry tools.
Here is what a sample store might look like with selection icons and checkout page link, in place. Click on thumbnail image below for a larger image.
The orderBar applet tags are added to your web page wherever you want to add a product or service selection. The customer will be able to click on an icon and everything else will be handled for them. Just like a brick and mortar store. They add items to their cart and the price is totaled for them at the checkout stand. They're not inconvenienced with any of the inner workings of the store. All they have to do, again emulating real life shopping practices, is tell the merchant how they'll pay for their selection and where they want it shipped (or even if they'll pick it up).
Anyplace you want to add a link to the tallyPage.html page the customer go to checkout on a simple one page checkout form, filling in their shipping address and method of payment. The orderBar even includes shipping weights so we can calculate shipping rates and delivery methods, even by zip code if needed.
The icons displayed by the orderBar applet are one of three: the 'add' button, the drop down menu, or a small text field for quantity entries. Typical code can be 'copy and pasted' to whatever page you want and reads as follows:
<applet code = "orderBarPrime.class" width ="40" height = "21" alt = "Java orderBar shopping cart applet" align = "absmiddle"?
<param name = "NoOfItems" value = "3">
<param name = "Quantity1" value = "1">
<param name = "Quantity2" value = "2">
<param name = "Quantity3" value = "3">
<param name = "unitPrice" value = "129.95">
<param name = "units" value = "ea">
<param name = "description" value = " - Vinyl Play Horse">
<param name = "ProductCodeNumber" value = " WS4604 ">
<param name = "showDropMenu" value = "on">
<param name = "showTextField" value = "on">
<param name = "showButton" value = "off">
<param name = "Weight" value = "1">
<param name = "colorize" value = "cceedd">
</applet>
It would be a good idea to view the demo before studying the parameter list. We've prepared a concise example of the orderBar that will give you an overview and maybe give you some ideas on how to apply it to your application.
The quickest way to use this code is to 'copy and paste' it to your web page. Your primary concern is the 'value' of the param tags. You can copy and paste this code just like it is, put it in your web page but you'll want to change the price, description and probably product code to match the product or service your representing on your web page.
NoOfItems - is the first parameter listed and it's for the number of entries that will be displayed in the drop down menu icon.
Quantity[n] - This is the quantity that will be shown in the drop down menu icon. The [n] value is a count from 1 to n where n is the NoOfItems value from the previous parameter.
For example in the above applet code we've used
<param name = "NoOfItems" value = "3">.Thus we need 3 Quantity entries: Quantity1, Quantity2, Quantity3. In our example they're:
<param name = "Quantity1" value = "1"><param name = "Quantity2" value = "2">
<param name = "Quantity3" value = "3">
Notice how the param name changes for each tag and the word Quantity is appended with the numbers 1, 2, and 3. If we had made our NoOfItems param = "2" then we would only have two Quantity parameters: Quantity1 and Quantity2. If we had made our NoOfItems parameter equal twelve we would need 12 Quantity parameter tags: Quantity1, Quantity2 .... Quantity12.
The value of the quantity can be whatever we need. A complete Quantity parameter that looks like: <param name = "Quantity5" value = "10"> would multiply the unitPrice by ten when selected from the drop down menu icon.
unitPrice - is the price of the product. This is the price that will be multiplied by the quantity selected. You can use whole numbers or decimal values, like: 1, 1.95, 759.59, 5, .39 etc. Numbers and decimals only. No $ or ¢ signs.
units - is the quantity value shown on the checkout page with the tally. Typically values are ea, lb, and doz.
description - is the product description listed in the tally section on the checkout page. Just like a receipt tape from the grocery store, you need some sort of descriptive reminder for the customer, on their receipt tally.
ProductCodeNumber - the product code is also listed on the tally page next to the description.
The orderBar applet has three icons that can be displayed on the web page for quantity selection: the 'Add' button, drop down menu or textfield.
showDropMenu - value = "on" will show drop down menu for quantity selection icon. showButton value must equal "off" if showDropMenu value = "on".
showTextField - value = "on" will show textField. It's also used with the 'showDropMenu' selection 'on' for 'other' quantity selection amounts in case you want to allow your customer to enter a custom amount. In other words both the drop down icon and the textfield icon are displayed with the textfield icon being displayed when the customer clicks on the 'other' selection from the drop down menu (see demo).
showButton - value = "on" will show 'Add' button for quantity selection icon. showDropMenu must be 'off' if showButton value = "on".
| Icon Display Options | ||||
| if <param showDropMenu = | on | on | off | off |
| if <param showTextField = | off | on | on | off |
| if <param showButton = | off | off | off | on |
| then | Show drop menu only |
Show drop menu with textfield |
Show textfield only |
Show add button only |
Weight - is for shipping weight of product. Value here is multiplied by quantity selected and requires customized access. The tally sheet comes with straight shipping rates, that is the dollar value is multiplied by a percentage (a common method for setting shipping rates), but it doesn't utilize the shipping rate parameter. We can customize your tally sheet to do just about anything. Shipping rates can be indexed to zip codes, matched to different carriers, and local zip codes set aside for 'will call' orders or more, all adjusted shipping weights if needed.
colorize - Sets applet background color. This orderBar applet has the capability of displaying the quantity textField icon if the background of the applet is double clicked. The icons are not affected by the colorize parameter, only the background shows the color. If the applet width and height are set to 38 and 22, for example, the background won't show. Only the icon will be visible. If the width of the applet is set to 50 the background color will show on the right of the icon, for example.
The only required parameters are showButton, showDropMenu, and showTextField. These must be included with the applet tags and their value must be set to either 'on' or 'off' to function. The rest of the parameters can be omitted if need be, but seems unnecessary since it's just as easy to 'copy and paste' the parameters where needed.
Applet tag Attrbutes
The applet definition tag uses several attributes that you'll want to work with. It's the first tag in our list above:
<applet code = "orderBarPrime.class" width ="40" height = "21" alt = "Java orderBar shopping cart applet" align = "absmiddle"?
The code = attribute is the name of the applet program stored in the same file folder or directory with the web pages.
width and height determine how much of the icon and applet background will show. The icons themselves are 40 pixels wide by 22 pixels high. If you make the width and height dimensions any larger the background will show with it's color determined by the 'colorize' parameter. The value is that the background can be double clicked to bring up the textField icon for selection. There are limited applications where this may come in handy, like order adjustments.
Since we broached the subject, adjustments, are an important consideration for a shopping cart, or should I say avoided. If you look around, you'll notice that a lot of shopping carts work very hard to cover this topic over with hype. Self correcting adjustments on the checkout page requires awkward or expensive server side programming, usually with a database, that can be avoided with orderBar checkout page. Here we've opted for the most fundamental and cost effective method. If a customer makes a correction in the a text field on the checkout page, it will be emailed with that correction. But this requires the merchant to verify order totals before shipping - a common practice performed anyway. We can provide server side auto adjustments for the orderBar but they are expensive and not recommended until order volumes mandate it.
Using the alt attribute is optional but considered a 'must' for correct web page design. If a browser can't interpret the icon graphics it will display the text in its place. A common usage is for the 'site impaired' browsers that verbalize the text. The text with the alt attribute will be read aloud.
Finally the 'align' attribute is optional but provides positioning of the orderBar icon next to an image or text. Options are absmiddle, absbottom, bottom, center, left, middle, right, top.
These are the key attributes for setting up a complete online store. The easiest and most cost effective way to set up this applet is in the same directory (or file folder as it's called on Windows) with the web pages it's used on. If you need to carry the information across directories please feel free to contact for additional information.
Let me show you what we're talking about. Click this link to view tally page.
The tally sheet needs little adjustment. It's a complex web page so make sure you make a back up copy before you do any tinkering. There are four things you'll probably want to alter on the tally page. They are the sales tax rate, the shipping rate, email address, and the company name and logo at the top. We've marked the changes in the tally page so they're easy to find. They're marked with asterisks and text as follows:
Code that needs adjusting immediately follows these asterisk highlighte areas of the web page code. The first set of asterisks above, highlight the location in the code where the shipping rate is set. A simple decimal multiplication formula is used to set the rate. If you want the shipping rates to be 12%, for example, you multiply the sub total by .12. If you want it to be 30% you can multiply it by .3. 5% would be .05. All you have to do is change the decimal value in the line of code. You'll also want to adjust the shipping rate text by the checkbox. The text is also marked by a proliferation of asterisks and the message "Adjust Shipping Text Here", wouldn't ya know. Setting a single shipping rate, like this, is one of the most common methods used to set shipping rates on the Internet. It's usually accompanied by a text notation stating that the customer will be contacted if shipping rates are more than expected and not contacted if shipping rates are less. The notation can easily be added at the bottom of the form. We have several shipping options available that can be applied to the orderBar online ordering system. Most require an investment in time and if you would like us to adapt your tally page to meet specific needs we'd be happy to provide a very cost effective quote. The second item you'll probably want to change is the sales tax rate. It too is a simple decimal multiplication formula. Just set it to the tax rate for your local and don't forget to include the preceding zero for an accurate calculation. Here we've multiplied the sub total by .088 which will add an 8.8% sales tax to the purchase price when the customer checks the sales tax box on the web page. The text by the sales tax check box is highlighted with asterisks as well. The email address change you'll be making is where the orders will be sent when the customer clicks the 'Submit Order' button. Each one of the categories filled out on the form will be emailed in a standard text format. You can test throughput by turning on your browser, getting online, and then clicking 'Submit Order' (with the appropriate email set) and you'll get an order in your email. The web pages don't have to be uploaded to your ISP in order to test them out. You only need to be online. Name and logo changes are marked with asterisks and follow standard html coding practices. The credit card list and credit card image is also marked with a proliferation of asterisks in the tally page code in case you want to modify the credit card list.
The checkout page can be customized to be anything you want and we have many other examples and accessories available on our web site at www.programsplus.us.
/* ************************************************** */
/********* Adjust Shipping Rates here ********************/
/****************************************************/
/*** line is marked 'ADJUST ADJUST ADJUST' ************/
/*** adjust the rate in the line 'shipCost = subTotal * .20' ****/
/******* adjust the value '20' to your rate *****************/
/****************************************************/
/*******************************************************/
/********** Adjust the sales tax rate here ********************/
/********** Change '.088' to your locals rate. ****************/
/******************************************************/
<!-- *********************************************************** -->
<!-- *********************************************************** -->
<!-- ***** You'll need to change the email address below to yours ******* -->
<!-- **Change the text that reads 'YOUR@EMAILADDRESS.HERE ***** -->
<!-- **** to your email or the email you'd like the orders mailed to.******* -->
<!-- *********************************************************** -->
<!-- **************************************************** -->
<!-- *** Change the generic Company name and logo text ******* -->
<!-- *** below to the text you'd like to appear at the top of the ** -->
<!-- *** tally page. ************************************** -->
<!-- ************************************************** -->
<!-- *********************************************************** -->
<!-- *********************************************************** -->
<!-- ***** You'll need to change the email address below to yours ******* -->
<!-- **Change the text that reads 'YOUR@EMAILADDRESS.HERE ***** -->
<!-- **** to your email or the email you'd like the orders mailed to.******* -->
<!-- *********************************************************** -->
