Implementing a Shopping Cart Functionality with Svelte
Tags: svelte, sveltekit, cart, javascript
Published: 2023-04-24 07:31:43

Introduction

Svelte is a modern and powerful front-end framework for building reactive and performant web applications. One of the most common features in e-commerce applications is a shopping cart, which allows users to add, remove, and manage items they wish to purchase. In this article, we will walk through the process of implementing a shopping cart functionality using Svelte.

Prerequisites

To follow this tutorial, you need to have a basic understanding of HTML, CSS, and JavaScript, as well as a working knowledge of Svelte. Familiarity with Svelte stores is also recommended, as they will be utilized in this implementation.

Step 1: Setting up the project

First, create a new Svelte project using the degit command:

bash

```bash
npx degit sveltejs/template svelte-shopping-cart
cd svelte-shopping-cart
npm install
```

Step 2: Creating the product list

Create a new Svelte component called `ProductList.svelte` to display a list of available products:

html

```html
<!-- src/components/ProductList.svelte -->
<script>
  export let products;
</script>

<ul>
  {#each products as product (product.id)}
    <li>
      <h3>{product.name}</h3>
      <p>Price: ${product.price.toFixed(2)}</p>
      <button on:click={() => $cart.addItem(product)}>Add to Cart</button>
    </li>
  {/each}
</ul>
```

Step 3: Implementing the cart store

Create a new Svelte store called `cartStore.js` to manage the state of the shopping cart:

js

```js
// src/stores/cartStore.js
import { writable } from 'svelte/store';

const initialState = {
  items: [],
  total: 0,
};

function createCart() {
  const { subscribe, set, update } = writable(initialState);

  return {
    subscribe,
    addItem: (product) =>
      update((state) => {
        const index = state.items.findIndex((item) => item.id === product.id);

        if (index !== -1) {
          state.items[index].quantity += 1;
        } else {
          state.items.push({ ...product, quantity: 1 });
        }

        state.total += product.price;
        return state;
      }),
    removeItem: (productId) =>
      update((state) => {
        const index = state.items.findIndex((item) => item.id === productId);

        if (index !== -1) {
          state.total -= state.items[index].price * state.items[index].quantity;
          state.items.splice(index, 1);
        }

        return state;
      }),
    clear: () => set(initialState),
  };
}

export const cart = createCart();
```

Step 4: Creating the cart component

Create a new Svelte component called `Cart.svelte` to display the contents of the shopping cart:

html

```html
<!-- src/components/Cart.svelte -->
<script>
  import { cart } from '../stores/cartStore.js';
</script>

<section>
  <h2>Shopping Cart</h2>
  <ul>
    {#each $cart.items as item (item.id)}
      <li>
        <span>{item.name} - {item.quantity} x ${item.price.toFixed(2)}</span>
        <button on:click={() => $cart.removeItem(item.id)}>Remove</button>
      </li>
    {/each}
  </ul>
  <p>Total: ${$cart.total.toFixed(2)}</p>
  <button on:click={$cart.clear}>Clear Cart</button>
</section>
```

Step 5:

> 1 / 1
>
> is completed

1 / 1

Great! Now that you've implemented a shopping cart functionality with Svelte, it's time to integrate the components into your main Svelte application.

Step 6: Integrating components into the main application

Update your `App.svelte` file to include the `ProductList` and `Cart` components:

html

```html
<!-- src/App.svelte -->
<script>
  import ProductList from './components/ProductList.svelte';
  import Cart from './components/Cart.svelte';

  const products = [
    { id: 1, name: 'Product 1', price: 19.99 },
    { id: 2, name: 'Product 2', price: 29.99 },
    { id: 3, name: 'Product 3', price: 39.99 },
  ];
</script>

<main>
  <h1>My E-commerce App</h1>
  <ProductList {products} />
  <Cart />
</main>

<style>
  /* Add your custom styles here */
</style>
```

Here, we've imported the `ProductList` and `Cart` components and included them in our main application. The `products` array contains sample product data for demonstration purposes.

Now, you can run the development server and see your shopping cart in action:

bash

```bash
npm run dev
```

This will start the development server, and you can access your app at `http://localhost:5000`.

Conclusion

In this article, we demonstrated how to implement a shopping cart functionality using Svelte. We created a product list and a cart component, utilized Svelte stores to manage the cart state, and integrated the components into the main application. With this foundation, you can continue to expand the functionality and design of your e-commerce application.%