// ##### Example 1 ##### // Make 'dni' field required only for Italy - add this Custom JS: tc_confirmOrderValidations['dni_required_for_italy'] = function () { var italyCountryId = 2; var errorMsg = 'Required field'; $('#thecheckout-address-invoice input[name=dni]').removeClass('-error'); removeError('#thecheckout-address-invoice .error-msg'); if ( italyCountryId == $('#thecheckout-address-invoice select[name=id_country]').val() && $('#thecheckout-address-invoice input[name=dni]').is(':visible') && '' == jQuery.trim($('#thecheckout-address-invoice input[name=dni]').val()) ) { $('#thecheckout-address-invoice input[name=dni]').addClass('-error'); $('#thecheckout-address-invoice input[name=dni]').after('
' + errorMsg + '
'); scrollToError(); return false; } else { return true; } }; // ##### Example 2 ##### // Make 'dni' field required only for Italy and only when 'I am a business customer' is *unticked*, // including *-mark next to field - add this Custom JS: tc_confirmOrderValidations['dni_required_for_italy_non_business'] = function () { var italyCountryId = 2; var errorMsg = 'Required field'; $('#thecheckout-address-invoice input[name=dni]').removeClass('-error'); removeError('#thecheckout-address-invoice .error-msg'); if ( italyCountryId == $('#thecheckout-address-invoice select[name=id_country]').val() && $('#thecheckout-address-invoice input[name=dni]').is(':visible') && '' == jQuery.trim($('#thecheckout-address-invoice input[name=dni]').val()) && !$('#i_am_business').is(':checked') ) { $('#thecheckout-address-invoice input[name=dni]').addClass('-error'); $('#thecheckout-address-invoice input[name=dni]').after('
' + errorMsg + '
'); scrollToError(); return false; } else { return true; } }; $('body').on('change', '[data-link-action=x-i-am-business]', function () { let dniLabelEl = $('#thecheckout-address-invoice input[name=dni]').closest('label'); if ($(this).prop('checked')) { dniLabelEl.removeClass('required'); } else { dniLabelEl.addClass('required'); } return false; }); $(document).ready(function() { // Initial setup - set field required (visually) when above conditions are met $('[data-link-action=x-i-am-business]').trigger('change'); }); // ##### Example 3 ##### // Hide certain fields for virtual cart // Add this to custom CSS (choose which fields and in which block; !important flag is due to postcode being managed from JS) body.is-virtual-cart #thecheckout-address-invoice :is(.form-group.firstname, .form-group.city, .form-group.postcode) { display: none!important; } // ##### Example 4 ##### // Add 2nd email (verification) field 1/ Add Custom CSS in checkout module settings: /* Custom CSS for emails verification */ .form-group.email-verification .field-label:before { display: inline-block; float: right; font-weight: normal; padding-left: 5px; } .lang-en .email-verification .field.error-msg { display: block; } /* // ---------------> Update labels here */ /* English and Danish versions, for other languages, add new rules .lang-xx prefix instead of .lang-en */ .lang-en .email-verification .field.error-msg.emails-do-not-match:before { content: 'Emails do not match'; } .lang-da .email-verification .field.error-msg.emails-do-not-match:before { content: 'E-mail adresserne er ikke ens'; } 2/ Add Custom JS in checkout module settings: document.addEventListener('DOMContentLoaded', function(event) { //jQuery shall be loaded now var email_selector = '.account-fields .form-group.email:not(.email-verification)'; var email_verif_selector = '.account-fields .form-group.email-verification'; tc_confirmOrderValidations['email_verification'] = function() { $(email_verif_selector +' .error-msg').remove(); if ( $(email_verif_selector + ' input[name=email-verification]:visible').length && $(email_selector + ' input[name=email]').val() != $(email_verif_selector + ' input[name=email-verification]').val() ) { $(email_verif_selector + ' label input').addClass('-error'); $(email_verif_selector + ' label input').after('
'); scrollToElement($(email_verif_selector)); return false; } else { return true; } } $('.account-fields .form-group.email:visible').clone().addClass('email-verification').insertAfter('.account-fields .form-group.email'); $('.email-verification > input').attr('name', 'email-verification'); // ---------------> Update labels here if (prestashop.language.iso_code == 'en') { $(email_verif_selector + ' .field-label').html('Confirm e-mail '); } else if (prestashop.language.iso_code == 'da') { $(email_verif_selector + ' .field-label').html('Bekræft e-mail '); } }); // ##### Example 5 - checkout steps ##### // Validation expression (JS) to check filled in address $('.address-fields, .account-fields').find('input.form-control[required]:visible').filter((k,v) => $(v).val() == '').length == 0 // Display cart-summary on each step, but have it styled differently in step 1 (full-width), add custom CSS: .checkout-step-1 .checkout-area-4 { display: block; } // ##### Example 6 - pre-tick checkboxes (on page load) ##### // Add to custom JS: document.addEventListener('DOMContentLoaded', function(event) { // Pre-tick terms and conditions and psgdpr checkboxes $('[name^=conditions_to_approve], [name=psgdpr]').prop('checked', true); }); // ##### Example 7 - validate phone input (9 numbers) ##### tc_confirmOrderValidations['phone_9_numbers'] = function () { var phoneFields = $('.address-fields input[type=tel]:visible'); var errorMsg = 'Phone must have 9 digits'; phoneFields.removeClass('-error'); removeError(phoneFields.siblings('.error-msg')); var allPhoneFieldsOK = true; phoneFields.each(function() { var phoneVal = $(this).val().trim(); if (phoneVal && phoneVal.replace(/[^0-9]/g, '').length !== 9) { allPhoneFieldsOK = false; $(this).addClass('-error'); $(this).after('
' + errorMsg + '
'); } }); if (!allPhoneFieldsOK) { scrollToError(); } return allPhoneFieldsOK; }; // ##### Example 8 - validate address1 (street) to have 2+ non-numeric characters and 1 number ##### tc_confirmOrderValidations['street_non_numeric'] = function () { var addressFields = $('.address-fields input[name=address1]:visible'); var errorMsg = 'Street name must be at least 2 characters and number'; addressFields.removeClass('-error'); removeError(addressFields.siblings('.error-msg')); var allAddressFieldsOK = true; addressFields.each(function() { var addressVal = $(this).val(); if (addressVal !== '' && (addressVal.replace(/[^a-zA-Z]/g, '').length < 2 || addressVal.replace(/[^0-9]/g, '').length < 1)) { allAddressFieldsOK = false; $(this).addClass('-error'); $(this).after('
' + errorMsg + '
'); } }); if (!allAddressFieldsOK) { scrollToError(); } return allAddressFieldsOK; }; // ##### Example 9 - using craftyclick module (for the UK) + shipping parcel points module ##### // Add custom JS document.addEventListener('DOMContentLoaded', function(event) { $('body').off('click.crafty').on('click.crafty', '[id$=_cp_button_id]', function() { setTimeout(function() { $('.address-fields [name=city]:visible').change(); }, 200); }) }); // ##### Example 10 - Add payment logos // 1. Firstly, find and add logos to PS file structure, e.g. to /modules/thecheckout/views/img folder // 2. Add custom CSS, this is example for ps_wirepayment method: /* ps_wirepayment logo */ [data-payment-module=ps_wirepayment] .payment-logo { background: left / contain no-repeat url('../modules/thecheckout/views/img/wirepayment.png'); width: 30px; height: 30px; margin-right: 5px; } // ##### Example 10 - limit delivery countries based on invoice country ##### document.addEventListener('DOMContentLoaded', function(event) { //jQuery shall be loaded now tc_confirmOrderValidations['restrict_delivery_country'] = function() { const invoiceCountry = $('#thecheckout-address-invoice select[name=id_country]:visible option:selected').data('iso-code'); const deliveryCountry = $('#thecheckout-address-delivery select[name=id_country]:visible option:selected').data('iso-code') ?? invoiceCountry; const deliveryBlockVisible = $('#thecheckout-address-delivery').is(':visible'); if (!deliveryBlockVisible) { return true; } var canShip = true; var errorMsg = 'Wrong delivery / invoice country combination'; if (invoiceCountry == 'CH' && deliveryCountry != 'CH') { canShip = false; errorMsg = 'Invoice address in Switzerland -> cannot ship outside of Switzerland.' } if (invoiceCountry != 'PL' && deliveryCountry == 'PL') { canShip = false; errorMsg = 'Delivery in Poland -> invoice must be in Poland.' } if (invoiceCountry == 'PL' && deliveryCountry != 'PL') { canShip = false; errorMsg = 'Invoice in Poland -> shipping must be in Poland.' } $('#thecheckout-address-delivery [name=id_country]').removeClass('-error'); removeError('#thecheckout-address-delivery .error-msg'); if (!canShip) { $('#thecheckout-address-delivery [name=id_country]').addClass('-error'); $('#thecheckout-address-delivery [name=id_country]').after('
' + errorMsg + '
'); scrollToError(); return false; } else { return true; } } }); //# sourceURL=tc-custom.js // ##### Example 11 - make one of business/private checkboxes always required ##### document.addEventListener('DOMContentLoaded', function(event) { //jQuery shall be loaded now tc_confirmOrderValidations['business_private_required'] = function() { // do this check for both .business-private-checkboxes in #thecheckout-address-delivery and #thecheckout-address-invoice let result = true; ['#thecheckout-address-delivery', '#thecheckout-address-invoice'].forEach(function (selector) { const businessPrivateVisible = $(selector + ' .business-private-checkboxes input[type=checkbox]:visible').length > 0; const businessPrivateChecked = $(selector + ' .business-private-checkboxes input[type=checkbox]:checked').length > 0; $(selector + ' .business-private-checkboxes').removeClass('-error'); removeError(selector + ' .business-private-checkboxes .error-msg'); let errorMsg = 'Please select one of the options'; switch (prestashop?.language?.iso_code) { case 'it': errorMsg = 'Seleziona una delle opzioni'; break; } if (businessPrivateVisible && !businessPrivateChecked) { $(selector + ' .business-private-checkboxes').addClass('-error'); // Add error in front of checkboxes $(selector + ' .business-private-checkboxes').prepend('
' + errorMsg + '
'); scrollToError(); result = false; } }); return result; } }); //# sourceURL=tc-custom.js