Snipcart: отключить автозаполнение в адресных полях

Меня это тоже интересует. Я уверен, что намерение состоит в том, чтобы позволить разработчикам отключить функцию автозаполнения, но мне не удалось заставить это работать. В качестве обходного пути вы можете переопределить шаблон, переопределив компонент адресных полей:

    <div hidden id="snipcart" data-api-key="API_KEY">
        <address-fields>
            <div class="root">
                <div class="snipcart-form__row">
                    <div class="snipcart-form__field snipcart-form__cell--large">
                        <snipcart-label class="snipcart__font--tiny" for="address1">
                            {{ $localize('address_form.address1') }}
                        </snipcart-label>
                        <snipcart-input name="address1"></snipcart-input>
                        <snipcart-error-message name="address1"></snipcart-error-message>
                    </div>

                    <div class="snipcart-form__field snipcart-form__cell--tidy">
                        <snipcart-label class="snipcart__font--tiny" for="address2">
                            {{ $localize('address_form.address2') }}
                        </snipcart-label>
                        <snipcart-input name="address2"></snipcart-input>
                        <snipcart-error-message name="address2"></snipcart-error-message>
                    </div>
                </div>

                <div class="snipcart-form__field">
                    <snipcart-label class="snipcart__font--tiny" for="city">{{ $localize('address_form.city') }}
                    </snipcart-label>
                    <snipcart-input name="city"></snipcart-input>
                    <snipcart-error-message name="city"></snipcart-error-message>
                </div>

                <div class="snipcart-form__field">
                    <snipcart-label class="snipcart__font--tiny" for="country">{{ $localize('address_form.country') }}
                    </snipcart-label>
                    <snipcart-typeahead type="dropdown" name="country" autocomplete="country"></snipcart-typeahead>
                </div>

                <div class="snipcart-form__row">
                    <div class="snipcart-form__field snipcart-form__cell--large">
                        <snipcart-label class="snipcart__font--tiny" for="province">
                            {{ $localize('address_form.province') }}
                        </snipcart-label>
                        <snipcart-typeahead type="dropdown" name="province" autocomplete="province state">
                        </snipcart-typeahead>
                    </div>

                    <div class="snipcart-form__field snipcart-form__cell--tidy">
                        <snipcart-label class="snipcart__font--tiny" for="postalCode">
                            {{ $localize('address_form.postalCode') }}
                        </snipcart-label>
                        <snipcart-input name="postalCode"></snipcart-input>
                        <snipcart-error-message name="postalCode"></snipcart-error-message>
                    </div>
                </div>
            </div>
        </address-fields>
    </div>

См .: https://docs.snipcart.com/v3/setup/customization

Я надеюсь, что кто-то подскажет лучший ответ.

Принятый по-прежнему кажется официально задокументированным способом сделать это (апрель 2021 г., с использованием Snipcart v3.0.31), но я также предпочел бы не перезаписывать шаблоны для функций, уже встроенных в кассу.

Ввод автозаполнения также дает вам флажок, в котором вы можете отказаться и вручную ввести свой адрес, что восстанавливает шаблоны адресов по умолчанию.

Другой вариант - всегда устанавливать этот флажок для пользователя, прежде чем он сделает что-либо еще в корзине:

let disableAddressSearch = function () {
  let fauxEvent = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true
  })

  let input = document.querySelector('input[name=addressNotFound]')

  if (!input) {
    return null
  }

  let result = input.dispatchEvent(fauxEvent)

  if (!result) {
    // You probably don’t want this in production
    console.warn('Couldn’t disable autocomplete checkbox')
  }
}

Вы можете попробовать это в консоли на странице оформления заказа. Теперь мы хотим делать это каждый раз, когда покупатель подходит к кассе.

// https://docs.snipcart.com/v3/sdk/events#themeroutechanged
Snipcart.events.on('theme.routechanged', function (routesChange) {
    if (routesChange.to === '/checkout') {
        console.log('cart opened');

        // A timeout that should be long enough for the checkout
        // to be rendered
        window.setTimeout(disableAddressSearch, 100)
    }
})

Тайм-аут не совсем надежен, но мне он показался приемлемым компромиссом по сравнению с наблюдением за появлением элемента, например. используя MutationObserver.