Checkout Street Number for Magento 2

Checkout street number

Description

Short

Divides the first street line into street & house number.

Long

We use a checkout LayoutProcessor to find all street fields and insert the new fields "street_main" and "street_number" in front of them. Matching knockout components street-main and street-number exist, where street-main contains the logic for updating the original street field. CSS is then used to hide the original first street field.

Configuration

Backend

STORES > (Settings) Configuration > SALES > Checkout > Checkout Options

Shell

bin/magento config:set checkout/options/split_street_into_name_and_number 1

Before

After

Browser Autofill

The module sets HTML autocomplete attributes on the generated fields for correct browser autofill behavior:

• Street field: autocomplete="address-line1"
• Street number field: autocomplete="address-line2"

This uses a custom elementTmpl (form/element/input.html) that extends Magento's default input template with the autocomplete attribute binding.

Compatible with

• amasty/module-single-step-checkout, tested: 3.1.3, 4.0.0
• swissup/firecheckout
• mediarox/module-checkout-placeholder, tested: 0.4.2

Notes

General

The extension was created from various live projects with themes based on Luma. It is to be considered as "beta" and does not claim to be perfect. The main reason of the release is to share this module with others and improve it together.

Helpful posts on the topic

• Magento 2 Doc Add custom fields that influence other checkout fields
  • Different handling of shipping & billing addresses (dataScope's)
  • Understanding that the billing address can appear multiple times and in different places
• Magento 2 Doc Linking properties of UI components
  • Understanding to import values from other components
• Magento 2 Doc About the uiElement class
  • Understanding linking objects from other components (modules: {})