All Collections
Advanced Help
Integrations
Checkout input character limit
Checkout input character limit

Script to apply character limits to the checkout area inputs.

B
Written by Byron Beleris
Updated over a week ago

Here you can find a script that can change the character limits of the checkout inputs.

NOTE:  This script can be added only by an EvoX staff member!

At the beginning of the script, located are the variables that will apply the character limit change of the inputs. Their initial value is 0 which means that the max-length property won't change. For each variable that the value changes to something bigger than 0, the value will be applied to the input that the variable refers to.

Variables:

  • user_name: The name input in the Contact Details area

  • user_phone: The phone input in the Contact Details area

  • address_name: The address name input in the Delivery Details area

  • address_line_one: The address line 1 input in the Delivery Details area for both Billing and Delivery addresses

  • address_line_two: The address line 2 input in the Delivery Details area for both Billing and Delivery addresses

  • address_line_three: The address line 3 input in the Delivery Details area for both Billing and Delivery addresses

  • address_county: The address County / State input in the Delivery Details area for both Billing and Delivery addresses (when they are not a dropdown field)

  • address_postcode: The address Postcode / Zip input in the Delivery Details area for both Billing and Delivery addresses

  • address_delivery_note: The delivery note textarea in the Delivery Details area

  • order_note: The order note textarea in the Review & Pay area

  • po_number: The PO number input in the Review & Pay area

  • alternative_po_number: The Alternative PO number input in the Review & Pay area

Script:

Copy the following script and add it to the Footer Block in the Checkout Custom JS area of the store in Sauron

<script>
// Instructions:
// Change any of the following values to set the max length of the inputs you want.
// If the value is set to 0, then the inputs won't have a max length property

// Account options
var user_name = 0;
var user_phone = 0;

// Delivery Details
var address_name = 0;
var address_line_one = 0;
var address_line_one = 0;
var address_line_two = 0;
var address_line_three = 0;
var address_county = 0;
var address_city = 0;
var address_postcode = 0;
var address_delivery_note = 0;

// Review and pay
var order_note = 0;
var po_number = 0;
var alternative_po_number = 0;

$('body').on('input focus', '#personalDetails input[type="text"]', function () {
if(user_name > 0){
$('#personalDetails input[name="userName"]').attr('maxlength', user_name);
}
if(user_phone > 0){
$('#personalDetails input[name="userPhone"]').attr('maxlength', user_phone);
}
});

$('body').on('input focus', '#deliveryDetails input[type="text"]', function () {
if(address_name > 0){
$('#deliveryDetails input[placeholder="Full Name"]').attr('maxlength', address_name);
}
if(address_line_one > 0){
$('#deliveryDetails input[placeholder="Address line 1"]').attr('maxlength', address_line_one);
}
if(address_line_two > 0){
$('#deliveryDetails input[placeholder="Address line 2"]').attr('maxlength', address_line_two);
}
if(address_line_three > 0){
$('#deliveryDetails input[placeholder="Address line 3"]').attr('maxlength', address_line_three);
}
if(address_city > 0){
$('#deliveryDetails input[placeholder="City"]').attr('maxlength', address_city);
}
if(address_county > 0){
$('#deliveryDetails input[placeholder="County"]').attr('maxlength', address_county);
}
if(address_postcode > 0){
$('#deliveryDetails input[placeholder="Post Code"]').attr('maxlength', address_postcode);
$('#deliveryDetails input[placeholder="Zip"]').attr('maxlength', address_postcode);
}
});

$('body').on('input focus', '#deliveryDetails .checkout-delivery-note-textarea', function () {
if(address_delivery_note > 0){
$('#deliveryDetails .checkout-delivery-note-textarea').attr('maxlength', address_delivery_note);
}
});

$('body').on('input focus', '#paymentMethod .checkout-order-note-textareas', function () {
if(order_note > 0){
$('#paymentMethod .checkout-order-note-textareas').attr('maxlength', order_note);
}
});

$('body').on('input focus', '#paymentMethod .checkout-po-number-input', function () {
if(po_number > 0){
$('#paymentMethod .checkout-po-number-input').attr('maxlength', po_number);
}
});

$('body').on('input focus', '#paymentMethod .checkout-alternative-po-number-input', function () {
if(alternative_po_number > 0){
$('#paymentMethod .checkout-alternative-po-number-input').attr('maxlength', alternative_po_number);
}
});
</script>



Did this answer your question?