Fix issue 51. Add promoted products component

CHANGELOG.md

@@ -18,3 +18,4 @@
  - 05.2020 - В футере добавить форму для ввода email и кнопку. Необходимо добавить валидацию email. Пока пусть отправляет данные на https://vuemmerce.herokuapp.com/api/new-subscription и всегда показывает всплывающее окно об успешной подписке. by @Vshinf
  - 05.2020 - Добавлена форма для фильтрации товаров (цена и произоводитель) by @iskangiz
  - 05.2020 - Добавить форму обратной связи by @Dalion
+ - 08.2020 - Добавить блок промо товаров by @hoborg91

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuemmerce",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "private": true,
   "description": "Responsive ecommerce template built with Vue.js",
   "author": "ivan lori <ivan.lori@protonmail.com>",

src/components/Products.vue

@@ -229,7 +229,7 @@ export default {
     min-height: 50px;
   }
   .rlink,
-  .rlinkk:hover,
+  .rlink:hover,
   .rlink:focus,
   .rlink:active {
     padding: 0;

src/components/homepage/Homepage.vue

@@ -4,13 +4,15 @@
     <ads></ads>
     <news></news>
     <categories_list-container></categories_list-container>
+    <promo-products></promo-products>
   </div>
 </template>
 
 <script>
 import CategoriesListContainer from '../categories/CategoriesListContainer';
 import HeroSection from '../hero/Hero';
-import VmNewsList from "../news/NewsListContainer";
+import VmNewsList from '../news/NewsListContainer';
+import PromoProducts from '../promo_products/PromoProducts';
 import ads from '../ads/ads';
 
 export default {
@@ -19,6 +21,7 @@ export default {
     'categories_list-container': CategoriesListContainer,
     'hero': HeroSection,
     'news': VmNewsList,
+    'promo-products': PromoProducts,
     ads
   },
   metaInfo: {

src/components/news/SingleNew.vue

@@ -37,18 +37,20 @@
     </div>
   </social-sharing>
 
+    <promo-products></promo-products>
   </section>
 </template>
 
 <script>
 
-var SocialSharing = require('vue-social-sharing');
-
+import SocialSharing from 'vue-social-sharing';
+import PromoProducts from '../promo_products/PromoProducts';
 
 export default {
   name: 'news_detail-id',
   components: {
-    SocialSharing
+    SocialSharing,
+    'promo-products': PromoProducts,
   },
   computed: {
     currentUrl() {
@@ -76,7 +78,4 @@ export default {
   .description {
     margin-bottom: 30px;
   }
-
-
 </style>
-

src/components/pagination/Pagination.vue

@@ -1,6 +1,6 @@
 <template>
     <section>
-        <div class="level" v-if="total">
+        <div class="level" v-if="total && !gridIsConstant">
             <div class="level-left"></div>
             <div class="level-right">
                 <div class="level-item">
@@ -50,7 +50,11 @@
       grid: {
         type: Number,
         default: 3
-      }
+      },
+      gridIsConstant: {
+        type: Boolean,
+        default: false,
+      },
     },
 
     data() {

src/components/promo_products/ProductSimple.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="top-margin bottom-margin">
+    <table>
+      <tr>
+        <td class="is-hidden-mobile">
+          <div class="card-image">
+            <figure class="image">
+              <img src="https://bulma.io/images/placeholders/480x480.png" alt="Placeholder image">
+            </figure>
+          </div>
+        </td>
+        <td class="is-hidden-tablet">
+          <div class="card-image">
+            <figure class="image">
+              <img src="https://bulma.io/images/placeholders/128x128.png" alt="Placeholder image">
+            </figure>
+          </div>
+        </td>
+        <td>
+          <div class="card-content">
+            <div class="media">
+              <div class="media-content">
+                <p class="title is-6">{{ product.title }}</p>
+              </div>
+            </div>
+            <div class="content is-clearfix">
+              <div class="is-pulled-left box1">
+                <b-rate v-model="overallRating"
+                        :icon-pack="packs"
+                        :disabled="isDisabled"
+                        size="is-small">
+                </b-rate>
+              </div>
+              <p class="is-pulled-left">
+                <span class="title is-6"><strong>&euro; {{ product.price }}</strong></span>
+              </p>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+
+    <router-link
+      class="details"
+      :to="{
+        path: '/product-detail',
+        name: 'product-detail-component',
+        params: {
+          id: product.id,
+          title: product.title,
+          price: product.price,
+          rating: product.ratings,
+          reviews: product.reviews,
+          category: product.category,
+          isAddedBtn: product.isAddedBtn
+        }
+      }"
+    >
+    </router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'product-simple',
+
+  props: {
+    product: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data () {
+    return {
+      packs: 'fas',
+      isDisabled: true,
+    };
+  },
+
+  computed: {
+    overallRating () {
+      return this.$store.getters.getOverallRatingProductById(this.product.id);
+    },
+  },
+
+  methods: {
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .details {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+
+    &:hover {
+      border: 1px solid #51bafc;
+    }
+  }
+  .box1 {
+    position: relative;
+    min-height: 50px;
+  }
+</style>

src/components/promo_products/PromoProducts.vue

@@ -0,0 +1,75 @@
+<template>
+  <div ref="loader" class="top-margin bottom-margin">
+    <div class="title is-4">
+      Promoted products
+    </div>
+    <pagination-component :items="products" :grid="3" :grid-is-constant="true">
+      <template slot="itemsOnPage"
+                slot-scope="{ itemsOnPage: products }">
+        <div class="columns is-centered is-multiline">
+          <div class="card column is-one-quarter"
+               v-for="product in products"
+               :key="product.id">
+            <product-simple :product="product"></product-simple>
+          </div>
+          <div class="section" v-if="products.length === 0">
+            <p>{{ noProductLabel }}</p>
+          </div>
+        </div>
+      </template>
+    </pagination-component>
+  </div>
+</template>
+
+<script>
+import ProductSimple from './ProductSimple';
+import PaginationComponent from '../pagination/Pagination';
+
+export default {
+  name: 'promo-products',
+
+  components: {
+    ProductSimple,
+    PaginationComponent,
+  },
+
+  data () {
+    return {
+      noProductLabel: 'Come here later to see our promoted products.',
+      products: [],
+    };
+  },
+
+  mounted() {
+    this.pseudoLoadingPage();
+  },
+
+  watch: {
+    $route(to, from) {
+      this.pseudoLoadingPage();
+    }
+  },
+
+  methods: {
+    pseudoLoadingPage() {
+      this.$store.dispatch('pseudoFetchPromoProducts')
+        .then(products => this.products = products);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .top-margin {
+    margin-top: 10px;
+  }
+  .bottom-margin {
+    margin-bottom: 10px;
+  }
+  .card {
+    margin: 10px;
+  }
+  .title {
+    text-align: center;
+  }
+</style>

src/store/modules/products.js

@@ -709,6 +709,13 @@ const actions = {
       }, 2000);
     })
   },
+  pseudoFetchPromoProducts ({ commit, getters }) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(getters.getProductsList.filter(product => getters.getOverallRatingProductById(product.id) >= 3));
+      }, 2000);
+    })
+  },
   pseudoFetchProductsWithFilter ({ commit, getters }, params) {
       return new Promise((resolve, reject) => {
           setTimeout(() => {