diff --git a/doc/user/events/img/widget_checkbox_button.png b/doc/user/events/img/widget_checkbox_button.png new file mode 100644 index 0000000000..4240c12257 Binary files /dev/null and b/doc/user/events/img/widget_checkbox_button.png differ diff --git a/doc/user/events/widget.rst b/doc/user/events/widget.rst index 88e5a1fe35..f19f3cd285 100644 --- a/doc/user/events/widget.rst +++ b/doc/user/events/widget.rst @@ -124,6 +124,24 @@ If you want to disable voucher input in the widget, you can pass the ``disable-v +Enabling the button-style single item select +-------------------------------------------- + +By default, the widget uses a checkbox to select items, that can only be bought in quantities of one. If you want to match +the button-style of that checkbox with the one in the pretix shop, you can use the ``single-item-select`` attribute:: + + + +.. image:: img/widget_checkbox_button.png + :align: center + :class: screenshot + +.. note:: + + Due to compatibilty with existing widget installations, the default value for ``single-item-select`` + is ``checkbox``. This might change in the future, so make sure, to set the attribute to + ``single-item-select="checkbox"`` if you need it. + Filtering products ------------------ diff --git a/src/pretix/control/templates/pretixcontrol/event/widget.html b/src/pretix/control/templates/pretixcontrol/event/widget.html index fd4bdef114..109de96a7b 100644 --- a/src/pretix/control/templates/pretixcontrol/event/widget.html +++ b/src/pretix/control/templates/pretixcontrol/event/widget.html @@ -32,7 +32,7 @@ {% abseventurl request.event "presale:event.index" as indexurl %} {% endif %} {% if form.cleaned_data.compatibility_mode %} - 
<div class="pretix-widget-compat" event="{% abseventurl request.event "presale:event.index" %}"{% if form.cleaned_data.subevent %} subevent="{{ form.cleaned_data.subevent.pk }}"{% endif %}{% if form.cleaned_data.voucher %} voucher="{{ form.cleaned_data.voucher }}"{% endif %}></div>
+            
<div class="pretix-widget-compat" event="{% abseventurl request.event "presale:event.index" %}"{% if form.cleaned_data.subevent %} subevent="{{ form.cleaned_data.subevent.pk }}"{% endif %}{% if form.cleaned_data.voucher %} voucher="{{ form.cleaned_data.voucher }}"{% endif %} single-item-select="button"></div>
 <noscript>
    <div class="pretix-widget">
         <div class="pretix-widget-info-message">
@@ -45,7 +45,7 @@
 </noscript>
 

         {% else %}
-        
<pretix-widget event="{% abseventurl request.event "presale:event.index" %}"{% if form.cleaned_data.subevent %} subevent="{{ form.cleaned_data.subevent.pk }}"{% endif %}{% if form.cleaned_data.voucher %} voucher="{{ form.cleaned_data.voucher }}"{% endif %}></pretix-widget>
+        
<pretix-widget event="{% abseventurl request.event "presale:event.index" %}"{% if form.cleaned_data.subevent %} subevent="{{ form.cleaned_data.subevent.pk }}"{% endif %}{% if form.cleaned_data.voucher %} voucher="{{ form.cleaned_data.voucher }}"{% endif %} single-item-select="button"></pretix-widget>
 <noscript>
    <div class="pretix-widget">
         <div class="pretix-widget-info-message">
diff --git a/src/pretix/static/pretixpresale/js/widget/widget.js b/src/pretix/static/pretixpresale/js/widget/widget.js
index 880d86e2f6..ae11c00d41 100644
--- a/src/pretix/static/pretixpresale/js/widget/widget.js
+++ b/src/pretix/static/pretixpresale/js/widget/widget.js
@@ -17,6 +17,7 @@ var strings = {
     'quantity_dec': django.pgettext('widget', 'Decrease quantity'),
     'quantity_inc': django.pgettext('widget', 'Increase quantity'),
     'price': django.pgettext('widget', 'Price'),
+    'select': django.pgettext('widget', 'Select'),
     'select_item': django.pgettext('widget', 'Select %s'),
     'select_variant': django.pgettext('widget', 'Select variant %s'),
     'sold_out': django.pgettext('widget', 'Sold out'),
@@ -214,7 +215,13 @@ Vue.component('availbox', {
         + '' + strings.waiting_list + ''
         + ''
         + '
'
-        + '