Loading...
Blueprint

Make Your Bigcommerce Checkout Page Leprechaun Friendly

Emilian F. Published on 20 August, 2014

If you are reading this it most likely means that your Bigcommerce checkout page is not leprechaun friendly. Why? Because the checkout page requires a postal code even though Ireland does not have them, unless of course you count "under the red bridge past the ole pub" as one. This will change come 2015 when the Irish government will introduce postal codes, but until then you will have to make some changes to your checkout page. It should only take about a few minutes if you follow our instructions, and the leprechauns will appreciate it! Here's how to do it:

Instructions

  1. Login to your control panel and navigate to Design -> Theme Files/Edit HTML & CSS and open the ExpressCheckoutChooseAddress.html file.

  2. Paste the following code at the bottom of the file:

    
    $(document).ajaxComplete(function(event, request, settings) {
    var step = getQueryVariable('w', settings.data);
    var allowedSteps = ['expressCheckoutGetAddressFields','saveExpressCheckoutBillingAddress','getStates'];
    
    if($.inArray(step, allowedSteps) >= 0) {
    
     if ($("#FormField_11 option:selected").val() == 'Ireland') {
     $("#FormField_13").val('Ireland').hide(); 
     $("dt:contains('Zip/Postcode:')").hide();
     } else {
     $("#FormField_13").val('').show(); 
     $("dt:contains('Zip/Postcode:')").show();
     }
    
     if ($("#FormField_21 option:selected").val() == 'Ireland') {
     $("#FormField_23").val('Ireland').hide(); 
     $("dt:contains('Zip/Postcode:')").hide();
     } else {
     $("#FormField_23").val('').show(); 
     $("dt:contains('Zip/Postcode:')").show();
     }
    }
     });
    
    function getQueryVariable(parameter, searchString) {
        var params = searchString.split('&');
        for (var i = 0; i < params.length; i++) {
            var pair = params[i].split('=');
            if (decodeURIComponent(pair[0]) == parameter) {
                return decodeURIComponent(pair[1]);
            }
        }
    }
    
    

    If you already have a file for your Javascript modifications, just place the code above in that file.

  3. Save your changes, and test the checkout page.

How It Works

The code will only be active when the billing and shipping addresses are displayed. Once displayed, selecting Ireland from the country drop down will automatically remove the zip/postcode input field. It's that easy!

Troubleshooting

If the zip/postcode field is not removed when selecting Ireland... then it most likely is an issue with the form fields. If you changed the account form fields from the store's control panel it is possible that it will not work. In that case you will need to replace the form field IDs in the script (FormField_11, FormField_21) with different IDs. It is not that easy to do, so contact us and we can do it for you.

If you have problems with the zip/postcode label... then it is an issue with the label text. The code depends on the text being "Zip/postcode:". If it is different then it will not work. You must change the label text in the code with the current label text to fix the error.

If it still doesn't work or you want to do something different... then contact us. We can install the modification for you.

Emilian F. Published on 20 August, 2014