Update src/pretix/static/pretixpresale/js/ui/main.js

src/pretix/base/services/cart.py

@@ -203,7 +203,7 @@ error_messages = {
         'You need to select at least %(min)s add-ons from the category %(cat)s for the product %(base)s.',
         'min'
     ),
-    'addon_no_multi': gettext_lazy('You can select every add-ons from the category %(cat)s for the product %(base)s at most once.'),
+    'addon_no_multi': gettext_lazy('You can select every add-on from the category %(cat)s for the product %(base)s at most once.'),
     'addon_only': gettext_lazy('One of the products you selected can only be bought as an add-on to another product.'),
     'bundled_only': gettext_lazy('One of the products you selected can only be bought part of a bundle.'),
     'seat_required': gettext_lazy('You need to select a specific seat.'),

src/pretix/base/services/orders.py

@@ -197,7 +197,7 @@ error_messages = {
         'You need to select at least %(min)s add-ons from the category %(cat)s for the product %(base)s.',
         'min'
     ),
-    'addon_no_multi': gettext_lazy('You can select every add-ons from the category %(cat)s for the product %(base)s at most once.'),
+    'addon_no_multi': gettext_lazy('You can select every add-on from the category %(cat)s for the product %(base)s at most once.'),
     'addon_already_checked_in': gettext_lazy('You cannot remove the position %(addon)s since it has already been checked in.'),
 }
 

src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html

@@ -6,13 +6,13 @@
 {% load eventsignal %}
 {% load rich_text %}
 {% for c in form.categories %}
-    <fieldset>
+    <fieldset data-addon-max-count="{{ c.max_count }}"{% if c.multi_allowed %} data-addon-multi-allowed{% endif %}>
         <legend>{{ c.category.name }}</legend>
         {% if c.category.description %}
             {{ c.category.description|rich_text }}
         {% endif %}
         {% if c.min_count == c.max_count %}
-            <p>
+            <p class="addon-count-desc">
                 {% blocktrans trimmed count min_count=c.min_count %}
                     You need to choose exactly one option from this category.
                 {% plural %}
@@ -21,7 +21,7 @@
             </p>
         {% elif c.min_count == 0 and c.max_count >= c.items|length and not c.multi_allowed %}
         {% elif c.min_count == 0 %}
-            <p>
+            <p class="addon-count-desc">
                 {% blocktrans trimmed count max_count=c.max_count %}
                     You can choose {{ max_count }} option from this category.
                 {% plural %}
@@ -29,7 +29,7 @@
                 {% endblocktrans %}
             </p>
         {% else %}
-            <p>
+            <p class="addon-count-desc">
                 {% blocktrans trimmed with min_count=c.min_count max_count=c.max_count %}
                     You can choose between {{ min_count }} and {{ max_count }} options from
                     this category.
@@ -193,7 +193,6 @@
                                                         {% endif %}
                                                         id="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}"
                                                         name="cp_{{ form.pos.pk }}_variation_{{ item.id }}_{{ var.id }}"
-                                                        data-exclusive-prefix="cp_{{ form.pos.pk }}_variation_{{ item.id }}_"
                                                         aria-label="{% blocktrans with item=item.name var=var %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}">
                                                 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                                                 {% trans "Select" context "checkbox" %}

src/pretix/static/pretixpresale/js/ui/main.js

@@ -123,7 +123,7 @@ var form_handlers = function (el) {
         var controls = document.getElementById(this.getAttribute("data-controls"));
         var currentValue = parseFloat(controls.value);
         controls.value = Math.max(controls.min, Math.min(controls.max || Number.MAX_SAFE_INTEGER, (currentValue || 0) + step));
-        controls.dispatchEvent(new Event("change"));
+        controls.dispatchEvent(new Event("change", { bubbles: true }));
     });
     el.find(".btn-checkbox input").on("change", function (e) {
         $(this).closest(".btn-checkbox")
@@ -149,11 +149,41 @@ var form_handlers = function (el) {
         ).find("canvas").attr("role", "img").attr("aria-label", this.getAttribute("data-desc"));
     });
 
-    el.find("input[data-exclusive-prefix]").each(function () {
-        var $others = $("input[name^=" + $(this).attr("data-exclusive-prefix") + "]:not([name=" + $(this).attr("name") + "])");
-        $(this).on('click change', function () {
-            if ($(this).prop('checked')) {
-                $others.prop('checked', false).trigger('change');
+
+    el.find("fieldset[data-addon-max-count]").each(function() {
+        // usually addons are only allowed once one per item
+        var multipleAllowed = this.hasAttribute("data-addon-multi-allowed");
+        var $inputs = $(".availability-box input", this);
+        var max = parseInt(this.getAttribute("data-addon-max-count"));
+        var desc = $(".addon-count-desc", this).text().trim();
+        this.addEventListener("change", function (e) {
+            var variations = e.target.closest(".variations");
+            if (variations && !multipleAllowed && e.target.checked) {
+                // uncheck all other checkboxes inside this variations
+                $(".availability-box input:checked", variations).not(e.target).prop("checked", false).trigger("change");
+            }
+
+            if (max === 1) {
+                if (e.target.checked) {
+                    $inputs.filter(":checked").not(e.target).prop("checked", false).trigger("change");
+                }
+                return;
+            }
+            var total = $inputs.toArray().reduce(function(a, e) {
+                return a + (e.type == "checkbox" ? (e.checked ? parseInt(e.value) : 0) : parseInt(e.value) || 0);
+            }, 0);
+            if (total > max) {
+                if (e.target.type == "checkbox") {
+                    e.target.checked = false;
+                } else {
+                    e.target.value = e.target.value - (total - max);
+                }
+                $(e.target).trigger("change").closest(".availability-box").tooltip({
+                    "title": desc,
+                }).tooltip('show');
+                e.preventDefault();
+            } else {
+                $(".availability-box", this).tooltip('destroy')
             }
         });
     });