Dodawanie wyboru działu na formularzu kontaktowym

Wskazówka

Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce.

Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Ta instrukcja przeznaczona jest dla standardowych szablonów Comarch starszych niż wersja 2019.6.

Jeśli posiadasz w sklepie kilka adresów do kontaktu, możesz umożliwić swoim klientom wybór jednego z nich na formularzu kontaktowym. Aby to zrobić, skorzystaj z poniższych instrukcji. Poszczególne pliki, które należy zmodyfikować znajdują się w Panelu administracyjnym w sekcji: Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane następnie Więcej/ Edytuj HTML.

Wskazówka

Pamiętaj, aby wprowadzone zmiany w szablonie Zapisać i Opublikować.

1. Bursztyn i Opal

1.1. W pliku contact.html odnajdź element z id „ContactSendForm” i powyżej pola e-mail dodaj poniższy kod:
`{% if config.Contact.Contacts[0] -%}

{% endif -%}`
1.2. Aby wygląd nowego pola był spójny z resztą formularza, w pliku scss/contact.scss odnajdź selektor „.contact-info .contact-form input, .contact-info .contact-form textarea” i zamień go na:

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

1.3. Skompiluj i zminifikuj pliki scss.

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

1.4. Aby walidacja działała poprawnie, w pliku js/init.js, odnajdź funkcję resetForm(form) i podmień ją na:
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. Zminifikuj pliki js.

Wskazówka

O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

2. Agat

2.1. W pliku contact.html odnajdź element z id „contact-form” i powyżej pola e-mail dodaj poniższy kod:
`{% if config.Contact.Contacts[0] -%}

{{ translations.Department }} *

{% endif -%}`
2.2. Aby wygląd nowego pola był spójny z resztą formularza, w pliku scss/mobile1.scss odnajdź selektor „input, textarea” i zamień go na:

input, textarea, .contact-form-popup select

2.3. Skompiluj i zminifikuj pliki scss.

Wskazówka

O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

2.4. Dodaj tłumaczenie dla frazy Department [Dział]

Tłumaczenie należy dodać w Panelu administracyjnym: Wygląd sklepu/ Ustawienia na zakładce Tłumaczenia.

3. Szafir

3.1. W pliku common/navigation-bars/navigation-contact.html odnajdź element z klasą „form-lq form-ui” i wewnątrz niego dodaj poniższy kod:
`{% if config.Contact.Contacts[0] -%}

{{ translations.Department }}*

{% endif -%}`
3.2. Dodaj tłumaczenie dla frazy Department [Dział]

Tłumaczenie należy dodać w Panelu administracyjnym: Wygląd sklepu/ Ustawienia na zakładce Tłumaczenia.

3.3. Aby walidacja działała poprawnie, w pliku js/init-ui2.js, odnajdź funkcję sendContactForm(e) i podmień ją na:
function sendContactForm(e) { if(app.validationBeforePost(e) != 'error'){ $('.during-ajax-modal-lq').removeClass('hidden-lq'); var form = $(e.currentTarget).parents('.form-lq'); var inputs = form.find('input, textarea, select'); var data = inputs.serializeArray(); data.push({name: "__csrf", value: __CSRF}); $.post('', data, function(result) { $('.during-ajax-modal-lq').addClass('hidden-lq'); if (result.action.Result) { var message = form.data('success'); app.temporaryMessage(form, message); $.each(inputs, function (index, value) { if ($(value).attr('name') !== 'contactId' && $(value).attr('name') !== '__action') { $(value).val(''); } }); form.find('.message-lq').remove(); } else { var message = '<p>' + result.action.Message + '</p>'; if(result.action.Code != 100){ app.message(form, message); } } }); $(e.currentTarget).removeClass('error-lq'); } else { $(e.currentTarget).addClass('error-lq'); } }
3.4. Zminifikuj pliki js.

Wskazówka

O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.