E-commerce Website with JavaScript Tutorial

Screenshot :

Creating an e-commerce website may sound like a big challenge, but with the power of JavaScript, HTML, and CSS, you can build a simple yet functional online store! This guide will walk you through each step, from setting up the project to creating a shopping cart and checkout process. Let’s dive in!

Activity 1: Setting Up the Project

Task 1: Initialize the Project Directory

First things first, let's set up our project. Create a new folder for your e-commerce website. Inside this folder, create three essential files: index.html, styles.css, and script.js. These files will house your website's structure, styling, and functionality.

index.html: This file will hold the basic HTML structure of the site.
styles.css: This file will contain the CSS to style your website.
script.js: This file will hold all your JavaScript code to make the site interactive.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple E-commerce Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My E-commerce Store</h1>
    </header>

    <main>
        <!-- Product Listing Section -->
        <section class="product-grid">
            <!-- Products will be dynamically generated here by JavaScript -->
        </section>

        <!-- Shopping Cart Section -->
        <section class="shopping-cart">
            <h2>Shopping Cart</h2>
            <!-- Cart items will be displayed here by JavaScript -->
        </section>

        <!-- Checkout Form Section -->
        <section class="checkout">
            <form class="checkout-form">
                <h2>Checkout</h2>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>

                <label for="address">Address:</label>
                <input type="text" id="address" name="address" required>

                <label for="payment">Payment Details:</label>
                <input type="text" id="payment" name="payment" required>

                <button type="submit" onclick="submitCheckout()">Place Order</button>
            </form>
        </section>
    </main>

    <script src="script.js"></script>
</body>
</html>

Task 2: Add Basic CSS Styling

Next, you'll want to style your website. Open the styles.css file and start by defining some basic styles. You might want to include a product listing grid, so let's create a simple grid layout for your products. Also, set up a section for the shopping cart.

Here’s a quick example:

/* Basic reset for consistency */
body, h1, p {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Grid layout for products */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.product-card {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.shopping-cart {
    border-top: 2px solid #333;
    padding: 20px;
}

Activity 2: Product Listing

Task 3: Create a Product Data Source

Now, let's move on to the products. You’ll need a list of products that you want to display on the website. You can store this data in a JSON file or directly in a JavaScript array. Each product should have a name, price, description, and image URL.

Example of a product array:

const products = [
    { id: 1, name: 'Laptop', price: 799, description: 'A powerful laptop', image: 'laptop.jpg' },
    { id: 2, name: 'Smartphone', price: 499, description: 'A sleek smartphone', image: 'smartphone.jpg' },
    { id: 3, name: 'Headphones', price: 199, description: 'Noise-cancelling headphones', image: 'headphones.jpg' },
];

Task 4: Generate the Product Listing

With the product data ready, it’s time to display them on your website. Use JavaScript to dynamically generate the product listing from the array and inject it into the HTML.

Example script:

const productGrid = document.querySelector('.product-grid');

products.forEach(product => {
    const productCard = document.createElement('div');
    productCard.classList.add('product-card');

    productCard.innerHTML = `
        <img src="${product.image}" alt="${product.name}" />
        <h2>${product.name}</h2>
        <p>${product.description}</p>
        <p>$${product.price}</p>
        <button onclick="addToCart(${product.id})">Add to Cart</button>
    `;

    productGrid.appendChild(productCard);
});

Activity 3: Shopping Cart

Task 5: Add Products to the Cart

The next step is to allow users to add products to a shopping cart. You’ll need a function that handles adding products to the cart when the "Add to Cart" button is clicked.

Example function:

let cart = [];

function addToCart(productId) {
    const product = products.find(prod => prod.id === productId);
    const cartItem = cart.find(item => item.id === productId);

    if (cartItem) {
        cartItem.quantity += 1;
    } else {
        cart.push({ ...product, quantity: 1 });
    }

    updateCartDisplay();
}

Task 6: Display the Cart

Create a shopping cart section on your website to show the products added to the cart. Each time a product is added, update the cart display.

function updateCartDisplay() {
    const cartSection = document.querySelector('.shopping-cart');
    cartSection.innerHTML = '';

    cart.forEach(item => {
        cartSection.innerHTML += `
            <div class="cart-item">
                <p>${item.name} - $${item.price} x ${item.quantity}</p>
                <button onclick="removeFromCart(${item.id})">Remove</button>
            </div>
        `;
    });
}

Activity 4: Cart Management

Task 7: Update Product Quantities

Users should be able to change the quantity of products in their cart. Implement functions to increase or decrease the quantity of each product.

function updateQuantity(productId, amount) {
    const cartItem = cart.find(item => item.id === productId);

    if (cartItem) {
        cartItem.quantity += amount;

        if (cartItem.quantity <= 0) {
            removeFromCart(productId);
        } else {
            updateCartDisplay();
        }
    }
}

Task 8: Remove Products from the Cart

Allow users to remove products from their cart. This function will handle the removal and update the cart display accordingly.

function removeFromCart(productId) {
    cart = cart.filter(item => item.id !== productId);
    updateCartDisplay();
}

Activity 5: Checkout Process

Task 9: Create a Checkout Form

Finally, create a form for the checkout process. This form should collect the user's name, address, and payment details. Style it to match the rest of your site.

Task 10: Handle Form Submission

Write a function to handle the form submission. This function will simulate the checkout process by displaying a confirmation message.

function submitCheckout() {
    // Prevent actual form submission
    event.preventDefault();

    alert('Thank you for your purchase! Your order has been placed.');
    // Clear the cart
    cart = [];
    updateCartDisplay();
}

Conclusion

By following these steps, you’ve created a basic e-commerce website with JavaScript! You’ve learned how to set up the project, dynamically generate product listings, implement a shopping cart, and simulate a checkout process. With just HTML, CSS, and JavaScript, you've built a foundation that can be expanded into a fully functional e-commerce site. Keep experimenting and adding new features to make your online store even better!

Building a Simple E-commerce Website with JavaScript: A Step-by-Step Guide