Question

我在Shopify客户注册过程中遇到了一个我无法解决的问题，希望这里的人可以阐明这个问题。

当客户在我们的Shopify网站上成功注册时，他们将被重定向到根目录/主页，这恰好是客户想要的。客户现在希望成功注册后将新注册的用户带到“帐户”页面。

据我了解，默认行为是将用户重定向到“帐户”页面，但是由于某些原因，这对我们来说没有发生。

看着标题，似乎用户被发送到“帐户”页面，然后立即302'到根。鉴于这不是默认行为，所以我想知道是否已对此进行了自定义，如果可以的话，在哪里？

在我们的主题，代码或js中找不到能做到这一点的东西。

我很困惑。

[编辑] shopify中的注册表

{% form 'create_customer' %}
    {{ form.errors | default_errors }}


    <div class="input-wrapper">
        <label for="FirstName" class="label-hidden">
            {{ 'customer.register.first_name' | t }}
        </label>
        <input type="text"
            name="customer[first_name]"
            id="FirstName"
            placeholder="{{ 'customer.register.first_name' | t }}"
            autofocus
            {% if form.first_name %}value="{{ form.first_name }}"{% endif %}>
    </div>

    <div class="input-wrapper">
        <label for="LastName" class="label-hidden">
            {{ 'customer.register.last_name' | t }}
        </label>
        <input type="text"
            name="customer[last_name]"
            id="LastName"
            placeholder="{{ 'customer.register.last_name' | t }}"
            {% if form.last_name %}value="{{ form.last_name }}"{% endif %}>
    </div>

    <div class="input-wrapper">
        <label for="Email" class="label-hidden">
            {{ 'customer.register.email' | t }}
        </label>
        <input type="email"
            name="customer[email]"
            id="Email"
            class="{% if form.errors contains 'email' %}input-error{% endif %}"
            placeholder="{{ 'customer.register.email' | t }}"
            value="{% if form.email %}{{ form.email }}{% endif %}"
            spellcheck="false"
            autocomplete="off"
            autocapitalize="off">
    </div>

    <div class="input-wrapper">
        <label for="CreatePassword" class="label-hidden">
            {{ 'customer.register.password' | t }}
        </label>
        <input type="password"
            name="customer[password]"
            id="CreatePassword"
            class="{% if form.errors contains 'password' %}input-error{% endif %}"
            placeholder="{{ 'customer.register.password' | t }}">
    </div>


    <div class="input-wrapper">
        <label for="PrivacyPolicy" class="label-hidden">
            <input type="checkbox"
            name="customer[note][Privacy Policy]"
            id="PrivacyPolicy"
            value="Accepted on {{ "now" | date: "%Y-%m-%d" }}" />
            I have read, understood and agree to the <a href="/pages/privacy-policy" target="_blank">Privacy Policy</a>.
        </label>
    </div>

    <div class="input-wrapper">
        <button disabled type="submit" class="button--primary" id="create_customer__submit">{{ 'customer.register.submit' | t }}</button>
    </div>

    <a href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>
{% endform %}

我已经看到建议添加以下内容作为可能的解决方法，但这对我的情况没有任何影响。

<input type="hidden" name="checkout_url" value="/account">

我可以通过检查器看到表单被发布到“ / account”，然后重定向（302）到“ /”

上面的表单呈现为

<form method="post" action="/account" id="create_customer" accept-charset="UTF-8">
    <input type="hidden" name="form_type" value="create_customer" />
    ....
    ....
    <div class="input-wrapper">
        <button disabled type="submit" class="button--primary" id="create_customer__submit">Create</button>
    </div>
</form>

Answer 1

您可以使用Ajax发布表单，然后成功重定向到帐户页面。

以下示例：

    $('form#create_customer').on('submit', function(event){
        //debugger;
        event.preventDefault();
        var postUrl = $(this).attr('action');
        var postData = $(this).serialize();

        //console.log(postData); check what your form posts

        $.ajax({
            type: "POST",
            url: postUrl,
            data: postData,
            dataType: "json",
            success: function(data) {
                console.log('Account created')
                 //redirect to somewhere
                 window.location.replace("/some-url");
            },
            error: function() {
                console.log('error handling here');
            }
        });
    });

Answer 2

我最终用jquery处理了表单提交。我在Shopify网站上看到了一些例子，尤其是这个https://ecommerce.shopify.com/c/ecommerce-design/t/redirect-after-customer-registration-370825，并对其进行了一些修改。我在注册帐户页面的底部放置了以下内容，它很有效。

异步不是我的选择，但很可能是某些人的答案。

(function() {
  'use strict';

  function handleSumission(event) {
    event.preventDefault();

    var data = $(this).serialize();

    $.post('/account', data)
      .done(function(data) {
        var errorsLog = $(data).find('.errors').text();

        // Show any errors that there may be
        if(errorsLog != "" && errorsLog  != 'undefined') {

          // Do error handling here

        } else {
          window.location.href = '/account';
        }
      })
        .fail(function() {
          // Tidy up if it fails
        });
  }

  function init() {
    $('#create_customer').on('submit', handleSumission);
  }

  window.addEventListener('load', init);

}());

Answer 3

这是我注册后用于重定向用户的方式（带有或不带有验证码）：

window.addEventListener("load", function (event) {
    var redirectInput = document.createElement('input'),
        registerSubmit = document.querySelector('#create_customer input[type="submit"]'),
        registerForm = document.querySelector('#create_customer'),
        captchaSubmit = document.querySelector('.shopify-challenge__container input[type="submit"]'),
        captchaForm = document.querySelector('#g-recaptcha');

    redirectInput.setAttribute('type', 'hidden');
    redirectInput.setAttribute('name', 'return_to');
    redirectInput.setAttribute('value', '/account'); //URL to redirect

    if (registerForm.length) {
        registerSubmit.insertAdjacentElement("beforebegin", redirectInput)
    } else if (captchaForm.length) {
        captchaSubmit.insertAdjacentElement("beforebegin", redirectInput)
    }

});

新注册的用户在Shopify中被重定向

3 个答案: