diff --git a/Model/Form/Modifier/AddHousenumberFieldValidation.php b/Model/Form/Modifier/AddHousenumberFieldValidation.php index 2cb008a..86df650 100644 --- a/Model/Form/Modifier/AddHousenumberFieldValidation.php +++ b/Model/Form/Modifier/AddHousenumberFieldValidation.php @@ -13,6 +13,10 @@ class AddHousenumberFieldValidation implements EntityFormModifierInterface /** * Add validation to the housenumber field if street has only one relative, which should mean that there are two * street fields. + * + * This form modifier is included in the module to make sure that the address the autocomplete API returns contains + * an housenumber, since it's possible that the API returns an address without a housenumber. + * If the housenumber is not present, the address is not valid and the customer cannot continue. */ public function apply(EntityFormInterface $form): EntityFormInterface { diff --git a/README.md b/README.md index 9f0943b..14e209f 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [![Coding Standard](https://github.com/Vendic/hyva-checkout-google-address-autocomplete/actions/workflows/coding-standard.yml/badge.svg)](https://github.com/Vendic/hyva-checkout-google-address-autocomplete/actions/workflows/coding-standard.yml) -Hyvä checkout compatibility module for [vendic/magento2-google-address-autocomplete](https://github.com/Vendic/magento2-google-address-autocomplete). +[Hyvä checkout](https://www.hyva.io/hyva-checkout.html) compatibility module for [vendic/magento2-google-address-autocomplete](https://github.com/Vendic/magento2-google-address-autocomplete). @@ -16,6 +16,9 @@ composer require vendic/hyva-checkout-google-address-autocomplete ``` ## Configuration +First, create your Google Maps API key. You can find instructions on how to do this [here](https://developers.google.com/maps/get-started#create-project). +Also make sure you have valid billing information added to your Google account. + Set your Google Maps API key in the Magento admin panel under `Stores > Configuration > Vendic > Google Address Autocomplete`. Or - even better - via the CLI: @@ -30,5 +33,13 @@ There is no disable/enable configuration. To disable the module, simply remove t - [x] Autocomplete for shipping address in the Hyvä checkout - [ ] Autocomplete for adding a new address as a logged in user - [x] Works on the company field and street 0. To add additonal fields, check `\Vendic\HyvaCheckoutGoogleAddressAutocomplete\ViewModel\AutoCompleteSelectors` -- [x] Housenumber validation to check if the housenumber contains digits. +- [x] Housenumber validation to check if the housenumber contains digits. + +## Customizations +### Field mapping +The field mapping (google address response mapped to Hyvä checkout form inputs) can be modified using di.xml. +See `etc/frontend/di.xml` for the default mapping, which you can change edit in [your own di.xml](https://devdocs.mage-os.org/docs/main/di_xml#content-syntax). +### Input selectors +The input selectors (the fields that trigger the autocomplete dropdown ) can be modified using di.xml. +By default, the autocomplete is triggered for street 0 and company. diff --git a/etc/frontend/di.xml b/etc/frontend/di.xml index 8193386..696a471 100644 --- a/etc/frontend/di.xml +++ b/etc/frontend/di.xml @@ -5,8 +5,9 @@ - company + street.0 + company street.1 city postcode diff --git a/view/frontend/templates/checkout/google-autocomplete-js.phtml b/view/frontend/templates/checkout/google-autocomplete-js.phtml index e7767fc..c752ee9 100644 --- a/view/frontend/templates/checkout/google-autocomplete-js.phtml +++ b/view/frontend/templates/checkout/google-autocomplete-js.phtml @@ -36,12 +36,17 @@ if (!$apiKey) { let googleAutoCompleteInputs = []; - // Init autocomplete JS when Alpine is ready - document.addEventListener('alpine:init', () => { initAutoCompleteJS() }); + // Initialize autocomplete when Magewire is loaded + document.addEventListener('magewire:load', () => { + initAutoCompleteJS() + }, { once: true }); + // Re-init autocomplete when billing as shipping is toggled window.addEventListener('billing-as-shipping-toggled', () => { reInitAutocomplete()} ); + // Wait for Google Maps JS callback to add autocomplete to specified inputs document.addEventListener('google_maps_js_loaded', () => { addAutocompleteToInputs(); }); + // Listen for address changes from Google Autocomplete window.addEventListener('google-autocomplete-address-changed', (event) => { console.debug(`google-autocomplete-address-changed for ${event.detail.addressType}`, event.detail); @@ -84,7 +89,6 @@ if (!$apiKey) { const identifier = `address.${fieldMappings[key]}`; if (value !== undefined && value.length > 0) { - console.debug(`Setting ${identifier} to ${value}`); component.set(identifier, value); } });