customers/address.liquidにて、住所追加のフォームを書いたが機能しない

[takato]

customers/address.liquidにて、新規住所の登録のためのフォームを書きましたが、うまく機能しません。

■挙動
フォームに入力していき保存を押すと、画面がリロードされるが住所自体は登録できていない。

■コード
書いたコードは下記になります。

<div id="add_address">
{% form 'customer_address', customer.new_address %}
<div class="add_address customer_address add_customer_address">
    <h4>配送先住所新規登録</h4>
    <a href="#" class="js-edit_btn" data-form-id="add_address_form">追加</a>
</div>

    <div id="add_address_form" class="add_adress_wrap edit_address" style="display: none;">
        <label for="address_last_name_{{form.id}}">姓<span class="require"><span style="font-size: 70%;">※</span>必須</span></label>
        <input type="text" id="address_last_name_{{form.id}}" class="address_form text-field-6 w-input" name="address[last_name]" value="{{form.last_name}}" size="40"  required />

        <label for="address_first_name_{{form.id}}">名<span class="require"><span style="font-size: 70%;">※</span>必須</span></label>
        <input type="text" id="address_first_name_{{form.id}}" class="address_form text-field-6 w-input" name="address[first_name]" value="{{form.first_name}}" size="40" required />

        <label for="address_zip_{{form.id}}">郵便番号<span class="require"><span style="font-size: 70%;">※</span>必須</span></label>
        <input type="text" id="address_zip_{{form.id}}" class="address_form text-field-6 w-input" name="address[zip]" value="{{form.zip}}" size="40" required />

        <label for="address_province_{{form.id}}">都道府県<span class="require"><span style="font-size: 70%;">※</span>必須</span></label>
        <input type="text" id="address_province_{{form.id}}" class="address_form text-field-6 w-input" name="address[province]" value="{{form.province}}" size="40" required />

        <label for="address_city_{{form.id}}">市区町村<span class="require"><span style="font-size: 70%;">※</span>必須</span></label>
        <input type="text" id="address_city_{{form.id}}" class="address_form text-field-6 w-input" name="address[city]" value="{{form.city}}" size="40" required />

        <label for="address_address1_{{form.id}}">番地<span class="require"><span style="font-size: 70%;">※</span>必須</span></label>
        <input type="text" id="address_address1_{{form.id}}" class="address_form text-field-6 w-input" name="address[address1]" value="{{form.address1}}" size="40" required />


        <label for="address_address2_{{form.id}}">建物名・部屋番号</label>
        <input type="text" id="address_address2_{{form.id}}" class="address_form text-field-6 w-input" name="address[address2]" value="{{form.address2}}" size="40"/>

        <label for="address_phone_{{form.id}}">電話番号<span class="require"><span style="font-size: 70%;">※</span>必須</span></label>
        <input type="text" id="address_phone_{{form.id}}" class="address_form text-field-6 w-input" name="address[phone]" value="{{form.phone}}" size="40" required />

        <div class="action_bottom_wrap">
            {{ form.set_as_default_checkbox }} デフォルトの配送先に設定する
            <br>
            
            <div class="action_bottom">
            <input class="btn" type="submit" value="保存" />
            <div class="note"><a href="#" data-form-id="add_address_form" class="js-edit_btn">キャンセル</a></div>
            </div>       
        </div>
    </div>
{% endform %}
</div>

■参考にしたサイト

https://shopify.dev/docs/themes/theme-templates/customers-addresses-liquid

考えられる原因を教えて頂けると幸いです。

[KOICHI_KAMIZURU · Accepted solution]

初めまして、上水流と申します。

CountryのInputが不足しているようです。

日本のみの販売で、国の選択をさせたくない場合は以下のコードを入れると動作するようになるかと思われます。

<input type="hidden" id="AddressCountryNew" name="address[country]" value="Japan" />

ご参考になりましたら幸いです。

[takato]

ありがとうございます！
実装できました！