Online-Store-Shopping-Cart

This is a simple online store featuring a functional shopping cart that has been created using HTML, CSS, Vanilla Javascript, JSON and jQuery.

The shopping cart is an essential part of an online store experience as it provides a summary of the added products and the totals. Online shoppers can view what they are wanting to buy, as well as the totals, and select preferred options all in one place.

The goal is to enable a convenient, user-friendly and informative shopping cart for an online store. This also allows for the user to input important information that is necessary to complete an online order.

Installation

In order to pull the complete copy of this remote repository to your local system, you will need to make use of the Git clone command. Please follow the following steps:

Select the directory that you wish to clone the project into.

Example below:

* cd folder/to/clone-into/

Enter git clone [repository_url] into the terminal or command prompt.

Code and link below:

* git clone https://github.com/MpiloNm95/Online-Store-Shopping-Cart.git

If you want a different folder name, simply specify it as the last parameter.

Example below:

* git clone https://github.com/MpiloNm95/Online-Store-Shopping-Cart.git other-name

This will create a new directory which will initialize a .git directory within it, pulling all of the data from this project. You will find all of the files and folders in this directory, enabling you to use and edit it to your liking.

Usage Instructions

Please see below a detailed explanation on how to make use of the online store shopping cart

Add products to the cart from either the product pages (click on "More Details" button) or from the "Catalogue" page (click on "Add to Cart" button). An alert will confirm that the item has been added to the cart, as well as show the new total.
Click on the cart icon at the top-right corner of the page to access the "Shopping Cart" page. (Note that the number increases and decreases as per the quantity of items in the cart).
Increase or decrease the amount per product under the "Quantity" section, by clicking the arrows at the top (increase) or at the bottom (decrease) of the number. The total will be updated accordingly.
Remove an item by clicking on the "Remove" button on the right of the item listing. An alert will display confirming that the product was removed and the total will be updated accordingly.
Clear the entire cart by clicking on the "Clear Cart" button at the right-hand bottom of the page. An alert will confirm that the cart has been cleared.
Select either collection or delivery by clicking on the radio buttons on the left-hand side of the listed item. If the delivery method is selected, but no option is selected, an alert will notify you that a selection needs to be made.
A discount code (Norris4 = 10%, Stroll18 = 25%, Bottas77 = 50%) can be applied in the "Do you have a discount code" section.
Once the delivery or collection option is selected and the discount code is inserted, click on the "Update Total" button to update the cart total.
Select whether the order is a gift or not by utilizing the "Is this for yourself or a gift for someone else?:" dropdown.
Click on the "Confirm Order" button to confirm the order. An alert will display providing an unique order reference number.

mpilonm95 / online-store-shopping-cart Goto Github PK