Build an eCommerce shopping cart using the Svelte JavaScript framework.

Tram Ho


The Svelte JavaScript framework is free and open-source. Created by Rich Harris and maintained by the core members of Svelte. Svelte applications do not include other framework references. Building a Svelte application instead generates code to manipulate the DOM, which can reduce the size of the transferred files as well as provide better application launch and runtime performance. . Svelte has its own compiler for converting application code into client-side JavaScript at build time. It is written in TypeScript. Svelte source code is licensed under the MIT License and hosted on GitHub.

Build Svelte ecommerce cart.

We will start creating the svelte application. We will create a sveltecart directory in the home directory using the following command.

Directory structure

The most important files in this application are:

  • src / main.js
  • src / App.svelte
  • public / index.html

The file public/index.html has the following content:

Note: In the above html, there are call 2 css files and 1 js file in the same directory. The global.css file that holds the css can affect any component. The build/bundle.css file is generated from css in each component . The build / bundle.js file is generated from JavaScript and HTML in each component and any other javascript in the application.

The src/main.js file has the following content:

This creates the App component , the target property can indicate where the component was created. For most applications, this is the body of the document. The name prop is passed to the App component.

The src/App.svelte file src/App.svelte the following content:

The variables exported to the script tag are the values ​​obtained from the src/main.js file. The {} brackets are used to output the value of a javascript expression. style tag to store all css styles applied to this app.

Building the Svelte eCommerce shopping cart

The first is to create folders and files and start the application. To create required components, do the following in the terminal

In the src directory, we can create the CartComponents directory and inside the CartComponents directory we will create the file:

Like, In the src directory we can create directory Stores and inside the Stores directory, we can create stores.js . Next in the src directory. We will create an Item.js. file.

We will use Bootstrap CSS for our application, first we will add Bootstrap cdn to the index.html file. Go to file public/index.html and add bootstrap cdn.

Update the stores/stores.js file

In the above code, we import writable() function from svelte/store and use it to create a store that calls cart . Open the src/items.js file and update as follows:

Building the Cards Components

Open the file srcCartComponentscard.svelte and update the content.

In the code above we imported get() from svelte/store . It uses get and set manually. Update the srcCartComponentsCardWrapper.svelte

In the code above we imported the previously created Card.svelte & item.js to use and display for the tags using the Bootsrap class.

Working with the Checkout Components

Update the srcCartComponentsCheckoutItem.svelte

In the above code we have written a simple logic that returns Items to cart . Checks checked-out for each cart and displays the message according to the correct condition.

Next we update the srcCartComponentsNavbar.svelte

In the code above we import createEventDispatcher funtion from the svelte package and called an event dispatcher. Finally, update the App.svelte file

In the above code we have imported all the necessary components to create the App.svelte file.


Svelte is a worthy replacement for today’s popular React, Vue, and Angular options. It has many benefits, including small package sizes, simple component definitions, easy state management, and the ability to react without the need for a virtual DOM. Through this tutorial you learned how to build a simple shopping cart application using Svelte. You can refer to the source code here: GitHub .


Share the news now

Source : Viblo