Skip to content

Instantly share code, notes, and snippets.

@jagroop
Last active Jul 18, 2019
Embed
What would you like to do?
<template>
<section>
<div class="custom-sel-outer">
<div class="custom-sel">
<select v-model="selectedClient" @change="SelectedCustomerId($event)">
<option value="none">Select Customer</option>
<option v-for="(customer, index) in customers" v-bind:value="{ id: customer.KUNNR, name: customer.COLONIA}">{{customer.COLONIA}}</option>
</select>
</div>
</div>
<div class="cart-sec">
<i class="fa fa-shopping-cart"></i>
<div id="cd-cart">
<ul>
<div v-if="inCartItems.length > 0">
<li v-for="inCartItem of inCartItems">
{{ inCartItem.MATNR }} <span>{{ inCartItem.qty }}</span>
</li>
<button class="check-btn btn" @click="checkCustomerId()">Go to Checkout</button>
</div>
<div v-else>
<li>Your Cart is Empty</li>
</div>
</ul>
</div>
</div>
<!-- {{ inCartItems }} -->
<div class="for-table-ids" v-if="selectedClient && selectedClient !== 'none'">
<span>Client's Name : {{ selectedClient.name }}</span>
<span>Client Id : {{ selectedClient.id }}</span>
</div>
<table class="table table-striped custom-table">
<thead>
<tr>
<th>LINEA</th>
<th>MATNR</th>
<th>PRDHA2</th>
<th>TYPE</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr v-for="(product, index) in products">
<td>{{ product.LINEA }}</td>
<td>{{ product.MATNR }}</td>
<td>{{ product.PRDHA2 }}</td>
<td>{{ product.TYPE }}</td>
<td>
<div class="for-table-plus">
<button type="button" class="button hollow circle" data-quantity="minus" data-field="quantity" @click="decQty(index)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
<input class="input-group-field" type="number" name="quantity" v-bind:value="product.qty" v-bind:id="index">
<button type="button" class="button hollow circle" data-quantity="plus" data-field="quantity" @click="incQty(index)">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</template>
<style scoped>
.custom-table td input{width:70px;padding:1px 6px;text-align:center}#cd-cart ul{max-width:100%;background:#fff;list-style:none;padding:15px 20px;width:100%}.cart-sec{position:relative;width:20px;height:20px;background:#fff;float:right;top:-42px;right:10px}div#cd-cart{position:absolute;top:20px;right:0;width:220px;display:none}.cart-sec:hover div#cd-cart{display:block}.cart-sec i{font-size:18px}#cd-cart li span{float:right}.check-btn{background:#53a9d8;padding:6px;width:100%;border-radius:4px;display:block;margin-top:10px;color:#fff;text-align:center;cursor:pointer}.custom-table button.button.hollow.circle i{font-size:8px;border:solid 2px #fff;border-radius:20px;width:16px;height:16px;line-height:12px}.custom-table button.button.hollow.circle{width:27px;padding:0 0 2px 1px;border:none;background:#3ea8d8;color:#fff;height:27px}.custom-sel{position:relative;display:table}.custom-sel:after{position:absolute;content:"";top:14px;right:10px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #3ea8d8;pointer-events:none}.custom-sel select{padding:6px 30px 6px 10px;background:#fff;border:solid 1px #3ea8d8;border-radius:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.for-table-plus{display:flex}.for-table-ids{display:flex;flex-grow:1;width:100%;background:#d8d9da;padding:5px 10px}.for-table-ids span{margin:0 20px 0 0;font-size:17px;letter-spacing:1px}.custom-sel-outer{padding:10px;background:#fff}.custom-sel-outer{padding:10px;background:#fff}
</style>
<script>
import axios from 'axios';
import Cookies from 'js-cookie';
export default {
layout: 'dashboard',
name: 'dashboard',
middleware: 'auth',
mounted() {
this.fetchProducts();
this.fetchClients();
this.getCartData();
},
data: () => {
return {
cart:[],
CartItems:[],
CartItemsUpdated:[],
cartItemsIds:[],
products: [],
customers:[],
inCart:[],
errors: [],
boxTwo: '',
details:[],
selectedClient: null,
Id: '',
currentPage: 1,
perPage: 15,
totalRows: 0,
i: 0,
searchKey: '',
}
},
computed: {
inCartItems() {
return this.products.filter(function(product){
return product.qty > 0;
});
}
},
methods: {
fetchProducts(ctx, callback){
this.$axios.get(`products`, this.data)
.then(response => {
// JSON responses are automatically parsed.
this.products = response.data.data;
})
.catch(e => {
this.errors.push(e)
})
},
fetchClients(ctx, callback){
this.$axios.get(`clients`)
.then(response => {
this.customers = response.data.data;
// console.log(this.customers);
})
.catch(e => {
this.errors.push(e)
})
},
SelectedCustomerId(event) {
/*Update client id on select customer from dropdown.*/
//this.selectedClient = {id: this.selectedClient.id, name: this.selectedClient.name}
var cartItem = {
'client_id': this.selectedClient.id,
'client_name': this.selectedClient.name
}
this.$axios.post('cart/client_update',cartItem)
.then(function (response) {
})
.catch(e => {
this.error = e.response;
})
},
checkCustomerId(){
if(this.selectedClient.id == undefined || this.selectedClient.id == 'none')
{
alert("Please Select Customer")
return false;
}
else{
this.$router.push('/dashboard/checkout')
}
},
getCartData()
{
const inCartCookie = Cookies.get('in_cart_items');
if(typeof inCartCookie !== 'undefined') {
this.inCartItems = JSON.parse(inCartCookie);
}
},
incQty(index) {
this.products[index].qty++;
Cookies.set('in_cart_items', this.inCartItems);
},
decQty(index) {
if(this.products[index].qty <= 0) {
return;
}
this.products[index].qty--;
Cookies.set('in_cart_items', this.inCartItems);
}
}
};
</script>
@jagroop

This comment has been minimized.

Copy link
Owner Author

@jagroop jagroop commented Jul 18, 2019

const inCartCookie = Cookies.get('in_cart_items');
  if(typeof inCartCookie !== 'undefined') {
    this.in_cart_items = JSON.parse(inCartCookie);
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment