Блок недавно просмотренных товаров

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 <[email protected]>",

src/components/categories/CategoryProducts.vue

@@ -21,6 +21,8 @@
         </div>
       </template>
     </pagination-component>
+
+    <recently-viewed-component />
   </div>
 </template>
 
@@ -31,11 +33,13 @@ import PaginationComponent from '../pagination/Pagination'
 import CategoriesNavigation from '../categories_nav/CategoriesNavigation';
 import CategoryProductsFilter from "./CategoryProductsFilter";
 import brands from "../../store/modules/brands";
+import RecentlyViewedComponent from "../recently_viewed/RecentlyViewed";
 
 export default {
   name: 'products-list-component',
 
   components: {
+    RecentlyViewedComponent,
     CategoryProductsFilter,
     ProductsComponent,
     BreadcrumbsComponent,

src/components/product_detail/ProductDetail.vue

@@ -119,6 +119,8 @@
         <p class="title is-4" style="padding-left: 120px">Similar products:</p>
         <OtherProductComponent :category="product.category" />
       </div>
+
+      <recently-viewed-component />
     </template>
   </section>
 </template>
@@ -129,11 +131,13 @@ import ProductDetailImagesComponent from "./ProductDetailImages";
 import OtherProductComponent from "../other_product/OtherProduct";
 import CategoriesNavigation from "../categories_nav/CategoriesNavigation";
 import Tabs from "../tabs/Tabs";
+import RecentlyViewedComponent from "../recently_viewed/RecentlyViewed";
 
 export default {
   name: "product-detail-component",
 
   components: {
+    RecentlyViewedComponent,
     BreadcrumbsComponent,
     ProductDetailImagesComponent,
     OtherProductComponent,
@@ -207,6 +211,8 @@ export default {
 
         loadingComponent.close();
       });
+
+    this.$store.dispatch("addToViewedProducts", this.product.id);
   },
 
   computed: {

src/components/recently_viewed/RecentlyViewed.vue

@@ -0,0 +1,134 @@
+<template>
+  <div
+    v-if="isLoaded && recentlyViewedProducts.length === 3"
+    class="recently-viewed"
+  >
+    <h3>Недавно просмотренные товары</h3>
+
+    <span
+      @click="clearHistory"
+      class="clear"
+    >
+      Очистить историю
+    </span>
+
+    <div class="products">
+      <div
+        v-for="product in recentlyViewedProducts"
+        :key="product.id"
+        class="product"
+      >
+        <div class="title">
+          {{ product.title }}
+        </div>
+
+        {{ product.description }}
+
+        <router-link
+          :to="{ name: 'product-detail-component', params: { id: product.id }}"
+          class="card-link"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'recently-viewed-component',
+
+  data () {
+    return {
+      isLoaded: false,
+      recentlyViewedProducts: [],
+    };
+  },
+
+  mounted() {
+    this.$store.dispatch('pseudoFetchViewedProducts')
+      .then(products => {
+        this.recentlyViewedProducts = products;
+        this.isLoaded = true;
+      })
+      .catch(error => {
+        console.log(error);
+        this.isLoaded = true;
+      });
+  },
+
+  methods: {
+    clearHistory: function () {
+      this.$store.dispatch('clearViewedProducts');
+      this.recentlyViewedProducts = [];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .recently-viewed {
+    position: relative;
+    margin: 40px 1.5rem;
+  }
+
+  h3 {
+    color: #363636;
+    font-size: 20px;
+  }
+
+  .clear {
+    position: absolute;
+    right: 0;
+    top: 4px;
+    cursor: pointer;
+
+    &:hover {
+      color: #363636;
+    }
+
+    @media (max-width: 500px) {
+      position: inherit;
+    }
+  }
+
+  .products {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin: 8px 0 18px;
+
+    .product {
+      position: relative;
+      box-sizing: border-box;
+      width: 30%;
+      padding: 16px 12px;
+      margin: 12px 0;
+      background: #fff;
+      border: 1px solid #fff;
+      box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+
+      &:hover {
+        border: 1px solid #51bafc;
+      }
+
+      @media (max-width: 500px) {
+        width: 100%;
+      }
+
+      .title {
+        margin: 0 0 12px;
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      a {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+      }
+    }
+  }
+</style>

src/store/modules/products.js

@@ -686,6 +686,9 @@ const getters = {
   getProductById: state => id => {
     return state.find(product => product.id == id);
   },
+  getProductsByIds: state => ids => {
+    return state.filter(product => ids.includes(product.id));
+  },
   getProductImages: state => id => {
     return state.find(product => product.id == id).images;
   },
@@ -702,6 +705,27 @@ const actions = {
       }, 2000);
     })
   },
+  pseudoFetchViewedProducts ({ commit, getters }) {
+    const ids = JSON.parse(localStorage.getItem('recentlyViewed')) || [];
+
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(getters.getProductsByIds(ids));
+      }, 2000);
+    })
+  },
+  addToViewedProducts ({ commit, getters }, id) {
+    let recentlyViewed = JSON.parse(localStorage.getItem('recentlyViewed')) || [];
+
+    if (!recentlyViewed.includes(id)) {
+      recentlyViewed.push(id);
+      recentlyViewed = recentlyViewed.slice(-3);
+      localStorage.setItem('recentlyViewed', JSON.stringify(recentlyViewed));
+    }
+  },
+  clearViewedProducts () {
+    localStorage.removeItem('recentlyViewed');
+  },
   pseudoFetchProducts ({ commit, getters }, id) {
     return new Promise((resolve, reject) => {
       setTimeout(() => {