snipcart

Snipcart: Switch off autocomplete in adress fields


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


Solution

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