From 0aa9dda90a00d60d177b8e7cb4802b62399a56fb Mon Sep 17 00:00:00 2001
From: Raphael Michel <michel@rami.io>
Date: Tue, 29 Oct 2024 09:53:36 +0100
Subject: [PATCH] Cross-selling: Use different label if there are no add-on
 products (#4577)

* Cross-selling: Use different label if there are no add-on products

* Update src/pretix/presale/templates/pretixpresale/event/checkout_addons.html

Co-authored-by: Richard Schreiber <schreiber@rami.io>

* Fix a11y problem

* Fix headline order

---------

Co-authored-by: Richard Schreiber <schreiber@rami.io>
---
 .../pretixpresale/event/checkout_addons.html  | 29 ++++++++++++++-----
 .../event/fragment_product_list.html          | 12 ++++----
 .../static/pretixpresale/scss/_checkout.scss  |  7 +++--
 .../static/pretixpresale/scss/_event.scss     |  4 +--
 4 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html b/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
index 57ab3d045..4cd1e54d9 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
+++ b/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
@@ -57,16 +57,29 @@
         </div>
 
         {% if cross_selling_data %}
-            <details class="panel panel-default cross-selling" open>
-                <summary class="panel-heading">
-                    <h3 class="panel-title">
-                        {% trans "More recommendations" %}
-                    </h3>
-                </summary>
+            {% if forms %}
+                <details class="panel panel-default cross-selling" open>
+                    <summary class="panel-heading">
+                        <h3 class="panel-title">
+                            {% trans "More recommendations" %}
+                        </h3>
+                    </summary>
+            {% else %}
+                <div class="panel panel-default cross-selling">
+                    <div class="panel-heading">
+                        <h3 class="panel-title">
+                            {% trans "Our recommendations" %}
+                        </h3>
+                    </div>
+            {% endif %}
                 <div class="panel-body">
-                    {% include "pretixpresale/event/fragment_product_list.html" with items_by_category=cross_selling_data ev=event %}
+                    {% include "pretixpresale/event/fragment_product_list.html" with items_by_category=cross_selling_data ev=event headline_level=4 %}
                 </div>
-            </details>
+            {% if forms %}
+                </details>
+            {% else %}
+                </div>
+            {% endif %}
         {% endif %}
 
         <div class="row checkout-button-row">
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 750d8c678..e6a947354 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
@@ -8,7 +8,7 @@
 {% for tup in items_by_category %}{% with category=tup.0 items=tup.1 form_prefix=tup.2 %}
     {% if category %}
         <section aria-labelledby="{{ form_prefix }}category-{{ category.id }}"{% if category.description %} aria-describedby="{{ form_prefix }}category-info-{{ category.id }}"{% endif %}>
-            <h3 id="{{ form_prefix }}category-{{ category.id }}">{{ category.name }}
+            <h{{ headline_level|default:3 }} class="h3" id="{{ form_prefix }}category-{{ category.id }}">{{ category.name }}
                 {% if category.subevent_name %}
                     <small class="text-muted"><i class="fa fa-calendar"></i> {{ category.subevent_name }}</small>
                 {% endif %}
@@ -19,13 +19,13 @@
                         {% trans "Your order qualifies for a discount" %}
                     </small>
                 {% endif %}
-            </h3>
+            </h{{ headline_level|default:3 }}>
             {% if category.description %}
                 <div id="{{ form_prefix }}category-info-{{ category.id }}">{{ category.description|localize|rich_text }}</div>
             {% endif %}
     {% else %}
         <section aria-labelledby="{{ form_prefix }}category-none">
-            <h3 id="{{ form_prefix }}category-none" class="sr-only">{% trans "Uncategorized items" %}</h3>
+            <h{{ headline_level|default:"3" }} id="{{ form_prefix }}category-none" class="h3 sr-only">{% trans "Uncategorized items" %}</h{{ headline_level|default:3 }}>
     {% endif %}
         {% for item in items %}
             {% if item.has_variations %}
@@ -43,7 +43,7 @@
                                 </a>
                             {% endif %}
                             <div class="product-description {% if item.picture %}with-picture{% endif %}">
-                                <h4 id="{{ form_prefix }}item-{{ item.pk }}-legend">{{ item.name }}</h4>
+                                <h{{ headline_level|default:3|add:1 }} class="h4" id="{{ form_prefix }}item-{{ item.pk }}-legend">{{ item.name }}</h{{ headline_level|default:3|add:1 }}>
                                 {% if item.description %}
                                     <div id="{{ form_prefix }}item-{{ item.pk }}-description" class="product-description">
                                         {{ item.description|localize|rich_text }}
@@ -117,7 +117,7 @@
                                 data-price="{% if event.settings.display_net_prices %}{{ var.display_price.net|unlocalize }}{% else %}{{ var.display_price.gross|unlocalize }}{% endif %}"
                             {% endif %}>
                                 <div class="col-md-8 col-sm-6 col-xs-12">
-                                    <h5 id="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}-legend">{{ var }}</h5>
+                                    <h{{ headline_level|default:3|add:2 }} class="h5" id="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}-legend">{{ var }}</h{{ headline_level|default:3|add:2 }}>
                                     {% if var.description %}
                                         <div id="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}-description" class="variation-description">
                                             {{ var.description|localize|rich_text }}
@@ -261,7 +261,7 @@
                             </a>
                         {% endif %}
                         <div class="product-description {% if item.picture %}with-picture{% endif %}">
-                            <h4 id="{{ form_prefix }}item-{{ item.pk }}-legend">{{ item.name }}</h4>
+                            <h{{ headline_level|default:3|add:1 }} class="h4" id="{{ form_prefix }}item-{{ item.pk }}-legend">{{ item.name }}</h{{ headline_level|default:3 }}>
                             {% if item.description %}
                                 <div id="{{ form_prefix }}item-{{ item.pk }}-description" class="product-description">
                                     {{ item.description|localize|rich_text }}
diff --git a/src/pretix/static/pretixpresale/scss/_checkout.scss b/src/pretix/static/pretixpresale/scss/_checkout.scss
index b0cd8a0fa..ebd909cc2 100644
--- a/src/pretix/static/pretixpresale/scss/_checkout.scss
+++ b/src/pretix/static/pretixpresale/scss/_checkout.scss
@@ -102,15 +102,16 @@
     }
   }
 }
-.cross-selling .panel-body h3 {
+.cross-selling .panel-body h3, .cross-selling .panel-body .h3 {
   font-size: 21px;
   line-height: inherit;
   margin-top: 20px;
 }
-.cross-selling .panel-body > *:first-child > h3:first-child {
+.cross-selling .panel-body > *:first-child > h3:first-child,
+.cross-selling .panel-body > *:first-child > .h3:first-child {
   margin-top: 0;
 }
-.cross-selling .panel-body h3 small {
+.cross-selling .panel-body h3 small, .cross-selling .panel-body .h3 small {
   padding-left: 20px;
 }
 
diff --git a/src/pretix/static/pretixpresale/scss/_event.scss b/src/pretix/static/pretixpresale/scss/_event.scss
index 2710a941d..a56294e2d 100644
--- a/src/pretix/static/pretixpresale/scss/_event.scss
+++ b/src/pretix/static/pretixpresale/scss/_event.scss
@@ -53,7 +53,7 @@
     &.variation label {
         font-weight: normal;
     }
-    h4 {
+    h4, .h4 {
         font-size: inherit;
         margin: 0;
         line-height: inherit;
@@ -62,7 +62,7 @@
             font-weight: bold;
         }
     }
-    h5 {
+    h5, .h5 {
         font-size: inherit;
         font-weight: inherit;
         margin: 0;