Snipcart：关闭地址字段中的自动完成

Question

是否可以关闭地址字段中的自动完成功能？我可以看到有

<template v-if="useAutocomplete">

在模板中。但是我在哪里可以将它设置为“false”呢？

Answer 1

我也对这个感兴趣。我确定其目的是允许开发人员关闭 auto-complete 功能，但我无法使其正常工作。作为解决方法，您可以通过覆盖 address-fields 组件来覆盖模板：

    <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

我希望有人能给出更好的答案。

Answer 2

接受的方法似乎仍然是官方记录的方法（2021 年 4 月，使用 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.

Answer 3

如果您联系支持人员，我们的团队（我在 Snipcart 工作）可以禁用此功能。不过，我们计划使其可从仪表板进行配置。

也可以通过覆盖我们的组件来实现，但有点复杂。

Snipcart：关闭地址字段中的自动完成

Snipcart: Switch off autocomplete in adress fields

snipcart