First Steps with Vue.js Tutorial: Create Your Own Basic E-Commerce Cart
This doesn’t mean that it’s the most used, but it’s still really interesting data. Also, according to Google trends, it seems that interest in Vue.js has increased considerably over the last 5 years:
So, there are no excuses to not take a look at Vue.js and learn a bit about this framework.
The first step to create our project is to use cli.vue.js tools. To do this, you’ll need to install the command line interface that Vue.js uses, which is as easy as copying the following code into your terminal:
npm install -g @vue/cli
After that, you can create your project using:
vue create vue-shop
Just select the default options; you can use either yarn or npm. In my case, I used yarn. Once you finish this step, go inside the project directory and type:
This will start the server and the app.
Taking a Look at the Files
First, to improve the look and feel of the app, we will use Bootstrap 4.0 by adding it to the index.html.
Now, if you go to your project directory, inside public you will see the index.html file; that file will instantiate the main component, “App.” This is where everything starts. The basic files to use Vue.js from scratch are: main.js, App.vue and the “components/” folder.
Continuing with our example, the main idea is to display some products, be able to add all or some of them to the cart, and calculate the total purchase amount — the basic functionalities of a shopping cart. As a data source, we are going to create a simple products.json in our root directory. The idea of this blog post is just to consume data, not to show database connection, but if you want to try an API consumption tool, I strongly recommend the “Axios” library.
Axios can be invoked with something like this:
For our example, the products.json will contain Lego® info as items and look like this:
Ok, that was easy. The second step is to import these items into the data app component, and after that, we are going to be able to use the data properties. But first, what are data properties? That’s a basic question, and it’s a good idea to first explain the basics of the component structure in order to better understand the main concepts:
• Props: custom attributes that can be registered in a component.
• Template: the html code snippet that might display variables, etc.
• Mounted: an action that will be completed when an object has been created.
• Computed: a property used to manipulate and perform operations on the data; it can be cached and is extremely high-performing.
• Methods: functions that handle an object.
• Watchers: thought of as a part of the reactivity system; the name matches the action.
These elements can be used in a general way, or imported for use in specific components. Once we have imported the products.json into our main App.vue component, we can do a simple return inside data, and a cool way to see the data in our Chrome browser is by installing Vue.js Devtools, which allows you to inspect the data like this:
Continuing with the exercise, we will now create a components directory in the root file system. In it, it’s time to make a Product.vue component that will be used to separately manage the cart’s items.
This new Product.vue component should be imported into the main component(App), and the products.json must be assigned to it in order to display all the products. This new component contains simple html code to separately display product information like title, price, etc. Now, in order to display these products, we will implement a v-for mounted in the Product component. The code should look like this:
Keep in mind that we need add a key or id (:key=”product.id”) to any products that we intend to use. After the loop, the app should then display something like this:
To continue playing with the Product component, the idea here is to use the props to manage the array key and pass it to the App loop. After that, you should see the correct info in the main object array:
Adding Products to the Cart
This is one of the main functionalities of this basic example. To add elements to the cart, we are going to need another array with the added products. This new array will be in the App.vue component, but first we need to be sure that the button that adds items to the cart works. To determine this, we need to add a click event and a new function that will add the clicked items to the array. We are going to create a method that adds items to the cart in the parent component; the event is managed in the template using:
After creating a new array (which we called “cart”), we should now be able to add products to it. And considering that we already have the necessary code in the template, the addToCart function that we discussed previously should be able to push the requested products to the cart in the following way:
One nice thing to do is to disable the “Add to cart” button if the item has already been added. To do this, we will create a function called isInCart(), which will check if the product is in the cart array and return either ‘true’ or ‘false.’
The Cart Component
This component will display the products that were added to the cart. First, we will create it and import it into App.vue. Remember to add the new object as a component to be used; this component should receive the items that are in the cart, and using a loop it will display them:
The second important functionally that we should not forget is removing elements from the cart. After adding a “Remove” button to all items already added to the cart, we will add a click event using $emit, which will basically emit data to the parent component in order for the cart to be updated. Using remove-from-cart, we will bind this event to the parent App.vue where the event is listened for using the function removeFromCart(). This is very reactive because the cart buttons are automatically updated.
Displaying the Cart Total
To display this total, we will make a computed property called total, which will update the items array every time it changes. To accomplish this, we will use a reducer function that is going to display an accumulator with the total price as a number, with zero as the default.
Finally, we can add a “Pay Now” button to clean the cart; that button will emit a function called pay, and in App.vue, we will add the v-on for the new pay function. This method will basically clean the array and display an alert with a “success” message.
It is also a good idea to disable the pay button if there are no items in the cart. We can do this by binding the disable property to the array using the array length:
Finally, we have a really basic idea of an e-commerce shopping cart using Vue.js objects, components, functions and common operators for managing arrays.
Check the code in this repo and let me know if you have any comments.