Personalized checkout and custom promotions with Shopify Scripts
Hi,
I would appreciate any help regarding redirecting customers to a new page after registration.
So, I've enabled the customer email verification feature to ensure that customers activate their email addresses after registration. This was done with the help of the Shopify team support, and it worked as it should.
Dawn theme, this is how it looked after submitted the registration form:
Now, I'm working on redirecting the customer after registration to a new verification page with a better styling at "https://www.xxxxx.com/pages/test-verify-page," without affecting the email verification feature.
I've tried a few solutions, but some of them didn't work at all, and the others successfully directed to the new page. However, they interfered with the email verification link process sent to the customer's email, directing to the new page before the verification link process was sent.
Any help or insights on how to redirect customers to the new page after registration without affecting the email verification link process would be greatly appreciated.
Thanks,
I have tried these:
<script> // Existing script for company selection and form submission function addFormSubmitEvent() { // ... (your existing code) form.addEventListener("submit", (e) => { const companyValue = companySelector.value; const otherCompanyValue = otherCompanyField.value; if (companyValue !== "NaN" && companyValue !== "Other") { customerTags.value = companyValue; } else if (companyValue === "Other" && otherCompanyValue !== "") { customerTags.value = `${otherCompanyValue}`; } else { customerTags.value = "Non-Subscriber"; } // Check if the form is successfully submitted if (form.posted_successfully) { // After successful registration and email sent window.location.href = "https://www.xxxxx.com/pages/test-verify-page"; } }); }
function addFormSubmitEvent() { // ... (your existing code) form.addEventListener("submit", async (e) => { const companyValue = companySelector.value; const otherCompanyValue = otherCompanyField.value; if (companyValue !== "NaN" && companyValue !== "Other") { customerTags.value = companyValue; } else if (companyValue === "Other" && otherCompanyValue !== "") { customerTags.value = `${otherCompanyValue}`; } else { customerTags.value = "Non-Subscriber"; } // Check if the form is successfully submitted if (form.posted_successfully) { // After successful registration and email sent await new Promise(resolve => setTimeout(resolve, 3000)); // Wait for 3 second (adjust if needed) window.location.href = "https://wwwxxxx.com/pages/test-verify-page"; } }); } </script>
<script> (function() { const companiesData = JSON.parse(sessionStorage.getItem("companies-data")); buildCompanySelector(); addCompanySelectorChangeEvent(); addFormSubmitEvent(); function buildCompanySelector() { // ... (existing code) ... } function addCompanySelectorChangeEvent() { // ... (existing code) ... } function addFormSubmitEvent() { // ... (existing code) ... } // New function for redirection after form submission function redirectAfterSubmission() { // Check if the form is successfully submitted if (form.posted_successfully) { // After successful registration and email sent window.location.href = "https://www.xxxxx.com/pages/test-verify-page"; } } // Call the redirection function after form submission addFormSubmitEvent(); redirectAfterSubmission(); })(); </script>
function addFormSubmitEvent() { const form = document.querySelector("#create_customer"); const customerTags = document.querySelector("#customer_tags"); const companySelector = document.querySelector("#CompanyName"); const otherCompanyField = document.querySelector("#CompanyName-Other"); form.addEventListener("submit", async (e) => { e.preventDefault(); // Prevent the default form submission const companyValue = companySelector.value; const otherCompanyValue = otherCompanyField.value; if (companyValue !== "NaN" && companyValue !== "Other") { customerTags.value = companyValue; } else if (companyValue === "Other" && otherCompanyValue !== "") { customerTags.value = `${otherCompanyValue}`; } else { customerTags.value = "Non-Subscriber"; } // Submit the form using AJAX (Assuming Shopify supports this method) try { const response = await fetch(form.action, { method: form.method, body: new URLSearchParams(new FormData(form)), headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, }); if (response.ok) { // Form submission successful, redirect to the new page window.location.href = "www.xxxx.com/pages/test-verify-page"; } else { // Handle errors if needed console.error('Form submission failed:', response.status, response.statusText); } } catch (error) { console.error('Error during form submission:', error); } }); }
here main-register.liquid code:
{{ 'customer.css' | asset_url | stylesheet_tag }} {%- style -%} .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; } @media screen and (min-width: 750px) { .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px; } } {%- endstyle -%} <div class="customer register section-{{ section.id }}-padding"> <svg style="display: none"> <symbol id="icon-error" viewBox="0 0 13 13"> <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/> <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/> <path d="......" fill="white"/> <path d="......" fill="white" stroke="#EB001B" stroke-width="0.7"/> </symbol> </svg> <h1> {{ 'customer.register.title' | t }} </h1> {%- form 'create_customer' -%} <input type="hidden" id="customer_tags" name="customer[tags]" value=""/> {%- if form.errors -%} <h2 class="form__message" tabindex="-1" autofocus> <svg aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-error" /> </svg> {{ 'shopify.errors.verify_email' | t }} </h2> <ul> {%- for field in form.errors -%} <li> {%- if field == 'form' -%} {{ form.errors.messages[field] }} {%- else -%} <a href="#RegisterForm-{{ field }}"> {{ form.errors.translated_fields[field] | capitalize }} {{ form.errors.messages[field] }} </a> {%- endif -%} </li> {%- endfor -%} </ul> {%- endif -%} <div class="field"> <input type="text" name="customer[first_name]" id="RegisterForm-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name" required placeholder="{{ 'customer.register.first_name' | t }}" > <label for="RegisterForm-FirstName"> {{ 'customer.register.first_name' | t }} </label> </div> <div class="field"> <input type="text" name="customer[last_name]" required id="RegisterForm-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name" placeholder="{{ 'customer.register.last_name' | t }}" > <label for="RegisterForm-LastName"> {{ 'customer.register.last_name' | t }} </label> </div> <div class="field"> <input type="email" name="customer[email]" required id="RegisterForm-email" {% if form.email %} value="{{ form.email }}"{% endif %} spellcheck="false" autocapitalize="off" autocomplete="email" aria-required="true" {% if form.errors contains 'email' %} aria-invalid="true" aria-describedby="RegisterForm-email-error" {% endif %} placeholder="{{ 'customer.register.email' | t }}" > <label for="RegisterForm-email"> {{ 'customer.register.email' | t }} </label> </div> <p class="field-info">* .....</p> {%- if form.errors contains 'email' -%} <span id="RegisterForm-email-error" class="form__message"> <svg aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-error" /> </svg> {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}. </span> {%- endif -%} <div class="field"> <label for="CompanyName">Company</label> <div class="select" > <select id="CompanyName" name="customer[company]" required> <option value="" >Company...</option> </select> {% render 'icon-caret' %} </div> </div> <div class="field hidden"> <input type="text" name="customer[company_other]" id="CompanyName-Other" placeholder="Company name" > <label for="CompanyName-Other"> Company name </label> </div> <div class="field"> <input type="password" required name="customer[password]" id="RegisterForm-password" aria-required="true" {% if form.errors contains 'password' %} aria-invalid="true" aria-describedby="RegisterForm-password-error" {% endif %} placeholder="{{ 'customer.register.password' | t }}" > <label for="RegisterForm-password"> {{ 'customer.register.password' | t }} </label> </div> {%- if form.errors contains 'password' -%} <span id="RegisterForm-password-error" class="form__message"> <svg aria-hidden="true" focusable="false" role="presentation"> <use href="#icon-error" /> </svg> {{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}. </span> {%- endif -%} <button type="submit"> {{ 'customer.register.submit' | t }} </button> {%- endform -%} </div> <script> (function() { const companiesData = JSON.parse(sessionStorage.getItem("companies-data")); buildCompanySelector(); addCompanySelectorChangeEvent(); addFormSubmitEvent(); function buildCompanySelector() { if (!companiesData) { return; } const companies = companiesData; const companySelector = document.querySelector("#CompanyName"); for (const [key, data] of Object.entries(companies)) { const companyName = data.name; const option = document.createElement("option"); option.value = companyName; option.innerText = companyName; companySelector.insertAdjacentElement("beforeend", option); } const option = document.createElement("option"); option.value = "Other"; option.innerText = "Other"; companySelector.insertAdjacentElement("beforeend", option); } function addCompanySelectorChangeEvent() { const companySelector = document.querySelector("#CompanyName"); const otherCompanyField = document.querySelector("#CompanyName-Other"); const otherCompanyFieldWrapper = otherCompanyField.closest(".field"); companySelector.addEventListener("change", function () { if (this.value === "Other") { otherCompanyFieldWrapper.classList.remove("hidden"); } else { otherCompanyFieldWrapper.classList.add("hidden"); } }); } function addFormSubmitEvent() { const form = document.querySelector("#create_customer"); const customerTags = document.querySelector("#customer_tags"); const companySelector = document.querySelector("#CompanyName"); const otherCompanyField = document.querySelector("#CompanyName-Other"); form.addEventListener("submit", (e) => { const companyValue = companySelector.value; const otherCompanyValue = otherCompanyField.value; if (companyValue !== "NaN" && companyValue !== "Other") { customerTags.value = companyValue; } else if (companyValue === "Other" && otherCompanyValue !== "") { customerTags.value = `${otherCompanyValue}`; } else { customerTags.value = "Non-Subscriber"; } }); } })(); </script> {% schema %} { "name": "t:sections.main-register.name", "settings": [ { "type": "header", "content": "t:sections.all.padding.section_padding_heading" }, { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_top", "default": 36 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_bottom", "default": 36 } ] } {% endschema %}
Also, I tried adding this script to the bottom of theme.liquid, and while it did redirect to the new page, the verification link email didn't get sent.
<script>
(function() {
var REDIRECT_PATH = '/pages/verify-email';
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>
Never mind, I figured it out
just in case anyone else is stuck on something similar, here's the script I used
function addFormSubmitEvent() {
const form = document.querySelector("#create_customer");
const customerTags = document.querySelector("#customer_tags");
const companySelector = document.querySelector("#CompanyName");
const otherCompanyField = document.querySelector("#CompanyName-Other");
form.addEventListener("submit", async (e) => {
e.preventDefault(); // prevent the default form submission
const companyValue = companySelector.value;
const otherCompanyValue = otherCompanyField.value;
if (companyValue !== "NaN" && companyValue !== "Other") {
customerTags.value = companyValue;
} else if (companyValue === "Other" && otherCompanyValue !== "") {
customerTags.value = `${otherCompanyValue}`;
} else {
customerTags.value = "Non-Subscriber";
}
// Perform the form submission using AJAX
try {
const response = await fetch(form.action, {
method: form.method,
body: new FormData(form),
});
if (response.ok) {
// Redirect the user after successful form submission
window.location.href = 'https://xxx/pages/verify-email';
} else {
// Handle any errors if needed
console.error('Form submission failed:', response.statusText);
}
} catch (error) {
console.error('Error during form submission:', error);
}
});
}
¿How did you ensure that customers activate their email addresses after registration?
I have been trying to do that, but it only works if the contact is already created as a customer, if the customer is not created is doesn't sent a confirmation email.
eventually it didn’t work as expected for me either.
it tried to edit/delete my above post but I couldn’t..
You can add this piece of code just after the form tag:
<input name="return_to" type="hidden" value="/collections/all (change with your url)">
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025