Item form: Fancy radio buttons for has_Variations and admission

This commit is contained in:
Raphael Michel
2020-11-23 15:25:48 +01:00
parent 14a66ff80c
commit 2ebd040a7c
7 changed files with 151 additions and 15 deletions

View File

@@ -226,6 +226,8 @@ class ItemCreateForm(I18nModelForm):
def __init__(self, *args, **kwargs):
self.event = kwargs['event']
self.user = kwargs.pop('user')
kwargs.setdefault('initial', {})
kwargs['initial'].setdefault('admission', True)
super().__init__(*args, **kwargs)
self.fields['category'].queryset = self.instance.event.categories.all()

View File

@@ -4,11 +4,11 @@
{% block form %}
{% bootstrap_field form.organizer layout="horizontal" %}
<div class="form-group">
<label class="col-md-3 control-label">Event type</label>
<label class="col-md-3 control-label">{% trans "Event type" %}</label>
<div class="col-md-9">
<div class="big-radio radio">
<label>
<input type="radio" value="" name="{{ form.has_subevents.html_name }}">
<input type="radio" value="" name="{{ form.has_subevents.html_name }}" {% if not form.has_subevents.value %}checked{% endif %}>
<span class="fa fa-calendar-o"></span>
<strong>{% trans "Singular event or non-event shop" %}</strong><br>
<div class="help-block">
@@ -27,7 +27,7 @@
</div>
<div class="big-radio radio">
<label>
<input type="radio" value="on" name="{{ form.has_subevents.html_name }}">
<input type="radio" value="on" name="{{ form.has_subevents.html_name }}" {% if not form.has_subevents.value %}checked{% endif %}>
<span class="fa fa-calendar"></span>
<strong>{% trans "Event series or time slot booking" %}</strong>
<div class="help-block">

View File

@@ -14,9 +14,94 @@
{% bootstrap_field form.internal_name layout="control" %}
</div>
{% bootstrap_field form.copy_from layout="control" %}
{% bootstrap_field form.has_variations layout="control" %}
<div class="form-group">
<label class="col-md-3 control-label">{% trans "Product type" %}</label>
<div class="col-md-9">
<div class="big-radio radio">
<label>
<input type="radio" value="on" name="{{ form.admission.html_name }}" {% if form.admission.value %}checked{% endif %}>
<span class="fa fa-user"></span>
<strong>{% trans "Admission product" %}</strong><br>
<div class="help-block">
{% blocktrans trimmed %}
Every purchase of this product represents one person who is allowed to enter your event.
By default, pretix will only ask for attendee information and offer ticket downloads for these products.
{% endblocktrans %}
</div>
<div class="help-block">
{% blocktrans trimmed %}
This option should be set for most things that you would call a "ticket". For product add-ons or bundles, this should
be set on the main ticket, except if the add-on products or bundled products represent additional people (e.g. group bundles).
{% endblocktrans %}
</div>
</label>
</div>
<div class="big-radio radio">
<label>
<input type="radio" value="" name="{{ form.admission.html_name }}" {% if not form.admission.value %}checked{% endif %}>
<span class="fa fa-cube"></span>
<strong>{% trans "Non-admission product" %}</strong>
<div class="help-block">
{% blocktrans trimmed %}
A product that does not represent a person. By default, pretix will not ask for attendee information or offer
ticket downloads.
{% endblocktrans %}
</div>
<div class="help-block">
{% blocktrans trimmed %}
Examples: Merchandise, donations, gift cards, add-ons to a main ticket.
{% endblocktrans %}
</div>
</label>
</div>
</div>
</div>
{% bootstrap_field form.category layout="control" %}
{% bootstrap_field form.admission layout="control" %}
<div class="form-group">
<label class="col-md-3 control-label">{% trans "Product variations" %}</label>
<div class="col-md-9">
<div class="big-radio radio">
<label>
<input type="radio" value="" name="{{ form.has_variations.html_name }}" {% if not form.has_variations.value %}checked{% endif %}>
<span class="fa fa-fw fa-square"></span>
<strong>{% trans "Simple product" %}</strong><br>
<div class="help-block">
{% blocktrans trimmed %}
This product is available in only one variation.
{% endblocktrans %}
</div>
<div class="help-block">
{% blocktrans trimmed %}
This can't be changed later.
{% endblocktrans %}
</div>
</label>
</div>
<div class="big-radio radio">
<label>
<input type="radio" value="on" name="{{ form.has_variations.html_name }}" {% if form.has_variations.value %}checked{% endif %}>
<span class="fa fa-fw fa-th-large"></span>
<strong>{% trans "Product with multiple variations" %}</strong>
<div class="help-block">
{% blocktrans trimmed %}
This product exists in multiple variations which are different in either their name, price, quota, or description.
All other settings need to be the same.
{% endblocktrans %}
</div>
<div class="help-block">
{% blocktrans trimmed %}
Examples: Ticket category with variations for "full price" and "reduced", merchandise with variations for different sizes,
workshop add-on with variations for simultaneous workshops.
{% endblocktrans %}
</div>
</label>
</div>
</div>
</div>
</fieldset>
{% if form.quota_option %}
<fieldset>

View File

@@ -10,13 +10,56 @@
<div class="tabbed-form">
<fieldset>
<legend>{% trans "General" %}</legend>
{% bootstrap_field form.active layout="control" %}
{% bootstrap_field form.name layout="control" %}
<div class="internal-name-wrapper">
{% bootstrap_field form.internal_name layout="control" %}
</div>
{% bootstrap_field form.category layout="control" %}
{% bootstrap_field form.active layout="control" %}
{% bootstrap_field form.admission layout="control" %}
<div class="form-group">
<label class="col-md-3 control-label">{% trans "Product type" %}</label>
<div class="col-md-9">
<div class="big-radio radio">
<label>
<input type="radio" value="on" name="{{ form.admission.html_name }}" {% if form.admission.value %}checked{% endif %}>
<span class="fa fa-fw fa-user"></span>
<strong>{% trans "Admission product" %}</strong><br>
<div class="help-block">
{% blocktrans trimmed %}
Every purchase of this product represents one person who is allowed to enter your event.
By default, pretix will only ask for attendee information and offer ticket downloads for these products.
{% endblocktrans %}
</div>
<div class="help-block">
{% blocktrans trimmed %}
This option should be set for most things that you would call a "ticket". For product add-ons or bundles, this should
be set on the main ticket, except if the add-on products or bundled products represent additional people (e.g. group bundles).
{% endblocktrans %}
</div>
</label>
</div>
<div class="big-radio radio">
<label>
<input type="radio" value="" name="{{ form.admission.html_name }}" {% if not form.admission.value %}checked{% endif %}>
<span class="fa fa-fw fa-cube"></span>
<strong>{% trans "Non-admission product" %}</strong>
<div class="help-block">
{% blocktrans trimmed %}
A product that does not represent a person. By default, pretix will not ask for attendee information or offer
ticket downloads.
{% endblocktrans %}
</div>
<div class="help-block">
{% blocktrans trimmed %}
Examples: Merchandise, donations, gift cards, add-ons to a main ticket.
{% endblocktrans %}
</div>
</label>
</div>
</div>
</div>
{% bootstrap_field form.description layout="control" %}
{% bootstrap_field form.picture layout="control" %}
{% bootstrap_field form.require_approval layout="control" %}

View File

@@ -73,7 +73,7 @@
</td>
<td>
{% if i.var_count %}
<span class="fa fa-list-ul fa-fw text-muted" data-toggle="tooltip" title="{% trans "Product with variations" %}"></span>
<span class="fa fa-th-large fa-fw text-muted" data-toggle="tooltip" title="{% trans "Product with variations" %}"></span>
{% endif %}
</td>
<td>

View File

@@ -31,9 +31,9 @@ $(document).ready(function () {
);
function toggleblock() {
$("#new-quota-group").closest('fieldset').toggle(!$("#id_has_variations").prop('checked'));
$("#new-quota-group").closest('fieldset').toggle(!$("[name=has_variations][value=on]").prop('checked'));
}
$("#id_has_variations").change(toggleblock);
$("[name=has_variations]").change(toggleblock);
toggleblock();
});

View File

@@ -439,9 +439,9 @@ table td > .checkbox input[type="checkbox"] {
}
}
.form-horizontal .big-radio {
border: 2px solid #ccc;
border: 1px solid #ccc;
border-bottom: 0;
padding: 0;
border-radius: $border-radius-base;
label {
padding: 15px 15px 15px 30px;
}
@@ -449,9 +449,15 @@ table td > .checkbox input[type="checkbox"] {
.help-block {
margin-bottom: 0;
}
}
.form-horizontal .big-radio:not(:last-child) {
margin-bottom: 15px;
&:first-child {
border-top-left-radius: $border-radius-base;
border-top-right-radius: $border-radius-base;
}
&:last-child {
border-bottom-left-radius: $border-radius-base;
border-bottom-right-radius: $border-radius-base;
border-bottom: 1px solid #ccc;
}
}
.accordion-radio {
display: block;