Build Merce's Front-end in Vue.js

VueJs is a front-end framework for building dynamic user interfaces. It’s a step forward from using vanilla javascript, making the front-end development experience easier and more enjoyable.

Head over to the installation page and get VueJs installed.

We also need to install Vue’s chrome extension tool. We can debug our Vue app (Merce’s frontend) easily with this.

Project Layout

Create the Products and Cart component to reflect the image below.

The products component will be responsible for loading and displaying the products from our backend server.
The cart component will hold products added to cart. It will also handle their payment.

Fig 1 - Project layout

We will leverage on Bootstrap in this project, so run the following command to get it and jQuery (Bootstrap relies on this) setup.

npm i bootstrap jquery popper.js

Navigate to the main.js in the src directory and add the following code

import 'bootstrap'; 
import 'bootstrap/dist/css/bootstrap.min.css';

This imports Bootstrap’s javascript and css files into our build. Now the foundation has been setup, let’s get our hands dirty.

Lastly, we need to install axios to make api calls to our backend server.

npm install axios

Open the App.vue file in the src directory and edit to look like this:

<template>
  <div id="app">
    <Products />
  </div>
</template>

<script>
import Products from './components/Products.vue'

export default {
  name: 'App',
  components: {
    Products
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Create a .env file in the base directory and add the following

VUE_APP_API_BASE_URL=http://localhost:3000

In Vue, env variables have to begin with the prefix VUE_APP. Specify the port your backend server is running on.

Open the Products file in the components directory and add the following code:

<template>
    <div class="container">
        <div class="card">
            <div class="card-header">
                All products
            </div>
            <div class="card-body">
                pRODUCTS
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'Products',

    methods: {
        getAllProducts() {
            const baseUrl = process.env.VUE_APP_API_BASE_URL;

            this.axios.get(baseUrl + '/api/product').then(response => {
                console.log(response);
            })
        }
    },
    mounted() {
        this.getAllProducts();
    }
}
</script>

Open your dev tools (right click on chrome and click on inspect). Navigate to console and refresh the page. You should see the following:

Fig 2 - Console view of products loaded from backend server

Congratulations if you got your products to load. Let us display them nicely for our potential customers.

Edit the Product.vue file to look like this:

Refresh your browser and view your products

Congratulations if you got to this stage. Our cart is not visible because we have not implemented the functionality. Let us do so.

Add the following code to the Cart.vue file in the components directory:

Then update the App.vue file to look like this

Refresh your browser and you should have this view

We have implemented the products and cart view, developed in their own component. This is done for modularity. We need a way for both components to communicate such that once the “Add to cart” button is clicked in the products view, the cart reflects the added product.

There are many ways to achieve this such as using Vuex store, parent-child component communication and event bus. For the sake of this tutorial, we will use the event bus technique but we recommend Vuex store be used a central repository of app’s data.

The event bus is Vue.js instance that can emit (publish) events in one component, and then listen (subscribe) and react to the emitted event in another component directly — without the help of a parent component.

This is commonly known as the publish-subscribe approach.

Let’s get to work:

Update your main.js file in the src directory to look like this:

Pass data from product to cart component

Using the code {busInstance}.$emit('topic', data), we can publish the product we need to add to cart. Update the addToCart method in the Products.vue file to look like this:

Refresh your browser and while your chrome dev tools is open, navigate to the Vue tab. Navigate further to the events tab. Click the Add to cart button on the products view and you should see an event emitted like so:

The cart component will listen for the add-product-to-cart event and preform necessary business logic on the product data.

Let’s work on the cart component. Update the Cart.vue file to look like this:

What is happening here is, when the add product to cart event is received, the addProductToCart method is called and the product data is passed into it.

If the cart contains any item, we check if the emitted product exists in it. If it does, we increase the quantity and update Vue (read more on Vue’s reactivity to understand line 44).

If the product does not exist, we add it to the cart.

Notice, we didn’t add the functionality to increase or reduce the cart item quantity. It is not the focus of this tutorial. It should be easy to implement on your end.

Let’s implement the checkout functionality to enable us collect payment using Monnify's One Time Payment.

We have already integrated with Monnify’s apis to allow us perform the checkout. Refer to this tutorial if you have not.

Let us add a button to send the cart item to our backend and the functionality to load the checkout url in our browser. Update the Cart.vue to look like this.

Reload your browser, you should see this. Our beautiful checkout button.

Congratulations. We are done, now go forth and build your MVP.