Shopify登录表单form.posted_successfully?失效，需仅提交成功时触发脚本

云上老周

2026-8-3

Shopify登录表单：仅成功提交时显示等待提示

问题

当前点击登录按钮或输入错误登录信息时，都会显示“Please wait while we log you in...”提示，需要修改为**仅当表单提交成功（form.posted_successfully?为true）**时才触发该提示。

修改方案

移除原代码中绑定在登录按钮上的点击事件脚本，避免点击就触发提示
在登录表单区域添加提示元素<p id="message"></p>
通过Shopify的Liquid条件判断，仅在登录成功时注入显示提示的脚本

修改后的关键代码

步骤1：添加提示元素

在{% form 'customer_login' %}块内的表单错误信息下方插入提示元素：

{% form 'customer_login' %}
  <div data-cc-animate data-cc-animate-delay="0.2s">
    {{ form.errors | default_errors }}
  </div>
  <!-- 新增提示容器 -->
  <p id="message"></p>

步骤2：移除原按钮点击脚本

删除这段触发时机错误的脚本：

<script>
    $("#login-button").click(function(){
        $("#message").text("Please wait while we log you in...");
    });
</script>

步骤3：添加成功触发脚本

在{% endform %}标签后，添加Liquid条件判断脚本：

{% endform %}
<!-- 仅登录成功时执行脚本 -->
{%- if form.posted_successfully? -%}
<script>
    $("#message").text("Please wait while we log you in...");
</script>
{%- endif -%}

完整修改后的登录表单代码

<style>
  .whatsAppIconDarkLoginRegister{
    width: 18%;
    border: 1px solid #f4f4f4;
    border-radius: 50px;
  }

  .whatsAppIconDarkLoginRegister:hover{
    border: 1px solid #2b2b2b;
    border-radius: 50px;
  }


@media (max-width: 428px) {

.whatsAppIconDarkLoginRegister {
    width: 50%;
}
}  

.becomePartner{
color: #9b8642;
    margin-top: -5px !important;
    padding-bottom: 15px;
}



.login-page-call , .login-page-email {
    font-style: italic;
  padding: 5px;
}

.login-page-call:hover , .login-page-email:hover {
    font-style: italic;
    color: #9b8642 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}

.login-page-contact-div{
    font-size: 14px;
  padding-bottom:10px;
}
  
</style>


<div class="content" id="template">
  <div id="customer">
    <div class="template_header">
      <h1 class="h2 feature-header" data-cc-animate>{{ 'customer.login.title' | t }}</h1>
    </div>

    {% form 'customer_login' %}
      <div data-cc-animate data-cc-animate-delay="0.2s">
    {{ form.errors | default_errors }}
      </div>
      <!-- 新增提示容器 -->
      <p id="message"></p>
      
<div class="container text-center" id="needAsisstance">
  <div class="row">
      <div class="col">
          
        <h6>Need Assistance ?</h6>



<div class="login-page-contact-div">
    <p>
        Call us
        <a href="tel:+17866331938"><span class="login-page-call">+1 786 633 19 38</span></a>
        <span>/</span>
        <a href="tel:+17866331298"><span class="login-page-call">+1 786 633 12 98</span></a>
        <span>or email us at</span><br>
        <a href="mailto:contact@arditicollection.com"><span class="login-page-email">contact@arditicollection.com</span></a>
        
    </p>

</div>
        <div id="whatsAppCall"></div>
      
      </div>
  </div>
</div>


    
      <div class="form">
        <div id="login_email" class="input-row" data-cc-animate data-cc-animate-delay="0.2s">
          <input aria-label="{{ 'customer.login.email' | t }}" placeholder="{{ 'customer.login.email' | t }}"
                 type="email" value="" name="customer[email]" id="customer_email" class="large" size="30"/>
        </div>

        {% if form.password_needed %}

          {% comment %}
            Customer Account Login
          {% endcomment %}

          <div id="login_password" class="input-row">
            <input aria-label="{{ 'customer.login.password' | t }}" placeholder="{{ 'customer.login.password' | t }}"
                   type="password" value="" name="customer[password]" id="customer_password" class="large password"
                   size="16" data-cc-animate data-cc-animate-delay="0.35s"/>
            <div id="forgot_password" data-cc-animate data-cc-animate-delay="0.5s">
              <a href="#"
                 onclick="showRecoverPasswordForm();return false;">{{ 'customer.login.forgot_password' | t }}</a>
            </div>
          </div>

        {% endif %}

        <div class="wide-action">
          
          <input type="submit" value="{{ 'customer.login.sign_in' | t }}" data-cc-animate data-cc-animate-delay="0.6s"/>
       

          <p class="note">
            <a data-cc-animate-click href="{{ routes.account_register_url }}" data-cc-animate data-cc-animate-delay="0.75s">
              {{ 'customer.login.register' | t }}
            </a>
          </p>

          <span class="">
            <a data-cc-animate-click href="https://www.arditicollection.com/pages/become-a-partner" data-cc-animate data-cc-animate-delay="0.9s">
              <p class="becomePartner">Become A Partner</p>
            </a>
          </span>
          
          <span class="note">
            <a data-cc-animate-click href="{{ routes.root_url }}" data-cc-animate data-cc-animate-delay="0.9s">
              {{ 'customer.login.return_to_store' | t }}
            </a>
          </span>

          
        </div>
      </div>
    <input class="darshRedirect" type="hidden" name="checkout_url" value="{{ canonical_url }}" />
    {% endform %}
    <!-- 仅登录成功时执行脚本 -->
    {%- if form.posted_successfully? -%}
    <script>
        $("#message").text("Please wait while we log you in...");
    </script>
    {%- endif -%}
  </div>

  {% comment %}
    Recover Password Form
  {% endcomment %}

  <div id="recover-password" style='display:none'>
    <div class="template_header align-center">
      <h2 class="title">{{ 'customer.recover_password.title' | t }}</h2>
      <p class="note">{{ 'customer.recover_password.subtext' | t }}</p>
    </div>

    {% form 'recover_customer_password' %}
    {{ form.errors | default_errors }}
    <div class="form">
      <div id="recover_email" class="input-row">
        <input aria-label="{{ 'customer.recover_password.email' | t }}" placeholder="{{ 'customer.recover_password.email' | t }}" type="email" value="" size="30" name="email" id="recover-email" class="large" />
      </div>

      <div class="wide-action">
        <input type="submit" value="{{ 'customer.recover_password.submit' | t }}" />
        <span class="note"><a href="#" onclick="hideRecoverPasswordForm();return false;">{{ 'customer.recover_password.cancel' | t }}</a></span>
      </div>
    </div>
    {% endform %}
  </div>



  
  {% comment %}
    Guest Login form for shops with optional customer accounts. This form is displayed only when users click on the checkout link
    on the cart page.
  {% endcomment %}


  {% comment %}
  {% if shop.checkout.guest_login %}
  <div id="guest">
    <div class="template_header">
      <h3 class="title">{{ 'customer.login.guest_title' | t }}</h3>
    </div>
    {% form 'guest_login' %}
      <input type="submit" value="{{ 'customer.login.guest_continue' | t }}" />
    {% endform %}
  </div>
  {% endif %}
</div>
{% endcomment %}

<script type="text/javascript">
  function showRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'inline-block';
    document.getElementById('customer').style.display='none';
  }

  function hideRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'none';
    document.getElementById('customer').style.display = 'inline-block';
  }

  if (window.location.hash == '#recover') { showRecoverPasswordForm() }
</script>


 
<script>
let text;
if (Math.random() < 0.5) {
  text = "<a href='https://wa.me/17866331938' target='_blank'><img src='https://cdn.shopify.com/s/files/1/0098/8318/9314/files/whatsAppIconDark.png?v=1671706870' class='img-fluid whatsAppIconDarkLoginRegister myimg' alt='Arditi Collection® WhastAppIcon'></a>";
} else {
  text = "<a href='https://wa.me/17866331298' target='_blank'><img src='https://cdn.shopify.com/s/files/1/0098/8318/9314/files/whatsAppIconDark.png?v=1671706870' class='img-fluid whatsAppIconDarkLoginRegister myimg' alt='Arditi Collection® WhastAppIcon'></a>";
}
document.getElementById("whatsAppCall").innerHTML = text;
</script>





  
<script> 
$(document).ready(function(){
var darshRef = document.referrer;
$('.darshRedirect').val(darshRef );
});
</script>

内容的提问来源于stack exchange，提问作者mbkadoglu

Shopify登录表单form.posted_successfully?失效，需仅提交成功时触发脚本

问题 #

修改方案 #

修改后的关键代码 #

步骤1：添加提示元素 #

步骤2：移除原按钮点击脚本 #

步骤3：添加成功触发脚本 #

完整修改后的登录表单代码 #