Magento_CheckoutAddressSearch (Hyvä Checkout)

Magento Modules:

• Magento_CheckoutAddressSearch

Adobe Commerce Packages

• magento/module-checkout-address-search

Repository

Note: this repo is only accessible with a Hyvä Enterprise license or as a contributor.

For more details, see: https://www.hyva.io/hyva-enterprise.html.

https://gitlab.hyva.io/hyva-enterprise/commerce/magento2-ee-hyva-enterprise-checkout

Features

All points are rated according to priority as P1 (critical), P2 (important), P3 (minor).

• basic - does not break layout/design
• All built-in checkout layouts supported (default, one page, mobile)

Note: All below features assume checkout address search is enabled in Stores > Configuration (checkout/options/enable_address_search) and the customer has met the threshold for the number of addresses listed (checkout/options/customer_address_limit). It also assumes the customer has more than one address in their address book, including a default shipping address.

Shipping/Billing Address Section

Note: on Luma, address search supports the billing address being displayed inline against the payment method as well as within the main payment section/step. On Hyvä Checkout the billing address is fully separated from the payment method by design so is not an area we need to consider.

• [P2] Only the default, or currently selected, shipping/billing address is displayed on page load
• [P1] A 'Change Address' link/button displays and triggers a modal popup when clicked/tapped

Address Search Modal

• [P2] Modal title: 'Select Shipping Address' or 'Select Billing Address' displayed depending upon address type
• [P1] Address search input field displays with the total number of saved addresses the customer has displayed alongside/underneath
• [P1] All customer addresses are listed up to the page size set in configuration
  • checkout/options/address_search_page_size - defaults to 50
  • Note: this is a developer-only configuration setting declared in the modules etc/config.xml - it is not found in the admin panel under Stores > Configuration
• [P1] Each address has a 'Select' button
• [P2] The default address address is highlighted by a label
• [P1] The currently selected address' button is disabled and labelled 'Selected'
• [P1] Typing in the search box replaces the address results - 'search as you type'
  • Note: this uses the following controller to fetch results: checkout_customer/address/search/id/{customer_id}/?searchKey={search-string}&page={page-number}&limit={items-limit}&_={unix-time-stamp}
  • This also updates the total number of addresses count to match the returned results
• [P1] If more records are returned than the limit, additional items are loaded on scroll (i.e., infinite scroll)
  • The same controller endpoint is used to load additional records (with the relevant page number) and then appends the results to the existing list of addresses
• [P1] Clicking/tapping an addresses 'Select' button closes the modal and updates the selected address to the one chosen

Address search modal default display:

Note: there is a glitch in Luma that outputs a second search icon in the middle of the modal - this can bed ignored. It's also worth noting the main search icon (alongside the search box) does not actually have any function - there is no submit button as results update as the user types (as noted above).

Filtered results example:

Contributors

Voting

Use 👍 to cast your vote.