add change

components/BreadCrumb.vue

+<template>
+  <div class=" page-header dark-section">
+    <h3 class="page-subtitle">
+      categories
+    </h3>
+    <h2 class="page-title">
+      BREADCRUMB
+    </h2>
+    <ul class="breadcrumb">
+      <v-breadcrumbs :items="items">
+        <template #divider>
+          <v-icon>mdi-chevron-right</v-icon>
+        </template>
+      </v-breadcrumbs>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: 'BreadCrumb',
+
+  computed: {
+    items () {
+      const items = [{ text: 'Home', disabled: false, href: '/' }]
+      this.$route.matched.forEach((route) => {
+        if (route.name) {
+          items.push({ text: route.name, disabled: false, href: route.path })
+        }
+      })
+
+      return items
+    }
+  }
+}
+</script>
+
+<style scope>
+  .page-header {
+    background-image: url(https://d-themes.com/html/riode/images/shop/page-header-back.jpg);
+    background-color: #3C63A4;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 250px;
+    padding: 3em 1em;
+    background-color: #C8C3BF;
+    background-position: center;
+    background-size: cover;
+    text-align: center;
+    color: #222;
+    width: 100vw;
+    margin-top: 10px;
+}
+.breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    color: #666;
+    font-family: Poppins,sans-serif;
+    font-size: 1.4rem;
+}
+.v-application a {
+    color:  #fff !important;
+}
+.page-title {
+    margin-bottom: 0;
+    text-transform: uppercase;
+    font-size: 4rem;
+    line-height: 1.125;
+    color: #222;
+    color: #fff;
+}
+.page-subtitle {
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    font-size: 2rem;
+    line-height: 1.2;
+    color: #fff;
+}
+</style>

components/DetailModal.vue

+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <v-row
+    justify="center"
+  >
+    <v-dialog
+      v-model="dialogDetail"
+      width="900px"
+      min-height="550px"
+    >
+      <v-row class="flex-row justify-center">
+        <v-col>
+          <v-carousel hide-delimiters :show-arrows="hover" :width="400">
+            <v-carousel-item
+              v-for="(item, i) in images"
+              :key="i"
+              :width="400"
+              :heigh="400"
+              :src="item"
+              cover
+            />
+          </v-carousel>
+        </v-col>
+        <v-col>
+          <v-card-title v-model="item.name" class="modal-title" style="margin-left:-30px">
+            {{ name }}
+          </v-card-title>
+          <v-row class="flex-row align-center">
+            <h3 class="mr-4">
+              Price:
+            </h3>
+            <v-card-title v-model="item.price">
+              {{ price + "$" }}
+            </v-card-title>
+          </v-row>
+          <v-card-text v-model="item.description" class="descrip">
+            {{ description }}
+          </v-card-text>
+          <v-row class="flex-row justify-center align-center">
+            <h3 class="mr-4">
+              Color
+            </h3>
+            <v-row
+              cols="12"
+            >
+              <v-radio-group
+                v-model="color_modal"
+                row
+                mandatory
+                class="square-radio"
+              >
+                <v-radio
+                  label="red"
+                  color="red"
+                  value="red"
+                  class="square-radio"
+                />
+                <v-radio
+                  label="blue"
+                  color="primary"
+                  value="red darken-3"
+                  class="square-radio"
+                />
+                <v-radio
+                  label="yellow"
+                  color="yellow"
+                  value="yellow"
+                  class="square-radio"
+                />
+              </v-radio-group>
+            </v-row>
+          </v-row>
+          <v-row class="flex-row justify-start align-center">
+            <h3 class="mr-4">
+              Size
+            </h3>
+            <v-btn-toggle
+              v-model="size_modal"
+              color="primary"
+              mandatory
+            >
+              <v-btn value="S">
+                S
+              </v-btn>
+              <v-btn value="M">
+                M
+              </v-btn>
+              <v-btn value="L">
+                L
+              </v-btn>
+            </v-btn-toggle>
+          </v-row>
+          <v-row class="mt-7">
+            <v-divider :thickness="2" />
+          </v-row>
+          <v-row cols="12" md="2" class="flex-row align-center">
+            <h3 class="mr-4">
+              Quantity
+            </h3>
+            <v-col md="2">
+              <v-text-field
+                v-model="quantity_modal"
+                type="number"
+              />
+            </v-col>
+            <v-btn color="primary" dense @click="addProductToCard()">
+              Add to card (+)
+            </v-btn>
+            <v-btn
+              plain
+            >
+              <v-icon large>
+                mdi-heart-outline
+              </v-icon>
+            </v-btn>
+          </v-row>
+          <v-row class="mb-1">
+            <v-divider :thickness="2" />
+          </v-row>
+          <v-row>
+            <v-icon class="mx-2">
+              mdi-twitter
+            </v-icon>
+            <v-icon class="mx-2">
+              mdi-facebook
+            </v-icon>
+            <v-icon class="mx-2">
+              mdi-instagram
+            </v-icon>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script>
+import { eventBus } from '~/plugins/eventBus.js'
+
+export default {
+  name: 'DetailModal',
+  props: {
+    status: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    price: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: true
+    },
+    images: {
+      type: Array,
+      required: true
+    },
+    product_id: {
+      type: String,
+      required: true
+    }
+  },
+  data: () => ({
+    selected: '',
+    item: {
+      name: '',
+      price: '',
+      description: ''
+
+    },
+    size_modal: undefined,
+    color_modal: undefined,
+    quantity_modal: ''
+  }),
+  computed: {
+    dialogDetail () {
+      return this.status
+    }
+  },
+  methods: {
+    closeDialog () {
+      this.$props.status = false
+    },
+    addProductToCard () {
+      const fd = new FormData()
+      fd.append('product_id', this.product_id)
+      fd.append('color', this.color_modal)
+      fd.append('size', this.size_modal)
+      fd.append('quantity', this.quantity_modal)
+      this.$axios
+        .post('/carts/add-to-cart', fd, {
+          headers: {
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+          }
+        })
+        .then((response) => {
+          this.$toast.success('Add product successfully!', {
+            duration: 3000
+          })
+          this.$props.status = false
+          eventBus.$emit('add-to-cart', response)
+        })
+        .catch((errors) => {
+          this.$toast.error('something went wrong while trying create!', {
+            duration: 3000
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+::v-deep .v-dialog{
+  background-color: white;
+}
+
+.square-radio .v-input--selection-controls__input {
+  border-radius: 0 !important;
+  width: 24px !important;
+  height: 24px !important;
+}
+.square-radio .v-input--selection-controls__ripple {
+  border-radius: 50% !important;
+}
+.square-radio .v-input--selection-controls__input:checked:before {
+  border-radius: 50% !important;
+}
+
+.modal-title {
+  font-size: 30px;
+  font-weight: bold;
+  margin-left:-30px;
+  margin-top:10px;
+}
+.hex-variant {
+  /* margin-top:0px; */
+}
+.descrip {
+  margin-left:-30px;
+}
+.v-dialog {
+  overflow: hidden;
+}
+
+</style>

pages/home-page/categories/_id.vue

+<!-- eslint-disable vue/no-v-for-template-key -->
+<!-- eslint-disable vue/html-end-tags -->
+<!-- eslint-disable vue/no-unused-vars -->
+<template>
+  <div>
+    <BreadCrumb :items="breadcrumbItems" />
+    <v-container class="pa-0">
+      <v-row class="d-flex align-center pl-2 mt-2">
+        <v-col>
+          <v-hover v-slot="{ hover }">
+            <v-btn outlined :style="{ 'background-color': hover ? '#1976d2' : '#f5f5f5','color':hover ? '#f5f5f5' : 'black' }">
+              FILTER
+            </v-btn>
+          </v-hover>
+        </v-col>
+      </v-row>
+      <v-row class="pt-5 pb-5">
+        <v-col
+          v-for="(item, i) in pagedCards"
+          :key="i"
+          cols="12"
+          md="3"
+        >
+          <v-hover
+            v-slot="{ hover }"
+            :elevation="hover ? 12 : 2"
+            :class="{ 'on-hover': hover }"
+          >
+            <v-card
+              :elevation="hover ? 16 : 2"
+              :class="{ 'on-hover': hover }"
+              class="mx-auto pa-2 ma-3"
+              max-width="280"
+              link
+            >
+              <div>
+                <v-img
+                  :src="item.images[0]"
+                  height="250px"
+                  cover
+                />
+              </div>
+              <v-card-title class="d-flex justify-center">
+                {{ item.name }}
+              </v-card-title>
+              <v-card-subtitle class="d-flex justify-center">
+                {{ item.price + "$" }}
+              </v-card-subtitle>
+              <v-card-actions class="d-flex justify-center">
+                <v-btn
+                  :class="{ 'show-btns': hover }"
+                  icon
+                  @click="getDataItem"
+                >
+                  <v-icon
+                    :class="{ 'show-btns': hover }"
+                  >
+                    mdi-cart
+                  </v-icon>
+                </v-btn>
+                <v-btn
+                  :class="{ 'show-btns': hover }"
+                  icon
+                  @click="addToWishlish(item)"
+                >
+                  <v-icon
+                    :class="{ 'show-btns': hover }"
+                  >
+                    mdi-heart
+                  </v-icon>
+                </v-btn>
+                <v-btn
+                  :class="{ 'show-btns': hover }"
+                  icon
+                  @click="openDialogDetail(); getDataItem(item)"
+                >
+                  <v-icon
+                    :class="{ 'show-btns': hover }"
+                  >
+                    mdi-magnify
+                  </v-icon>
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-hover>
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="d-flex align-center justify-space-between pl-2 mt-2">
+        <div class="text-center">
+          <v-pagination v-model="currentPage" :total-visible="totalVisiblePages" :length="totalPages" class="my-3" circle>
+            <template #prev="{ active, disabled }">
+              <v-btn small class="mr-2" :disabled="disabled" @click="prevPage">
+                <v-icon small>
+                  mdi-chevron-left
+                </v-icon>
+              </v-btn>
+            </template>
+            <template #next="{ active, disabled }">
+              <v-btn small class="ml-2" :disabled="disabled" @click="nextPage">
+                <v-icon small>
+                  mdi-chevron-right
+                </v-icon>
+              </v-btn>
+            </template>
+          </v-pagination>
+        </div>
+      </v-row>
+    </v-container>
+    <DetailModal
+      :status="activeDetail"
+      :name="productModal.name"
+      :price="productModal.price"
+      :description="productModal.description"
+      :images="productModal.images"
+      :product_id="productModal.id"
+      @close="activeDetail=false"
+    />
+  </div>
+</template>
+
+<script>
+import BreadCrumb from '@/components/BreadCrumb'
+import DetailModal from '@/components/DetailModal'
+import { eventBus } from '~/plugins/eventBus.js'
+
+export default {
+  layout: 'user',
+  component: {
+    BreadCrumb,
+    DetailModal
+  },
+  data: () => {
+    return {
+      activeDetail: false,
+      breadcrumbItems: [
+        {
+          text: 'Home',
+          disabled: false,
+          href: '/home'
+        },
+        {
+          text: 'Element',
+          disabled: false,
+          href: '/'
+        },
+        {
+          text: 'Post',
+          disabled: false,
+          href: '/posts'
+        }
+      ],
+      icons: ['mdi-cart', 'mdi-heart', 'mdi-magnify'],
+      products: [],
+      page: 1,
+      productModal: {
+        name: '',
+        price: '',
+        description: '',
+        images: []
+      },
+      profile: {
+        name: '',
+        price: '',
+        description: ''
+      },
+      itemsPerPage: 8,
+      currentPage: 1,
+      wishlish: []
+    }
+  },
+  computed: {
+    totalPages () {
+      return Math.ceil(this.products.length / this.itemsPerPage)
+    },
+    pagedCards () {
+      const startIndex = (this.currentPage - 1) * this.itemsPerPage
+      const endIndex = startIndex + this.itemsPerPage
+      return this.products.slice(startIndex, endIndex)
+    },
+    totalVisiblePages () {
+      return Math.min(this.totalPages, 7)
+    }
+  },
+  created () {
+    this.getProductByCategoryId()
+  },
+  methods: {
+    async getProductByCategoryId () {
+      const resp = await this.$axios.get(`/guest/categories/products-by-category-id/${this.$route.params.id}`, {
+        headers: {
+          Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+        }
+      })
+        .then(response => (this.products = response.data.data[0].products))
+        .catch(function (error) {
+          console.log(error)
+        })
+      console.log(resp[0].products)
+      console.log(this.products[0].images[0])
+    },
+    openDialogDetail () {
+      this.activeDetail = false
+      this.activeDetail = true
+    },
+    getDataItem (item) {
+      console.log(item)
+      this.productModal = item
+      console.log(this.productModal.name)
+    },
+    saveProfile (data) {
+      this.profile = this.productModal
+    },
+    nextPage () {
+      this.currentPage++
+    },
+    prevPage () {
+      this.currentPage--
+    },
+    addToWishlish (item) {
+      const fd = new FormData()
+      fd.append('product_id', item.id)
+      this.$axios
+        .post('/wish-list/add-to-wish-list',
+          fd,
+          {
+            headers: {
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+            }
+          })
+        .then((response) => {
+          console.log(response)
+          this.$toast.success('Add product successfully!', {
+            duration: 2000
+          })
+          eventBus.$emit('add-to-wish-list', response)
+        })
+        .catch((errors) => {
+          this.$toast.error('something went wrong!', {
+            duration: 2000
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.v-card {
+    transition: opacity .4s ease-in-out;
+  }
+
+  .v-card:not(.on-hover) {
+    opacity: 0.9;
+  }
+
+  .show-btns {
+    color: #1976d2 !important;
+  }
+  .mdi-fast-forward::before {
+    content: "\F0211";
+}
+.mdi:before, .mdi-set {
+    display: inline-block;
+    font: normal normal normal 24px/1 "Material Design Icons";
+    font-size: inherit;
+    text-rendering: auto;
+    line-height: inherit;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+::before, ::after {
+    text-decoration: inherit;
+    vertical-align: inherit;
+}
+*, ::before, ::after {
+    background-repeat: no-repeat;
+    box-sizing: inherit;
+}
+.v-btn--icon.v-size--default .v-icon, .v-btn--fab.v-size--default .v-icon {
+    height: 24px;
+    font-size: 24px;
+    width: 24px;
+}
+.v-btn > .v-btn__content .v-icon {
+    color: rgba(255, 255, 255, 1);
+}
+</style>

plugins/eventBus.js

+import Vue from 'vue'
+export const eventBus = new Vue()

store/category.js

+export const state = () => ({
+  currentCategory: ''
+})
+
+export const mutations = {
+  setCurrentCategory (state, category) {
+    state.currentCategory = category
+  }
+}