Hinzufügen einer Abteilungsauswahl im Kontaktformular

Diese Anleitung ist für Standard-Comarch-Vorlagen vor der Version 2019.6.

Wenn du im Webshop mehrere Kontaktadressen hast, kannst du deinen Kunden die Auswahl über das Kontaktformular ermöglichen. Befolg dazu die folgenden Anweisungen. Einzelne Dateien, die geändert werden müssen, findest du im Administrationsbereich im Abschnitt: Webshop Layouts ➞ Einstellungen ➞ Mehr ➞ Erweiterte Einstellungen bearbeiten dann MehrBearbeiten HTML.

Tipp
Denke daran, Änderungen an der Vorlage vorzunehmen Spiechern und Veröffentlichen.

1. Bernstein i Opal

1.1. Suche in der Datei contact.html das Element mit der ID “ContactSendForm” und füge über dem E-Mail-Feld den folgenden Code hinzu:

{% if config.Contact.Contacts[0] -%}
<select name=”contactId” class=”department” required>
{% for contact in config.Contact.Contacts -%}
<option value=”{{ contact.Id }}”>{{ contact.Name }}</option>
{% endfor -%}
</select>
{% endif -%}

1.2. Um das Webshop Layout des neuen Felds mit dem Rest des Formulars in Einklang zu bringen, finde im scss/contact.scss Selektor “.contact-info .contact-form input, .contact-info .contact-form textarea” und ersetze es durch:

.contact-info .contact-form input, .contact-info .contact-form textarea, .contact-info .contact-form select

1.3. Kompiliere und minimiere scss-Dateien.

Tipp
Um zu erfahren, wie du scss-Dateien kompilierst und minimierst, lese es in dem Artikel über Dateikompilierung und -minifizierung .

1.4. Damit die Validierung ordnungsgemäß funktioniert, js/init.js, finde Funktion resetForm(form) und ersetze es durch

function resetForm(form) {
var inputs = form.find(‘input:not([disabled]):not([type=hidden]), select:not([disabled]):not(“.department”), textarea:not([disabled])’);
inputs.each(function () {
$(this).val(”);
});
$(‘.loader-icon’).remove();
$(‘.send-contact-form’).removeClass(‘posting’);
}

1.5. Minimiere js-Dateien.

Tipp
Informationen zum Minimieren von Dateien js, lese es in dem Artikel über Dateikompilierung und -minifizierung .

2. Achat

2.1. Suche in der Datei contact.html das Element mit der ID “contact-form” und füge über dem E-Mail-Feld den folgenden Code hinzu:

{% if config.Contact.Contacts[0] -%}
<div class=”input-group”>
<span class=”required-fields-info”>{{ translations.Department }} *</span>
<select name=”contactId” required>
{% for contact in config.Contact.Contacts -%}
<option value=”{{ contact.Id }}”>{{ contact.Name }}</option>
{% endfor -%}
</select>
</div>
{% endif -%}

2.2. Um das Webshop Layout des neuen Felds mit dem Rest des Formulars in Einklang zu bringen, finde im scss/mobile1.scss Selektor “input, textarea” und ersetze es durch:

input, textarea, .contact-form-popup select

2.3. Kompiliere und minimiere scss-Dateien.

Tipp
Um zu erfahren, wie du scss-Dateien kompilierst und minimierst, lese es in dem Artikel über Dateikompilierung und -minifizierung .

2.4. Füge eine Übersetzung für den Satz [Department] hinzu

Die Übersetzung sollte im Administrationsbereich hinzugefügt werden: Webshop Layout ➞ Einstellungen im Reiter Übersetzungen.

 

Finden Sie den Artikel hilfreich?