Init JS when Magewire is loaded

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
     {

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.

etc/frontend/di.xml

@@ -5,8 +5,9 @@
     <type name="Vendic\HyvaCheckoutGoogleAddressAutocomplete\ViewModel\FieldMapping">
         <arguments>
             <argument name="fieldMapping" xsi:type="array">
-                <item name="company" xsi:type="string">company</item>
+                <!-- in this case, route is street name key from the API response, it's mapped to the input street.0 -->
                 <item name="route" xsi:type="string">street.0</item>
+                <item name="company" xsi:type="string">company</item>
                 <item name="street_number" xsi:type="string">street.1</item>
                 <item name="locality" xsi:type="string">city</item>
                 <item name="postal_code" xsi:type="string">postcode</item>

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);
                 }
             });