|
|
<!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>
|
