Add common modal support for no-product-selected-error

This commit is contained in:
Richard Schreiber
2025-05-13 21:49:36 +02:00
parent caf291630c
commit cf17b63a83
3 changed files with 94 additions and 27 deletions

View File

@@ -1,6 +1,7 @@
{% load compress %}
{% load static %}
{% load i18n %}
{% load icon %}
{% load safelink %}
{% load statici18n %}
{% load thumb %}
@@ -47,6 +48,31 @@
<nav id="skip-to-main" role="navigation" aria-label="{% trans "Skip link" context "skip-to-main-nav" %}" class="sr-only on-focus-visible">
<p><a href="#content">{% trans "Skip to main content" %}</a></p>
</nav>
<dialog id="dialog-info" aria-labelledby="dialog-info-label" aria-describedby="dialog-info-description">
<div class="modal-card">
<div class="modal-card-icon">
{% icon "cog big-rotating-icon" %}
</div>
<div class="modal-card-content">
<h2 id="dialog-info-label">Hier die Überschrift</h2>
<p id="dialog-info-description">Hier kommt der Text. Danach der Status-Absatz.</p>
</div>
</div>
</dialog>
<dialog id="dialog-alert" role="alertdialog" aria-labelledby="dialog-alert-label" aria-describedby="dialog-alert-description">
<div class="modal-card">
<div class="modal-card-icon">
{% icon "cog big-rotating-icon" %}
</div>
<div class="modal-card-content">
<h2 id="dialog-alert-label">Hier die Überschrift</h2>
<p id="dialog-alert-description"></p>
</div>
</div>
<form method="dialog" class="text-right">
<button class="btn btn-primary">OK</button>
</form>
</dialog>
<header>
{% if ie_deprecation_warning %}
<div class="old-browser-warning">

View File

@@ -386,6 +386,33 @@ $(function () {
$("body").removeClass("nojs");
moment.locale($("body").attr("data-datetimelocale"));
$(document).on("pretix:alert pretix:info", function (e, detail) {
var dialog = document.getElementById("dialog-" + e.type.substring(7));
$("#" + dialog.getAttribute("aria-labelledby")).text(detail.label);
$("#" + dialog.getAttribute("aria-describedby")).text(detail.description);
$(".modal-card-icon .fa", dialog).attr('class', 'fa fa-' + (detail.icon || "exclamation-triangle"));
dialog.showModal();
});
$("form:has(#btn-add-to-cart)").on("submit", function(e) {
if (
(this.classList.contains("has-seating") && this.querySelector("pretix-seating-checkout-button button")) ||
this.querySelector("input[type=checkbox]:checked") ||
[...this.querySelectorAll(".input-item-count[type=text]")].some(input => input.value && input.value !== "0") // TODO: seating hat noch einen seating-dummy-item-count, das ist Mist!
) {
// okay, let the submit-event bubble to async-task
return;
}
e.preventDefault();
e.stopPropagation();
$(document).trigger("pretix:alert", {
label: gettext("You have not selected any ticket"),
description: gettext("Please tick a checkbox or enter a quantity for one of the ticket types to add to the cart."),
icon: 'exclamation',
});
});
var scrollpos = sessionStorage ? sessionStorage.getItem('scrollpos') : 0;
if (scrollpos) {
window.scrollTo(0, scrollpos);
@@ -487,33 +514,6 @@ $(function () {
this.form.submit();
}
});
var update_cart_form = function () {
var is_enabled = $(".product-row input[type=checkbox]:checked, .variations input[type=checkbox]:checked, .product-row input[type=radio]:checked, .variations input[type=radio]:checked").length;
if (!is_enabled) {
$(".input-item-count").each(function () {
if ($(this).val() && $(this).val() !== "0") {
is_enabled = true;
}
});
$(".input-seat-selection option").each(function() {
if ($(this).val() && $(this).val() !== "" && $(this).prop('selected')) {
is_enabled = true;
}
});
}
if (!is_enabled && (!$(".has-seating").length || $("#seating-dummy-item-count").length)) {
$("#btn-add-to-cart").prop("disabled", !is_enabled).popover({
'content': function () { return gettext("Please enter a quantity for one of the ticket types.") },
'placement': 'top',
'trigger': 'hover focus'
});
} else {
$("#btn-add-to-cart").prop("disabled", false).popover("destroy")
}
};
update_cart_form();
$(".product-row input[type=checkbox], .variations input[type=checkbox], .product-row input[type=radio], .variations input[type=radio], .input-item-count, .input-seat-selection")
.on("change mouseup keyup", update_cart_form);
$(".table-calendar td.has-events").click(function () {
var $grid = $(this).closest("[role='grid']");

View File

@@ -374,6 +374,47 @@ body.loading .container {
-webkit-transition: opacity .5s ease-in-out;
}
#dialog-info, #dialog-alert {
border: none;
background: white;
border-radius: $border-radius-large;
box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
padding: 20px;
max-width: 32em;
max-height: calc(100vh - 100px);
overflow-y: auto;
&::backdrop {
background: rgba(255, 255, 255, .7);
}
.modal-card {
display: flex;
align-items: center;
.modal-card-icon {
width: 150px;
text-align: center;
color: $brand-primary;
font-size: 120px;
}
.modal-card-content {
text-align: left;
h2 {
margin-top: 0;
font-size: 1.25em;
font-weight: bold;
color: $brand-primary;
}
}
}
}
.typo-alert span[data-typosuggest] {
text-decoration: underline;
cursor: pointer;