Fix ticket quantity buttons on event page - Remove syntax error in ticket card component and improve error handling in ticket cart controller

This commit is contained in:
kbe
2025-08-28 20:56:48 +02:00
parent be3d80e541
commit b9576b91f5
2 changed files with 23 additions and 2 deletions

View File

@@ -17,6 +17,11 @@ export default class extends Controller {
const max = parseInt(event.params.max) const max = parseInt(event.params.max)
const input = this.quantityTargetFor(ticketTypeId) const input = this.quantityTargetFor(ticketTypeId)
if (!input) {
console.error(`Could not find input for ticket type ID: ${ticketTypeId}`)
return
}
const current = parseInt(input.value) || 0 const current = parseInt(input.value) || 0
if (current < max) { if (current < max) {
input.value = current + 1 input.value = current + 1
@@ -28,6 +33,11 @@ export default class extends Controller {
const ticketTypeId = event.params.ticketTypeId const ticketTypeId = event.params.ticketTypeId
const input = this.quantityTargetFor(ticketTypeId) const input = this.quantityTargetFor(ticketTypeId)
if (!input) {
console.error(`Could not find input for ticket type ID: ${ticketTypeId}`)
return
}
const current = parseInt(input.value) || 0 const current = parseInt(input.value) || 0
if (current > 0) { if (current > 0) {
input.value = current - 1 input.value = current - 1
@@ -38,6 +48,12 @@ export default class extends Controller {
updateQuantityFromInput(event) { updateQuantityFromInput(event) {
const input = event.target const input = event.target
const ticketTypeId = input.dataset.ticketTypeId const ticketTypeId = input.dataset.ticketTypeId
if (!ticketTypeId) {
console.error('Missing ticket type ID on input element')
return
}
const max = parseInt(input.max) const max = parseInt(input.max)
const quantity = parseInt(input.value) || 0 const quantity = parseInt(input.value) || 0
@@ -308,6 +324,10 @@ export default class extends Controller {
// Helper method to find quantity input by ticket type ID // Helper method to find quantity input by ticket type ID
quantityTargetFor(ticketTypeId) { quantityTargetFor(ticketTypeId) {
return document.querySelector(`#quantity_${ticketTypeId}`) const element = document.querySelector(`#quantity_${ticketTypeId}`)
if (!element) {
console.warn(`Could not find quantity input for ticket type ID: ${ticketTypeId}`)
}
return element
} }
} }

View File

@@ -49,7 +49,8 @@
data-ticket-cart-target="quantity" data-ticket-cart-target="quantity"
data-ticket-type-id="<%= id %>" data-ticket-type-id="<%= id %>"
data-name="<%= name %>" data-name="<%= name %>"
data-price="<%= price_cents %>"> data-price="<%= price_cents %>"
data-action="change->ticket-cart#updateQuantityFromInput">
<button type="button" <button type="button"
class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors duration-200" class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors duration-200"
data-action="click->ticket-cart#increaseQuantity" data-action="click->ticket-cart#increaseQuantity"