Bootstrap 4Vue3VueJs

Vuejs – Vue 3 Animated Ecommerce Shop Page with Dynamic Products

Vuejs - Vue 3 Animated Ecommerce Shop Page with Dynamic Products

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Vuejs – Vue 3 Animated Ecommerce Shop Page with Dynamic Products.

Friends with this post, we will cover with below functionalities:

  1. How to fetch and show api json data in vuejs application?
  2. Veujs show page with dynamic data.

Here is the API link from where I am getting demo products json data:

https://www.testjsonapi.com/products/


Vuejs - Vue 3 Animated Ecommerce Shop Page with Dynamic Products
Vue js Dynamic Products
Hover Effect

Vue 3 came and if you are new then you must check below two link:

  1. Vuejs

Friends now I proceed onwards and here is the working code snippet for Vuejs – Vue 3 Animated Ecommerce Shop Page with Dynamic Products and use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have datatable, jquery, bootstrap and axios modules in our Vue 3 application:

npm install -g @vue/cli

vue create vueshoppage

cd vueshoppage

npm i axios

npm i bootstrap

npm run serve //http://localhost:8080/

2. Now friends we need to add below code into src/App.vue file to check the final output on browser:

<template>
<section class="our-publication pt-100 pb-70">
            <div class="container">
                <div class="section-header">
                    <i class="fa fa-book"></i>
                    <h2>Therichpost.com</h2>
                    <p>Vuejs - Vue 3 Animated Ecommerce Shop Page with Dynamic Products.</p>
                </div>
                
                <div class="row">
                    <div class="col-sm-6 col-lg-3" v-for="product in products" :key="product.id"> 
                        <div class="single-publication">
                            <figure>
                                <a href="#">
                                    <img :src="product.product_image" alt="Publication Image">
                                </a>

                                <ul>
                                    <li><a href="#" title="Add to Favorite"><i class="fa fa-heart"></i></a></li>
                                    <li><a href="#" title="Add to Compare"><i class="fa fa-refresh"></i></a></li>
                                    <li><a href="#" title="Quick View"><i class="fa fa-search"></i></a></li>
                                </ul>
                            </figure>

                            <div class="publication-content">
                                <span class="category">Products</span>
                                <h3><a href="#">{{product.product_title}}</a></h3>
                                <ul>
                                    <li><i class="icofont-star"></i></li>
                                    <li><i class="icofont-star"></i></li>
                                    <li><i class="icofont-star"></i></li>
                                    <li><i class="icofont-star"></i></li>
                                    <li><i class="icofont-star"></i></li>
                                </ul>
                                <h4 class="price">{{product.product_price}}</h4>
                            </div>

                            <div class="add-to-cart">
                                <a href="#" class="default-btn">Add to Cart</a>
                            </div>
                        </div>
                    </div>
                    
                    
                </div>
            </div>
        </section>
</template>
<script>
//Bootstrap
import './App.css'; 
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios'
export default {
 //
  mounted(){
    //API Call
    axios
    .get("https://www.testjsonapi.com/products/")
    .then((res)=>
    {
      this.products = res.data;
     
    })
  },
  data: function() {
        return {
            products:[]
        }
    },
  
}
</script>

3. Now guys we need to add below code into src/app.css file to styling products and give hover effect:

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
.pt-100 {
  padding-top: 100px;
}
.pb-70 {
  padding-bottom: 70px;
}
.section-header {
  margin-bottom: 60px;
  text-align: center;
}
.section-header i {
  color: #ff007d;
  font-size: 50px;
  display: inline-block;
  margin-bottom: 10px;
}
.section-header h2 {
  font-weight: bold;
  font-size: 34px;
  margin: 0;
}
.section-header p {
  max-width: 500px;
  margin: 20px auto 0;
}
.single-publication {
  border: 1px solid #f2eee2;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
.single-publication figure {
  position: relative;
  margin: 0;
  text-align: center;
}
.single-publication figure > a {
  background-color: #fafafa;
  display: block;
}
.single-publication figure ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  right: -50px;
  top: 20px;
  transition: .6s;
  -webkit-transition: .6s;
}
.single-publication:hover figure ul {
  right: 15px;
}
.single-publication figure ul li a {
  display: inline-block;
  width: 35px;
  height: 35px;
  text-align: center;
  font-size: 15px;
  background: #ff007d;
  margin-bottom: 7px;
  border-radius: 50%;
  line-height: 35px;
  color: #fff;
}
.single-publication figure ul li a:hover {
  color: #fff;
  background: #e50663;
}
.single-publication .publication-content {
  text-align: center;
  padding: 20px;
}
.single-publication .publication-content .category {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #ff007d;
  font-weight: 600;
}
.single-publication .publication-content h3 {
  font-weight: 600;
  margin: 8px 0 10px;
  font-size: 20px;
}
.single-publication .publication-content h3 a {
  color: #1f2d30;
  font-size: 22px;
}
.single-publication .publication-content h3 a:hover {
  color: #ff007d;
}
.single-publication .publication-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-bottom: 15px;
}
.single-publication .publication-content ul li {
  display: inline-block;
  font-size: 18px;
  color: #fec42d;
}
.single-publication .publication-content .price {
  font-size: 18px;
  color: #ff007d;
}
.single-publication .publication-content .price span {
  color: #6f6f6f;
  text-decoration: line-through;
  padding-left: 5px;
  font-weight: 300;
}
.single-publication .add-to-cart {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  -webkit-transform: scale(.7);
  transform: scale(.7);
  height: 105px;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  transition: .4s;
}
.single-publication:hover .add-to-cart {
  visibility: visible;
  transform: scale(1);
  -webkit-transform: scale(1);
  opacity: 1;
}
.single-publication .add-to-cart .default-btn {
  margin-top: 28px;
  padding: 8px 25px;
  font-size: 14px;
}
.single-publication .category {
  margin: 0;
}
.single-publication .add-to-cart .default-btn {
  margin-top: 28px;
  padding: 8px 25px;
  font-size: 14px;
}
.default-btn {
  background-color: #ff007d;
  color: #fff;
  border: 1px solid #ff007d;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
}
a:hover {
  color: #fff;
  text-decoration: none;
}
figure img{width: 200px;}

 

Now we are done friends  also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.