Shopping Cart Website from Scratch Ecommerce

Set up a basic HTML5 template with UTF-8, a responsive viewport, and linked Bootstrap and jQuery to prepare for building a shopping cart with JavaScript.

Learn to set up jQuery event listeners for product items, handle add-to-cart clicks with document ready, prevent default behavior, and prepare to pass unique product data.

Add data-name, data-price, and data-id attributes to each product item and attach an event listener to pass these values via jQuery when clicked, using the data set object.

Learn to add multiple products to a shopping cart by passing product data through html and jquery, using distinct ids, attributes, and Bootstrap image-fluid for responsive images.

Use an array-based shopping cart stored in web storage to persist items across pages, set quantity to one, push items, and loop to update existing items instead of duplicates.

Loop through the shopping cart array using jQuery each, update quantities for existing items, and only add new items when no match is found.

Update the shopping cart by checking item IDs, incrementing quantity for existing items, pushing new items into the cart array, and handling conversion to integers for session storage.

Store and retrieve cart data with session storage, stringify the cart as JSON, then parse it back into an object to update and display the shopping cart across pages.

Use session storage to update array values in the shopping cart and increment quantities across reloads.

Learn to persist shopping cart data with session storage, render and update cart items in the dom using jQuery, and prepare a holder for formatted totals in a future lesson.

Showcases how to display cart items and totals with formatting tweaks, including quantity, ID, price, and running subtotal and total; prepares for bootstrap styling and currency formatting.

Format cart values as currency by building a money-formatting function, displaying dollars with two decimals, and applying it to quantity, price, and subtotals so totals update as items are added.

Build a dynamic shopping cart UI with Bootstrap styling, displaying items, quantities, prices, subtotal, and total; implement show/hide checkout and a ready-to-update total in real time.

Build a bootstrap modal popup for a shopping cart, with a header, body, and footer, opened by a cart button and showing the subtotal.

Build and format a shopping cart table using Bootstrap to display quantity, item name, ID, price, and subtotal, enhancing the table head and body for a cleaner cart view.

Master Bootstrap 4 tables within a shopping cart modal by converting quantities to integers, enhancing the cart table with hover effects, removing custom styling, and adding a right-aligned totals row.

Finish the pop-up modal by adding items table with a proceed to checkout button and a continue shopping option, using Bootstrap styling and data attributes to link to checkout html.

Style product displays with Bootstrap 4 cards, building card blocks, titles, text, and links to create a clean grid inside a container, header, content, and footer for dynamic shopping cart.

Update product cards to display prices with Bootstrap, using card subtitle and muted text, and apply Bootstrap buttons for add to cart and totals.

Create a responsive Bootstrap navigation bar for the shopping cart site, featuring a header, container layout, dark background, a hamburger toggle, and menu items such as about and products.

Master Bootstrap styling to align the cart to the right, use grid columns and containers, and mute subtotal text for a streamlined header.

Update the footer by adding a container div for better control, apply bootstrap utilities to center the text, and show cross-page consistency by reusing the layout on a products page.

Build a PayPal checkout page integrated with your shopping cart, with form fields for amount, item name, and shipping. Use jQuery to populate and format the checkout details.

Create a PayPal checkout form embedded in the cart table using hidden fields for item name, amount, and quantity, to update subtotals and enable quantity changes.

Add event listeners to dynamically updated quantity inputs using a class and jQuery, capture the item id from the dataset, and update the shopping cart array on change or keyup.

Tune the shopping cart by correctly referencing the cart array by index, enforcing non-negative quantities, syncing updates to session storage and the output cart subtotals.

Master dynamic shopping cart behavior using jQuery to update quantities and subtotals as content changes, and wire a PayPal checkout with bootstrap styling and continue shopping links.

Build a three-page ecommerce site by expanding the home, about, and products pages, linking a separate style sheet and a script file to enable a bootstrap-ready, functional shopping cart.

Create an about.html page by adding filler text, a two-column about me section, and Bootstrap style enhancements, while refining product content and preparing a carousel for the index page.

Update the home page by adding a main bootstrap carousel with indicators and left/right controls to display four products, while keeping the shopping cart and front-end functionality intact.

Explore the products page, a front-end shopping cart with web storage and jQuery, using unique product IDs, Bootstrap cards, and grid layouts with empty-cart show/hide logic.

Link the shopping cart's front-end logic with jQuery, session storage, and JSON to compute totals, update item counts, and render the cart in Bootstrap templates.

Update intro and thanks outlines front-end shopping cart updates, showing how to adjust quantities, delete items, remove zero-quantity items stored in the browser, and address PayPal checkout.

Update the front-end shopping cart to handle zero item quantities, enable removing items, fix lag when adjusting quantities, and reset values while reopening the original code.

Add a left side remove column with a red bootstrap button to delete items from the shopping cart, wired through a dynamic click event listener using jQuery and dataset attributes.

Identify the item to delete from the cart by index, splice it from the array, and update session storage and the cart output to reflect changes.

Update the shopping cart and checkout interface by adding a remove button, adjusting layout for new columns and totals, and ensuring items are removed (including zero quantities) without errors.

Learn to safely remove items from a shopping cart when quantity reaches zero or less, using array splicing, and update the cart and checkout flow.

Explore using a JavaScript prototype with a person constructor to add a full name method and render results to the web page via the output element.