TypeScript: Building a Simple E-commerce Product Listing

Written by

learnmodernjavascript

in

In the bustling world of e-commerce, presenting products effectively is crucial for grabbing customer attention and driving sales. A well-structured product listing, with clear information and an intuitive layout, can significantly enhance the user experience. This tutorial will guide you through building a simple, yet functional, e-commerce product listing using TypeScript. We’ll cover the core concepts, from defining product interfaces to rendering them dynamically in HTML. This is a practical, hands-on guide that will equip you with the skills to create your own product listings, whether for a small personal project or as a stepping stone to more complex e-commerce applications.

Why TypeScript?

TypeScript, a superset of JavaScript, brings static typing to your code. This means you can catch potential errors during development, improving code quality and maintainability. For e-commerce applications, where data integrity is paramount, TypeScript’s type checking is invaluable. It helps prevent common mistakes, such as incorrect data types being used or missing properties, which can lead to frustrating bugs and a poor user experience. Furthermore, TypeScript enhances code readability and makes it easier for other developers to understand and contribute to your project.

Setting Up Your Project

Before we dive into the code, let’s set up our project environment. We’ll use Node.js and npm (Node Package Manager) for this tutorial. If you don’t have them installed, you can download them from the official Node.js website. Open your terminal or command prompt and follow these steps:

  1. Create a new project directory: mkdir product-listing
  2. Navigate into the directory: cd product-listing
  3. Initialize a new npm project: npm init -y (This creates a package.json file with default settings.)
  4. Install TypeScript globally (optional but recommended for easier command-line compilation): npm install -g typescript
  5. Create a tsconfig.json file: tsc --init (This generates a configuration file for TypeScript compilation.)
  6. Install a module bundler such as webpack. npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin ts-loader

Now, let’s configure the tsconfig.json file. Open it in your code editor and modify the following settings:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

These settings configure TypeScript to compile your code to ES5, use CommonJS modules, and output the compiled files to a “dist” directory. The strict: true option enables strict type checking. Also, we’ll install a module bundler to bundle all our JavaScript files into a single file to be used in the browser.

Creating the Product Interface

The foundation of our product listing is the product data itself. We’ll define a TypeScript interface to represent a product. Create a new file named product.ts inside a src directory and add the following code:

// src/product.ts

export interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  imageUrl: string;
  category: string;
}

This interface defines the properties of a product: id, name, description, price, imageUrl, and category. By using an interface, we ensure that all our product objects have the expected structure, which helps to prevent errors. For example, if you try to create a product without a name, TypeScript will give you a compile-time error.

Populating Product Data

Next, let’s create some sample product data. Create a new file named products.ts in the src directory and add the following code:

// src/products.ts
import { Product } from './product';

export const products: Product[] = [
  {
    id: 1,
    name: 'Awesome T-Shirt',
    description: 'A comfortable and stylish t-shirt for everyday wear.',
    price: 25.00,
    imageUrl: 'https://via.placeholder.com/150',
    category: 'Clothing',
  },
  {
    id: 2,
    name: 'Durable Jeans',
    description: 'High-quality jeans made to last.',
    price: 75.00,
    imageUrl: 'https://via.placeholder.com/150',
    category: 'Clothing',
  },
  {
    id: 3,
    name: 'Coffee Maker',
    description: 'Brew delicious coffee with this easy-to-use coffee maker.',
    price: 50.00,
    imageUrl: 'https://via.placeholder.com/150',
    category: 'Electronics',
  },
  {
    id: 4,
    name: 'Wireless Headphones',
    description: 'Enjoy your music with these comfortable and high-quality headphones.',
    price: 100.00,
    imageUrl: 'https://via.placeholder.com/150',
    category: 'Electronics',
  },
];

This code imports the Product interface and creates an array of product objects. Each object adheres to the structure defined in the Product interface. The imageUrl uses placeholder images for now; you can replace these with actual image URLs later.

Creating the HTML Structure

Now, let’s create the HTML structure for our product listing. Create an index.html file in the root directory and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Listing</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="product-container"></div>
  <script src="bundle.js"></script>
</body>
</html>

This HTML file sets up the basic structure of the page, including a div with the ID product-container where we will dynamically render our product listings. We also include a link to a style.css file for styling and a script tag for the bundled JavaScript file (bundle.js).

Styling the Product Listing

To make the product listing visually appealing, let’s add some basic CSS styles. Create a style.css file in the root directory and add the following code:

/* style.css */

body {
  font-family: sans-serif;
  margin: 20px;
}

.product-card {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.product-image {
  width: 150px;
  height: 150px;
  margin-right: 20px;
  object-fit: cover;
}

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

.product-name {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-price {
  color: green;
  font-weight: bold;
}

This CSS provides basic styling for the product cards, images, and details. You can customize these styles to match your desired design.

Rendering Products with TypeScript

Now, let’s write the TypeScript code to fetch the product data and render it in the HTML. Create a new file named index.ts in the src directory and add the following code:

// src/index.ts
import { products } from './products';
import { Product } from './product';

function renderProduct(product: Product): string {
  return `
    <div class="product-card">
      <img src="${product.imageUrl}" alt="${product.name}" class="product-image">
      <div class="product-details">
        <div class="product-name">${product.name}</div>
        <p>${product.description}</p>
        <div class="product-price">$${product.price.toFixed(2)}</div>
      </div>
    </div>
  `;
}

function renderProducts() {
  const productContainer = document.getElementById('product-container');

  if (productContainer) {
    const productHTML = products.map(renderProduct).join('');
    productContainer.innerHTML = productHTML;
  }
}

renderProducts();

This code imports the product data and defines two functions: renderProduct and renderProducts. The renderProduct function takes a Product object as input and returns an HTML string representing the product card. The renderProducts function retrieves the product-container element from the DOM, maps each product to its HTML representation using the renderProduct function, and then sets the HTML content of the container to the generated HTML string. The renderProducts() function is then called to initiate the rendering process.

Setting up Webpack

We are going to use Webpack to bundle our TypeScript code into a single Javascript file to be used in the browser. Create a webpack.config.js file in the root directory and add the following code:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
  },
};

This Webpack configuration specifies the entry point (src/index.ts), the output file (dist/bundle.js), and the rules for handling TypeScript files using ts-loader. It also includes the HtmlWebpackPlugin to automatically inject the bundled JavaScript into our index.html. Finally, we configure the Webpack development server to serve the application from the dist directory on port 9000.

Building and Running the Application

Now, let’s build and run our application. Open your terminal and run the following commands:

  1. Compile the TypeScript code: npx webpack
  2. Start the development server: npx webpack serve

This will compile your TypeScript code, bundle it using Webpack, and serve the application locally. Open your web browser and navigate to http://localhost:9000 to see your product listing.

Adding Filtering Functionality

To make the product listing more user-friendly, let’s add filtering functionality. We’ll allow users to filter products by category. First, modify the index.html file to include a select element for category filtering:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Listing</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <label for="category-filter">Filter by Category:</label>
    <select id="category-filter">
      <option value="">All</option>
      <option value="Clothing">Clothing</option>
      <option value="Electronics">Electronics</option>
    </select>
  </div>
  <div id="product-container"></div>
  <script src="bundle.js"></script>
</body>
</html>

We’ve added a select element with the ID category-filter and options for “All”, “Clothing”, and “Electronics”. Next, modify the index.ts file to add the filtering logic:

// src/index.ts
import { products } from './products';
import { Product } from './product';

function renderProduct(product: Product): string {
  return `
    <div class="product-card">
      <img src="${product.imageUrl}" alt="${product.name}" class="product-image">
      <div class="product-details">
        <div class="product-name">${product.name}</div>
        <p>${product.description}</p>
        <div class="product-price">$${product.price.toFixed(2)}</div>
      </div>
    </div>
  `;
}

function filterProducts(category: string): Product[] {
  if (category === '') {
    return products;
  }
  return products.filter(product => product.category === category);
}

function renderProducts(category: string = '') {
  const productContainer = document.getElementById('product-container');

  if (productContainer) {
    const filteredProducts = filterProducts(category);
    const productHTML = filteredProducts.map(renderProduct).join('');
    productContainer.innerHTML = productHTML;
  }
}

function setupFilter() {
  const filterSelect = document.getElementById('category-filter') as HTMLSelectElement;
  if (filterSelect) {
    filterSelect.addEventListener('change', () => {
      const selectedCategory = filterSelect.value;
      renderProducts(selectedCategory);
    });
  }
}

renderProducts();
setupFilter();

We’ve added a filterProducts function that takes a category as input and returns a filtered array of products. The renderProducts function now accepts an optional category parameter and calls filterProducts before rendering the products. The setupFilter function sets up an event listener on the category-filter select element to update the product listing when the selected category changes. Rebuild and run the app with npx webpack and npx webpack serve and test the filtering functionality.

Common Mistakes and How to Fix Them

  • Incorrect TypeScript Configuration: Incorrectly configured tsconfig.json can lead to compilation errors or unexpected behavior. Double-check your settings, especially the target, module, and strict options. Ensure that your rootDir and outDir are set correctly to match your project structure.
  • Type Errors: TypeScript’s type checking can be a blessing and a curse. Make sure to declare your types correctly and that you are using the correct types when interacting with your data. If you get type errors, carefully read the error messages to understand the issue and fix the code accordingly.
  • Incorrect File Paths: Incorrect file paths in your import statements can prevent your code from compiling or running correctly. Always verify that the file paths in your import statements are correct, relative to the current file.
  • DOM Manipulation Errors: When interacting with the DOM, make sure you are selecting the correct elements. Use the browser’s developer tools to inspect your HTML and verify that the element IDs are correct. Use type assertions (e.g., as HTMLSelectElement) when accessing DOM elements to ensure type safety.
  • Webpack Configuration Issues: Webpack configuration can be tricky. Make sure your entry point, output path, and loaders are configured correctly. If you encounter issues, consult the Webpack documentation and use the browser’s developer tools to check for errors in the console.

Key Takeaways

  • TypeScript for Type Safety: TypeScript significantly improves code quality and reduces errors in your e-commerce applications.
  • Interfaces for Data Structure: Interfaces are crucial for defining the structure of your data, making your code more organized and maintainable.
  • Dynamic Rendering: Dynamically rendering product data in HTML allows you to easily update and manage your product listings.
  • Filtering for User Experience: Implementing filtering functionality enhances the user experience by allowing users to quickly find the products they are looking for.
  • Webpack for Bundling: Webpack simplifies the process of bundling your TypeScript code, allowing it to work in the browser.

FAQ

  1. Why use TypeScript instead of JavaScript?

    TypeScript adds static typing to JavaScript, enabling you to catch errors during development. It improves code readability, maintainability, and helps prevent runtime errors, making it an excellent choice for larger projects like e-commerce applications.

  2. How do I add more product categories?

    You can easily add more product categories by adding new options to the category-filter select element in your index.html file and adding new category values in your products.ts file.

  3. How can I improve the performance of the product listing?

    For large product listings, consider implementing techniques like pagination and lazy loading. Pagination allows you to display products in pages, and lazy loading loads images and other resources only when they are visible in the viewport. These techniques can significantly improve performance.

  4. How do I deploy this application?

    You can deploy this application using a variety of methods, such as using a static site hosting service like Netlify or Vercel, or by deploying it to a web server. You would need to build the project using npx webpack and then upload the contents of the dist directory to your hosting provider.

Building a product listing with TypeScript offers a glimpse into the power of type-safe development. This approach enhances code quality, making it easier to maintain and scale. As you delve deeper into e-commerce development, consider expanding upon this foundation by integrating features like sorting, searching, and user authentication, all while leveraging the benefits of TypeScript. The journey of building e-commerce applications is a continuous learning process, and each project you undertake will refine your skills and understanding. Embrace the challenges, experiment with new technologies, and always strive to create user-friendly and robust applications.

More posts