JavaScript Shopping Cart Single Page Application
1. Introduction
Some notes on this example:
- Once this web page is loaded, this example runs entirely on the client (i.e., in the web browser) and no additional data (including web page content and form data) is received from or sent over the Internet.
- The non-minified JavaScript code (learnwebcoding.com) is thoroughly commented.
- Representing
backend
databases are the hard coded: 1.) JavaScriptShoppingCartUtil.itemsDb
array, which represents the items to shop from; and 2.) JavaScriptShoppingCartUtil.deliveryMethodsDb
array, which represents the delivery methods to select from. - Representing
frontend
databases are the dynamic: 1.) JavaScriptitemNameArray[]
array, which represents the name of each item selected for purchase; 2.) JavaScriptitemQuantityArray[]
array, which represents the quantity of each item selected for purchase; and 3.) JavaScriptitemPriceEachArray[]
array, which represents the price of each item selected for purchase. These JavaScript arrays serve as a dynamic frontend database withitemName
initemNameArray[]
serving as the unique key. - At the conclusion of this example; 1.) a JavaScript object representing the fake order data is assembled, 2.) the order object is serialized into a JSON string using the JavaScript
JSON.stringify()
method, and 3.) the order object JSON string is displayed. - The relatively high Internet Explorer version requirement (IE11+) is because the HTML
data-*
attribute and the corresponding JavaScriptdataset.*
property are used and IE was more than two years behind the other major web browsers in supporting them. Although this example uses the HTMLdata-*
attribute and the corresponding JavaScriptdataset.*
property, there is no requirement to use them and this example could be recoded to support earlier versions of IE.
1.1. Web Browser Support
Web browser support: IE11+, ED12+, FF6+, SF5.1+, CH13+, OP11.50+.
1.2. Abbreviations
- IE = Internet Explorer.
- ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
- FF = Firefox.
- SF = Safari.
- CH = Chrome.
- OP = Opera.
2. JavaScript Shopping Cart Single Page Application
Fake search result for: 4th Generation Intel Core i3 Processors (Desktop) Boxed
Showing 1 - 9 of 9 products.

- Launch Date: Q3'13
- # of Cores: 2
- Max TDP: 54W
- Processor Graphics: Intel HD Graphics 4400
- Model #: BX80646I34130

- Launch Date: Q2'14
- # of Cores: 2
- Max TDP: 54W
- Processor Graphics: Intel HD Graphics 4400
- Model #: BX80646I34150

- Launch Date: Q3'14
- # of Cores: 2
- Max TDP: 54W
- Processor Graphics: Intel HD Graphics 4400
- Model #: BX80646I34160

- Launch Date: Q1'15
- # of Cores: 2
- Max TDP: 54W
- Processor Graphics: Intel HD Graphics 4400
- Model #: BX80646I34170

- Launch Date: Q3'13
- # of Cores: 2
- Max TDP: 54W
- Processor Graphics: Intel HD Graphics 4600
- Model #: BX80646I34330

- Launch Date: Q3'13
- # of Cores: 2
- Max TDP: 54W
- Processor Graphics: Intel HD Graphics 4600
- Model #: BX80646I34340

- Launch Date: Q2'14
- # of Cores: 2
- Max TDP: 54W
- Processor Graphics: Intel HD Graphics 4600
- Model #: BX80646I34350

- Launch Date: Q2'14
- # of Cores: 2
- Max TDP: 54W
- Processor Graphics: Intel HD Graphics 4600
- Model #: BX80646I34360

- Launch Date: Q3'14
- # of Cores: 2
- Max TDP: 54W
- Processor Graphics: Intel HD Graphics 4600
- Model #: BX80646I34370
Processor images from Newegg (newegg.com).
Processor prices per 4th Generation Intel Core i3 Processors (Desktop) (ark.intel.com) 11 Jun 2015.
Your shopping cart is empty. Please continue shopping and select an item to purchase.
Shipping: | |
Delivery Method |
|
Total: |
Shipping Information
Billing Information
Billing Address
Shopping Cart
Products:
Your shopping cart is empty. Please continue shopping and select an item to purchase.
Delivery Method:
There is no delivery method. Please return to the shopping cart and select a delivery method.
Total:
Shipping Information
Billing Information