Shopify用户注册后无法跳转至自定义欢迎页问题求助

我希望用户完成账户注册后，能看到注册成功提示并跳转至我制作的欢迎页，但目前无法实现该跳转功能。

我的customer-register.liquid代码： #

<div class="sm:container">  

<div class="customer-form">
    {%- if section.settings.image != blank -%}
      {{- section.settings.image | image_url: width: section.settings.image.width | image_tag: loading: 'lazy', sizes: '50vw', widths: '300,400,500,600,700,800,1000,1200,1400', class: 'customer-form__image rounded' -}}
    {%- endif -%}

    <div {% render 'surface', class: 'customer-form__box', background_gradient: section.settings.background_gradient, background: section.settings.background, text_color: section.settings.text_color, background_fallback: 'bg-secondary' %}>
      <div class="customer-form__box-inner text-center">
        <div  class="v-stack gap-12">
          <h1 class="h2">
            {%- assign content = 'customer.register.title' | t -%}
            {%- render 'styled-text', content: content, gradient: section.settings.heading_gradient -%}
          </h1>

          <div class="v-stack gap-6">
            {%- for block in section.blocks -%}
              {%- case block.type -%}
                {%- when '@app' -%}
                  {%- render block -%}

                {%- when 'liquid' -%}
                  {%- if block.settings.liquid != blank -%}
                    <div {{ block.shopify_attributes }}>
                      {{- block.settings.liquid -}}
                    </div>
                  {%- endif -%}

                {%- when 'fields' -%}
                  <div {{ block.shopify_attributes }}>
                    {%- form 'create_customer', class: 'form' -%}
                      <div class="fieldset">
                        {%- if form.errors -%}
                          {%- assign form_errors = form.errors | default_errors -%}
                          {%- render 'banner', status: 'error', content: form_errors -%}
                        {%- endif -%}

                        {%- if request.locale.iso_code == 'ja' -%}
                          {%- assign last_name_label = 'customer.register.last_name' | t -%}
                          {%- render 'input', name: 'customer[last_name]', label: last_name_label, autocomplete: 'family-name', required: true -%}

                          {%- assign first_name_label = 'customer.register.first_name' | t -%}
                          {%- render 'input', name: 'customer[first_name]', label: first_name_label, autocomplete: 'given-name', required: true -%}
                        {%- else -%}
                          {%- assign first_name_label = 'customer.register.first_name' | t -%}
                          {%- render 'input', name: 'customer[first_name]', label: first_name_label, autocomplete: 'given-name', required: true -%}

                          {%- assign last_name_label = 'customer.register.last_name' | t -%}
                          {%- render 'input', name: 'customer[last_name]', label: last_name_label, autocomplete: 'family-name', required: true -%}
                        {%- endif -%}

                        {%- assign email_label = 'customer.register.email' | t -%}
                        {%- render 'input', type: 'email', name: 'customer[email]', label: email_label, autocomplete: 'email', required: true -%}

                        {%- assign password_label = 'customer.register.password' | t -%}
                        {%- render 'input', type: 'password', name: 'customer[password]', label: password_label, minlength: 5, autocomplete: 'new-password', required: true -%}

                        {%- if block.settings.show_email_consent -%}
                          {%- assign consent_label = 'customer.register.accepts_marketing' | t -%}
                          {%- render 'checkbox', name: 'customer[accepts_marketing]', label: consent_label -%}
                        {%- endif -%}
                      </div>

                      {%- assign submit_label = 'customer.register.submit' | t -%}
                    {%- render 'button', content: submit_label, type: 'submit', size: 'xl', stretch: true, secondary: true, background: section.settings.button_background, text_color: section.settings.button_text_color -%}

                      <div>
                        <a href="{{ routes.account_login_url }}" class="link text-subdued">{{ 'customer.register.login' | t }}</a>
                      </div>
                    {%- endform -%}
                  </div>
              {%- endcase -%}
{% endschema %}

我尝试过的代码（无效）： #

<script> 
   (function() { 
     var REDIRECT_PATH = '/checkout'; 
   
     var selector = '#create_customer, form[action$="/account"][method="post"]', 
         $form = document.querySelectorAll(selector)[0]; 
   
     if ($form) { 
       $redirect = document.createElement('input'); 
       $redirect.setAttribute('name', 'return_to'); 
       $redirect.setAttribute('type', 'hidden'); 
       $redirect.value = REDIRECT_PATH; 
       $form.appendChild($redirect); 
     } 
   })(); 
 </script> 

解决方法： #

1. 直接在Liquid表单中添加return_to隐藏字段（最可靠）

不需要依赖JS，直接在{% form 'create_customer' %}标签内部添加隐藏输入框，指定跳转路径：

{%- form 'create_customer', class: 'form' -%}
  <!-- 现有表单内容 -->
  <input type="hidden" name="return_to" value="/your-welcome-page">
  <!-- 提交按钮等内容 -->
{%- endform -%}

把/your-welcome-page替换成你实际的欢迎页路径。

2. 修正JS选择器问题

你之前的JS可能找不到表单，因为Shopify的create_customer表单默认ID不是create_customer，而是动态生成的。可以调整选择器为表单的class或者更准确的属性：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const REDIRECT_PATH = '/your-welcome-page';
  // 通过表单的action属性匹配，确保DOM加载完成后执行
  const $form = document.querySelector('form[action*="/account"]');
  if ($form) {
    const $redirect = document.createElement('input');
    $redirect.setAttribute('name', 'return_to');
    $redirect.setAttribute('type', 'hidden');
    $redirect.value = REDIRECT_PATH;
    $form.appendChild($redirect);
  }
});
</script>

3. 添加注册成功提示

如果需要在欢迎页显示提示，可以在欢迎页的Liquid模板中添加：

{% if customer.last_created_at == customer.current_sign_in_at %}
  <div class="success-banner">注册成功！欢迎加入我们</div>
{% endif %}

这段代码会判断用户是否是刚注册登录，显示提示信息。

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