Skip to content

Checkout Shipping Address additional custom address field

I am working with the Magento2, In that we’re installed the Loqate address verification extension (It’ll bring the suggestion Street address of the given input).

In my requirement either the customer use the loqate extension or else I need to add a button like “Edit address manually” in that case the suggestion should not to work.
enter image description here

I need the same feature in my checkout address popup page, Kindly share your valuable though in this. Thanks in advance for your better support.

Note :I’ve customised this in our Magento address edit page, using jquery

FYI
Script:

require([ 'jquery', 'jquery/ui'],
    function($){
    $(document).ready(function($) {
        $('.manaul_address_show').on('click', function () {
            $('.manaul-address').show()
            $('.loqate_street_1').removeAttr('value');
            $('.loqate_street_2').removeAttr('value');
            $('.loqate_street_3').removeAttr('value');
            $('.loqate-address').hide();
            $('.manaul_address_show').hide();
        });
    });
});

HTML :

<div class="control loqate-address">
                <div class="field primary">
                    <label for="street_1" class="label">
                        <span>
                            <?= $block->escapeHtml(__('Street Address: Line %1', 1)) ?>
                        </span>
                    </label>
                </div>
                <input type="text"
                       name="street[]"
                       value="<?= $block->escapeHtml($block->getStreetLine(1)) ?>"
                       title="<?= $block->escapeHtmlAttr(__('Street Address')) ?>"
                       id="street_1"
                       class="loqate_street_1 input-text <?= /* @noEscape */ $_streetValidationClass ?>"/>
                <div class="nested">
                    <?php $_streetValidationClass = trim(str_replace('required-entry', '', $_streetValidationClass)); ?>
                    <?php for ($_i = 2, $_n = $addressHelper->getStreetLines(); $_i <= $_n; $_i++): ?>
                        <div class="field additional">
                            <label class="label" for="street_<?= /* @noEscape */ $_i ?>">
                                <span><?= $block->escapeHtml(__('Street Address: Line %1', $_i)) ?></span>
                            </label>
                            <div class="control">
                                <input type="text"
                                       name="street[]"
                                       value="<?= $block->escapeHtml($block->getStreetLine($_i)) ?>"
                                       title="<?= $block->escapeHtmlAttr(__('Street Address %1', $_i)) ?>"
                                       id="street_<?= /* @noEscape */ $_i ?>"
                                       class="loqate_street_<?= /* @noEscape */ $_i ?> input-text <?= /* @noEscape */ $_streetValidationClass ?>"/>
                            </div>
                        </div>
                    <?php endfor; ?>
                </div>
            </div>

            <a href="#" class="manaul_address_show"><?= __('Enter Address Manually'); ?></a>

            <div class="control manaul-address" style="display: none">
                <div class="field primary">
                    <label for="street_1" class="label">
                        <span>
                            <?= $block->escapeHtml(__('Street Address: Line %1', 1)) ?>
                        </span>
                    </label>
                </div>
                <input type="text"
                       name="street[]"
                       title="<?= $block->escapeHtmlAttr(__('Street Address')) ?>"
                       id="street_1"
                       data-model-id="manual_street_1"
                       class="input-text <?= /* @noEscape */ $_streetValidationClass ?>"/>
                <div class="nested">
                    <?php $_streetValidationClass = trim(str_replace('required-entry', '', $_streetValidationClass)); ?>
                    <?php for ($_i = 2, $_n = $addressHelper->getStreetLines(); $_i <= $_n; $_i++): ?>
                        <div class="field additional">
                            <label class="label" for="street_<?= /* @noEscape */ $_i ?>">
                                <span><?= $block->escapeHtml(__('Street Address: Line %1', $_i)) ?></span>
                            </label>
                            <div class="control">
                                <input type="text"
                                       name="street[]"
                                       title="<?= $block->escapeHtmlAttr(__('Street Address %1', $_i)) ?>"
                                       id="street_<?= /* @noEscape */ $_i ?>"
                                       data-model-id="manual_street_<?= /* @noEscape */ $_i ?>"
                                       class="input-text <?= /* @noEscape */ $_streetValidationClass ?>"/>
                            </div>
                        </div>
                    <?php endfor; ?>
                </div>
            </div>