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

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.

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

{% 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 = '

’; 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 = ’

’; $(’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 = ’

’ + result.action.Message + ’

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