Snipcart: Switch off autocomplete in adress fields

Question

is it possible to switch off autocompletion in the adressfields? I can see there is

<template v-if="useAutocomplete">

in the template. But where can I set it to "false"?

Answer 1

I'm also interested in this. I'm sure the intention is to allow developers to turn off the auto-complete feature but I wasn't able to get this to work. As a workaround, you could override the template by overriding the address-fields component:

    <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>

See: https://docs.snipcart.com/v3/setup/customization

I'm hoping someone chimes in with a better answer.

Answer 2

The accepted still appears to be the officially documented way to do this (April 2021, using Snipcart v3.0.31), but I’d also prefer not to overwrite templates for functionality already built into the checkout.

The autocomplete input also gives you a checkbox where you can opt-out and manually enter your address, which restores the default address templates.

Another option is to always check that box for the user, before they do anything else in the cart:

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')
  }
}

You can try this out in the console on the Checkout page. Now, we want to do this each time the customer gets to the checkout.

// 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)
    }
})

The timeout isn’t completely reliable, but it seemed like an acceptable tradeoff to me versus watching for the element to appear, ex. using MutationObserver.

Answer 3

This feature can be disabled by our team (I'm working at Snipcart) if you contact support. We have plans to make it configurable from the dashboard though.

It's possible to do it by overriding our components too, but a bit more complex.