Skip to content

Commit

Permalink
Add to cart feature added
Browse files Browse the repository at this point in the history
  • Loading branch information
@mahdi-kheibari
mahdi-kheibari committed Aug 24, 2021
1 parent 3fcb35c commit 7a2d96f
Show file tree
Hide file tree
Showing 19 changed files with 416 additions and 107 deletions.
303 changes: 271 additions & 32 deletions components/shared/appHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,67 +27,306 @@
</b-button>
</b-nav-item>
<b-nav-item href="#">
<b-button variant="outline-success">
<b-icon icon="cart"></b-icon>
cart
</b-button>
<div class="shop-cart">
<b-button
v-b-modal.modal-center
variant="outline-success"
class="shop-cart-btn"
>
<b-icon icon="cart"></b-icon>
<span>cart</span>
<span v-if="getItems.length>0" class="badge rounded-pill bg-danger">
{{getItems.length}}
</span>
</b-button>
<div class="shop-cart-info bg-white p-3">
<div class="d-flex justify-content-between pb-1">
<span class="text-dark">0 Product</span>
<span v-b-modal.modal-center class="text-info"
>View cart</span
>
</div>
<hr class="text-secondary" />
<ul class="list-unstyled">
<li v-for="item in getItems" :key="item.id">
<nuxt-link
:to="'/Product/'+item.category+'/'+item.id"
class="d-flex justify-content-between align-items-start my-1 link-dark text-decoration-none"
>
<div class="shop-cart-info-img h-100 align-self-center">
<img
:src="item.images[0].address"
:alt="item.name"
/>
</div>
<div class="shop-cart-info-title">
<span class="mb-1">
{{item.name}}
</span>
</div>
</nuxt-link>
<div class="d-flex justify-content-between">
<span class="text-secondary">count : {{ item.count}}</span>
<b-icon icon="trash" class="text-danger" @click="deleteItem(item.id)"></b-icon>
</div>
<hr class="text-secondary" />
</li>
</ul>
<div class="d-flex justify-content-between my-2 text-dark">
<span>Total</span>
<span v-if="getItems.length>0">{{getTotal}} toman</span>
</div>
</div>
</div>
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<b-modal id="modal-center" size="xl" scrollable centered>
<template slot="modal-header">
<h5 class="modal-title">Shop Cart</h5>
<button
class="close btn align-self-start"
@click="hideModal('modal-center')"
>
x
</button>
</template>
<div class="container" v-if="getItems.length > 0">
<div class="container px-3 my-5 clearfix">
<!-- Shopping cart table -->
<div class="table-responsive">
<table class="table table-bordered m-0">
<thead>
<tr>
<!-- Set columns width -->
<th class="text-center py-3 px-4" style="min-width: 400px;">Product Name &amp; Details</th>
<th class="text-right py-3 px-4" style="width: 100px;">Price</th>
<th class="text-center py-3 px-4" style="width: 120px;">Quantity</th>
<th class="text-right py-3 px-4" style="width: 100px;">Total</th>
<th class="text-center align-middle py-3 px-0" style="width: 40px;">
<button class="btn p-0" title="Delete all items">
<b-icon icon="trash" class="text-danger" @click="deleteAll"></b-icon>
</button>
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in getItems" :key="item.id">
<td class="p-4">
<nuxt-link :to="'/Product/'+item.category+'/'+item.id" class="d-flex align-items-center link-dark text-decoration-none">
<img :src="item.images[0].address" class="d-block ui-w-40 ui-bordered mr-4" alt="">
<span class="mx-auto">{{item.name}}</span>
</nuxt-link>
</td>
<td class="text-right font-weight-semibold align-middle p-4">{{item.price}}</td>
<td class="align-middle p-4"><input type="number" min="1" class="form-control text-center" :value="item.count" @change="changeCount($event,item.id)"></td>
<td class="text-right font-weight-semibold align-middle p-4">{{item.total}}</td>
<td class="text-center align-middle px-0"><button class="btn close text-danger" @click="deleteItem(item.id)">x</button></td>
</tr>
</tbody>
</table>
</div>
<!-- / Shopping cart table -->
</div>
</div>
<div class="container min-height-350" v-else>
<div class="alert alert-warning">
Your cart is empty
</div>
</div>
<template v-if="getItems.length > 0" slot="modal-footer">
<div class="w-100 d-flex justify-content-between align-items-center">
<div class="d-flex">
<label class="close text-muted font-weight-normal m-0">Total price</label>
<div class="close"> : <strong> {{getTotal}} </strong> toman</div>
</div>
<div class="d-flex">
<button type="button" class="btn btn-secondary" @click="hideModal('modal-center')">Back to shopping</button>
<button type="button" class="btn btn-primary ms-2">Checkout</button>
</div>
</div>
</template>
</b-modal>
<b-navbar type="light" variant="secondary" class="py-0">
<b-button v-b-toggle.sidebar-1 class="text-light ms-2">
<b-button v-b-toggle.sidebar-1 class="text-light ms-2">
<b-icon icon="list"></b-icon><span>All</span>
</b-button>
</b-button>
</b-navbar>
<b-sidebar id="sidebar-1" backdrop-variant="dark" backdrop aria-labelledby="sidebar-no-header-title" no-header shadow>
<b-sidebar
id="sidebar-1"
backdrop-variant="dark"
backdrop
aria-labelledby="sidebar-no-header-title"
no-header
shadow
>
<template #default="{ hide }">
<div
class="d-flex flex-column flex-shrink-0 p-3 bg-light"
style="width: 280px;"
class="d-flex flex-column flex-shrink-0 p-3 bg-light"
style="width: 280px;"
>
<div id="sidebar-no-header-title" class="d-flex justify-content-between">
<nuxt-link
to="/"
class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"
>
<NuxtLogo />
&nbsp;
<span>E-Shop</span>
</nuxt-link>
<b-icon icon="x" @click="hide" variant="secondary" font-scale="3.5" class="btn"></b-icon>
</div>
<hr />
<ul class="nav nav-pills flex-column mb-auto">
<div
id="sidebar-no-header-title"
class="d-flex justify-content-between"
>
<nuxt-link
to="/"
class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"
>
<NuxtLogo />
&nbsp;
<span>E-Shop</span>
</nuxt-link>
<b-icon
icon="x"
@click="hide"
variant="secondary"
font-scale="3.5"
class="btn"
></b-icon>
</div>
<hr />
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<nuxt-link to="/" exact exact-active-class="active" class="nav-link link-dark" aria-current="page">
<nuxt-link
to="/"
exact
exact-active-class="active"
class="nav-link link-dark"
aria-current="page"
>
<b-icon icon="house-door"></b-icon>
<span>Home</span>
</nuxt-link>
</nuxt-link>
</li>
<li>
<nuxt-link to="/Products" exact exact-active-class="active" class="nav-link link-dark">
<nuxt-link
to="/Products"
exact
exact-active-class="active"
class="nav-link link-dark"
>
<b-icon icon="box-seam"></b-icon>
<span>All Products</span>
</nuxt-link>
</nuxt-link>
</li>
<li>
<nuxt-link to="/about" exact exact-active-class="active" class="nav-link link-dark">
<nuxt-link
to="/about"
exact
exact-active-class="active"
class="nav-link link-dark"
>
<b-icon icon="info-circle"></b-icon>
<span>About Us</span>
</nuxt-link>
</nuxt-link>
</li>
</ul>
</ul>
</div>
</template>
</b-sidebar>
</header>
</template>
<style scoped>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
}
},
methods: {
hideModal(id) {
this.$bvModal.hide(id);
},
deleteItem(id){
this.$store.dispatch('Cart/deleteItem',{
productId:id,
});
this.$store.commit('Cart/changeSumTotal');
},
deleteAll(){
this.$store.dispatch('Cart/deleteAll');
this.$store.commit('Cart/changeSumTotal');
},
changeCount(e,id){
this.$store.commit('Cart/changeCount',{
value:e.target.value,
id
});
this.$store.commit('Cart/changeSingleTotal',id);
this.$store.commit('Cart/changeSumTotal');
}
},
computed:{
...mapGetters("Cart",["getItems"]),
...mapGetters("Cart",["getTotal"]),
count(){
return this.$store.state.Cart.count;
}
}
};
</script>
<style lang="scss" scoped>
.nuxt-logo {
height: 25px !important;
}
.header{
box-shadow: 0 7px 8px 0 rgb(0 0 0 / 4%);
.header {
box-shadow: 0 7px 8px 0 rgb(0 0 0 / 4%);
}
.shop-cart {
position: relative;
&-info {
display: none;
position: absolute;
right: 0;
top: calc(100% - 3px);
z-index: 101;
width: 300px;
border-radius: 8px;
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 20%);
&-img {
width: 85px;
height: 85px;
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
}
&-title {
span {
font-size: 0.857rem !important;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
&:hover &-info {
display: block;
}
}
.close {
font-size: 1.5rem;
}
.ui-w-40 {
width: 80px !important;
height: auto;
}
.ui-product-color {
display: inline-block;
overflow: hidden;
margin: .144em;
width: .875rem;
height: .875rem;
border-radius: 10rem;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
vertical-align: middle;
}
</style>
30 changes: 27 additions & 3 deletions components/singleProduct.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@
<br /><br />
<span>
<label>Count :</label>
<input type="number" class="search_box" v-model="count" />
<button type="button" class="btn btn-danger cart">
<input type="number" min="1" class="search_box" v-model="count"/>
<button type="button" class="btn btn-danger cart" @click="addToCart">
Add to cart
</button>
</span>
Expand Down Expand Up @@ -87,12 +87,36 @@ export default {
data() {
return {
currentImg:this.product.images[0].address,
count: 1
count:1
}
},
methods:{
setCurrent(address){
this.currentImg=address;
},
addToCart(){
this.product['category']=this.subCrumbName;
this.$store.dispatch('Cart/addItem',{
product:this.product,
count:this.count,
}).then((res)=>{
if(res){
this.$store.commit('Cart/changeSumTotal');
this.$toast.open({
message: "Successfully added to cart",
type: "success",
duration: 3000,
position:"top-right"
})
}else{
this.$toast.open({
message: "This product is in your shopping cart",
type: "warning",
duration: 3000,
position:"top-right"
})
}
});
}
},
components:{
Expand Down
Loading

0 comments on commit 7a2d96f

Please sign in to comment.