Added user registration flow option to example templates (related to c…

…raftcms#472)
amici-infotech · Nov 14, 2018 · cc49646 · cc49646
1 parent bb37824
commit cc49646
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 47 deletions.
diff --git a/templates/shop/_includes/meter.html b/templates/shop/_includes/meter.html
@@ -1,8 +1,12 @@
 {% set steps = [
     {
-        label: "Sign In",
+        label: "Email",
         url: 'shop/checkout'
     },
+    {
+        label: "Account",
+        url: 'shop/checkout/register-signin'
+    },
     {
         label: "Address",
         url: 'shop/checkout/addresses'

diff --git a/templates/shop/checkout/index.html b/templates/shop/checkout/index.html
@@ -5,53 +5,12 @@
 {% extends 'shop/_layouts/checkout' %}
 
 {% block content %}
-    <h1>Please sign in</h1>
-    <div class="flex -mx-8 mt-6 pt-8">
+    <h1>Let’s grab your email to get started</h1>
+    <div class="flex -mx-8 mt-6">
         <div class="w-1/2 px-8 border-r border-grey-lighter">
-            <h2 class="mt-0">Already Registered?</h2>
-
-            <form method="post" accept-charset="UTF-8">
-                {{ csrfInput() }}
-                <input type="hidden" name="action" value="users/login">
-                {{ redirectInput('shop/checkout/addresses') }}
-
-                <div class="field">
-                    <label for="loginName">Email</label>
-                    <input id="loginName" class="w-full" type="text" name="loginName" placeholder="[email protected]"
-                           value="{{ craft.app.user.getRememberedUsername() }}">
-                </div>
-
-                <div class="field">
-                    <label for="password">Password</label>
-                    <input id="password" class="w-full" type="password" name="password">
-                </div>
-
-                <div class="field">
-                    <label>
-                        <input type="checkbox" name="rememberMe" value="1">
-                        Remember me
-                    </label>
-                </div>
-
-                <div class="buttons">
-                    <input type="submit" value="Login" class="button button-primary"/>
-                </div>
-            </form>
-
-            <p><a href="{{ url('forgotpassword') }}">Forgot your password?</a></p>
-        </div>
-
-        <div class="w-1/2 px-8">
-            <h2 class="mt-0">Guest Checkout</h2>
-
-            {#
-            Setting the guest email address on the guest customer and order.
-            This will have no affect if the user is currently logged in as the cart uses the currentUsers email address.
-            #}
-
             <form method="POST">
                 <input type="hidden" name="action" value="commerce/cart/update-cart">
-                {{ redirectInput('shop/checkout/addresses') }}
+                {{ redirectInput('shop/checkout/register-signin') }}
                 {{ csrfInput() }}
 
                 <div class="field">
@@ -62,13 +21,17 @@ <h2 class="mt-0">Guest Checkout</h2>
 
                 {% set emailErrors = cart.getErrors('email') %}
                 {% if emailErrors|length %}
-                    <span class="text-red">{{ emailErrors|join }}</span><br>
+                <span class="text-red">{{ emailErrors|join }}</span><br>
                 {% endif %}
 
                 <div class="buttons">
-                    <input type="submit" value="Continue as Guest" class="button button-primary"/>
+                    <input type="submit" value="Continue" class="button button-primary"/>
                 </div>
             </form>
         </div>
+
+        <div class="w-1/2 px-8">
+
+        </div>
     </div>
 {% endblock %}
diff --git a/templates/shop/checkout/register-signin.html b/templates/shop/checkout/register-signin.html
@@ -0,0 +1,120 @@
+{% if currentUser %}
+    {% redirect 'shop/checkout/addresses' %}
+{% endif %}
+
+{% extends 'shop/_layouts/checkout' %}
+
+{% block content %}
+
+    {% if not cart.email %}
+        {% redirect 'shop/checkout' %}
+    {% endif %}
+
+    {# Does a user exist with this email address? #}
+
+    {% set userExists = craft.users.email(cart.email).one() %}
+    {% set userExistsButCantLogin = craft.users.email(cart.email).status(['locked','suspended','pending']).one() %}
+
+    {% if userExistsButCantLogin %}
+            {% redirect 'shop/checkout/addresses' %}
+    {% endif %}
+
+    <h1>Account</h1>
+    <div class="flex -mx-8 mt-6 pt-8">
+        <div class="w-1/2 px-8 border-r border-grey-lighter">
+            {% if userExists %}
+            <h2 class="mt-0">Sign In</h2>
+
+            <form method="post" accept-charset="UTF-8">
+                {{ csrfInput() }}
+                <input type="hidden" name="action" value="users/login">
+                {{ redirectInput('shop/checkout/addresses') }}
+
+                <div class="field">
+                    <label for="loginName">Email</label>
+                    <input id="loginName" class="w-full" type="text" name="loginName" placeholder="[email protected]"
+                           value="{{ craft.app.user.getRememberedUsername() }}">
+                </div>
+
+                <div class="field">
+                    <label for="password">Password</label>
+                    <input id="password" class="w-full" type="password" name="password">
+                </div>
+
+                <div class="field">
+                    <label>
+                        <input type="checkbox" name="rememberMe" value="1">
+                        Remember me
+                    </label>
+                </div>
+
+                <div class="buttons">
+                    <input type="submit" value="Login" class="button button-primary"/>
+                </div>
+            </form>
+
+            <p><a href="{{ url('forgotpassword') }}">Forgot your password?</a></p>
+            {% else %}
+            <h2 class="mt-0">Register</h2>
+
+            <form method="post" accept-charset="UTF-8">
+                {{ csrfInput() }}
+                <input type="hidden" name="action" value="users/save-user">
+                {{ redirectInput('shop/checkout/addresses') }}
+
+                {% macro errorList(errors) %}
+                {% if errors %}
+                <ul class="errors">
+                    {% for error in errors %}
+                    <li>{{ error }}</li>
+                    {% endfor %}
+                </ul>
+                {% endif %}
+                {% endmacro %}
+
+                {% from _self import errorList %}
+
+                <div class="field">
+                <label for="username">Username</label>
+                <input id="username" type="text" name="username"
+                       {%- if user is defined %} value="{{ user.username }}"{% endif -%}>
+
+                {% if user is defined %}
+                {{ errorList(user.getErrors('username')) }}
+                {% endif %}
+                </div>
+
+                <div class="field">
+                <label for="email">Email</label>
+                <input id="email" type="text" name="email"
+                       {%- if user is defined %} value="{{ user.email }}"{% endif %}
+                       {%- if user is not defined and cart.email %} value="{{ cart.email }}"{% endif %}>
+
+                {% if user is defined %}
+                {{ errorList(user.getErrors('email')) }}
+                {% endif %}
+                </div>
+
+                <div class="field">
+                <label for="password">Password</label>
+                <input id="password" type="password" name="password">
+
+                {% if user is defined %}
+                {{ errorList(user.getErrors('password')) }}
+                {% endif %}
+                </div>
+
+                <div class="buttons">
+                    <input type="submit" value="Register" class="button button-primary"/>
+                </div>
+            </form>
+
+
+            {% endif %}
+        </div>
+        <div class="w-1/2 px-8">
+            <h2 class="mt-0">Checkout</h2>
+            <a href="{{ url('shop/checkout/addresses')}}">Or, just continue as guest &rarr;</a>
+        </div>
+    </div>
+{% endblock %}