From 5b20b7e7fbf1fc3f8600f6af08ffef39e5da7817 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tjitse=20Efd=C3=A9?= Date: Fri, 3 Nov 2023 14:54:37 +0100 Subject: [PATCH 1/4] Init JS when magewire is loaded --- .../templates/checkout/google-autocomplete-js.phtml | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) 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); } }); From 30762121aee5c3de7cbc9605c0faf5b3cce9acb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tjitse=20Efd=C3=A9?= Date: Fri, 3 Nov 2023 15:10:48 +0100 Subject: [PATCH 2/4] Add more docs --- .../Form/Modifier/AddHousenumberFieldValidation.php | 4 ++++ README.md | 13 ++++++++----- etc/frontend/di.xml | 3 ++- 3 files changed, 14 insertions(+), 6 deletions(-) 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 a96e094..054da49 100644 --- a/README.md +++ b/README.md @@ -27,8 +27,11 @@ There is no disable/enable configuration. To disable the module, simply remove t - [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. -## Compatibility -If you want Google Address autocomplete in the "my account"-section, you will need [this module](https://github.com/Vendic/hyva-google-address-autocomplete) - - - +## 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 From 320c9adff5b511438f7ae9caad5c1312a7e6ddcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tjitse=20Efd=C3=A9?= Date: Fri, 3 Nov 2023 15:12:38 +0100 Subject: [PATCH 3/4] Add link to hyva checkout --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c0d36fa..0257774 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). @@ -39,4 +39,4 @@ See `etc/frontend/di.xml` for the default mapping, which you can change edit in ### 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. \ No newline at end of file +By default, the autocomplete is triggered for street 0 and company. From f407d1cc7fd0f950921b168f3f712c4349649ddf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tjitse=20Efd=C3=A9?= Date: Fri, 3 Nov 2023 15:14:50 +0100 Subject: [PATCH 4/4] Mention how to create a google maps api key --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 0257774..14e209f 100644 --- a/README.md +++ b/README.md @@ -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: