admin/e-ticket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add shopping cart system on event detail billetterie

Browse Source 
- Each billet has +/- quantity buttons with max quantity enforcement
- Line total per billet updated in real-time
- Cart total and article count at the bottom
- Commander button disabled when cart is empty
- Full billet description displayed
- JS module cart.js with 10 tests covering all cases

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-03-21 13:46:06 +01:00
parent 4785f406f3
commit 5e099b8af6
4 changed files with 238 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/app.js
View File

@@ -8,6 +8,7 @@ import { initCopyUrl } from "./modules/copy-url.js"
import { initSortable } from "./modules/sortable.js"
import { initBilletDesigner } from "./modules/billet-designer.js"
import { initCommissionCalculator } from "./modules/commission-calculator.js"
import { initCart } from "./modules/cart.js"
document.addEventListener('DOMContentLoaded', () => {
initMobileMenu()
@@ -19,4 +20,5 @@ document.addEventListener('DOMContentLoaded', () => {
initSortable()
initBilletDesigner()
initCommissionCalculator()
initCart()
})

64
assets/modules/cart.js Normal file
View File

@@ -0,0 +1,64 @@
function formatEur(value) {
return value.toFixed(2).replace('.', ',') + ' \u20AC'
}
export function initCart() {
const billetterie = document.getElementById('billetterie')
if (!billetterie) return
const items = billetterie.querySelectorAll('[data-cart-item]')
const totalEl = document.getElementById('cart-total')
const countEl = document.getElementById('cart-count')
const checkoutBtn = document.getElementById('cart-checkout')
if (!totalEl || !countEl) return
function updateTotals() {
let total = 0
let count = 0
for (const item of items) {
const price = Number.parseFloat(item.dataset.price) || 0
const qtyInput = item.querySelector('[data-cart-qty]')
const lineTotalEl = item.querySelector('[data-cart-line-total]')
const qty = Number.parseInt(qtyInput.value, 10) || 0
const lineTotal = price * qty
total += lineTotal
count += qty
lineTotalEl.textContent = formatEur(lineTotal)
}
totalEl.textContent = formatEur(total)
countEl.textContent = String(count)
if (checkoutBtn) {
checkoutBtn.disabled = count === 0
}
}
for (const item of items) {
const qtyInput = item.querySelector('[data-cart-qty]')
const minusBtn = item.querySelector('[data-cart-minus]')
const plusBtn = item.querySelector('[data-cart-plus]')
const max = Number.parseInt(item.dataset.max, 10) || 0
minusBtn.addEventListener('click', () => {
const current = Number.parseInt(qtyInput.value, 10) || 0
if (current > 0) {
qtyInput.value = current - 1
updateTotals()
}
})
plusBtn.addEventListener('click', () => {
const current = Number.parseInt(qtyInput.value, 10) || 0
if (max === 0 || current < max) {
qtyInput.value = current + 1
updateTotals()
}
})
}
updateTotals()
}

57
templates/home/event_detail.html.twig
View File

@@ -71,7 +71,7 @@
</div>
{% if categories|length > 0 %}
<div class="card-brutal overflow-hidden p-0 mt-8">
<div class="card-brutal overflow-hidden p-0 mt-8" id="billetterie">
<div class="section-header">
<h2 class="text-sm font-black uppercase tracking-widest text-white">Billetterie</h2>
</div>
@@ -83,24 +83,35 @@
<h3 class="font-black uppercase text-sm tracking-widest mb-4">{{ category.name }}</h3>
{% if category_billets|length > 0 %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="space-y-3">
{% for billet in category_billets %}
<div class="border-2 border-gray-900 bg-white overflow-hidden flex">
{% if billet.pictureName %}
<img src="{{ ('/uploads/billets/' ~ billet.pictureName) | imagine_filter('thumbnail') }}" alt="{{ billet.name }}" class="w-20 h-20 object-cover flex-shrink-0">
{% endif %}
<div class="p-4 flex-1 flex items-center justify-between gap-4">
<div>
<p class="font-black uppercase text-sm">{{ billet.name }}</p>
{% if billet.description %}
<p class="text-xs text-gray-500 font-bold mt-1">{{ billet.description|length > 60 ? billet.description|slice(0, 60) ~ '...' : billet.description }}</p>
{% endif %}
{% if not billet.unlimited and billet.quantity is not null %}
<p class="text-[10px] text-gray-400 font-bold mt-1">{{ billet.quantity }} place{{ billet.quantity > 1 ? 's' : '' }} disponible{{ billet.quantity > 1 ? 's' : '' }}</p>
<div class="border-2 border-gray-900 bg-white p-4" data-cart-item data-billet-id="{{ billet.id }}" data-price="{{ billet.priceHTDecimal }}" data-max="{{ billet.quantity ?? 0 }}">
<div class="flex flex-col md:flex-row md:items-center gap-4">
<div class="flex items-center gap-4 flex-1 min-w-0">
{% if billet.pictureName %}
<img src="{{ ('/uploads/billets/' ~ billet.pictureName) | imagine_filter('thumbnail') }}" alt="{{ billet.name }}" class="w-16 h-16 object-cover border border-gray-300 flex-shrink-0">
{% endif %}
<div class="min-w-0">
<p class="font-black uppercase text-sm">{{ billet.name }}</p>
{% if billet.description %}
<p class="text-xs text-gray-500 font-bold mt-1">{{ billet.description }}</p>
{% endif %}
{% if not billet.unlimited and billet.quantity is not null %}
<p class="text-[10px] text-gray-400 font-bold mt-1">{{ billet.quantity }} place{{ billet.quantity > 1 ? 's' : '' }} disponible{{ billet.quantity > 1 ? 's' : '' }}</p>
{% endif %}
</div>
</div>
<div class="text-right flex-shrink-0">
<p class="font-black text-indigo-600 text-lg">{{ billet.priceHTDecimal|number_format(2, ',', ' ') }} &euro;</p>
<div class="flex items-center gap-4 flex-shrink-0">
<p class="font-black text-indigo-600 text-lg w-24 text-right">{{ billet.priceHTDecimal|number_format(2, ',', ' ') }} &euro;</p>
<div class="flex items-center border-2 border-gray-900">
<button type="button" data-cart-minus class="w-9 h-9 flex items-center justify-center font-black text-lg hover:bg-gray-100 transition-all cursor-pointer select-none">-</button>
<input type="number" data-cart-qty min="0" max="{{ billet.quantity ?? 99 }}" value="0" class="w-12 h-9 text-center font-black text-sm border-x-2 border-gray-900 outline-none" readonly>
<button type="button" data-cart-plus class="w-9 h-9 flex items-center justify-center font-black text-lg hover:bg-gray-100 transition-all cursor-pointer select-none">+</button>
</div>
<p class="font-black text-sm w-24 text-right" data-cart-line-total>0,00 &euro;</p>
</div>
</div>
</div>
@@ -112,6 +123,20 @@
</div>
{% endif %}
{% endfor %}
<div class="border-t-3 border-gray-900 pt-6 mt-6">
<div class="flex items-center justify-between mb-4">
<span class="font-black uppercase text-sm tracking-widest">Total</span>
<span class="font-black text-2xl text-indigo-600" id="cart-total">0,00 &euro;</span>
</div>
<div class="flex items-center justify-between mb-6">
<span class="text-xs font-bold text-gray-400 uppercase tracking-widest">Articles</span>
<span class="font-black text-sm" id="cart-count">0</span>
</div>
<button type="button" id="cart-checkout" disabled class="w-full btn-brutal font-black uppercase text-sm tracking-widest bg-indigo-600 text-white hover:bg-indigo-800 transition-all disabled:opacity-30 disabled:cursor-not-allowed">
Commander
</button>
</div>
</div>
</div>
{% endif %}

131
tests/js/cart.test.js Normal file
View File

@@ -0,0 +1,131 @@
import { describe, it, expect, beforeEach } from 'vitest'
import { initCart } from '../../assets/modules/cart.js'
function createBilletterie(billets) {
let html = '<div id="billetterie">'
for (const b of billets) {
html += `
<div data-cart-item data-billet-id="${b.id}" data-price="${b.price}" data-max="${b.max}">
<button data-cart-minus></button>
<input data-cart-qty type="number" min="0" max="${b.max || 99}" value="0" readonly>
<button data-cart-plus></button>
<span data-cart-line-total></span>
</div>
`
}
html += '<span id="cart-total"></span><span id="cart-count"></span><button id="cart-checkout" disabled></button></div>'
document.body.innerHTML = html
}
describe('initCart', () => {
beforeEach(() => {
document.body.innerHTML = ''
})
it('does nothing without billetterie element', () => {
expect(() => initCart()).not.toThrow()
})
it('does nothing without total element', () => {
document.body.innerHTML = '<div id="billetterie"></div>'
expect(() => initCart()).not.toThrow()
})
it('initializes with zero totals', () => {
createBilletterie([{ id: 1, price: '10.00', max: 5 }])
initCart()
expect(document.getElementById('cart-total').textContent).toBe('0,00 \u20AC')
expect(document.getElementById('cart-count').textContent).toBe('0')
expect(document.getElementById('cart-checkout').disabled).toBe(true)
})
it('increments quantity on plus click', () => {
createBilletterie([{ id: 1, price: '15.00', max: 10 }])
initCart()
document.querySelector('[data-cart-plus]').click()
expect(document.querySelector('[data-cart-qty]').value).toBe('1')
expect(document.querySelector('[data-cart-line-total]').textContent).toBe('15,00 \u20AC')
expect(document.getElementById('cart-total').textContent).toBe('15,00 \u20AC')
expect(document.getElementById('cart-count').textContent).toBe('1')
expect(document.getElementById('cart-checkout').disabled).toBe(false)
})
it('decrements quantity on minus click', () => {
createBilletterie([{ id: 1, price: '10.00', max: 5 }])
initCart()
document.querySelector('[data-cart-plus]').click()
document.querySelector('[data-cart-plus]').click()
document.querySelector('[data-cart-minus]').click()
expect(document.querySelector('[data-cart-qty]').value).toBe('1')
expect(document.getElementById('cart-total').textContent).toBe('10,00 \u20AC')
})
it('does not decrement below zero', () => {
createBilletterie([{ id: 1, price: '10.00', max: 5 }])
initCart()
document.querySelector('[data-cart-minus]').click()
expect(document.querySelector('[data-cart-qty]').value).toBe('0')
expect(document.getElementById('cart-total').textContent).toBe('0,00 \u20AC')
})
it('respects max quantity', () => {
createBilletterie([{ id: 1, price: '10.00', max: 2 }])
initCart()
document.querySelector('[data-cart-plus]').click()
document.querySelector('[data-cart-plus]').click()
document.querySelector('[data-cart-plus]').click()
expect(document.querySelector('[data-cart-qty]').value).toBe('2')
expect(document.getElementById('cart-total').textContent).toBe('20,00 \u20AC')
})
it('allows unlimited when max is 0', () => {
createBilletterie([{ id: 1, price: '5.00', max: 0 }])
initCart()
for (let i = 0; i < 50; i++) {
document.querySelector('[data-cart-plus]').click()
}
expect(document.querySelector('[data-cart-qty]').value).toBe('50')
expect(document.getElementById('cart-total').textContent).toBe('250,00 \u20AC')
})
it('calculates total for multiple billets', () => {
createBilletterie([
{ id: 1, price: '10.00', max: 5 },
{ id: 2, price: '25.00', max: 3 },
])
initCart()
const plusBtns = document.querySelectorAll('[data-cart-plus]')
plusBtns[0].click()
plusBtns[0].click()
plusBtns[1].click()
// 2 * 10 + 1 * 25 = 45
expect(document.getElementById('cart-total').textContent).toBe('45,00 \u20AC')
expect(document.getElementById('cart-count').textContent).toBe('3')
})
it('disables checkout when cart is empty again', () => {
createBilletterie([{ id: 1, price: '10.00', max: 5 }])
initCart()
document.querySelector('[data-cart-plus]').click()
expect(document.getElementById('cart-checkout').disabled).toBe(false)
document.querySelector('[data-cart-minus]').click()
expect(document.getElementById('cart-checkout').disabled).toBe(true)
})
})