Widget: Add a compatibility mode for Jimdo

doc/user/events/widget.rst

@@ -36,6 +36,12 @@ The second snippet should be embedded at the position where the widget should sh
     You can of course embed multiple widgets of multiple events on your page. In this case, please add the first
     snippet only *once* and the second snippets once *for each event*.
 
+.. note::
+
+    Some website builders like Jimdo have trouble with our custom HTML tag. In that case, you can use
+    ``<div class="pretix-widget-compat" …></div>`` instead of ``<pretix-widget …></pretix-widget>`` starting with
+    pretix 1.14.
+
 Example
 -------
 

src/pretix/control/forms/event.py

@@ -983,6 +983,11 @@ class WidgetCodeForm(forms.Form):
                     "bought via the widget, this voucher will be used. This can for example be used to provide "
                     "widgets that give discounts or unlock secret products.")
     )
+    compatibility_mode = forms.BooleanField(
+        label=_("Compatibility mode"),
+        help_text=_("Our regular widget doesn't work in all website builders. If you run into trouble, try using "
+                    "this compatibility mode.")
+    )
 
     def __init__(self, *args, **kwargs):
         self.event = kwargs.pop('event')

src/pretix/control/templates/pretixcontrol/event/widget.html

@@ -31,6 +31,20 @@
         {% else %}
           {% abseventurl request.event "presale:event.index" as indexurl %}
         {% endif %}
+        {% if form.cleaned_data.compatibility_mode %}
+            <pre>&lt;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 %}&gt;&lt;/div&gt;
+&lt;noscript&gt;
+   &lt;div class="pretix-widget"&gt;
+        &lt;div class="pretix-widget-info-message"&gt;
+                {% blocktrans trimmed with a_attr='target="_blank" rel="noopener" href="'|add:indexurl|add:'"'|safe %}
+                    JavaScript is disabled in your browser. To access our ticket shop without JavaScript,
+                    please &lt;a {{ a_attr }}&gt;click here&lt;/a&gt;.
+                {% endblocktrans %}
+                &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/noscript&gt;
+</pre>
+        {% else %}
         <pre>&lt;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 %}&gt;&lt;/pretix-widget&gt;
 &lt;noscript&gt;
    &lt;div class="pretix-widget"&gt;
@@ -43,6 +57,7 @@
     &lt;/div&gt;
 &lt;/noscript&gt;
 </pre>
+            {% endif %}
         <p>
             <a href="https://docs.pretix.eu/en/latest/user/events/widget.html" target="_blank" rel="noopener">
                 <span class="fa fa-question-circle"></span>

src/pretix/plugins/stripe/views.py

@@ -39,7 +39,7 @@ def redirect_view(request, *args, **kwargs):
     except signing.BadSignature:
         return HttpResponseBadRequest('Invalid parameter')
 
-    r = render(request, 'pretixplugins/paypal/redirect.html', {
+    r = render(request, 'pretixplugins/stripe/redirect.html', {
         'url': url,
     })
     r._csp_ignore = True

src/pretix/static/pretixpresale/js/widget/widget.js

@@ -653,6 +653,10 @@ var create_widget = function (element) {
     var subevent = element.attributes.subevent ? element.attributes.subevent.value : null;
     var skip_ssl = element.attributes["skip-ssl-check"] ? true : false;
 
+    if (element.tagName !== "pretix-widget") {
+        element.innerHTML = "<pretix-widget></pretix-widget>";
+    }
+
     var app = new Vue({
         el: element,
         data: function () {
@@ -727,6 +731,10 @@ var create_button = function (element) {
     var skip_ssl = element.attributes["skip-ssl-check"] ? true : false;
     var button_text = element.innerHTML;
 
+    if (element.tagName !== "pretix-button") {
+        element.innerHTML = "<pretix-button>" + element.innerHTML + "</pretix-button>";
+    }
+
     var itemsplit = raw_items.split(",");
     var items = [];
     for (var i = 0; i < itemsplit.length; i++) {
@@ -768,14 +776,14 @@ buttonlist = [];
 document.createElement("pretix-widget");
 document.createElement("pretix-button");
 docReady(function () {
-    var widgets = document.querySelectorAll("pretix-widget");
+    var widgets = document.querySelectorAll("pretix-widget, div.pretix-widget-compat");
     var wlength = widgets.length;
     for (var i = 0; i < wlength; i++) {
         var widget = widgets[i];
         widgetlist.push(create_widget(widget));
     }
 
-    var buttons = document.querySelectorAll("pretix-button");
+    var buttons = document.querySelectorAll("pretix-button, div.pretix-button-compat");
     var blength = buttons.length;
     for (var i = 0; i < blength; i++) {
         var button = buttons[i];