From 701c4f768e18d7a5bcd68f81272801169b68f9e3 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Wed, 12 Jan 2022 17:10:00 +0100
Subject: [PATCH] Improve add-to-cart checkbox for items with max. 1 per order
 (Z#178704) (#2413)

---
 .../pretixpresale/event/fragment_product_list.html  | 13 +++++++++++--
 src/pretix/static/pretixpresale/js/ui/main.js       |  8 ++++++++
 src/pretix/static/pretixpresale/scss/_event.scss    |  1 +
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
index f2f3b48ed..3b5317fd1 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
@@ -174,15 +174,20 @@
                                     <div class="col-md-2 col-xs-6 availability-box unavailable">
                                         <p><small><a href="#voucher">{% trans "Enter a voucher code below to buy this ticket." %}</a></small></p>
                                     </div>
-                                    {% elif var.cached_availability.0 == 100 %}
+                                {% elif var.cached_availability.0 == 100 %}
                                     <div class="col-md-2 col-xs-6 availability-box available">
 										{% if var.order_max == 1 %}
                                             <label class="item-checkbox-label">
                                                 <input type="checkbox" value="1"
+                                                    {% if item.free_price %}
+                                                       data-checked-onchange="price-variation-{{ item.pk }}-{{ var.pk }}"
+                                                    {% endif %}
                                                        {% if not ev.presale_is_running %}disabled{% endif %}
                                                        id="variation_{{ item.id }}_{{ var.id }}"
                                                        name="variation_{{ item.id }}_{{ var.id }}"
-                                                       title="{% blocktrans with item=item.name var=var.name %}Do you want to order {{ item }}, {{ var }}?{% endblocktrans %}">
+                                                       aria-label="{% blocktrans with item=item.name var=var %}Add {{ item }}, {{ var }} to cart{% endblocktrans %}"
+                                                       {% if var.description %} aria-describedby="item-{{ item.pk }}-{{ var.pk }}-description"{% endif %}>
+                                               <i class="fa fa-cart-plus fa-lg" aria-hidden="true"></i>
                                             </label>
                                         {% else %}
                                             <input type="number" class="form-control input-item-count" placeholder="0" min="0"
@@ -303,10 +308,14 @@
 							{% if item.order_max == 1 %}
                                 <label class="item-checkbox-label">
                                     <input type="checkbox" value="1" {% if itemnum == 1 %}checked{% endif %}
+                                        {% if item.free_price %}
+                                           data-checked-onchange="price-item-{{ item.pk }}"
+                                        {% endif %}
                                            {% if not ev.presale_is_running %}disabled{% endif %}
                                            name="item_{{ item.id }}" id="item_{{ item.id }}"
                                            aria-label="{% blocktrans with item=item.name %}Add {{ item }} to cart{% endblocktrans %}"
                                            {% if item.description %} aria-describedby="item-{{ item.id }}-description"{% endif %}>
+                                           <i class="fa fa-cart-plus fa-lg" aria-hidden="true"></i>
                                 </label>
                             {% else %}
                                 <input type="number" class="form-control input-item-count" placeholder="0" min="0"
diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js
index 8e3504ead..c27f5760e 100644
--- a/src/pretix/static/pretixpresale/js/ui/main.js
+++ b/src/pretix/static/pretixpresale/js/ui/main.js
@@ -634,6 +634,14 @@ $(function () {
 
     // Lightbox
     lightbox.init();
+
+    // free-range price input auto-check checkbox
+    $("[data-checked-onchange]").each(function() {
+        var checkbox = this;
+        $("#" + this.getAttribute("data-checked-onchange")).on("change", function() {
+            checkbox.checked = true;
+        });
+    });
 });
 
 function copy_answers(elements, answers) {
diff --git a/src/pretix/static/pretixpresale/scss/_event.scss b/src/pretix/static/pretixpresale/scss/_event.scss
index d44f3d4b6..93dea2833 100644
--- a/src/pretix/static/pretixpresale/scss/_event.scss
+++ b/src/pretix/static/pretixpresale/scss/_event.scss
@@ -31,6 +31,7 @@
     }
     .item-checkbox-label {
         display: block;
+        margin-top: .4em;
     }
 
     .product-description.with-picture {