Redirect to a custom page after Account registration submitted

Ram_A
Explorer
60 3 21

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:
Screenshot 2024-01-16 at 17.14.49.png


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.
Screenshot 2024-01-16 at 17.16.55.png

 

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 %}

 

 

 

Replies 4 (4)

Ram_A
Explorer
60 3 21

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> 

 

Ram_A
Explorer
60 3 21

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);
        }
      });
    }

 

jtraverso
Shopify Partner
9 0 3

¿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.

Ram_A
Explorer
60 3 21

eventually it didn’t work as expected for me either. 

it tried to edit/delete my above post but I couldn’t..