Introduction

Autoaddress can integrate with the Shopware 5 platform. This guide will show how to integrate with the out of the box billing form, however, the steps will be applicable for integrating elsewhere as required.

Requirements

To integrate Autoaddress into Shopware 5, the following is required:

  • A ​Shopware 5 site
  • An Autoaddress Licence Key (contact sales@autoaddress.ie for further info)
  • Code as noted in this document

​Integration

Step 1: Create a Theme

The first step is to create a new Autoaddress theme for the Shopware site. This is where the code found later in this document will be saved to.
To create a theme, open the sites backend, select the "Configuration" tab and select "Theme Manager" from the menu.


This will open the Theme Manager and show all the themes installed on the site. Select the "Create Theme button:

This will open a wizard for creating a new theme. Set the following details for the new theme:


This guide uses the out of the box themes as a basis for the integration. If your site uses a custom theme, you can set the value for the "Extension of" setting to that theme. Once the wizard is filled out, click the save button.
Next, select the theme by clicking on it and clicking the "Select Theme" button at the bottom right corner of the Theme Manager window:


Then click the "Start Process" button on the "Theme Compiling" window:


Step 2: Add Billing Field Set File to Autoaddress Theme

In the sites file structure, there will now be a section under Themes for Autoaddress:


Navigate to the following folder:


Create a file called "billing_fieldset.tpl".

Step 3: Add Autoaddress to Billing Form​

Add the following code to the billing_fieldset.tpl file created in the last step.

{extends file="parent:frontend/register/billing_fieldset.tpl"}

{block name="frontend_register_billing_fieldset_input_street"}               
        <div id="aaBillingControl"></div>                

        <!-- Latest compiled and minified CSS --> 
        <link href="https://api.autoaddress.ie/2.0/control/css/autoaddress.min.css" rel="stylesheet"/> 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

        <!-- Latest compiled and minified JavaScript --> 
        <script src="https://api.autoaddress.ie/2.0/control/js/jquery.autoaddress.min.js"></script>        

        <script type="text/javascript">
            var autoaddressBillingControl = $("#aaBillingControl")
            $(function() { 
                autoaddressBillingControl.AutoAddress({ 
                    key : "​YOUR_KEY",
                    vanityMode : true,
                    addressProfile : "Shopware5Default",
                    country : "ie",
                    language : "en",
                    onAddressFound: function (data) {                                                                        
                        var street = "";
                        var townCounty = "";                    
                        if(data.reformattedAddress[0] !== null) {
                            street = data.reformattedAddress[0];
                        }
                        if(data.reformattedAddress[1] !== null) {
                            street = street + ", " + data.reformattedAddress[1];
                        }
                        if(data.reformattedAddress[2] !== null) {
                            street = street + ", " + data.reformattedAddress[2];
                        }
                        if(data.reformattedAddress[3] !== null) {
                            street = street + ", " + data.reformattedAddress[3];
                        }

                        $('#street').val(street);

                        if(data.reformattedAddress[4] !== null) {
                            townCounty = data.reformattedAddress[4];
                        }

                        if(data.reformattedAddress[5] !== null) {
                            townCounty += ", " + data.reformattedAddress[5];
                        }
                        
                        $('#city').val(townCounty);
                        $('#zipcode').val(data.postcode === null? "" : data.postcode);
                    }
                });
            });
        </script>    

    {$smarty.block.parent}
{/block}
{block name='frontend_register_billing_fieldset_input_country'}
    {$smarty.block.parent}
    <script>
        $('#country').change(function(){
            var country = $(this).val() === "12"? "ie" : "gb";
            autoaddressBillingControl.AutoAddress('setCountry', country);
        });
    </script>
{/block}

Step 4: Test

The control will now be available in the billing field of the registration form. It may be required to clear the ​shops cache before it is picked up in the site. To clear the ​shops cache, select the "Configuration" tab, hover over "Cache/performance" and click "Clear shop cache"

The control will look like below:




It is also possible to change which region the control searches in by changing the country drop down: