/ecommerce-using-api

Simple API-driven ecommerce system using JS

Primary LanguageHTML

Build An eCommerce Website Using An API

Part 1: https://youtu.be/V9zL1kMq5TI

Part 2: https://youtu.be/DuxLZTS1A00

Part 3: https://youtu.be/rFto-xdqfbc

Part 4: https://youtu.be/08imQEj4NRM

Part 1

If you have been with me for a while, you should know how to build a PHP CRUD application, create your own API and add it to your website. In this series, we will take an API and build it into a fully functional eCommerce website.

Have you ever wanted to learn how to build an eCommerce website? Now you can. Using jQuery, HTML, and CSS we build out a fully functional eCommerce website that uses an external API. This API can be something you have built or it can be an API from Amazon or Wal-Mart...wherever you can get your eCommerce data.

In this video, we learn how to pull from a fake API to get our products and categories.

Part 2

In the last video for our build an eCommerce website we added an external API to power the data and add products. This tutorial, we start working on the design on the site.

When we are done with this video, we will have created a standard eCommerce style for our website. We will have usable navigation, a home page hero, a footer and header, and single product pages with Add to Cart and Wishlist buttons.

Part 3

Now that we have a working solution for our API-driven eCommerce website. We need to pass user variables and authentication so we can have our customers log in. Again, we are using an external API for our shopping cart so we need to use external user accounts.

This tutorial will go over how we can build an external user authentication system for our eCommerce website. We go over how to get the user, how to setup an account page and how to prevent unauthorized views of internal pages if a user is not logged in. Learn how to utilize jQuery to set browser session variables to easily track logged in / out users.

Part 4

In the last tutorial of this series, we will go into how we can add a cart that contains dynamic information using jQuery, CSS, HTML, and an external API. The fake e-commerce API that we are using allows you to store cart sessions, so we use those sessions for our logged-in users to create a dynamic shopping cart.

This shopping cart is built using Bootstrap and displays a navbar that reflects the total product count within the cart. Using this, we can calculate the total amount of the shopping cart as well as the individual items.