Obsługa załączników na formularzu kontaktowym

Z tego artykułu dowiesz się jak dodać w szablonie obsługę załączników na formularzu kontaktowym.

Uwaga

Instrukcja przeznaczona dla sklepów od wersji 2022.0 ze starszymi szablonami.

Wskazówka

Artykuł przeprowadzi Cię przez proces modyfikacji plików js. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

Szafir

W pliku common/navigation-bars/navigation-contact.html znajdź frazę contact-form-required-fields-ui i linijkę niżej wklej poniższy kod:


{% if config.Contact.AttachmentsEnabled -%}
    <div>
        <label for="file" class="add-attachement-label-ui"><i class="ti-clip"></i> {{ translations.AddAttachement }}</label>
        {% capture maxSize -%}{{config.Contact.AttachmentMaxSize}}B{% endcapture -%}
        {% for i in (1..config.Contact.AttachmentsMaxCount) -%}
            <div class="input-file-container-ui">
                <input class="add-attachement-in-complaint-ui add-attachement-in-complaint-lq" type="file" name="file" accept="{{ config.Contact.AttachmentExtensions }}" data-file-size="{{ config.Contact.AttachmentMaxSize }}" data-size-exceeded="{{ translations.Com_FileSizeExceeded | Format: maxSize }}" data-invalid-file="{{ translations.Com_InvalidFile | Format: config.Contact.AttachmentExtensions }}" />
                <i class="ti-close clear-file-input-ui clear-file-input-lq hidden-lq"></i>
            </div>
        {% endfor -%}
    </div>
{% endif -%}

{% if config.Contact.AttachmentsEnabled -%}

<div>

<label for="file" class="add-attachement-label-ui"><i class="ti-clip"></i> {{ translations.AddAttachement }}</label>

{% capture maxSize -%}{{config.Contact.AttachmentMaxSize}}B{% endcapture -%}

{% for i in (1..config.Contact.AttachmentsMaxCount) -%}

</div>

{% endfor -%}

</div>

{% endif -%}

Następnie w pliku js/init-ui2.js znajdź frazę function sendContactForm(e) i usuń całą tą funkcję wraz z jej wywołaniem które jest zaraz pod nią.

Przejdź do pliku js/init.js i znajdź frazę List of events. Linijkę wyżej wklej poniższy kod:


sendContactForm: function(e) {
		if(app.validationBeforePost(e) != 'error'){
			$('.during-ajax-modal-lq').removeClass('hidden-lq');
			var form = $(e.currentTarget).parents('.form-lq');
			var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();
			var fileList = window.attachementsInComplaint;
			if(fileList != undefined){
				var filesSize = fileList.length;
			}
			var fd = new FormData();
			fd.append('__csrf', __CSRF);
			for(var i=0; i<dataFromHTML.length; i++){
				fd.append(dataFromHTML[i].name,dataFromHTML[i].value);
			}
			if (filesSize > 0) {
				window.AttachementsErrors = 0;
				function addAttachementError(file, message) {
					if(window.AttachementsNotAdded == undefined){
						window.AttachementsNotAdded = [];
					}
					var attachement = '<div style="padding: 20px;"><strong>'+file.name+'</strong>: '+message+'</div>';
					window.AttachementsNotAdded.push(attachement);
					window.AttachementsErrors += 1;
				};
				var input = form.find('[name=file]').eq(0);
				var extensions = input.attr('accept').split(', ');
				var fileSize = input.data('file-size');
				for (var i=0; i<filesSize; i++) {
					var file = fileList.pop();
					if(file.size < fileSize){
						var extensionArr = file.name.split('.');
						var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase();
						var wrongExtension = true;
						for(var j=0; j<extensions.length; j++){
							if(extension == extensions[j]){
								fd.append('file'+i, file);
								var wrongExtension = false;
							}
						}
						if(wrongExtension){
							var message = input.data('invalid-file');
							addAttachementError(file, message);
						}
					} else {
						var message = input.data('size-exceeded');
						addAttachementError(file, message);
					}
				}
				if(window.AttachementsNotAdded){
					var popup = '<div class="message-popup-background-ui errors-lq cancel-lq container-to-delete-lq" style="overflow: auto">'+
									'<div class="message-popup-ui box-ui after-adding-to-cart-popup-ui message-popup-on-background-lq" style="position: absolute; top: 0; transform: none; margin: 10% auto">'+
										'<div class="box-ui product-added-to-cart-ui" style="position: relative; padding: 20px;">'+
											__translations.AttachementsNotAdded+
											'<i class="ti-close cancel-lq" style="position:absolute; right: 20px; top: 20px; cursor: pointer"></i>'+
										'</div>'+
										window.AttachementsNotAdded.join('')+
									'</div>'+
								'</div>';
					$('body').append(popup);
					$('body').addClass('modal-opened-ui');
					window.AttachementsNotAdded = undefined;
					window.AttachementsErrors = undefined;
				}
			}
			$.ajax({
				data: fd, processData: false, contentType: false, type: 'POST',
				success: function (data) {
					$('.during-ajax-modal-lq').addClass('hidden-lq');
					$('.add-attachement-in-complaint-lq').val('');
					if (data.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');
		}
	},

sendContactForm: function(e) {

if(app.validationBeforePost(e) != 'error'){

$('.during-ajax-modal-lq').removeClass('hidden-lq');

var form = $(e.currentTarget).parents('.form-lq');

var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();

var fileList = window.attachementsInComplaint;

if(fileList != undefined){

var filesSize = fileList.length;

}

var fd = new FormData();

fd.append('__csrf', __CSRF);

for(var i=0; i<dataFromHTML.length; i++){

fd.append(dataFromHTML[i].name,dataFromHTML[i].value);

}

if (filesSize > 0) {

window.AttachementsErrors = 0;

function addAttachementError(file, message) {

if(window.AttachementsNotAdded == undefined){

window.AttachementsNotAdded = [];

}

var attachement = '<div style="padding: 20px;"><strong>'+file.name+'</strong>: '+message+'</div>';

window.AttachementsNotAdded.push(attachement);

window.AttachementsErrors += 1;

};

var input = form.find('[name=file]').eq(0);

var extensions = input.attr('accept').split(', ');

var fileSize = input.data('file-size');

for (var i=0; i<filesSize; i++) {

var file = fileList.pop();

if(file.size < fileSize){

var extensionArr = file.name.split('.');

var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase();

var wrongExtension = true;

for(var j=0; j<extensions.length; j++){

if(extension == extensions[j]){

fd.append('file'+i, file);

var wrongExtension = false;

}

if(wrongExtension){

var message = input.data('invalid-file');

addAttachementError(file, message);

}

} else {

var message = input.data('size-exceeded');

addAttachementError(file, message);

}

if(window.AttachementsNotAdded){

var popup = '<div class="message-popup-background-ui errors-lq cancel-lq container-to-delete-lq" style="overflow: auto">'+

'<div class="message-popup-ui box-ui after-adding-to-cart-popup-ui message-popup-on-background-lq" style="position: absolute; top: 0; transform: none; margin: 10% auto">'+

'<div class="box-ui product-added-to-cart-ui" style="position: relative; padding: 20px;">'+

__translations.AttachementsNotAdded+

'<i class="ti-close cancel-lq" style="position:absolute; right: 20px; top: 20px; cursor: pointer"></i>'+

'</div>'+

window.AttachementsNotAdded.join('')+

'</div>'+

'</div>';

$('body').append(popup);

$('body').addClass('modal-opened-ui');

window.AttachementsNotAdded = undefined;

window.AttachementsErrors = undefined;

}

$.ajax({

data: fd, processData: false, contentType: false, type: 'POST',

success: function (data) {

$('.during-ajax-modal-lq').addClass('hidden-lq');

$('.add-attachement-in-complaint-lq').val('');

if (data.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');

}

Pozostając w tym samym pliku (js/init.js) po wklejeniu powyższego kodu zejdź trochę niżej do funkcji events i analogicznie do pozostałych wywołań dodaj poniższy kod:


$('body').on('click', '.send-contact-form-lq', function(e) {
    app.sendContactForm(e);
});

$('body').on('click', '.send-contact-form-lq', function(e) {

app.sendContactForm(e);

});

Wskazówka

Aby załączniki pokazały się w szablonie należy aktywować parametr „Załączniku do formularza kontaktowego” z poziomu Panelu Administracyjnego/Ustawienia/Ustawienia sklepu/Ogólne.

Obsługa załączników na formularzu kontaktowym

Obsługa załączników na formularzu kontaktowym

Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt