SmartMaps Address Autocomplete: Storefront

Storefront behaviour of SmartMaps autocomplete: affected pages, automatically filled fields, country and state matching and notes for custom themes.

Deutsche Version

Back to overview

Storefront

This documentation always describes the latest published version.

Pages the plugin works on

The plugin only provides its data on the following Storefront pages. On all other pages nothing is loaded and no form is changed.

Page	Route
Checkout, order confirmation	`frontend.checkout.confirm.page`
Shopping cart	`frontend.checkout.cart.page`
My account, address overview	`frontend.account.address.page`
My account, create address	`frontend.account.address.create.page`
My account, edit address	`frontend.account.address.edit.page`
Login	`frontend.account.login.page`
Registration	`frontend.account.register.page`

The checkout registration page (frontend.checkout.register.page) is not in this list. The address form there stays unchanged.

Customer flow

The customer types into the Street field.
SmartMaps returns address suggestions that appear below the field.
When a suggestion is selected, the plugin fills the fields and closes the suggestion list.

The suggestion list also closes when the street field loses focus.

Field mapping

SmartMaps property	Shopware field	Behaviour
`street` and `houseNo`	`address[street]`	Street and house number are joined with a space. Without a house number only the street is entered.
`zip`	`address[zipcode]`	only set if SmartMaps returns a zip code
`city`	`address[city]`	only set if SmartMaps returns a city
`country`	`address[countryId]`	matched by ISO code (see below)
`state`	`address[countryStateId]`	matched by state name (see below)

After entering a value, the plugin triggers browser events on the field (input, plus change for text fields and country) so Shopware JavaScript and form validation pick up the new values.

Country

The plugin first looks in the country select for the option whose data-iso attribute equals the ISO code. If there is none, it compares the option text with the ISO code. If nothing matches there either, the country select stays unchanged.

State

The state field is only filled once its options have loaded after the country change. The plugin checks every 200 milliseconds, at most 10 times. It then selects the option whose text equals the state name (case-insensitive). With no match, the selection stays unchanged.

Custom themes

The plugin extends the Twig blocks component_address_form (address form) and base_head_stylesheet and base_body_script of the base template via sw_extends.
The address form is wrapped in a div carrying the attribute data-smartmaps-autocomplete.
Fields are found by their name attributes: input[name$="[street]"], input[name$="[zipcode]"], input[name$="[city]"], select[name$="[countryId]"] and select[name$="[countryStateId]"]. A theme that changes these names or replaces the address form template needs adjustments.
If the form is inserted into the page later (for example when the different shipping address is revealed), the plugin detects it and attaches the suggestions afterwards.