JavaScript Shopping Cart Single Page Application

Last reviewed/updated: 13 Nov 2018 | Published: 18 Mar 2014 | Status: Active
Web browser support: Internet Explorer 11+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

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.) JavaScript ShoppingCartUtil.itemsDb array, which represents the items to shop from; and 2.) JavaScript ShoppingCartUtil.deliveryMethodsDb array, which represents the delivery methods to select from.
  • Representing frontend databases are the dynamic: 1.) JavaScript itemNameArray[] array, which represents the name of each item selected for purchase; 2.) JavaScript itemQuantityArray[] array, which represents the quantity of each item selected for purchase; and 3.) JavaScript itemPriceEachArray[] array, which represents the price of each item selected for purchase. These JavaScript arrays serve as a dynamic frontend database with itemName in itemNameArray[] 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 JavaScript dataset.* property are used and IE was more than two years behind the other major web browsers in supporting them. Although this example uses the HTML data-* attribute and the corresponding JavaScript dataset.* 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 = EdgeHTML rendering engine (ED12+) and/or Edge browser (ED20+).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. JavaScript Shopping Cart Single Page Application

1.) SHOPPINGNext pointing shopping navbar triangle2.) SHOPPING CART3.) CHECKOUT:ShippingBillingReview OrderOrder Confirmation

Fake search result for: 4th Generation Intel Core i3 Processors (Desktop) Boxed
Showing 1 - 9 of 9 products.

Intel Core i3-4130 Processor (3MB Cache, 3.40GHz) Haswell LGA1150 22nm Boxed
Intel Core i3-4130 Processor (3MB Cache, 3.40GHz) Haswell LGA1150 22nm Boxed
  • Launch Date: Q3'13
  • # of Cores: 2
  • Max TDP: 54W
  • Processor Graphics: Intel HD Graphics 4400
  • Model #: BX80646I34130
$117.00
Intel Core i3-4150 Processor (3MB Cache, 3.50GHz) Haswell LGA1150 22nm Boxed
Intel Core i3-4150 Processor (3MB Cache, 3.50GHz) Haswell LGA1150 22nm Boxed
  • Launch Date: Q2'14
  • # of Cores: 2
  • Max TDP: 54W
  • Processor Graphics: Intel HD Graphics 4400
  • Model #: BX80646I34150
$117.00
Intel Core i3-4160 Processor (3MB Cache, 3.60GHz) Haswell LGA1150 22nm Boxed
Intel Core i3-4160 Processor (3MB Cache, 3.60GHz) Haswell LGA1150 22nm Boxed
  • Launch Date: Q3'14
  • # of Cores: 2
  • Max TDP: 54W
  • Processor Graphics: Intel HD Graphics 4400
  • Model #: BX80646I34160
$117.00
Intel Core i3-4170 Processor (3MB Cache, 3.70GHz) Haswell LGA1150 22nm Boxed
Intel Core i3-4170 Processor (3MB Cache, 3.70GHz) Haswell LGA1150 22nm Boxed
  • Launch Date: Q1'15
  • # of Cores: 2
  • Max TDP: 54W
  • Processor Graphics: Intel HD Graphics 4400
  • Model #: BX80646I34170
$117.00
Intel Core i3-4330 Processor (4MB Cache, 3.50GHz) Haswell LGA1150 22nm Boxed
Intel Core i3-4330 Processor (4MB Cache, 3.50GHz) Haswell LGA1150 22nm Boxed
  • Launch Date: Q3'13
  • # of Cores: 2
  • Max TDP: 54W
  • Processor Graphics: Intel HD Graphics 4600
  • Model #: BX80646I34330
$147.00
Intel Core i3-4340 Processor (4MB Cache, 3.60GHz) Haswell LGA1150 22nm Boxed
Intel Core i3-4340 Processor (4MB Cache, 3.60GHz) Haswell LGA1150 22nm Boxed
  • Launch Date: Q3'13
  • # of Cores: 2
  • Max TDP: 54W
  • Processor Graphics: Intel HD Graphics 4600
  • Model #: BX80646I34340
$157.00
Intel Core i3-4350 Processor (4MB Cache, 3.60GHz) Haswell LGA1150 22nm Boxed
Intel Core i3-4350 Processor (4MB Cache, 3.60GHz) Haswell LGA1150 22nm Boxed
  • Launch Date: Q2'14
  • # of Cores: 2
  • Max TDP: 54W
  • Processor Graphics: Intel HD Graphics 4600
  • Model #: BX80646I34350
$147.00
Intel Core i3-4360 Processor (4MB Cache, 3.70GHz) Haswell LGA1150 22nm Boxed
Intel Core i3-4360 Processor (4MB Cache, 3.70GHz) Haswell LGA1150 22nm Boxed
  • Launch Date: Q2'14
  • # of Cores: 2
  • Max TDP: 54W
  • Processor Graphics: Intel HD Graphics 4600
  • Model #: BX80646I34360
$147.00
Intel Core i3-4370 Processor (4MB Cache, 3.80GHz) Haswell LGA1150 22nm Boxed
Intel Core i3-4370 Processor (4MB Cache, 3.80GHz) Haswell LGA1150 22nm Boxed
  • Launch Date: Q3'14
  • # of Cores: 2
  • Max TDP: 54W
  • Processor Graphics: Intel HD Graphics 4600
  • Model #: BX80646I34370
$147.00

Processor images from Newegg (newegg.com).
Processor prices per 4th Generation Intel Core i3 Processors (Desktop) (ark.intel.com) 11 Jun 2015.