Dodawanie wyboru działu na formularzu kontaktowym

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] -%}
    <select name="contactId" class="department" required>
         {% for contact in config.Contact.Contacts -%}
              <option value="{{ contact.Id }}">{{ contact.Name }}</option>
         {% endfor -%}
    </select>
{% endif -%}

{% if config.Contact.Contacts[0] -%}

{% 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.

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');
}

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] -%}
   <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 -%}

{% if config.Contact.Contacts[0] -%}

<span class="required-fields-info">{{ translations.Department }} *</span>

{% 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.

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] -%}
    <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 -%}

{% if config.Contact.Contacts[0] -%}

<div>

<label>{{ translations.Department }}<span class='required-ui'>*</span></label>

{% for contact in config.Contact.Contacts -%}

<option value="{{ contact.Id }}">{{ contact.Name }}</option>

{% endfor -%}

</select>

</span>

</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:


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');
    }
}

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.

Dodawanie wyboru działu na formularzu kontaktowym

1. Bursztyn i Opal

2. Agat

3. Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt