One of the most important parts when talking about eshop is definitely the shopping cart as the start of the ordering process. The questions I had at the beginning of this part were for example: How to add products to the cart? How do I keep them in? How is it possible that some of the websites still have my cart filled in even after I leave the website and come back after a couple of days? In this article, I will try to sum up how I think about building the shopping cart and how I approached it within this project.
The problem
As I already have mentioned at the beginning of this article creating a small one-product eCommerce project brings a couple of challenges to the table. I would like to mention a couple of them:
- Adding the products into the cart with all the necessary information that was chosen in the forms
- Saving the information and keeping it during the whole ordering process
- Updating the cart icon when there is something inside the cart and keeping the information for the user
- Rendering all the items in cart
- Removing the item from the cart and updating the cart icon
- Styling the submenu within the cart
Adding the products into the cart with all the necessary information that was chosen in the forms and saving the information and keeping it during the whole ordering process
First of all, the user on the website needs to choose the variant of the product. The product is customizable. The potential customer can choose whether he would like to have the bottle within the set and also whether the glasses should be included. You can also choose whether you prefer 2 or 6 pieces of glasses within the set. If you choose that the bottle will be part of it you can also choose if you would like to customize it with initials or not. If yes you need to enter a maximum of 2 letters.
All of this inputs from the users are the information that we need for setting up the whole price of the product and also adding to cart, following by sending the information to the server as a new order. As I am currently learning JavaScript and front-end in general I will omit sending the information to the server in this phase.
So how do I add the product to the cart and save all the necessary information for further usage? There is a certain point in the process where the user chooses all the product specifications and clicks on the button Add to cart. Here is the point where the magic happens. I decided to use this event to add the product to the cart and also save the information for further usage.
How do I add the product to the cart?
From the point of view of the user, this is pretty simple. The user just clicks on the button after choosing all the preferable specifications of the product. From the point of view of the developer, we need to run a couple of lines of code to make everything smoothly happen.
- I created the object Product with the help of class that defines something like a template for each product that will be created
class Product {
constructor(picture, whiskyBottle, whiskyGlasses, productPattern, customInitials, customText, price) {
this.picture = picture;
this.whiskyBottle = whiskyBottle;
this.whiskyGlasses = whiskyGlasses;
this.productPattern = productPattern;
this.customInitials = customInitials;
this.customText = customText;
this.price = price;
}
};This alone does basically nothing and we need to create a new Product that will use this code as a template.
You can read more about classes here.
I create a new Product within the function newProduct(). Let’s have a look:
function newProduct() {
if ((whiskyBottle.value === "" || whiskyGlasses.value === "" || productPattern.value === "") || (whiskyBottle.value === "yes" && customInitials.value === "") || (whiskyBottle.value === "yes" && customInitials.value === "yes" && customText.value === "") || (whiskyBottle.value === "no" && whiskyGlasses.value === "without glasses")) {
alert('Please choose the options of your set!');
return;
} else if (productPattern.value === 'Ares') {
const newProductItem = new Product(ares.src, whiskyBottle.value, whiskyGlasses.value, productPattern.value, customInitials.value, customText.value, sumFinalPrice);
checkTheSessionStorage(newProductItem);
} else {
const newProductItem = new Product(fiveHundred.src, whiskyBottle.value, whiskyGlasses.value, productPattern.value, customInitials.value, customText.value, sumFinalPrice);
checkTheSessionStorage(newProductItem);
}
allThePrices = [];
enableAddToCartOverlay();
}
The main part of this function is an if-else statement. Firstly, if I need to find out whether all the inputs that serve the data for creating the Product are available and if not there should be an error alert. Personally, I do not like the alert window that much and next time I would prefer a different way of approaching this but for now, I would say that this is a sufficient solution. If something is missing within the input the function alerts the alert message and ends. If everything is alright and nothing is missing, the code continues to the first else if where I need to find out which pattern the user chooses.
The pattern is important for the creation of the product as the picture that I need to display in the cart itself differs based on the pattern. So if the pattern is Ares the function creates a new Product with all the necessary inputs and of course the link to the right picture of a set with the chosen pattern. In this case Ares. This is the place where the function use as the template for the product – as we already mentioned the class that we defined for each newly created product.
After this product creation we call a function checkTheSessionStorage(newProductItem) and it looks like this:
function checkTheSessionStorage(newProductItem){
if(!sessionStorage.getItem('CART')){
productList.push(newProductItem);
sessionStorage.setItem('CART', JSON.stringify(productList));
} else {
productList = JSON.parse(sessionStorage.getItem('CART'));
productList.push(newProductItem);
sessionStorage.setItem('CART', JSON.stringify(productList));
};
};The main part of this function is the if-else statement as well as previously. This time I need to check if there is already any key saved within the sessionStorage of the browser. Why do I need this? In this phase, I need to store somewhere the data about the product/products that are added to the cart so I can then use them further in the ordering process. What I have learned there are 3 ways of storing data with the help of a browser. I can use local storage, sessionStorage, or cookies.
Building the shopping cart with the sessionStorage?
I need to admit that I would need more understanding to go with cookies even though I know that cookies are for example very often the solution for the cart as it keeps the cart for the users for a defined time frame. So when the user revisits the website within the defined time frame the cart content is still there and he can continue with that. But this is something that could be also achieved differently. There is also localStorage and sessionStorage available. I chose to use the sessionStorage also because data in sessionStorage is cleared when the page session ends and that is also the main difference in comparison to localStorage. LocalStorage data does not expire.
From the perspective of my project, I would say that using sessionStorage is enough. For the real-life project, I would say that using cookies could be a better option from the perspective of standards of the usage of webpages and what the users are used to, especially for the functionality of stored cart. But right now I cannot do a precise conclusion as I was not looking into cookies that much.
So back to the function. Firstly, I am checking if I can get some items from sessionStorage already. If no I push newItemcreated to the empty array productList which I then use in setting the sessionStorage item which set the key ‘CART’. As the value to the key, we create JSON from the productList array with the products pushed into this array. For creating the JSON we can use JSON.stringify(productList).
On the other hand, if the sessionStorage already has some products saved in it we need to getItem by the key and parse it. Then we push the newly created product item to the array and again create setItem so we have the actual data saved in the sessionStorage for further usage.
Coming back to the newProduct() function if the productPattern.value is not equal to Ares, which in this case will be equal just to the second option which is 500, we create the product with the picture of a set with a pattern 500. All of the other steps described above in between are the same.
The last steps within the function
There are 2 lines within the function left that contains: allThePrices = [] and calling for enableAddToCartOverlay() function. I use allThePrices array to save the partial prices when the user is choosing the values for his product set up. Once Add to cart is clicked, this array should be empty. So I set it up to empty. The function enableAddToCartOverlay() looks like this:
function enableAddToCartOverlay() {
addToCartOverlay.classList.remove('displaynone');
}The main role is to activate the overlay that contains 2 buttons – Continue shopping or Go to cart – after clicking on Add to cart button.
Updating the cart icon when there is something inside the cart and keeping the information for the user
The click event on the button Add to cart calls one more function productsInCart()
function productsInCart(){
let storedArray = JSON.parse(sessionStorage.getItem('CART'));
toolTip.innerHTML = storedArray.length;
toolTip.classList.remove('displaynone');
};We parse (have a look at JSON.parse) the item with the key ‘CART’, save it in the storedArray variable and then take its length and show it as a toolTip above the cart icon.
Rendering all the items in cart
Once the user finishes adding the products to the cart he can Go to the cart and see all the options that he chooses. For this part I need to introduce a global variable storedArray: let storedArray = JSON.parse(sessionStorage.getItem(‘CART’)); I have already mentioned variable storedArray in the previous part.
When the user enters the cart page there is an event DOMContentLoaded. When this event happens the function loadTheContent() is called. Again the main part of this function is created by the if-else statement. This statement is mainly focused on differentiation between the sites we are currently visiting. In the first if there is a window.location.href === “https://malocheck.com/portfolioprojects/ecommerce/cart.html”. It is need to be true in order to execute the lines within this if statement. So if we are visiting the part of the website that has the aforementioned window.location.href we continue inside this if part of statement.
function loadTheContent(){
if(window.location.href === "https://malocheck.com/portfolioprojects/ecommerce/cart.html") {
if (storedArray === null || storedArray.length === 0){
emptyCart();
} else {
let i;
for (i=0; i < storedArray.length; i++) {
const createNewCartElement = document.createElement("div");
createNewCartElement.classList.add('cartitem');
createNewCartElement.innerHTML =
`<img src = ${storedArray[i].picture}>
<div id = "cartitemdescription">
<h2> Whisky set - Bottle and crystal glasses for whisky/whiskey</h2>
<p>Set contains: Bottle: ${storedArray[i].whiskyBottle}, Glasses: ${storedArray[i].whiskyGlasses},
Pattern: ${storedArray[i].productPattern}, Custom Initials: ${storedArray[i].customInitials} ${storedArray[i].customText} </p>
</div>
<div>Total price: ${storedArray[i].price}€ </div>
<button class = "buttoncart" id="buttonremove">REMOVE</button>
`;
cartContainer.insertBefore(createNewCartElement, totalPriceElement);
totalGoodsprice.push(storedArray[i].price);
};
totalCartPriceCalculation();
return;}
} else if (window.location.href === "https://malocheck.com/portfolioprojects/ecommerce/step-1.html"){
if (storedShippingAndPayment === null){
courierOne.checked = true;
chosenShippingMethod.innerHTML = courierOne.value;
priceOfShippingMethod.innerHTML = `${courierOnePrice.value}€`;
paymentOne.checked = true;
chosenPaymentMethod.innerHTML = paymentOne.value;
priceOfPaymentMethod.innerHTML = `${paymentOnePrice.value}€`;
totalOrderPrice = parseInt(totalCartPrice) + parseInt(courierOnePrice.value) + parseInt(paymentOnePrice.value);
totalPriceSummary.innerHTML = `${totalOrderPrice}€`;
} else {
chosenShippingMethod.innerHTML = storedShippingAndPayment[0].shippingMethod;
priceOfShippingMethod.innerHTML = storedShippingAndPayment[0].shippingMethodPrice;
chosenPaymentMethod.innerHTML = storedShippingAndPayment[0].paymentMethod;
priceOfPaymentMethod.innerHTML = storedShippingAndPayment[0].paymentMethodPrice;
totalOrderPrice = parseInt(totalCartPrice) + parseInt(storedShippingAndPayment[0].shippingMethodPrice) + parseInt(storedShippingAndPayment[0].paymentMethodPrice);
totalPriceSummary.innerHTML = `${totalOrderPrice}€`;
if (storedShippingAndPayment[0].shippingMethod === "Courier 1") {
courierOne.checked = true;
} else {
courierTwo.checked = true;
};
if (storedShippingAndPayment[0].paymentMethod === "Bank transfer") {
paymentOne.checked = true;
} else if (storedShippingAndPayment[0].paymentMethod === "Card payment") {
paymentTwo.checked = true;
} else {
paymentThree.checked = true;
}
};
} else {
return;
}
};
Let’s assume that we are on the location with window.location.href === “https://malocheck.com/portfolioprojects/ecommerce/cart.html”. There is another if-else statement once we fulfill the first condition of href. Now the condition is if (storedArray === null || storedArray.length === 0). If at least one of these conditions is true we continue by calling the function emptyCart(). (See the code below) If none of these 2 conditions (storedArray === null || storedArray.length === 0) are met the code continue by rendering the products that are in the cart.
If the function emptyCart() is called, we create an element h1 that says that the cart is empty right now. There is also a creation of a button that navigates the user to the product page where he can choose the preferable set up of the whisky set and add it to the cart.
In some situations – for example, when the user removes all the products from the cart and there is nothing in it we also need to hide some elements that were loaded to the cart page for example totalPriceElement or subMenuElement (subMenuElement shows us in which phase of the ordering process we currently are). There is no need for the submenu once the cart is already empty. We also hide buttons in the cart and clear the sessionStorage from all the elements.
function emptyCart(){
const createNewHeadingElement = document.createElement("h1");
createNewHeadingElement.innerHTML = `The cart is empty right now.`;
cartContainer.append(createNewHeadingElement);
const emptyCartButton = document.createElement("a");
emptyCartButton.classList.add('nextstepbutton');
emptyCartButton.innerText = 'GO SHOPPING';
emptyCartButton.href = '/whiskyset.html';
buttonSection.append(emptyCartButton);
totalPriceElement.classList.add('displaynone');
subMenuElement.classList.add('displaynone');
cartButton1.classList.add('displaynone');
cartButton2.classList.add('displaynone');
sessionStorage.clear('CART');
sessionStorage.clear('TOTALCARTPRICE');
};To render all the cart elements we use for loop that loops for all the storedArray elements, create elements, and use the information saved in storedArray to render it as a visually separated product in the cart. Usually when we create an element using the createElement() method we need to also .append() it to the part where we would like to show it. In this case, I needed to use a different approach as I need to put the cart element before the total cart price and buttons. That is why I chose to use the .insertBefore() method. At the end of the loop, it pushes the particular price for each product into the array. After the loop is finished, there is a function totalCartPriceCalculation(), which calculates the total cart price from the particular prices for each product saved within the array totalGoodsprice. For this calculation, I use the .reduce() method. After calculating it we show it in the cart by changing the value of totalPriceElement.innerHTML. The last step here is to setItem in the sessionStorage, which saves the TOTALCARTPRICE as the key name with the total cart price saved in the variable totalCartPriceCalculation. I approach this total cart price value later within the step 1 – SHIPPING AND PAYMENTS section of the ordering process.
function totalCartPriceCalculation(){
let totalCartPriceCalculation = totalGoodsprice.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
totalPriceElement.innerHTML = `Total price: ${totalCartPriceCalculation}€`;
sessionStorage.setItem('TOTALCARTPRICE', totalCartPriceCalculation);
}Coming back to the loadTheContent() function and its the second part, where we use the statement else if (window.location.href === “https://malocheck.com/portfolioprojects/ecommerce/order/step-1.html”). The code within the statement helps us in the following use cases. Firstly, we need to check if there is already some information about shipping and payments saved in the sessionStorage. If there is nothing saved we cannot access anything and from the user’s perspective it would be great to have some option of the shipping and payment method pre-checked with the possibility to change it. The second use case is the following. If we chose for example the shipping and payment method and continue to fill in the personal information such as the address etc., but then we realized OK we would like to change the shipping or payment method you need to go back to the step 1 page with shipping and payment options method and your previous choices will be available already there thanks to the second part of this code. Of course, you can change them and continue to the next step again.
The last part of the function loadTheContent() is the last else statement, which runs when none of the previous conditions are met and then nothing is executed.
Removing the item from the cart and updating the cart icon
After rendering all the cart items into the screen the user should have also the option of removing the products that he does not want in there. After the event DOMContentLoaded which triggers the function loadTheContent() there is a load event which triggers another function loadTheButtons(). So the products are loaded. The goal is that the user can click on the remove button and the clicked button will disappear with the whole product. For this, we need to basically know which button in order the user clicks. Let’s have a closer look at the function loadTheButtons() below. Firstly, we need to loop through all the buttons on the cart page. In this loop, we use the length of the variable allTheButtons. This variable let allTheButtons = document.getElementsByClassName(‘buttoncart’); gets all the elements with the class name “buttoncart”. This returns an array-like object (HTMLCollection) of all the elements with that class. In our case that would be all the remove buttons. We loop through this array-like object and push every button to an array in variable let button = []; Then we save that particular button at that particular index in the array and as a last step we find out the indexOf(singleButton).
Then we add .addEventListener to variable singleButton and we execute the function removeElement() on click event. After the click, the parentElement of singleButton is removed. We also need to remove a particular element from the button array at a particular index (singleButtonIndex). Then we also remove the element from the sessionStorage at that particular index (singleButtonIndex). After that, we setItem to sessionStorage using updated storedArray. In the end, it is necessary to remove also price element from totalGoodsprice at a particular index ( singleButtonIndex) and we call the function totalCartPriceCalculation() to recalculate the price again.
let button = [];
function loadTheButtons() {
for (let i = 0; i < allTheButtons.length; i++) {
button.push(allTheButtons[i]);
let singleButton = button[i];
let singleButtonIndex = button.indexOf(singleButton);
singleButton.addEventListener('click', function removeElement() {
singleButton.parentElement.remove();
button.splice(singleButtonIndex, 1);
storedArray.splice(singleButtonIndex, 1);
sessionStorage.setItem('CART', JSON.stringify(storedArray));
totalGoodsprice.splice(singleButtonIndex, 1);
totalCartPriceCalculation();
productsInCart();
document.location.reload();
});
};
};On the last two lines of this function we call the function productsInCart():
function productsInCart(){
let storedArray = JSON.parse(sessionStorage.getItem('CART'));
toolTip.innerHTML = storedArray.length;
toolTip.classList.remove('displaynone');
};This basically updates the tooltip that we use to show the number of products in cart.
The last line is dedicated to document.location.reload(). Why do I need to reload the page after clicking on the REMOVE button? On one hand, we update the sessionStorage so the indexes saved in that JSON file change after we delete an item. This is not automatically the case for the elements rendered in the cart. The particular product is removed so it is not seen on the screen, but the indexes of products together with the remove buttons that are left are not changed. This is because the content of this cart page is loaded in and also we use allTheButtons array-like objects that use getElementsByClassName that loads the buttons at the beginning when the page load, but after removing the products the indexes stayed the same just without the one index that was deleted. Because of this, we need to reload the page so the indexes of the products that are left and rendered are aligned with the indexes of products saved within the sessionStorage. This leads to smooth removal of the products within the cart.
Styling the submenu within the building the shopping cart exercise
After coming to cart section and the cart is not empty there is a navigation submenu available for making the ordering process more clear for the user. There are 3 parts of the submenu: CART, SHIPPING AND PAYMENT METHOD, YOUR INFORMATION. After submitting the form the user is redirected to THANK YOU page.
There are also 3 types of design for these submenu parts. For the page, we are currently at, the background of the bookmark is white and the color of the font is black. If we are already behind the step the background is grey and the color of the font is black when we are at the CART page the other two bookmark’s background is grey and the color of the font is also grey. Both of them are not accessible from the sub-menu. It is only possible to move to the second step by clicking on the button SHIPPING AND PAYMENT METHOD.
Questions that I have…
There is a couple of questions that I still have. For example:
- I could say there are 3 forms in the whole ordering process. Just one of the forms is the one that can be submitted. All of the others are there without the submit button and the info from them – for example, the products in CART or method shipping and payment are saved within the sessionStorage. My question is how can we send all the information to the server if we do not have all the info submitted from one form? Is it possible to get the data from sessionStorage and connect them with the info submitted from the last personal information form?
- What is the difference between HTMLCollection which is an array-like object and Array itself?
- …I do have more questions but these 2 are by the time I am writing this article crucial for me 🙂
If you are interested in this series you can check out also other articles like for example this one about forms.
Thank you for reading this. Hope it helps in some way!
Follow me on socials or write me an email or message on Linkedin
Sorry for any mistakes. If you find any please let me know. You can find my contact info down below.
I am just a beginner. Do not take this as final and the only solution. I am just sharing my learning journey. If there are any advices related to code shoot me an email.
