WooCommerce, a highly customizable eCommerce platform, allows you to provide a seamless user experience for your customers. One such optimization is autofilling the billing state based on the postal code entered by the customer. In this blog post, we’ll walk you through the steps on how to do this using JavaScript, jQuery, and an external API.
<script>
jQuery(document).ready(function($) {
jQuery(window).on('load', function() {
// Generate state map
var stateMap = {};
jQuery('#billing_state option').each(function() {
var stateName = $(this).text();
var stateCode = $(this).val();
if(stateName && stateCode) {
stateMap[stateName] = stateCode;
}
});
// Listen for change on the billing_postcode input field
jQuery('#billing_postcode').change(function() {
// Get the value of the field
var pincode = $(this).val();
// Make sure pincode isn't empty
if(pincode != '') {
// AJAX call to the API
jQuery.ajax({
url: 'https://api.postalpincode.in/pincode/' + pincode,
type: 'GET',
success: function(response) {
// Check if Status is Success
if(response[0].Status === 'Success') {
// Get the state from the first Post Office
var state = response[0].PostOffice[0].State;
console.log(state)
// Map the state to its code
var stateCode = stateMap[state];
// Update the billing_state field
if (stateCode) {
jQuery('#billing_state').val(stateCode).trigger('change');
}
}
},
error: function() {
// Handle error here
console.log('Error occurred while fetching pincode details.');
}
});
}
});
});
});
</script>
Step 1: Setting Up: First, we use the jQuery(document).ready function, which ensures that our code will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
Step 2: Initializing the State Map: We initialize an empty JavaScript object stateMap to hold our state names and corresponding state codes. We then loop through each option in the ‘billing_state’ dropdown using jQuery’s .each function. For each option, we fetch the state name (text of the option) and state code (value of the option) and store them in stateMap. This map will be used to convert the state name returned by the API to a state code that WooCommerce can understand.
Step 3: Listening for Changes: We set up a listener on the ‘billing_postcode’ input field using jQuery’s .change function. Whenever a customer enters or changes their postal code, the function inside .change will run.
Step 4: Making the API Request: Inside the .change function, we first retrieve the postal code entered by the customer. Provided that the postal code is not empty, we make an AJAX request to the ‘https://api.postalpincode.in/pincode/‘ API with the postal code appended to the URL. AJAX allows us to send this HTTP GET request asynchronously without refreshing the page.
Step 5: Processing the API Response: Upon a successful API response, we check if the ‘Status’ field of the response is ‘Success’. If it is, we extract the ‘State’ field from the first ‘PostOffice’ object in the response. This ‘State’ field contains the name of the state corresponding to the postal code.
Step 6: Updating the State Field: Using our stateMap, we convert the state name to a state code. If the conversion is successful, we update the ‘billing_state’ dropdown to reflect this state code using jQuery’s .val function. We also trigger a ‘change’ event to tell any other scripts listening for changes on this dropdown that the state has been updated.
Step 7: Handling Errors: If there’s an error with the API request, we log a simple error message to the console. In a production environment, you might want to handle this error more gracefully to enhance user experience.
And there you have it – a comprehensive guide on autofilling the state field based on the postal code in WooCommerce. Implementing this feature can provide a smoother checkout process for your customers, potentially increasing conversions and customer satisfaction.
