我的 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>
您可以使用 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');
}
});
});
我最终用 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);
}());
这是我在注册后用于重定向用户的方法(带或不带验证码验证):
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)
}
});
您还可以通过以下方式使用
return_to
进行重定向:
{% form 'create_customer', return_to: '/account' %}
content
{% endform %}
或
{% form 'create_customer' %}
<input type='hidden' name='return_to' value='/account'>
{% endform %}
文档文章:新注册用户在 Shopify 中被重定向