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.
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:
0 1 2 3 4 5 6 7 8 |
{% 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. 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.
1.4. Aby walidacja działała poprawnie, w pliku js/init.js, odnajdź funkcję resetForm(form) i podmień ją na:
0 1 2 3 4 5 6 7 8 9 |
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.
2. Agat
2.1. W pliku contact.html odnajdź element z id „contact-form” i powyżej pola e-mail dodaj poniższy kod:
0 1 2 3 4 5 6 7 8 9 10 11 |
{% 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. 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.
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:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{% if config.Contact.Contacts[0] -%} <div> <label>{{ translations.Department }}<span class='required-ui'>*</span></label> <span class="select-background-ui w100-ui"> <select name="contactId" required> {% for contact in config.Contact.Contacts -%} <option value="{{ contact.Id }}">{{ contact.Name }}</option> {% endfor -%} </select> </span> <i class="ti-angle-down select-arrow-ui"></i> </div> {% 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:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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.