Restructured for upgradeability and added new features

[jtlapp]

This revision addresses two important structural problems and implements a number of minor features. The first problem is that users were previously required to edit the file that implemented the cart in order to configure the cart to their liking. This makes it difficult for users to keep updating to the latest version of the software. The second problem is that the implementation was putting all variables and functions in the global namespace, setting the software up for random conflicts with other Javascript that the site may run. In particular, sometimes after visiting the plugin cart and then visiting the SpreadShop cart, the SpreadShop cart would report errors and empty the cart. I don't know the cause of that problem, but global variable conflicts are one possibility. This revision eliminates that possibility.

Here are the specific modifications, including a few new helpful features, and a few presentation tweaks:

(1) Configuration variable names are moved out of the global namespace into the globals pluginSpreadCart_config and pluginSpreadCart_lang. This helps to prevent name conflicts with other code that the site may be running.

(2) Configuration variable assignments (now in pluginSpreadCart_config) have been removed from spreadCart.js and must be set in the containing page. This allows users to simply replace their copy of spreadCart.js with each new version that is created, without having to manually merge changes. A sample of doing this is now in index.html.

(3) The translation variables have been moved to their own file, because they may need to be modified for the particular web site and modifications are no longer being required in spreadCart.js, and because a web site may or may not have use of all provided translations, so the developer can choose whether to use the provided translation file or to provide his/her own.

(4) The translation variables are now a function of language, allowing us to provide default translations for many languages, and allowing the site to select the translation language with a parameter.

(5) The functions implementing the plugin shopping cart have all been moved to a Javascript object, class SpreadCartPlugin. Moreover, many of the functions were using global variables for local computations instead of declaring locals. These variables are all now locals. This entailed referencing the object's variables via "this" from within object functions, and it entailed creating a local "var cart = this" for referencing the object from within anonymous functions.

(6) In the process of moving functions and variables out of global namespace, I ended up adjusting the formatting so that I could make sense of things in my 80th-column wrapping editor.

(7) Trailing colons and spaces were removed from all language strings in order to allow the formatting of the cart to evolve without having to change the language strings, some of which may be customized for a particular web site.

(8) The shipping information and tax (VAT) information lines are now optional. If values are not provided, they will not be rendered. For example, the site could select a default language and then set these values to null in that default language in order not to display this information.

(9) I renamed shippingTotal to shippingFee, because although "total shipping" can mean "shipping fee," "shipping total" can also mean total cost including shipping. For clarity, I just renamed the variable.

(10) It is now optional to include the link for deleting items. The link is left out when the deleteItem language label is empty (null or blank).

(11) The cart can now be closed by clicking on the shaded background surrounding the cart. This is conventional expectation now on websites when dimming.

(12) I added the new configuration parameter showBasketIcon and renamed basketContainer to clickTargetID. When showBasketIcon is true, clickTargetID behaves as basketContainer did, naming the element where the basket icon and item quantity are to be displayed. When showBasketIcon is false, the basket icon and item quantities are not displayed. Instead, when showBasketIcon is false, clicking the clickTargetID element results in the cart being shown. The site developer puts this ID on any element he/she desires. This option has multiple benefits: (a) the plugin cart does not update its count when adjustments are made within the SpreadShop cart, so this prevents the user from ever becoming concerned over disagreeing counts; (b) the means for updating the plugin cart count rely on internal features of the SpreadShop user interface that could suddenly change on us and break the cart, so disabling updates allows us to avoid using these features, hence making the code more stable; (c) the option gives the user complete control over what the shopping cart link looks like; and (d) it can be disconcerting to see two counts on the screen at once -- the plugin cart count and the SpreadShop count (when the latter is visible).

(13) I added a new language string for information that is to be displayed at the top of the shopping cart, which defaults to empty. For example, I felt it necessary to say the following on my site: "You may change the contents of the shopping cart either at checkout or from a page that shows you T-shirts. The colors shown in these images may differ from your order; the text indicates the color ordered. Thank you for shopping!"

(14) Changed the button formatting. CSS class .miniBasketButton's padding was being ignored (a least on Chrome), so I increased the priority of the selector. I also made the font-size a readable 14px. I also moved the hardcoded style out of the HTML generation and into the stylesheet. In addition, I changed the left and right margins to 40px because I thought it looked much nicer. Also had to remove a "right:0" because this was messing up Safari. And made the drop-shadow consistent across Safari, Firefox, and Chrome.

(15) Padded below the item name a bit to make it more readable among all the item information.

(16) Modified the CSS so that the total amount is in bold.

(17) Made the shopping cart only display the language string emptyCart when the shopping cart is empty. It also displays a continue-shopping button. It's confusing to show the cart without any items and give the user totals and a checkout button, so I think we need this.

[RobertSpread]

Thank you for the changes!

[jtlapp]

Mighty gracious of you to outright accept everything without discussion! I thought you might balk at the switch to a Javascript object representation, since you hadn't started that way. I'm open to discussing alternative approaches to those that I took.

One thing especially bugs me. There are three related configuration variables that are currently separate. These are lang, tld, and mediaURL. I don't understand tld and mediaURL well enough to know whether it's possible to reduce the number of variables here. Are any of these redundant?

Thank you for merging things in. Also, thank you very much for creating the script and giving us an interim solution to the problem of no site-wide shopping cart on integrated sites.