248 lines
10 KiB
Vue
248 lines
10 KiB
Vue
<template>
|
|
<div class="quick_order section section_dark">
|
|
<h1 class="contact-page__title title">Passez vos Commandes</h1>
|
|
<div class="quick_order__rangeslist wrapper">
|
|
<div class="col" v-for="i in 2" :key="i">
|
|
<div class="quick_order__range section_medium" v-for="range in ranges[i-1]">
|
|
<div class="quick_order__handle btn">
|
|
<span>{{ range.name }}</span>
|
|
<div class="quick_order__infos">
|
|
<span>{{ currencyFormatter(range.totalTTC) }}</span>
|
|
<svg width="20" height="25">
|
|
<use xlink:href="#handle1"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="range_products">
|
|
<div class="product" v-for="product in range.products">
|
|
<div class="productname">
|
|
<a class=""
|
|
:href="fullProductRoute(product.slug)"
|
|
:title="product.name">{{ product.name }}</a>
|
|
</div>
|
|
<div class="unitprice">{{ currencyFormatter(product.calculatedPrices.discountedPriceTtc) }}</div>
|
|
<div class="product-card-cta">
|
|
<div id="data-produit-acheter" class="add-to-cart">
|
|
<div class="pl-button-counter__action">
|
|
<button type="button" class="btn no-after" @click="addtocart(product.id,-1,product.qty)">
|
|
<svg aria-hidden="true" class="svg-icon svg-icon--s">
|
|
<use xlink:href="#i10"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="">
|
|
{{ product.qty }}
|
|
</div>
|
|
<button type="button" class="btn no-after" @click="addtocart(product.id,1,product.qty)">
|
|
<svg aria-hidden="true" class="svg-icon svg-icon--s">
|
|
<use xlink:href="#i09"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{{ currencyFormatter(product.totalTTC) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="quick_order__footer wrapper">
|
|
<span>Total {{ currencyFormatter(quickorder_totalTTC) }}</span>
|
|
<button class="btn" @click="addtopanier()">Ajouter ma selection au panier</button>
|
|
</div>
|
|
<div class="svg-icons-sprites" style="position:absolute;">
|
|
<svg id="sprite-defs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<symbol viewBox="0 0 24 30" id="handle1">
|
|
<path id="chevron" d='M5 17.4c.5.5 1.2.5 1.7 0l5.9-5.8 5.8 5.8c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7l-6.6-6.6c-.2-.2-.5-.3-.8-.3-.3 0-.6.1-.8.3l-6.6 6.6c-.7.5-.7 1.3-.3 1.7z'/>
|
|
</symbol>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
dbranges: {
|
|
type: String,
|
|
},
|
|
productroute: {
|
|
type: String,
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
injectinginpanier: false,
|
|
processing: false,
|
|
success:false,
|
|
errors:false,
|
|
response: '',
|
|
ranges: [],
|
|
quickorder: [],
|
|
quickorder_totalTTC: 0,
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log('Quick Order Panel Component mounted.');
|
|
let allranges = JSON.parse(this.dbranges);
|
|
let halfpoint = Math.ceil(allranges.length/2);
|
|
let firstcol = allranges.slice(0, halfpoint);
|
|
let secondcol = allranges.slice(halfpoint);
|
|
this.ranges.push(firstcol);
|
|
this.ranges.push(secondcol);
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.updateQuickOrder([]);
|
|
axios.post('/ajax/get-cart', {
|
|
instance: 'quickorder',
|
|
}).then(response => {
|
|
let result = response.data;
|
|
this.updateQuickOrder(result[0]);
|
|
}).catch(error => {
|
|
console.log(error);
|
|
});
|
|
},
|
|
addtocart(product_id,qtty,currentqty) {
|
|
let breaker=false;
|
|
if(qtty>0) {
|
|
toast.text = 'Produit ajouté à votre QO';
|
|
} else {
|
|
toast.text = 'Produit retiré de votre QO';
|
|
}
|
|
if(currentqty+qtty < 0) {
|
|
breaker=true;
|
|
}
|
|
this.quickorder.forEach(element => {
|
|
if(element.cartItem.id == product_id) {
|
|
element.cartItem.qty +=qtty;
|
|
}
|
|
if(element.cartItem.qty == 0) {
|
|
this.removeItem(element.cartItem.rowId);
|
|
breaker=true;
|
|
}
|
|
});
|
|
|
|
|
|
if(!breaker) {
|
|
axios.post('/ajax/add-to-cart', {
|
|
id: product_id,
|
|
qty: qtty,
|
|
instance: 'quickorder',
|
|
}).then(
|
|
(response) => {
|
|
let result = response.data;
|
|
this.updateQuickOrder(result[0]);
|
|
toast.destination = undefined;
|
|
//Toastify(toast).showToast();
|
|
}
|
|
)
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
this.response = "Erreur lors de la modification du QO.";
|
|
this.processing = false;
|
|
});
|
|
}
|
|
},
|
|
removeItem(rowId) {
|
|
axios.post('/ajax/remove-from-cart', {
|
|
rowId: rowId,
|
|
instance: 'quickorder',
|
|
}).then(
|
|
(response) => {
|
|
let result = response.data;
|
|
this.updateQuickOrder(result[0]);
|
|
toast.text = 'Produit retiré de votre QO';
|
|
toast.destination = undefined;
|
|
//Toastify(toast).showToast();
|
|
}
|
|
)
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
this.response = "Erreur lors de la modification du QO.";
|
|
this.processing = false;
|
|
});
|
|
},
|
|
updateQuickOrder(data) {
|
|
this.quickorder_totalTTC = 0;
|
|
this.ranges.forEach(col => {
|
|
col.forEach(range => {
|
|
this.$set(range, 'totalTTC', 0);
|
|
range.products.forEach(product => {
|
|
this.$set(product, 'qty', 0);
|
|
this.$set(product, 'totalTTC', 0);
|
|
});
|
|
});
|
|
});
|
|
this.quickorder = data;
|
|
this.quickorder.forEach(index => {
|
|
this.ranges.forEach(col => {
|
|
col.forEach(range => {
|
|
range.products.forEach(product => {
|
|
if(product.id == index.cartItem.id) {
|
|
this.$set(product, 'qty', index.cartItem.qty);
|
|
this.$set(product, 'totalTTC', index.cartItem.qty * product.calculatedPrices.discountedPriceTtc);
|
|
range.totalTTC += product.totalTTC;
|
|
this.quickorder_totalTTC += product.totalTTC;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
},
|
|
async addtopanier() {
|
|
const canempty = await this.$root.$refs.basketpanel.multiaddtocart(this.quickorder);
|
|
//console.log(canempty);
|
|
axios.post('/ajax/empty-cart', {
|
|
instance: 'quickorder',
|
|
}).then(
|
|
(response) => {
|
|
let result = response.data;
|
|
this.updateQuickOrder(result[0]);
|
|
}
|
|
)
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
this.response = "Erreur lors de la modification du panier.";
|
|
this.processing = false;
|
|
});
|
|
},
|
|
fullProductRoute(slug) {
|
|
return this.productroute + '/' + slug;
|
|
},
|
|
//general purpose TODO : globalize
|
|
numFormatter(num) {
|
|
return new Intl.NumberFormat('fr-FR', { style: 'decimal', minimumFractionDigits: 2}).format(num);
|
|
},
|
|
currencyFormatter(num) {
|
|
if (isNaN(num)) {
|
|
return num;
|
|
}
|
|
return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(num);
|
|
},
|
|
dateFormatter(str) {
|
|
let d=new Date(str);
|
|
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
return d.toLocaleDateString("fr-FR",options);
|
|
}
|
|
}
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
$(document).on("click", ".quick_order__handle", function(){
|
|
$(this).toggleClass("active");
|
|
$(this).siblings('.range_products').slideToggle();
|
|
});
|
|
});
|
|
</script>
|