You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
3.6 KiB
145 lines
3.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
|
|
/>
|
|
|
|
<script
|
|
defer
|
|
src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
|
|
></script>
|
|
|
|
<!-- Tailwind docs: https://tailwindcss.com/docs/installation/play-cdn -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
clifford: "#da373d",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
</head>
|
|
|
|
<body
|
|
x-data="{
|
|
formatter: new Intl.NumberFormat('fr-FR', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
}),
|
|
count: 0,
|
|
taxChoice:0,
|
|
taxes: [0, 8.5, 20],
|
|
articles: [
|
|
{
|
|
id: 0,
|
|
label: 'savon',
|
|
price: 5,
|
|
order: 0,
|
|
},
|
|
{
|
|
id: 1,
|
|
label: 'brosse',
|
|
price: 10,
|
|
order: 0,
|
|
},
|
|
{
|
|
id: 2,
|
|
label: 'lessive',
|
|
price: 13,
|
|
order: 0,
|
|
}
|
|
],
|
|
taxLabel: (entry)=> {
|
|
switch (entry) {
|
|
case 0: return 'exonéré';
|
|
default: return entry+' %';
|
|
}
|
|
},
|
|
order(id){
|
|
this.articles[id].order++;
|
|
},
|
|
decrementOrder(id){
|
|
this.articles[id].order--;
|
|
},
|
|
computePrice(){
|
|
let sum=0;
|
|
console.log(this.articles);
|
|
for (item of this.articles) {
|
|
sum += item.price * item.order;
|
|
}
|
|
return this.formatter.format(sum*(1+this.taxChoice/100));
|
|
|
|
}
|
|
|
|
}"
|
|
class="p-8 bg-white dark:bg-slate-400"
|
|
>
|
|
<h1 class="text-3xl text-clifford">Articles</h1>
|
|
|
|
<div class="flex space-x-4">
|
|
<template x-for="article in articles" :key="article.id">
|
|
<div>
|
|
<span x-text="article.label"></span>
|
|
<span x-show="article.order>0" x-text=" '('+article.order+')'"></span>
|
|
<button
|
|
@click="order(article.id)"
|
|
class="flex items-center rounded bg-blue-100 px-5 py-2 text-slate-500 shadow-md"
|
|
>
|
|
<i class="mr-5 fa-solid fa-cart-plus"></i>
|
|
Increment
|
|
</button>
|
|
|
|
<button
|
|
x-show="article.order>0"
|
|
@click="if (article.order>0) decrementOrder(article.id)"
|
|
class="flex items-center rounded bg-blue-100 px-5 py-2 text-slate-500 shadow-md"
|
|
>
|
|
<i class="mr-5 fa-regular fa-square-minus"></i>
|
|
Decrement
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<h2 class="text-2xl text-clifford">Taxes</h2>
|
|
<template x-for="item in taxes" :key="item">
|
|
<div>
|
|
<input
|
|
x-model="taxChoice"
|
|
type="radio"
|
|
name="taxChoice"
|
|
:value="item"
|
|
/>
|
|
<label x-text="taxLabel(item)"></label>
|
|
</div>
|
|
</template>
|
|
|
|
<h2 class="text-2xl text-clifford mt-4">TOTAL TTC</h2>
|
|
<span class="text-3xl" x-text="computePrice() + ' €'" />
|
|
|
|
<div x-data="{ open: false }">
|
|
<button
|
|
@click="open = ! open"
|
|
class="flex items-center rounded bg-orange-100 px-5 py-2 text-slate-500 shadow-md"
|
|
>
|
|
Voir C.G.U
|
|
</button>
|
|
<div
|
|
x-transition.duration.500ms
|
|
x-show="open"
|
|
@click.outside="open = false"
|
|
>
|
|
Les conditions de vente standard s'appliquent à la date de la commande
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|