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

Add interactive commission slider on /tarifs page, remove no-subscription text

Browse Source 
- Slider 0% to 3% updates commission examples table in real-time
- Remove 'Pas d abonnement mensuel' text

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-03-22 20:38:13 +01:00
parent d4941c6c23
commit 349219005d
1 changed files with 48 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
templates/home/tarifs.html.twig
View File

@@ -61,7 +61,7 @@
</div>
<div class="max-w-4xl mx-auto relative z-10 text-center">
<h1 class="text-4xl md:text-6xl font-black uppercase tracking-tighter leading-[0.85] mb-4">Tarifs transparents</h1>
<p class="text-lg font-bold text-gray-600">Pas d'abonnement mensuel. Commission uniquement sur les ventes realisees.</p>
<p class="text-lg font-bold text-gray-600">Commission uniquement sur les ventes realisees.</p>
</div>
</section>
@@ -148,35 +148,65 @@
</div>
</div>
<div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] overflow-x-auto">
<p class="text-sm font-black uppercase tracking-widest text-gray-400 mb-4">Exemples avec commission E-Ticket a 3%</p>
<div class="border-4 border-gray-900 p-6 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] overflow-x-auto" id="commission-simulator">
<div class="flex flex-wrap items-center gap-4 mb-6">
<p class="text-sm font-black uppercase tracking-widest text-gray-400">Simulateur de commission</p>
<div class="flex items-center gap-3 flex-1 min-w-[200px]">
<label for="rate-slider" class="text-xs font-black uppercase tracking-widest text-gray-500">Taux E-Ticket</label>
<input type="range" id="rate-slider" min="0" max="3" step="0.1" value="3" class="flex-1 accent-indigo-600 cursor-pointer">
<span id="rate-display" class="text-xl font-black text-indigo-600 w-16 text-right">3%</span>
</div>
</div>
<table class="w-full text-sm font-bold" style="min-width: 500px;">
<thead>
<tr class="border-b-3 border-gray-900">
<th class="py-2 text-left text-gray-400 uppercase tracking-widest text-xs">Prix billet</th>
<th class="py-2 text-right text-gray-400 uppercase tracking-widest text-xs">E-Ticket (3%)</th>
<th class="py-2 text-right text-gray-400 uppercase tracking-widest text-xs">E-Ticket (<span id="th-rate">3</span>%)</th>
<th class="py-2 text-right text-gray-400 uppercase tracking-widest text-xs">Stripe</th>
<th class="py-2 text-right text-gray-400 uppercase tracking-widest text-xs">Total frais</th>
<th class="py-2 text-right text-green-600 uppercase tracking-widest text-xs">Vous recevez</th>
</tr>
</thead>
<tbody>
{% for price in [1, 2, 5, 10, 15, 20] %}
{% set eticket_fee = price * 0.03 %}
{% set stripe_fee = price * 0.015 + 0.25 %}
{% set total_fee = eticket_fee + stripe_fee %}
{% set net = price - total_fee %}
<tr class="border-b border-gray-100">
<td class="py-2 text-left">{{ price|number_format(2, ',', ' ') }} &euro;</td>
<td class="py-2 text-right text-red-600">{{ eticket_fee|number_format(2, ',', ' ') }} &euro;</td>
<td class="py-2 text-right text-red-600">{{ stripe_fee|number_format(2, ',', ' ') }} &euro;</td>
<td class="py-2 text-right text-red-600">{{ total_fee|number_format(2, ',', ' ') }} &euro;</td>
<td class="py-2 text-right text-green-600 font-black">{{ net|number_format(2, ',', ' ') }} &euro;</td>
</tr>
{% endfor %}
<tbody id="commission-tbody">
</tbody>
</table>
</div>
<script>
(function() {
var prices = [1, 2, 5, 10, 15, 20]
var slider = document.getElementById('rate-slider')
var display = document.getElementById('rate-display')
var thRate = document.getElementById('th-rate')
var tbody = document.getElementById('commission-tbody')
function fmt(v) { return v.toFixed(2).replace('.', ',') + ' \u20AC' }
function update() {
var rate = parseFloat(slider.value)
display.textContent = rate.toFixed(1) + '%'
thRate.textContent = rate.toFixed(1)
var html = ''
for (var i = 0; i < prices.length; i++) {
var p = prices[i]
var ef = p * rate / 100
var sf = p * 0.015 + 0.25
var tf = ef + sf
var net = p - tf
html += '<tr class="border-b border-gray-100">'
html += '<td class="py-2 text-left">' + fmt(p) + '</td>'
html += '<td class="py-2 text-right text-red-600">' + fmt(ef) + '</td>'
html += '<td class="py-2 text-right text-red-600">' + fmt(sf) + '</td>'
html += '<td class="py-2 text-right text-red-600">' + fmt(tf) + '</td>'
html += '<td class="py-2 text-right text-green-600 font-black">' + fmt(Math.max(0, net)) + '</td>'
html += '</tr>'
}
tbody.innerHTML = html
}
slider.addEventListener('input', update)
update()
})()
</script>
<div class="border-4 border-gray-900 p-6 bg-[#fabf04] shadow-[6px_6px_0px_rgba(0,0,0,1)] mt-6 text-center">
<p class="font-black uppercase text-sm tracking-widest mb-2">Billets gratuits = 0 &euro; de commission</p>