TypeScript Tutorial: Building a Simple Web-Based E-commerce Cart

Written by

learnmodernjavascript

in

In the bustling digital marketplace, a functional and intuitive shopping cart is the cornerstone of any successful e-commerce website. As developers, we often face the challenge of creating a robust cart system that handles product selection, quantity adjustments, price calculations, and order summaries. This tutorial will guide you through building a simple, yet effective, web-based e-commerce cart using TypeScript. We’ll explore core concepts like object-oriented programming, data structures, and event handling, all within the type-safe environment of TypeScript. By the end of this tutorial, you’ll have a solid understanding of how to implement a fundamental e-commerce cart, ready to be expanded and integrated into your projects.

Why TypeScript for an E-commerce Cart?

TypeScript brings several advantages to this project:

  • Type Safety: Catches errors during development, reducing runtime bugs.
  • Code Readability: Improves code maintainability through explicit typing.
  • Enhanced Tooling: Provides better autocompletion and refactoring support.
  • Scalability: Makes it easier to manage larger codebases.

These benefits translate to a more reliable and efficient development process, crucial for building a production-ready e-commerce cart.

Setting Up Your Project

Before we dive into the code, let’s set up our project environment. We’ll use Node.js and npm (or yarn) for package management. If you don’t have them installed, you can download them from the official Node.js website.

  1. Create a Project Directory: Create a new directory for your project (e.g., `ecommerce-cart`).
  2. Initialize npm: Navigate to your project directory in the terminal and run `npm init -y`. This creates a `package.json` file.
  3. Install TypeScript: Install TypeScript globally or locally. For local installation, run `npm install –save-dev typescript`.
  4. Create a `tsconfig.json` file: This file configures the TypeScript compiler. Run `npx tsc –init` in your terminal.
  5. Create Source Files: Create a directory named `src` and create a file named `cart.ts` inside it. This is where we’ll write our code.

Core Concepts: Classes and Objects

At the heart of our cart implementation will be classes and objects. Let’s define a `Product` class and a `Cart` class.

Product Class

The `Product` class will represent an item in our e-commerce store. It will have properties like `id`, `name`, `price`, and `quantity`.

// src/cart.ts
class Product {
  id: number;
  name: string;
  price: number;
  quantity: number;

  constructor(id: number, name: string, price: number) {
    this.id = id;
    this.name = name;
    this.price = price;
    this.quantity = 0; // Initially, no product is in the cart
  }

  // Method to increment the quantity
  increaseQuantity(amount: number = 1): void {
    this.quantity += amount;
  }

  // Method to decrement the quantity
  decreaseQuantity(amount: number = 1): void {
    this.quantity = Math.max(0, this.quantity - amount);
  }

  // Method to get the total price for this product in the cart
  getTotalPrice(): number {
    return this.price * this.quantity;
  }
}

Cart Class

The `Cart` class will manage the products in the cart. It will have methods to add products, remove products, update quantities, and calculate the total cart value.


class Cart {
  items: { [productId: number]: Product } = {}; // Use an object to store products, keyed by ID

  // Method to add a product to the cart
  addProduct(product: Product, quantity: number = 1): void {
    if (this.items[product.id]) {
      this.items[product.id].increaseQuantity(quantity);
    } else {
      this.items[product.id] = product;
      this.items[product.id].increaseQuantity(quantity);
    }
  }

  // Method to remove a product from the cart
  removeProduct(productId: number, quantity: number = 1): void {
    if (this.items[productId]) {
      this.items[productId].decreaseQuantity(quantity);
      if (this.items[productId].quantity === 0) {
        delete this.items[productId]; // Remove the product if quantity is zero
      }
    }
  }

  // Method to update the quantity of a product
  updateQuantity(productId: number, quantity: number): void {
    if (this.items[productId]) {
      this.items[productId].quantity = Math.max(0, quantity);
      if (this.items[productId].quantity === 0) {
        delete this.items[productId]; // Remove the product if quantity is zero
      }
    }
  }

  // Method to calculate the total value of the cart
  getTotalValue(): number {
    let total = 0;
    for (const productId in this.items) {
      if (this.items.hasOwnProperty(productId)) {
        total += this.items[productId].getTotalPrice();
      }
    }
    return total;
  }

  // Method to get the number of items in the cart
  getItemCount(): number {
    let count = 0;
    for (const productId in this.items) {
      if (this.items.hasOwnProperty(productId)) {
        count += this.items[productId].quantity;
      }
    }
    return count;
  }

  // Method to clear the cart
  clearCart(): void {
    this.items = {};
  }
}

Implementing the Cart Logic

Now, let’s create a simple e-commerce page and implement the cart logic. We will use HTML, CSS, and JavaScript (with TypeScript) to create a basic user interface.

HTML Structure (index.html)

Create an `index.html` file in your project directory with the following structure:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-commerce Cart</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>E-commerce Cart</h1>
    <div id="products">
      <!-- Product listings will go here -->
    </div>
    <div id="cart-summary">
      <h2>Shopping Cart</h2>
      <div id="cart-items">
        <!-- Cart items will go here -->
      </div>
      <p>Total: <span id="cart-total">$0.00</span></p>
      <button id="clear-cart">Clear Cart</button>
    </div>
  </div>
  <script src="bundle.js"></script>
</body>
</html>

CSS Styling (style.css)

Create a `style.css` file in your project directory to add some basic styling:


body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.container {
  width: 80%;
  margin: 20px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  text-align: center;
  color: #333;
}

#products, #cart-items {
  margin-bottom: 20px;
}

.product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.product:last-child {
  border-bottom: none;
}

.product-details {
  flex-grow: 1;
}

.product-details button {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.product-details button:hover {
  background-color: #0056b3;
}

#cart-items {
  margin-top: 10px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-details {
  flex-grow: 1;
}

.cart-item-details button {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background-color: #dc3545;
  color: white;
  cursor: pointer;
}

.cart-item-details button:hover {
  background-color: #c82333;
}

#clear-cart {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #28a745;
  color: white;
  cursor: pointer;
}

#clear-cart:hover {
  background-color: #218838;
}

TypeScript Implementation (cart.ts)

Now, let’s write the TypeScript code to interact with the HTML elements, create products, and manage the cart. This code will be responsible for creating product listings, handling add-to-cart and remove-from-cart actions, and updating the cart summary.


// src/cart.ts (continued)

// Assuming the Product and Cart classes are already defined as shown above.

// Sample product data
const productsData: Product[] = [
  new Product(1, "Laptop", 1200),
  new Product(2, "Mouse", 25),
  new Product(3, "Keyboard", 75),
];

const cart = new Cart();

// DOM elements
const productsContainer = document.getElementById('products') as HTMLElement;
const cartItemsContainer = document.getElementById('cart-items') as HTMLElement;
const cartTotalElement = document.getElementById('cart-total') as HTMLElement;
const clearCartButton = document.getElementById('clear-cart') as HTMLButtonElement;

// Function to render product listings
function renderProducts(): void {
  productsData.forEach(product => {
    const productElement = document.createElement('div');
    productElement.classList.add('product');
    productElement.innerHTML = `
      <div class="product-details">
        <span>${product.name} - $${product.price.toFixed(2)}</span>
        <button data-id="${product.id}">Add to Cart</button>
      </div>
    `;
    const addButton = productElement.querySelector('button') as HTMLButtonElement;
    addButton.addEventListener('click', () => addToCart(product.id));
    productsContainer.appendChild(productElement);
  });
}

// Function to add a product to the cart
function addToCart(productId: number): void {
  const productToAdd = productsData.find(product => product.id === productId);
  if (productToAdd) {
    cart.addProduct(productToAdd);
    updateCartDisplay();
  }
}

// Function to remove a product from the cart
function removeFromCart(productId: number): void {
  cart.removeProduct(productId);
  updateCartDisplay();
}

// Function to update the cart display
function updateCartDisplay(): void {
  cartItemsContainer.innerHTML = '';
  for (const productId in cart.items) {
    if (cart.items.hasOwnProperty(productId)) {
      const product = cart.items[productId];
      const cartItemElement = document.createElement('div');
      cartItemElement.classList.add('cart-item');
      cartItemElement.innerHTML = `
        <div class="cart-item-details">
          <span>${product.name} x ${product.quantity} - $${product.getTotalPrice().toFixed(2)}</span>
          <button data-id="${product.id}">Remove</button>
        </div>
      `;
      const removeButton = cartItemElement.querySelector('button') as HTMLButtonElement;
      removeButton.addEventListener('click', () => removeFromCart(product.id));
      cartItemsContainer.appendChild(cartItemElement);
    }
  }
  cartTotalElement.textContent = '$' + cart.getTotalValue().toFixed(2);
}

// Function to clear the cart
function clearCart(): void {
  cart.clearCart();
  updateCartDisplay();
}

// Event listeners
clearCartButton.addEventListener('click', clearCart);

// Initial render
renderProducts();
updateCartDisplay();

Compiling and Bundling

To compile the TypeScript code into JavaScript, run the following command in your terminal:


npx tsc

This command will generate a `bundle.js` file, which includes all the compiled JavaScript code. However, for a real-world application, you would typically use a module bundler like Webpack or Parcel to handle dependencies and optimize the code.

To create the `bundle.js` file, you need to use a bundler. Here’s a basic example using Webpack:

  1. Install Webpack: `npm install –save-dev webpack webpack-cli ts-loader`
  2. Create a `webpack.config.js` file: This file configures Webpack.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/cart.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};
  1. Update `index.html`: Change the script tag to include the bundled file.

<script src="dist/bundle.js"></script>
  1. Run Webpack: Add a script to your `package.json` to run webpack.

  "scripts": {
    "build": "webpack",
    "start": "webpack --watch"
  },
  1. Run the build script: `npm run build` or `npm run start` (for watching).

Now, open `index.html` in your browser. You should see the product listings, and you should be able to add and remove items from the cart.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when building e-commerce carts and how to avoid them:

  • Incorrect Type Definitions: Using the wrong types can lead to unexpected behavior. For example, using `string` where you should use `number` for prices or quantities. Always define types accurately.
  • Unnecessary DOM Manipulations: Frequent DOM manipulations can impact performance. Try to minimize these operations. For instance, update only the necessary parts of the cart summary instead of re-rendering the entire cart.
  • Lack of Error Handling: Not handling potential errors, such as invalid product IDs or unexpected user input, can cause your application to crash. Implement robust error handling.
  • Ignoring Edge Cases: Not considering edge cases like zero quantities or removing the last item from the cart. Always test your code thoroughly.
  • Not Using a State Management Library: For complex applications, consider using state management libraries (e.g., Redux, Zustand, or MobX) to manage the cart state effectively.

Key Takeaways

  • TypeScript Enhances Development: Using TypeScript improves code quality, readability, and maintainability.
  • Classes and Objects Are Fundamental: Classes and objects are the building blocks of the cart implementation.
  • DOM Manipulation Is Necessary: You need to understand how to interact with the DOM to display and update the cart.
  • Testing Is Essential: Always test your cart thoroughly to ensure it functions correctly.

FAQ

  1. Can I use a database to store the cart data? Yes, for a production environment, you would typically store the cart data in a database or local storage. This allows the cart to persist across sessions.
  2. How can I handle different product variations (e.g., size, color)? You can extend the `Product` class to include properties for variations. You might also create a `ProductVariant` class.
  3. How do I add shipping costs and taxes? You can add methods to the `Cart` class to calculate these costs and integrate them into the total value.
  4. What about user authentication? You would typically integrate user authentication to associate the cart with a specific user. This would involve storing the cart data tied to the user’s account.
  5. How do I handle payment processing? You would integrate a payment gateway (e.g., Stripe, PayPal) to process payments. This is a complex topic and requires following the payment gateway’s documentation.

Building a web-based e-commerce cart is a great way to understand essential web development concepts. This tutorial has provided a solid foundation for building a cart using TypeScript. From here, you can expand on this basic implementation by adding features such as user authentication, payment processing, product variations, and more. Remember to focus on writing clean, well-documented code, and always consider the user experience. By following these principles, you can create a robust and user-friendly e-commerce cart that meets the needs of your online store. The journey of building an e-commerce cart doesn’t end with a basic implementation; it’s a continuous process of learning, improving, and adapting to the ever-evolving landscape of web development. Embrace the challenges, experiment with new features, and always strive to deliver a seamless shopping experience.

More posts