For Shopp sites that make use of Customer Accounts, a returning customer that logs in will have their shipping and billing address pre-populated when they reach the checkout. For customers who have not purchased before, or for Shopp sites that do not use Customer Accounts, address information can often be inserted automatically by the browser’s…

Clearing Checkout Address Fields and Disabling Browser Autocomplete

oODDQJ5THyO0ODKX9xweg8jKo10JypIby8n1iqZPivE

Clearing Checkout Address Fields and Disabling Browser Autocomplete

For Shopp sites that make use of Customer Accounts, a returning customer that logs in will have their shipping and billing address pre-populated when they reach the checkout. For customers who have not purchased before, or for Shopp sites that do not use Customer Accounts, address information can often be inserted automatically by the browser’s Form Autocomplete feature. There are occasions when one or both of these ‘features’ are not desired, for example:

  • The merchant finds that people frequently forget to enter an updated shipping address.
  • A site is used by customers who usually need to enter new shipping address details, for example a head-office ordering items for delivery to area offices.
  • A site is used in an area where multiple customers will be using the same terminal and browser, and autocomplete would allow a new customer to see a previous customer’s details.

By making use of the Shopp API we can work our way around these problems.

Clearing Checkout Address Fields

To clear the address fields in the checkout we will make use of the shopp_init_checkout Action. The easiest way to add this is at the bottom of the theme’s functions.php file and for the purposes of this tutorial we’ll assume that you are using the functions.php file; however this code could be placed in a custom plugin if you prefer it that way.


/**
 * Clears the Shipping and Billing Address Fields in Checkout.
 **/
function shopp_clear_addresses () {
    ShoppOrder()->Shipping = new ShippingAddress();
    ShoppOrder()->Billing = new BillingAddress();
}

Extending and Modifying the function

Of course this simple function can be modified to suit your needs. For example if you wish to only clear the shipping fields but leave the billing fields untouched, comment out or delete the relevant line like so:


//ShoppOrder()->Billing = new BillingAddress();

In the working example above, our shopp_clear_addresses() function is called when the checkout is initialised. i.e. when the checkout page is loaded. But what if we want to clear the shipping address from the customers Account Area too? In this case we can use the shopp_login Action, to fire our function each time a customer logs. Here’s the complete code:


/**
 * Clears the Shipping Address Fields only in Checkout and on login.
 **/
function shopp_clear_addresses () {
    ShoppOrder()->Shipping = new ShippingAddress();
    //ShoppOrder()->Billing = new BillingAddress();
}

add_action('shopp_init_checkout', 'shopp_clear_addresses');
add_action('shopp_login', 'shopp_clear_addresses');

Disabling Browser Autocomplete

Autocomplete can be disabled for “ fields by adding the autocomplete='off' attribute to the tag. The attribute itself is well documented elsewhere, so here we’ll concentrate on two ways to add this attribute to your site’s checkout fields.

Doing it via the Theme Template.

The checkout.php theme template is used to display the markup for the checkout page. If you are unfamiliar with Theme Templates, please take a look at the Theme Template Docs first.

Now we’ll add the autocomplete='off' attribute to the shipping postcode field as an example. Open your theme’s checkout.php and you will find the following code, or very similar:


shopp('checkout','shipping-postcode','required=true&title=Postal/Zip Code shipping address');

Modify it to the following:


shopp('checkout','shipping-postcode','autocomplete=off&required=true&title=Postal/Zip Code shipping address');

Save the template and visit the checkout page. You should see that the shipping postcode field is no longer allowing itself to be autocompleted, and viewing the page source can verify this. Now you can make the same modification to any other fields that you want to disable autocomplete for.

Doing it via functions.php or a plugin.

Another way to insert the autocomplete='off' attribute into each checkout field is to make use of the shopp_themeapi_{object}_{tag} filters. In this case we want to modify tags in the checkout object so we’ll use for format shopp_themeapi_checkout_{tag}, i.e. shopp_themeapi_checkout_shippingpostcode.

Note that the hypen in ‘shipping-postcode’ has been removed when using it with this filter.

The following code can be added to your theme’s functions.php file:


/**
 * Inserts the HTML autocomplete="off" attribute into input fields.
 **/
function shopp_disable_autocomplete ($result,$options,$Object) {
    $return = str_replace("<input","<input autocomplete=\"off\"",$result);
    return $return;
}

/**
 * Cycles through an array of input fields names and applies the shopp_disable_autocomplete function to them.
 **/
function shopp_disable_autocomplete_init () {
    $fields = array(
        'firstname','lastname','company','phone','email',
        'billingname','billingaddress','billingxaddress','billingcity','billingpostcode',
        'shippingname','shippingaddress','shippingxaddress','shippingcity','shippingpostcode'
    );
    foreach ( $fields as $field ) {
        add_filter('shopp_themeapi_checkout_'.$field, 'shopp_disable_autocomplete', 11, 3);
    }
}

add_action('shopp_init_checkout','shopp_disable_autocomplete_init');

As you can see, the first function is called by the shopp_init_checkout Action. The custom shopp_disable_autocomplete_init() function creates an array of all the input field names that we want to disable autocomplete for, and filters them with our shopp_disable_autocomplete() function. shopp_disable_autocomplete() uses PHP’s str_replace() function to insert the autocomplete string as a new attribute of the input tag.

Modifying the functions

If you only want to effect certain fields, modify the items in the $fields array that is created in the shopp_disable_autocomplete_init() function.

Conclusion

Hopefully that explains a little more about how the shopp_init_checkout, shopp_login and shopp_themeapi_{object}_{tag} actions and filters work. If you need some more info, please follow the suggestions in the ‘Heed Help?’ box below.

Avatar of Ben Hutchings

By

Ben Hutchings is a Freelance Web Developer from the South West of England, specialising in WordPress and its associated technologies.

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.

Skip to toolbar