Coding eCommerce project: the last 2 steps of ordering process part VI

In this article, I would like to cover my approach to the last 2 ordering process steps – choosing the shipping and payment method and personal information.

Step 2 in ordering process steps: choosing the shipping and payment method

I have already described this part of the ordering process a bit in one of my previous articles. To be more specific it was in one article explaining my approach to the shopping cart (you can read it here).

Let’s have a look on the required functionality I wanted to have for the use. I come up with very simple idea of having 2 parts – one for choosing the shipping method and one for choosing the payment method. As the input type for choosing the right option in both cases I use the radio buttons. For example within the section for choosing the shipping method I choose to use 2 inputs with the type radio. One is for the name of the shipping method and the second is for the price of that particular shipping method. This is how it looks like:

<div>
   <label for="courier1"></label>
   <input type="radio" id="courier1" value="Courier 1" name="courieroptions">Courier 1
</div>
<div>
   <label for="courier1price"></label>
   <input type="number" value="4" id="courier1price" hidden>4€
</div>

A very similar approach is in the section for payment options. I also do use an input type of radio. The difference is in the number of inputs.

Under these 2 sections, there is a summary where the chosen shipping and payment options are displayed also with the total price of the cart together with the price for the chosen methods. When the user comes to this page for the first time from the cart there are already options for shipping and payment methods pre-checked. The user can for sure change this by clicking on different options. For this page https://malocheck.com/portfolioprojects/ecommerce/step-1.html (which is the shipping and payment option page) there is a part of the function loadTheContent() used for pre-checking the option in case the user is coming from the CART page or also there are pre-checked option but according to his preference. In this case the user choose the preferences and continue in the process to the next step – filling in the personal information. While filling in the personal information the user changes the mind and he would like to change its shipping and payment preferences. So he goes back to this page but there are already the preferences pre-checked. For this we use the sessionStorage and we show the data that are saved there. This data can be changed. After the change the user can continue to the next step – filling in the personal information and the changed preferences are saved in the sessionStorage for further usage.

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
    }
};

For further understanding of how this works check the function above or read this article where I also explain this functionality.

In the situation where I add products to the cart, go to the cart, and then continue from cart to shipping and payment options I needed to come up with some functions that would calculate the total price with shipping and payment options in case the user decides to change the pre-checked options.

For the calculation of shipping, there is the function calculationShipping(), which enable to recalculate the total order price based on the option that is checked.

function calculationShipping() {
    if(courierOne.checked) {
        chosenShippingMethod.innerText = courierOne.value;
        priceOfShippingMethod.innerText = courierOnePrice.value + '€';
        totalOrderPrice = parseInt(totalCartPrice) + parseInt(courierOnePrice.value);        
        totalPriceSummary.innerText = `${totalOrderPrice}€`;
    } else {
        chosenShippingMethod.innerText = courierTwo.value;
        priceOfShippingMethod.innerText = courierTwoPrice.value + '€';
        totalOrderPrice = parseInt(totalCartPrice) + parseInt(courierTwoPrice.value);
        totalPriceSummary.innerText = `${totalOrderPrice}€`;
    }
};

The same principles are applied to choosing the payment options.

function calculationPayment() {
    if (paymentOne.checked) {
        chosenPaymentMethod.innerText = paymentOne.value;
        priceOfPaymentMethod.innerText = paymentOnePrice.value + '€';
        totalOrderPrice = parseInt(totalOrderPrice) + parseInt(paymentOnePrice.value);        
        totalPriceSummary.innerText = `${totalOrderPrice}€`;
    } else if (paymentTwo.checked) {
        chosenPaymentMethod.innerText = paymentTwo.value;
        priceOfPaymentMethod.innerText = paymentTwoPrice.value + '€';
        totalOrderPrice = parseInt(totalOrderPrice) + parseInt(paymentTwoPrice.value);        
        totalPriceSummary.innerText = `${totalOrderPrice}€`;
    } else {
        chosenPaymentMethod.innerText = paymentThree.value;
        priceOfPaymentMethod.innerText = paymentThreePrice.value + '€';
        totalOrderPrice = parseInt(totalOrderPrice) + parseInt(paymentThreePrice.value);        
        totalPriceSummary.innerText = `${totalOrderPrice}€`;
    }
};

These 2 functions are also applied in the case when the user wants to update the shipping and payment options when he is coming from the personal information page.

Step 3 in ordering process steps: personal information

The last part of the ordering process is the form where the user puts all the necessary personal information for finishing the order – invoice address, shipping address (if it is different from the invoice address), whether the order is on behalf of company, email, phone number, agreement with the terms and conditions and privacy policy. I wrote the whole article about forms that I created within this eCommerce project so you can dive into it here.

What I wanted to mention on top of the article about form is that there are some part of the form that are hidden by default – the part which is displayed when the user orders on behalf of the company and the part when the shipping address differs from the invoice address. there is a checkbox which can be checked in both of the cases. If the checkbox is checked then the hidden part will show up and the user has the possibility to enter the information. The functions looks like this:

function showingAdditionalShippingParts(){
    if(differentShippingAddressCheckbox.checked === true){
        shippingAddressSection.classList.remove('displaynone');
    }else{
        shippingAddressSection.classList.add('displaynone');
    };
};

function showingCompanyParts(){
    if(companyAddressCheckbox.checked === true){
        companyAddressSection.classList.remove('displaynone');
    }else{
        companyAddressSection.classList.add('displaynone');
    };
};

Invisible step 4: thank you page

The last step within the ordering process steps is the Thank you page. This is a very simple page that the user sees after clicking on the button Order with the necessity of payment. On this page there could be some summary of the order and the additional info about the next step or links to social profiles.

This page could be also beneficial in tracking the amount of finished orders and calculation of conversions.

How to submit the information to the server or send emails?

In the beginning I planned that the last step of this mini project will be to send out emails about the order to customer and the eshop. I have changed my mind and the next step that would be great to develop will be the full stack app using Node.js, Mongo.db and Express. I need to learn it and finish it.

As for now I am learning JavaScript, the back-end part is right now something I would like to dive into in couple of weeks or months. But still there are some questions that occur during the process of coding the front-end part. What I do know is that for the form within HTML it is necessary to define action and also method as attributes within the <form> tag. This form should be finished by SUBMIT button that will execute the submit of the information to the defined place.

In this small eCommerce project I omit the SUBMIT button and replace it with classic <button> as I do not have the place where to send the information to. As mentioned I will dive into the back-end later and I will probably update this series with this info as well.

That is all from this series for now.

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.

• LinkedIn
• Instagram
• Mail