My aim is to create a fully functional shopping cart using either vanilla JavaScript or jQuery. I'm uncertain if I'm approaching it the right way, but here's my plan:
Firstly, I want to establish an array named cartItems to store all shopping cart data such as ID, price, image, description, weight, and tax.
To populate this array, I intend to either add an event listener to the add to cart button or select the button element by ID. I'm unsure about setting up different listeners for multiple products that all need to go through the same process to be added to the cart.
Once the cart data is added to the array, I can then use it to display the Cart page. This page will include options to update the quantity and remove items, with the array being edited to reflect these changes.
The main challenge at the moment is the second part - "waiting" for the add to cart button click and processing the necessary data.
**HTML**
// HTML CODE GOES HERE
**CSS**
// CSS CODE GOES HERE
**JavaScript/jQuery**
let cartItems = [];
function cartProduct(id, product, price, weight, vat) {
this.id = id;
this.product = product;
this.price = price;
this.weight = weight;
this.vat = vat;
}
function addToCart() {
cartItems = JSON.parse(sessionStorage.getItem("cartItems"));
let newProduct = new cartProduct();
document.getElementById('atc-button');
}
I acknowledge that my JavaScript file is incomplete and lacks proper structure. I am in the process of learning the best way to approach this task. My goal is to capture the product details and add them to the array when the add to cart button is clicked.