added products list

components/breadcrumb.vue

@@ -0,0 +1,30 @@
+<template>
+ <div class="d-flex mb-1">
+ <nuxt-link to="/" exact>
+ Home
+ </nuxt-link>
+ <span class="breadcrumb-divider">/</span>
+ <nuxt-link to="/Products" exact >
+ Products
+ </nuxt-link>
+ <span class="breadcrumb-divider">/</span>
+ <nuxt-link v-if="subCrumb" :to="'/Products/category/'+subCrumbName" exact >
+ {{subCrumbName}}
+ </nuxt-link>
+ <span v-if="subCrumb" class="breadcrumb-divider">/</span>
+ <span class="text-secondary">
+ {{ activeText }}
+ </span>
+ </div>
+</template>
+<script>
+export default {
+ props: { activeText: String,subCrumb:Boolean,subCrumbName:String },
+};
+</script>
+<style scoped>
+.breadcrumb-divider{
+ color: #6c757d;
+ padding: 0 0.5rem;
+}
+</style>

components/category.vue

@@ -23,7 +23,7 @@ export default {
  border-radius: 8px;
  border: 1px solid #ededed;
  padding: 16px 24px 24px;
- margin-bottom: 24px;
+ margin-bottom: 15px;
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 3%);
  a{
  text-decoration: none;

components/productList.vue

@@ -0,0 +1,95 @@
+<template>
+ <div class="products-list bg-white mb-3">
+ <ul class="d-flex flex-wrap align-content-between mt-1 list-unstyled m-0">
+ <li v-for="item in items" :key="item.name" class="products-list_item">
+ <div
+ class="position-relative d-flex flex-column justify-content-between"
+ >
+ <div v-if="item.special" class="products-list_item_special text-danger text-center mx-2">
+ special sale
+ </div>
+ <div v-else class="no-special"></div>
+ <nuxt-link to="" class="products-list_item_img">
+
+ <img :src="item.img" :alt="item.name"> 
+ </nuxt-link>
+ <div class="d-flex flex-column mx-3">
+ <div class="products-list_item_title text-center mb-2">
+ <nuxt-link to="" class="link-dark">
+ {{item.name}}
+ </nuxt-link>
+ </div>
+ <div :class="['products-list_item_price','d-flex','flex-column','font-weight-bold',{'justify-content-end':!item.special}]">
+ <div v-if="item.special">
+ <span class="badge rounded-pill bg-danger">{{item.discount}}</span>
+ <span class="text-secondary text-decoration-line-through">
+ {{item.realPrice}}
+ </span>
+ </div>
+ <div>{{'تومان'+item.price}}</div>
+ </div>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+</template>
+<script>
+export default {
+ props:{items:Array}
+};
+</script>
+<style lang="scss" scoped>
+.products-list {
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 3%);
+ border: 1px solid #e4e4e4;
+ &_item {
+ flex: 1 0 25%;
+ max-width: 25%;
+ min-height: 370px;
+ & > div {
+ border: 1px solid #ebebeb;
+ border-top: none;
+ border-left: none;
+ padding-bottom: 60px;
+ &:hover {
+ box-shadow: 0 2px 17px 0 rgb(0 0 0 / 10%);
+ }
+ }
+ &_img {
+ height: 200px;
+ position: relative;
+ padding-top: 10px;
+ img{
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+ &_special{
+ height: 29px;
+ line-height: 29px;
+ border-bottom: 1px solid #fb3449;
+ // position: absolute;
+ // left: 50%;
+ }
+ &_title{
+ height: 43px;
+ line-height: 22px;
+ margin-top: 13px;
+ overflow: hidden;
+ a{
+ text-decoration: none;
+ font-size: .857rem;
+ }
+ }
+ &_price{
+ height: 43px;
+ font-size: 1.429rem;
+ }
+ }
+}
+.no-special{
+ margin-top: 29px;
+}
+</style>

pages/Products/Beauty.vue

@@ -4,7 +4,7 @@
  <div class="col-2">
  <asideLayout>
  <div slot="beforeDivider">
- <item name="Digital products" :route="beautyCategories.route" />
+ <item name="Beauty and health" :route="beautyCategories.route" />
  <collapseItem name="Products" :visible=true id="collapse-2" :items="beautyCategories.products" />
  </div>
  </asideLayout>

pages/Products/Beauty/health.vue

@@ -1,5 +1,21 @@
 <template>
  <div>
-
+ <breadcrumb activeText="health" :subCrumb="true" subCrumbName="Beauty" />
+ <productList :items="Products" />
  </div>
-</template>
+</template>
+<script>
+import breadcrumb from "@/components/breadcrumb.vue";
+import productList from "@/components/productList.vue";
+export default {
+ components:{
+ breadcrumb,
+ productList
+ },
+ asyncData({store}) {
+ return {
+ Products:store.state.Beauty.Products['health']
+ }
+ },
+}
+</script>

pages/Products/Beauty/makeup.vue

@@ -1,5 +1,21 @@
 <template>
  <div>
-
+ <breadcrumb activeText="makeup" :subCrumb="true" subCrumbName="Beauty" />
+ <productList :items="Products" />
  </div>
-</template>
+</template>
+<script>
+import breadcrumb from "@/components/breadcrumb.vue";
+import productList from "@/components/productList.vue";
+export default {
+ components:{
+ breadcrumb,
+ productList
+ },
+ asyncData({store}) {
+ return {
+ Products:store.state.Beauty.Products['makeup']
+ }
+ },
+}
+</script>

pages/Products/Digital/laptop.vue

@@ -1,5 +1,21 @@
 <template>
  <div>
-
+ <breadcrumb activeText="laptop" :subCrumb="true" subCrumbName="Digital" />
+ <productList :items="Products" />
  </div>
-</template>
+</template>
+<script>
+import breadcrumb from "@/components/breadcrumb.vue";
+import productList from "@/components/productList.vue";
+export default {
+ components:{
+ breadcrumb,
+ productList
+ },
+ asyncData({store}) {
+ return {
+ Products:store.state.Digital.Products['laptop']
+ }
+ },
+}
+</script>

pages/Products/Digital/mobile.vue

@@ -1,5 +1,21 @@
 <template>
  <div>
-
+ <breadcrumb activeText="mobile" :subCrumb="true" subCrumbName="Digital" />
+ <productList :items="Products" />
  </div>
-</template>
+</template>
+<script>
+import breadcrumb from "@/components/breadcrumb.vue";
+import productList from "@/components/productList.vue";
+export default {
+ components:{
+ breadcrumb,
+ productList
+ },
+ asyncData({store}) {
+ return {
+ Products:store.state.Digital.Products['mobile']
+ }
+ },
+}
+</script>

pages/Products/Fashion.vue

@@ -4,7 +4,7 @@
  <div class="col-2">
  <asideLayout>
  <div slot="beforeDivider">
- <item name="Digital products" :route="fashionCategories.route" />
+ <item name="Fashion and clothing" :route="fashionCategories.route" />
  <collapseItem name="Products" :visible=true id="collapse-2" :items="fashionCategories.products" />
  </div>
  </asideLayout>

pages/Products/Fashion/female.vue

@@ -1,5 +1,21 @@
 <template>
  <div>
-
+ <breadcrumb activeText="female" :subCrumb="true" subCrumbName="Fashion" />
+ <productList :items="Products" />
  </div>
-</template>
+</template>
+<script>
+import breadcrumb from "@/components/breadcrumb.vue";
+import productList from "@/components/productList.vue";
+export default {
+ components:{
+ breadcrumb,
+ productList
+ },
+ asyncData({store}) {
+ return {
+ Products:store.state.Fashion.Products['female']
+ }
+ },
+}
+</script>

pages/Products/Fashion/male.vue

@@ -1,5 +1,21 @@
 <template>
  <div>
-
+ <breadcrumb activeText="male" :subCrumb="true" subCrumbName="Fashion" />
+ <productList :items="Products" />
  </div>
-</template>
+</template>
+<script>
+import breadcrumb from "@/components/breadcrumb.vue";
+import productList from "@/components/productList.vue";
+export default {
+ components:{
+ breadcrumb,
+ productList
+ },
+ asyncData({store}) {
+ return {
+ Products:store.state.Fashion.Products['male']
+ }
+ },
+}
+</script>

pages/Products/House.vue

@@ -4,7 +4,7 @@
  <div class="col-2">
  <asideLayout>
  <div slot="beforeDivider">
- <item name="Digital products" :route="houseCategories.route" />
+ <item name="House products" :route="houseCategories.route" />
  <collapseItem name="Products" :visible=true id="collapse-2" :items="houseCategories.products" />
  </div>
  </asideLayout>

pages/Products/House/cleaning.vue

@@ -1,5 +1,21 @@
 <template>
  <div>
-
+ <breadcrumb activeText="cleaning" :subCrumb="true" subCrumbName="House" />
+ <productList :items="Products" />
  </div>
-</template>
+</template>
+<script>
+import breadcrumb from "@/components/breadcrumb.vue";
+import productList from "@/components/productList.vue";
+export default {
+ components:{
+ breadcrumb,
+ productList
+ },
+ asyncData({store}) {
+ return {
+ Products:store.state.House.Products['cleaning']
+ }
+ },
+}
+</script>

pages/Products/House/video-audio.vue

@@ -1,5 +1,21 @@
 <template>
  <div>
-
+ <breadcrumb activeText="video-audio" :subCrumb="true" subCrumbName="House" />
+ <productList :items="Products" />
  </div>
-</template>
+</template>
+<script>
+import breadcrumb from "@/components/breadcrumb.vue";
+import productList from "@/components/productList.vue";
+export default {
+ components:{
+ breadcrumb,
+ productList
+ },
+ asyncData({store}) {
+ return {
+ Products:store.state.House.Products['video-audio']
+ }
+ },
+}
+</script>