Edit Customer Address Form Isn't Working

Retired Boards Appdev Store Design
,
1

I am in the process of creating my own custom theme/template.

My ‘Add New Address’ works fine, including the set default address checkbox.

However,

My ‘Edit Address’ form doesn’t work. The only field that updates is the country select dropdown field. I can update all fields, select the set default checkbox and nothing updates apart from the country select dropdown field.

Am I missing something? Do I need to include something?

Can anyone give me any pointers.

Many Thanks.

<h1>Page Title</h1>
<div>
    <button id="addAddressButton" class="ssa-button-primary">Add New Address</button>
</div>
<div>
    <a href="/account">Back To Account Details</a>
</div>
<div id="AddAddress" style="display: none;">
    {% form 'customer_address', customer.new_address %}
        <h4>Add Address</h4>
        <input type="text" id="AddressFirstName" name="address[first_name]" value="" placeholder="First Name">
        <input type="text" id="AddressLastName" name="address[last_name]" value="" placeholder="Surname">
        <input type="text" id="AddressCompany" name="address[company]" value="" placeholder="Company">
        <input type="text" id="AddressAddress1" name="address[address1]" value="" placeholder="Address Line 1">
        <input type="text" id="AddressAddress2" name="address[address2]" value="" placeholder="Address Line 2">
        <input type="text" id="AddressCity" name="address[city]" value="" placeholder="City">
        <select id="AddressCountry" name="address[country]" data-default="">
            {{ country_option_tags }}
        </select>
        <div id="AddressProvinceContainer">
            <select id="AddressProvince" name="address[province]" data-default="{{ form.province }}"></select>
        </div>
        <input
            type="text"
            id="AddressZip"
            name="address[zip]"
            value=""
            placeholder="Postcode"
            autocapitalize="characters"
        >
        <input type="tel" id="AddressPhone" name="address[phone]" value="" placeholder="Phone">
        <p>
            {{ form.set_as_default_checkbox }}
            <label for="address_default_address_new">Set as default address</label>
        </p>
        <input type="submit" class="ssa-button-secondary" value="Confirm">
        <button id="cancelButton" class="ssa-button-black">Cancel</button>
    {% endform %}
</div>
<h2>Edit Address Section Title</h2>
{% for address in customer.addresses %}
    {% if address == customer.default_address %}
        <p><strong>Default Address</strong></p>
    {% endif %}
    <p>
        {{ address.name -}}
        <br>
        {% if address.address1 > '' %}
            {{ address.address1 }},
        {% endif %}
        {% if address.address2 > '' %}
            {{ address.address2 }},
        {% endif %}
        {% if address.company > '' %}
            <br>
            {{ address.company }},
        {% endif %}
        {% if address.city > '' %}
            <br>
            {{ address.city }},
        {% endif %}
        {% if address.province > '' %}
            <br>
            {{ address.province }},
        {% endif %}
        {% if address.zip > '' %}
            {{ address.zip | upcase }},
        {% endif %}
        {% if address.country > '' %}
            <br>
            {{ address.country }},
        {% endif %}
        {% if address.phone > '' %}
            <br>
            {{ address.phone }}
        {% endif %}
    </p>
    <button class="js-edit-button ssa-button-secondary">Edit</button>
    <form
        method="post"
        action="/account/addresses/{{ address.id }}"
    >
        <input type="hidden" name="_method" value="delete">
        <button type="submit" class="ssa-button-black">Delete</button>
    </form>
    <div id="EditAddress_{{ address.id }}" class="js-edit-form">
        {% form 'customer_address', address %}
            <h4>Edit Address</h4>
            <input
                type="text"
                id="AddressFirstName_{{ form.id }}"
                name="address[first_name]"
                value="{{ form.first_name }}"
                placeholder="First Name"
            >
            <input
                type="text"
                id="AddressLastName_{{ form.id }}"
                name="address[last_name]"
                value="{{ form.last_name }}"
                placeholder="Surname"
            >
            <input
                type="text"
                id="AddressCompany_{{ form.id }}"
                name="address[company]"
                value="{{ form.company }}"
                placeholder="Company"
            >
            <input
                type="text"
                id="AddressAddress1_{{ form.id }}"
                name="address[address1]"
                value="{{ form.address1 }}"
                placeholder="Address Line 1"
            >
            <input
                type="text"
                id="AddressAddress2_{{ form.id }}"
                name="address[address2]"
                value="{{ form.address2 }}"
                placeholder="Address Line 2"
            >
            <input
                type="text"
                id="AddressCity_{{ form.id }}"
                name="address[city]"
                value="{{ form.city }}"
                placeholder="City"
            >
            <select id="AddressCountry_{{ form.id }}" name="address[country]" data-default="{{ form.country }}">
                {{ country_option_tags }}
            </select>
            <div id="AddressProvinceContainer_{{ form.id }}">
                <select
                    id="AddressProvince_{{ form.id }}"
                    name="address[province]"
                    data-default="{{ form.province }}"
                ></select>
            </div>
            <input
                type="text"
                id="AddressZip_{{ form.id }}"
                name="address[zip]"
                value="{{ form.zip }}"
                placeholder="Postcode"
                autocapitalize="characters"
            >
            <input
                type="tel"
                id="AddressPhone_{{ form.id }}"
                name="address[phone]"
                value="{{ form.phone }}"
                placeholder="Phone"
            >
            <p>
                {{ form.set_as_default_checkbox }}
                <label for="address_default_address_{{ form.id }}">Set as default address</label>
            </p>
            <input type="submit" class="ssa-button-primary" value="Confirm">
            <a href="#" class="ssa-button-black" data-toggleaddress="{{ form.id }}">Cancel</a>
        {% endform %}
    </div>
{% endfor %}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var addAddressButton = document.getElementById('addAddressButton');
        var addAddressForm = document.getElementById('AddAddress');
        var cancelButton = document.getElementById('cancelButton');

        // initially hide the form
        addAddressForm.style.display = 'none';

        addAddressButton.addEventListener('click', function () {
            // toggle visibility of form on Add Address button click
            if (addAddressForm.style.display === 'none') {
                addAddressForm.style.display = 'block';
            } else {
                addAddressForm.style.display = 'none';
            }
        });

        cancelButton.addEventListener('click', function () {
            // hide form on Cancel button click
            addAddressForm.style.display = 'none';
        });

        var editAddressButtons = document.querySelectorAll('.js-edit-button');
        var editAddressForms = document.querySelectorAll('.js-edit-form');

        // initially hide the forms
        editAddressForms.forEach(function (form) {
            form.style.display = 'none';
        });

        editAddressButtons.forEach(function (button, index) {
            button.addEventListener('click', function () {
                var form = editAddressForms[index]; // get the corresponding form for this button
                // toggle visibility of form on Edit button click
                if (form.style.display === 'none') {
                    form.style.display = 'block';
                } else {
                    form.style.display = 'none';
                }
            });
        });
    });
</script>
2

Hi Kinkwilde! Great to hear you’re building your own theme! There’s a few things you can check here to troubleshoot why the ‘Edit Address’ form isn’t updating correctly. One issue that can occur with Shopify’s address forms is related to how Shopify generates the provinces dropdown. When the country selection changes, Shopify makes a request to update the provinces dropdown. If the request is late, and the form gets submitted before the request completes, the province might not be updated correctly.

To check if this is happening, try selecting a new country, and wait for a few seconds to make sure the province dropdown has been updated, and then submit the form. If the province gets updated correctly, then you might need to add some JavaScript to prevent the form from being submitted before the provinces dropdown has been updated.

Another thing you can check is whether there’s some JavaScript error happening when you try to edit the address. When you’re on this page, open the dev tools console and look for any error messages appearing when you try to edit an address.

Hope this helps!

3

The country drop down is the only thing working, it’s the only field that updates correctly. It’s all the others that don’t work - First Name, Last Name, Zip, Phone etc…

From what I can see there is no console errors before the HMR kicks in.

This is why I’ve come to the forums.

4

From comparing this implementation of the customer forms with Dawn’s implementation, I do notice that Dawn is not using <form> tags (and by extension not making calls with method/action). It’s possible this could be having an impact on how data is being transferred/ updated. Could you try changing your implementation to be closer to Dawns?

5

The only form tag included is related to ‘deleting’ an address which is outlined in their documentation - https://shopify.dev/docs/themes/architecture/templates/customers-addresses#delete-an-address

Everything else is very close to the dawn theme.

Already tried removing the delete form, and none of the fields update when editing the address, only the country drop down works still.