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>
This commit is contained in:
Raphael Michel
2024-10-29 09:53:36 +01:00
committed by GitHub
parent d97c983b6f
commit 0aa9dda90a
4 changed files with 33 additions and 19 deletions

View File

@@ -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">

View File

@@ -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 }}

View File

@@ -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;
}

View File

@@ -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;