Shopping Cart Website from Scratch Ecommerce

How to build a fully functional web storage shopping cart that integrates with Paypal. Step by step instruction webdev

Highest Rated

Created byLaurence Svekis

Last updated 11/2024

English

What you'll learn

Create a custom website with a shopping cart
Create multiple page websites that can store products within a shopping cart

Course content

6 sections • 57 lectures • 4h 16m total length

Introduction to building a shopping cart from scratch5:17
Course Resources and Links4:38
Discover essential resources for the shopping cart website from scratch, including brackets, jQuery, dummy text, placeholder images, Google fonts, font awesome, Bootstrap via CDN, and dev console and DOM insights.

Setup Basic HTML template and source links5:20
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.
Source Code Default HTML template0:09
Create Product add event listener7:43
Use data attributes to pass values to jQuery8:35
Source Code Event listeners and Data Attributes0:17
Update add more products6:39
Create Shopping cart object array4:19
Loop Through Items in the array jQuery4:55
Add items increase quantity in the shopping cart5:26
Add session storage and parse JSON9:09
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 object values3:49
Use session storage to update array values in the shopping cart and increment quantities across reloads.
Create Shopping Cart output6:17
How to Display Cart items and totals6:34
Output dollars in currency format3:17
Source Code Storage Shopping Cart1:19

UX add Bootstrap classes8:19
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.
Shopping cart dialog window popup7:48
Create a bootstrap table4:24
Bootstrap 4 Tables6:44
Add Checkout Buttons3:23
Add Bootstrap Grid10:40
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.
Add Cards update Bootstrap styled items3:43
Update product cards to display prices with Bootstrap, using card subtitle and muted text, and apply Bootstrap buttons for add to cart and totals.
Add Bootstrap NavBar8:19
More Bootstrap Styling3:37
Master Bootstrap styling to align the cart to the right, use grid columns and containers, and mute subtotal text for a streamlined header.
Create Page Footer2:41
Source Code Products.html2:48
Create Checkout page7:07
Create Paypal Checkout Form9:37
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.
Adding event listeners update quantity6:54
Tweaking output quantities5:07
Complete Shopping Cart Checkout to Paypal6:01
Source Code Checkout to Paypal checkout.html0:50

Create Mulitple page website4:37
Create About.html page3:21
Source Code About.html1:46
Create Index.html Carousel9:50
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.
Source Code Index.html2:26
Overview products.html3:21
Source Code Products.html2:22
CSS Source Code0:03
Summary overview of JavaScript7:26
Source Code JavaScript0:23
Course Resources

Update intro and thanks1:46
Shopping Cart Updates2:11
Adding Remove button making event listener6:04
remove object from array5:53
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 Checkout of shopping cart5:58
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.
Checkout Zero Quantity Remove8:27
Source Code for products.html2:53
Source Code for checklist.html0:58
Source Code0:01

Requirements

Basic HTML and JavaScript
Desire to learn

Description

This course will introduce HOW YOU can build a custom front-end coded shopping cart from scratch. Users will be able to add items from multiple pages into a shopping cart. Users will also have a shopping cart that has a checkout button to purchase shopping cart items using Paypal. You will be amazed at how easy this is to setup and get going on your website. This is by far one of the most asked for and discussed types of projects that web developers create. Learn to create a simple eCommerce system using HTML, and jQuery. Course also covers using Bootstrap to build the website but Bootstrap is not a required part for the functionality of the code.

HTML - Using HTML for page structure you can setup products on multiple different web pages. Once you visitors click the button links on the product the item information gets added to a shopping cart. Checkout anytime or browse more products updating the shopping cart. This is a simple but useful solution for anyone who wants a simple shopping experience for visitors to HTML web pages.

CSS - Bootstrap is used within the course to apply styling and structure to the website. Bootstrap is used for rapid web development so we can focus more on the mechanics of the application and how it works. Some CSS will be covered but in limited capacity within the course.

JavaScript / jQuery - Some limited JavaScript is used but course content and coding is mainly based around jQuery. jQuery provides an easy way to add event listeners and work with JSON data.

PayPal - Purchases from the shopping cart can be made via Paypal. the course will show you how to JSON format your shopping cart items, and extract out the object information. This format can be utilized in other for other payment processors as well. Checkout within the course is formatted with a one click option to pay via Paypal.

Step by step learning with explanations of code being used to build functionality within the shopping cart. Some HTML and JavaScript experience is necessary as this is a fast paced course covering specific topics related to the creation of the shopping cart.

I'm here to help you learn to build projects with HTML and jQuery and ready to answer any questions you may have. Are you ready to take the first step and start learning how to create your own eCommerce website from scratch? Join now and see what you can create.

Who this course is for:

Web developer and web designers
anyone who wants to build a website with a shopping cart
Anyone who wants to learn more about web storage
Anyone who wants to learn and see jQuery in action and what can be done
Create a Paypal checkout within any website
Front end coders who want to create a shopping cart

Shopping Cart Website from Scratch Ecommerce

What you'll learn

Explore related topics

Course content

Introduction to creating a front end shopping cart2 lectures • 10min

Build a jQuery Shopping cart15 lectures • 1hr 14min

Create Bootstrap Ecommerce Website with shopping cart17 lectures • 1hr 38min

Bootstrap Website Building and styling11 lectures • 36min

Source Code Tweaks asked for by students9 lectures • 34min

Bonus Section3 lectures • 5min

Requirements

Description

Who this course is for: