Skip to content

Commit

Permalink
added discount and electronic and gamer pages and updated Home page
Browse files Browse the repository at this point in the history
  • Loading branch information
mahdi-kheibari committed Aug 20, 2021
1 parent acafaa2 commit 4016ae7
Show file tree
Hide file tree
Showing 10 changed files with 291 additions and 46 deletions.
4 changes: 2 additions & 2 deletions assets/css/aside.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
border-radius: 8px;
}
.active-category {
color: rgba(0, 0, 0, .85);
background-color: #00dc82;
color: rgba(0, 0, 0, .85) !important;
background-color: #00dc82 !important;
}
.btn-toggle {
display: inline-flex;
Expand Down
4 changes: 3 additions & 1 deletion components/aside/item.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
<li class="mb-1">
<nuxt-link
:to="route"
class="btn btn-toggle align-items-center rounded collapsed"
class="btn btn-toggle align-items-center rounded"
exact
exact-active-class="active-category"
>
{{ name }}
</nuxt-link>
Expand Down
12 changes: 11 additions & 1 deletion components/category.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,22 @@
{{key}}
</div>
</nuxt-link>
<template v-if="products2">
<nuxt-link v-for="(i,key) in products2" :key="key" :to="subRoute2+key" class="category-item d-flex flex-column justify-content-center align-items-center mx-4">
<div class="category-item_img">
<img :src="i.cover" :alt="key">
</div>
<div class="font-weight-bold link-dark">
{{key}}
</div>
</nuxt-link>
</template>
</div>
</div>
</template>
<script>
export default {
props:{products:Object,subRoute:String}
props:{products:Object,products2:Object,subRoute:String,subRoute2:String}
}
</script>
<style lang="scss" scoped>
Expand Down
56 changes: 29 additions & 27 deletions components/productList.vue
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
<template>
<div class="products-list bg-white mb-3">
<div v-if="Array.isArray(items)===false" class="d-flex flex-wrap">
<div v-for="(item,key) in items" :key="key" class="d-flex flex-wrap mt-1 m-0">
<div v-for="i in item" :key="i.name" class="products-list_item">
<div
class="position-relative d-flex flex-column justify-content-between"
>
<div v-if="i.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="'/Product/'+key+'/'+i.id" class="products-list_item_img">
<img :src="i.images[0].address" :alt="i.name">
</nuxt-link>
<div class="d-flex flex-column mx-3">
<div class="products-list_item_title text-center mb-2">
<nuxt-link :to="'/Product/'+key+'/'+i.id" class="link-dark">
{{i.name}}
</nuxt-link>
<ul class="d-flex flex-wrap mt-1 m-0 list-unstyled">
<template v-for="(item,key) in items">
<li v-for="i in item" :key="i.name" class="products-list_item">
<div
class="position-relative d-flex flex-column justify-content-between"
>
<div v-if="i.special" class="products-list_item_special text-danger text-center mx-2">
special sale
</div>
<div :class="['products-list_item_price','d-flex','flex-column','font-weight-bold',{'justify-content-end':!i.special}]">
<div v-if="i.special">
<span class="badge rounded-pill bg-danger">{{i.discount}}</span>
<span class="text-secondary text-decoration-line-through">
{{i.realPrice}}
</span>
<div v-else class="no-special"></div>
<nuxt-link :to="'/Product/'+key+'/'+i.id" class="products-list_item_img">
<img :src="i.images[0].address" :alt="i.name">
</nuxt-link>
<div class="d-flex flex-column mx-3">
<div class="products-list_item_title text-center mb-2">
<nuxt-link :to="'/Product/'+key+'/'+i.id" class="link-dark">
{{i.name}}
</nuxt-link>
</div>
<div :class="['products-list_item_price','d-flex','flex-column','font-weight-bold',{'justify-content-end':!i.special}]">
<div v-if="i.special">
<span class="badge rounded-pill bg-danger">{{i.discount}}</span>
<span class="text-secondary text-decoration-line-through">
{{i.realPrice}}
</span>
</div>
<div>{{'تومان'+i.price}}</div>
</div>
<div>{{'تومان'+i.price}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
</template>
</ul>
</div>
<div v-else>
<ul class="d-flex flex-wrap align-items-between mt-1 list-unstyled m-0">
Expand Down
4 changes: 3 additions & 1 deletion pages/Products/category.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@
<collapseItem name="Products" :visible=true id="collapse-1" :items="allCategories" />
</div>
<div slot="afterDivider">
<item name="Special discount" route="/" />
<item name="Special discount" route="Discounts" />
<item name="Recent bestsellers" route="/" />
<item name="Electronic needs" route="Electronic" />
<item name="For gamers" route="forGamer" />
</div>
</asideLayout>
</div>
Expand Down
95 changes: 95 additions & 0 deletions pages/Products/category/Discounts.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<template>
<div class="row">
<section class="col-12 col-sm-10">
<breadcrumb activeText="Special discounts" />
<productList :items="changeProducts ? discountProducts:Products" />
</section>
<section class="col-sm-2">
<asideLayout>
<div slot="beforeDivider">
<div v-for="i in allCategories" :key="i">
<input
type="checkbox"
:id="i"
:value="i"
v-model="checkedCategory"
@change="filtredCategory()"
/>
<label :for="i" 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 {
changeProducts:false,
checkedCategory: [],
};
},
computed: {
allCategories() {
return this.$store.state.allCategories;
},
},
methods:{
filtredCategory(){
const Products=this.Products
const filtredCategory=this.checkedCategory
const filteredProducts={}
if (filtredCategory.length === 0 ) {
this.changeProducts=false
}else{
for (let category of filtredCategory) {
for (let i in Products) {
if (Products[i].some((item)=>item.category===category)) {
filteredProducts[i]=Products[i].filter((item)=>item.category===category)
}
}
}
this.discountProducts=filteredProducts;
this.changeProducts=true
}
}
},
components: {
breadcrumb,
productList,
},
asyncData({ store }) {
const products = {};
function filteredProduct(product,category) {
const Products = product;
for (let key in Products) {
const filtered=Products[key].filter((item)=>
item.special===true
).map((item)=>{
return {
...item,
category:category
}
});
products[key] = filtered;
}
}
const allProducts={
Digital:store.state.Digital.Products,
Fashion:store.state.Fashion.Products,
Beauty:store.state.Beauty.Products,
House:store.state.House.Products
};
for (let key in allProducts) {
filteredProduct(allProducts[key],key);
}
return {
Products: products,
discountProducts:{}
};
},
};
</script>
45 changes: 45 additions & 0 deletions pages/Products/category/Electronic.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<template>
<div>
<section>
<category :products="digitalCategory" subRoute="/Products/Digital/" :products2="houseCategory" subRoute2="/Products/House/" />
</section>
<section>
<breadcrumb activeText="Electronic needs" />
<productList :items="Products" />
</section>
</div>
</template>
<script>
import category from "@/components/category.vue";
import breadcrumb from "@/components/breadcrumb.vue";
import productList from "@/components/productList.vue";
export default {
computed: {
digitalCategory() {
return this.$store.state.categories.allCategories["Digital products"].products;
},
houseCategory() {
return this.$store.state.categories.allCategories["House"].products;
},
},
components: {
category,
breadcrumb,
productList
},
asyncData({store}) {
const products={};
const digitalProducts=store.state.Digital.Products;
const houseProducts=store.state.House.Products;
for ( let key in digitalProducts) {
products[key]=digitalProducts[key]
}
for ( let key in houseProducts) {
products[key]=houseProducts[key]
}
return {
Products:products
}
},
}
</script>
47 changes: 47 additions & 0 deletions pages/Products/category/forGamer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<template>
<div>
<section>
<category :products="digitalCategory" subRoute="/Products/Digital/" :products2="houseCategory" subRoute2="/Products/House/" />
</section>
<section>
<breadcrumb activeText="For gamers" />
<productList :items="Products" />
</section>
</div>
</template>
<script>
import category from "@/components/category.vue";
import breadcrumb from "@/components/breadcrumb.vue";
import productList from "@/components/productList.vue";
export default {
computed: {
digitalCategory() {
const digitalCategory={};
const digitalProducts=this.$store.state.categories.allCategories["Digital products"].products["laptop"];
digitalCategory['laptop']=digitalProducts;
return digitalCategory;
},
houseCategory() {
const houseCategory={};
const houseProducts=this.$store.state.categories.allCategories["House"].products["video-audio"];
houseCategory['video-audio']=houseProducts;
return houseCategory;
},
},
components: {
category,
breadcrumb,
productList
},
asyncData({store}) {
const products={};
const digitalProducts=store.state.Digital.Products['laptop'];
products['laptop']=digitalProducts;
const houseProducts=store.state.House.Products['video-audio'];
products['video-audio']=houseProducts;
return {
Products:products
}
},
}
</script>
Loading

0 comments on commit 4016ae7

Please sign in to comment.