From 3a26d6173e3aaccf27cba8ca6f588760003ec13a Mon Sep 17 00:00:00 2001 From: Richard Schreiber Date: Mon, 16 Oct 2023 10:56:00 +0200 Subject: [PATCH] Widget: add single-item-select shopping cart (Z#23131246) (#3633) --- .../events/img/widget_checkbox_button.png | Bin 0 -> 3040 bytes doc/user/events/widget.rst | 18 +++++++++++ .../templates/pretixcontrol/event/widget.html | 4 +-- .../static/pretixpresale/js/widget/widget.js | 11 ++++++- .../static/pretixpresale/scss/widget.scss | 30 ++++++++++++++++++ 5 files changed, 60 insertions(+), 3 deletions(-) create mode 100644 doc/user/events/img/widget_checkbox_button.png 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 0000000000000000000000000000000000000000..4240c122571a2f4ba954f914b8a1b6178b2d654a GIT binary patch literal 3040 zcmah~3p|tSAD<3Fk$+UAj`fl*j%~Kqn2lm?Wk_g*TH9;eVHex$GIR=+>k%sDaui)C ztybvhlw2pmr`%6;LmY?7sZ7x+=N+BYzjOZoefDm9p6~bfeSVkc_gkX7tD~mIat#Cm zq3P^I@qoWy!;gjXH}GfAoAxLKLiq~ElLpbKE<^^Oi=s36dq7kKR{-M(1j!~sKxYJj z5ONR5;_%48*o{g6$zhU#9e65+DzF3D9H&SjxINO zAJLghXMsC7Oo%-vI0v|ZJeC6aC^iEq{0k0M6xfT$fg{4siP7dTGC;th&F3JWe}q0& zgE-?NmCuAdoQ-M@a<;Q`7xDu+!7xU#cX2_wV>e*UDKpw|(TK1WCs0hGLoklTU~y*V z82IgJjv-=kM4W{w21~?X=GbsAFzFEe|M3+!8cBlnsZ^p9M+EVO;+d`4YrY)}nO)5; zgE=$z8;P8$GLgz>80F z2;{-TM+i@uYmFA|2!xU!2d>Cxl|UfYriZ3ex6a$9d+6~xJM1!4fmfQg**qPCvlaK} z$5ijOH@q?0S--o39$3&r(S9Gt?j-&>f2kg&5~;S(w=5y{T8!@MpG7~dD;xIH`mJv; zx9R$rN@T1my2lzJ%V2;*g|$JW2J~s%yy4s0jX%_LapyUlJ<;7S*d6%|kyfk5F6;<% zM5p$b9Z#>7t<8yg*ZX)$jNhXnPn&gKJYTI-bqQrFZy$}`L}Isk)ZNYqJ#Ly&g6j4q zH)ZL*)C@^jMoWDgW0CRvo?HvHy!S!xW}ad5aqrBcJA_3H)e@(6b-TDEs$XVEL?XNTKHdmd!xDOJ3w@)}s6WXpV+ z^!SM*{7-;!ck#66^Z8e&UO-cw)WejntIN*L$bkDzM_Vz7qZ$qU46m8{xzaTFt#M#`07n<4WE*< z+>L2*@m^}Sm>n`?M)E>+U?k~DH82X?*ZOv8LBkZ`?W5wntQYq$-1oVsOb=-HZ-3Y+ zFMi{Lk9u$<;~-gQT$#Mt?ViqfWy~$wzFh21TO04aYlhXQ_U-@ha_WffKF0HtQw&b= z^fS49T5IoM^fYVma;?P6o)C2yg|9bQo%-R7>8sF@9D>bVm$dGS)mwJvbx!%Z5vmTa zUIrx?fe^tdHhQudcQSE<`Xhe2c&x_Z>`SghJQ*;s-fH(_>N_=h?rCb(?X)ic2HG!r zjz$%__cpbM8SbCHe^(V|5J0fle^-}MiGV=W9y~!UyK$=ZWj71*T9YBuSy*{{6}Z6@}jrO`e)V@ z{ip7Oj^mwE1;j~qvBtIQXx*Ulr_2DS(-RJPJHyhJSUBxnwzhGbR`ZSXV71IwviefX z-X!+A`6tkZA*Ci}DxQWzzwX^+=YRjEv5o;x9I!{?v+j&aXYqBe%R1bHR)bPW9zM_}KDHps=33E1pCIeA zZ%?!J0kW>g`uy#2DeH3*-7wt-w)RH;J7Nc3fA5{rbhNFybHGHt$yV;|rgO+xNppiF z(9^cC{#PP(<2rvIeC(JQ}bv5}&ZoSm&)M6`%yyzIHn*$krw+%%q#P~SIc2TVIU*8MIO!VW^ jq&e-Oy04ygd5E4GUM9tka0z~jsflp5ccomi-5vWE4gvWD literal 0 HcmV?d00001 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 + ''
         + ''
         + '
'
-        + '