added special brands page and updated Home page

pages/Products/category.vue

@@ -8,9 +8,9 @@
  </div>
  <div slot="afterDivider">
  <item name="Special discount" route="Discounts" />
- <item name="Recent bestsellers" route="/" />
  <item name="Electronic needs" route="Electronic" />
  <item name="For gamers" route="forGamer" />
+ <item name="Special brands" route="Brands" />
  </div>
  </asideLayout>
  </div>

pages/Products/category/Brands.vue

@@ -0,0 +1,129 @@
+<template>
+ <div class="row">
+ <section class="col-12 col-sm-10">
+ <breadcrumb activeText="Special brands" />
+ <div class="brand-swiper mb-3 py-1 bg-white" v-for="(item,key) in (changeBrands) ? specialBrands:brands" :key="key">
+ <div class="d-flex justify-content-center align-items-baseline mb-2" :id="key">
+ <div class="brand-swiper_logo mt-2 mx-1">
+ <img :src="'/images/brand-slider/'+key+'.jpg'" :alt="key" class="rounded">
+ </div>
+ <h4>{{key}}</h4>
+ </div>
+ <productList :items="item" />
+ </div>
+ </section>
+ <section class="col-sm-2">
+ <asideLayout>
+ <div slot="beforeDivider">
+ <div v-for="i in allBrands" :key="i">
+ <input
+ type="checkbox"
+ :value="i"
+ v-model="checkedBrands"
+ @change="filteredCategory()"
+ />
+ <label class="form-label">{{ i }}</label>
+ </div>
+ </div>
+ </asideLayout>
+ </section>
+ </div>
+</template>
+<script>
+import breadcrumb from "@/components/breadcrumb.vue";
+import productList from "@/components/productList.vue";
+export default {
+ data() {
+ return {
+ changeBrands:false,
+ checkedBrands:[]
+ };
+ },
+ methods:{
+ filteredCategory(){
+ const brands=this.brands
+ const checkedBrands=this.checkedBrands
+ if (checkedBrands.length === 0 ) {
+ this.changeBrands=false
+ }else{
+ this.specialBrands={}
+ for (let Brand of checkedBrands) {
+ this.specialBrands[Brand]=brands[Brand];
+ }
+ this.changeBrands=true
+ }
+ }
+ },
+ components: {
+ breadcrumb,
+ productList
+ },
+ asyncData({ store }) {
+ const allBrands=store.state.categories.specialBrands;
+ const allProducts={
+ Digital:store.state.Digital.Products,
+ Fashion:store.state.Fashion.Products,
+ Beauty:store.state.Beauty.Products,
+ House:store.state.House.Products
+ };
+ const brands = {};
+ for (let i of allBrands) {
+ brands[i]={}
+ function filteredProduct(Products) {
+ for (let key in Products) {
+ const filtered=Products[key].filter((item)=>
+ item.brand===i
+ );
+ brands[i][key] = filtered;
+ }
+ }
+ for (let key in allProducts) {
+ filteredProduct(allProducts[key]);
+ }
+ }
+ return {
+ brands,
+ allBrands,
+ specialBrands:{}
+ };
+ },
+ scrollToTop: true
+// fetch({query}){
+// this.checkedBrands=[query.brand];
+// console.log(this.checkedBrands);
+// }
+};
+</script>
+<style lang="scss" scoped>
+.brand-swiper{
+ width: 100%;
+ height: 490px;
+ position: relative;
+ border-radius: 16px;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+ overflow-y: scroll;
+ &::-webkit-scrollbar{
+ width: 10px;
+ }
+ &::-webkit-scrollbar-track{
+ background: transparent;
+ }
+ &::-webkit-scrollbar-thumb{
+ border-radius: 50px;
+ background: rgba(204, 204, 204, 0.705);
+ }
+ &::-webkit-scrollbar-button{
+ visibility: hidden;
+ }
+ &_logo{
+ width: 70px;
+ height: 40px;
+ img{
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ object-position: center;
+ }
+ }
+}
+</style>

pages/index.vue

@@ -57,24 +57,22 @@
  <h3 class="font-weight-bold bestsellers-title d-inline m-2">
  Recent bestsellers
  </h3>
- <nuxt-link to="" class="btn btn-outline-success me-1">
- See all
- </nuxt-link> 
  </div>
  <secondSwiper width="100%" height="225px">
- <div
- v-for="i in bestsellersSlider"
+ <nuxt-link
+ v-for="i in bestSellerSlider"
  :key="i.name"
- class="swiper-slide flex-column mt-1"
+ :to="'/Product/'+i.category+'/'+i.id"
+ class="swiper-slide flex-column mt-1 link-dark text-decoration-none"
  >
- <img :src="i.address" :alt="i.name" />
+ <img :src="i.images[0].address" :alt="i.name" />
  <p class="text-right w-100 bestsellers-name">
  {{ i.name }}
  </p>
  <span>
  {{ i.price }}
  </span>
- </div>
+ </nuxt-link>
  </secondSwiper>
  </section>
  <section
@@ -84,18 +82,19 @@
  <h3 class="font-weight-bold brands-title d-inline m-2">
  Special brands
  </h3>
- <nuxt-link to="" class="btn btn-outline-success me-1">
+ <nuxt-link to="/Products/category/Brands" class="btn btn-outline-success me-1">
  See all
  </nuxt-link> 
  </div>
  <secondSwiper width="100%" height="210px" class="Brands">
- <div
+ <nuxt-link
  v-for="i in SpecialBrandsSlider"
  :key="i.name"
+ :to="'Products/category/Brands#'+i.name"
  class="swiper-slide mt-1"
  >
  <img :src="i.address" :alt="i.name" />
- </div>
+ </nuxt-link>
  </secondSwiper>
  </section>
  </div>
@@ -112,6 +111,7 @@ export default {
  },
  asyncData({ store }) {
  const products = [];
+ const bestProducts=[];
  function filteredProduct(product) {
  const Products = product;
  for (let key in Products) {
@@ -124,6 +124,14 @@ export default {
  }
  });
  products.push(...filtered);
+
+ const best=Products[key].map((item)=>{
+ return {
+ ...item,
+ category:key
+ }
+ });
+ bestProducts.push(...best);
  } 
  }
  const allProducts={
@@ -135,15 +143,20 @@ export default {
  for (let key in allProducts) {
  filteredProduct(allProducts[key]);
  }
+
  const discountSlider=[]
  for (let step = 0; step < 3; step++) {
  discountSlider.push(products[Math.floor(Math.random()*products.length)]);
  }
+ const bestSellerSlider=[]
+ for (let step = 0; step < 8; step++) {
+ bestSellerSlider.push(bestProducts[Math.floor(Math.random()*bestProducts.length)]);
+ }
  return {
  discountSlider,
+ bestSellerSlider,
  mainSlider: store.getters.mainSlider,
  otherSliderTitle: store.getters.otherSliderTitle,
- bestsellersSlider: store.getters.bestsellersSlider,
  SpecialBrandsSlider: store.getters.SpecialBrandsSlider,
  };
  },

router.scrollBehavior.js

@@ -0,0 +1,8 @@
+export default function (to, from, savedPosition) {
+ if (savedPosition) {
+ return savedPosition
+ }
+ if (to.hash) {
+ return {selector: to.hash}
+ }
+ }

store/Fashion.js

@@ -41,7 +41,7 @@ export const state = () => ({
  special:true,
  discount:"78%",
  realPrice:"1,529,000",
- brand:"Xiaomi"
+ brand:"LC Waikiki"
  },
  ],
  male:[

store/categories/state.js

@@ -1,4 +1,5 @@
 export default () => ({
+ specialBrands:["Xiaomi","Samsung","Adidas","Sony"],
  allCategories:{
  "Digital products":
  {

store/index.js

@@ -75,28 +75,20 @@ export const state = () => ({
  ],
  SpecialBrandsSlider: [
  {
- name: "HUAWEI",
- address: '/images/brand-slider/brand-1.jpg'
+ name: "Xiaomi",
+ address: '/images/brand-slider/Xiaomi.jpg'
  },
  {
- name: "SAMAUNG",
- address: '/images/brand-slider/brand-2.jpg'
+ name: "Samsung",
+ address: '/images/brand-slider/Samsung.jpg'
  },
  {
- name: "CASIO",
- address: '/images/brand-slider/brand-3.jpg'
+ name: "Adidas",
+ address: '/images/brand-slider/Adidas.jpg'
  },
  {
- name: "Panasonic",
- address: '/images/brand-slider/brand-4.jpg'
- },
- {
- name: "GPlus",
- address: '/images/brand-slider/brand-5.jpg'
- },
- {
- name: "NOKIA",
- address: '/images/brand-slider/brand-6.jpg'
+ name: "Sony",
+ address: '/images/brand-slider/Sony.jpg'
  },
  ]