2

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

<template v-if="useAutocomplete">

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

4

3 回答 3

3

我也对这个感兴趣。我确定其目的是允许开发人员关闭自动完成功能，但我无法让它工作。作为一种解决方法，您可以通过覆盖地址字段组件来覆盖模板：

    <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

我希望有人能提供更好的答案。

于 2020-11-09T11:34:22.067 回答
0

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

也可以通过覆盖我们的组件来做到这一点，但要复杂一些。

于 2021-08-03T17:44:09.150 回答
0

接受的似乎仍然是官方记录的方式（2021 年 4 月，使用 Snipcart v3.0.31），但我也不想覆盖结帐中已内置功能的模板。

自动完成输入还为您提供了一个复选框，您可以在其中选择退出并手动输入您的地址，这将恢复默认地址模板。

默认的 Snipcart 结帐“我找不到我的地址”复选框

另一种选择是在用户执行购物车中的任何其他操作之前始终为用户选中该框：

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.

于 2021-04-02T19:00:21.980 回答