Setting up the event reg page so it reloads registrants
authorSteve Sutton <steve@gaslightmedia.com>
Wed, 27 Sep 2017 19:14:38 +0000 (15:14 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Wed, 27 Sep 2017 19:14:38 +0000 (15:14 -0400)
If registrants are in the cart (loaded in session), then they'll output
back under the class they were registered in.

13 files changed:
css/front.css
js/frontRegApp.js
js/models/front/account.js
js/models/front/regClass.js
js/models/front/regEvent.js
js/models/front/regRequestRegistrant.js
js/views/front/app.js
js/views/front/regClass.js
models/admin/ajax/account.php
models/admin/ajax/regFront.php
models/admin/ajax/regFront/registrant.php
models/front/registrations/registration.php
views/front/registrations/registration.html

index 2b742cf..4b3a7d5 100644 (file)
@@ -57,7 +57,6 @@
     background-color: lightgrey;
 }
 .glm-reg-level-registrant span {
-    text-decoration: underline;
     padding: .3rem 1rem .3rem .2rem;
 }
 .glm-reg-compcode-entry {
@@ -144,8 +143,14 @@ div.glm-reg-login h4 {
 .new-reg {
     background-color: white;
     border: 1px solid black;
-    padding: 30px;
+    padding: 2rem;
     position: absolute;
-    left: 10px;
-    top: 50px;
+    left: 1rem;
+    top: 3rem;
+    width: 30rem;
+}
+.new-reg .reg_fname, .new-reg .reg_lname {
+    width: 46%;
+    margin-right: 1rem;
+    float: left;
 }
index 852b76e..92e61f9 100644 (file)
@@ -5,8 +5,10 @@ app.Models.Front.Account = Backbone.Model.extend({
 
     // Default registrant values
     defaults: {
-        name: 'AppAccount',
         id: '',
+        name: 'AppAccount',
+        fname: '',
+        lname: '',
         email: '',
     },
 
@@ -147,6 +149,10 @@ app.Models.Front.RegClass = Backbone.Model.extend({
         this.registrants = new app.Collections.Front.RegRequestRegistrants( [] );
     },
 
+    setRegistrants: function( registrants ) {
+        this.registrants.reset( registrants );
+    },
+
 });
 
 // js/models/regEvent.js
@@ -177,6 +183,13 @@ app.Models.Front.RegEvent = Backbone.Model.extend({
         this.classes.reset( regClasses );
     },
 
+    setClassRegistrants: function( registrants ){
+        for ( var i = 0; i < registrants.length; i++ ) {
+            var foundClass = this.classes.findWhere({ id: registrants[i].class_id });
+            foundClass.registrants.create( registrants[i] );
+        }
+    },
+
 });
 
 // js/models/regRate.js
@@ -226,6 +239,21 @@ app.Models.Front.RegRequestRegistrant = Backbone.Model.extend({
 
     url: ajaxUrl+'&glm_action=regFront&collection=registrant',
 
+    validate: function( attribs, options ){
+        if ( attribs.fname === undefined || attribs.fname === '' ) {
+            return 'First Name Required';
+        }
+        if ( attribs.lname === undefined || attribs.lname === '' ) {
+            return 'Last Name Required';
+        }
+        if ( attribs.email !== undefined && attribs.email !== '' ) {
+            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
+            if ( reg.test( attribs.email ) == false ) {
+                return 'Invalid Email Address';
+            }
+        }
+    },
+
     // sync: function( method, model ){
     //     //console.log( 'sync in model' );
     //     // console.log( method );
@@ -420,8 +448,8 @@ app.Views.Front.App = Backbone.View.extend({
         // Check to see if there's a login
         if ( loginAccount ) {
             jQuery('.glm-reg-account-login').hide();
-            var accountView = new app.Views.Front.Account({ model: loginAccount });
-            this.$el.append( accountView.render().el );
+            this.accountView = new app.Views.Front.Account({ model: loginAccount });
+            this.$el.append( this.accountView.render().el );
         }
         this.$el.append( this.event.render().el );
         return this;
@@ -436,6 +464,11 @@ app.Views.Front.App = Backbone.View.extend({
 
     continue: function(){
         console.log( cart );
+        // Confirm they are done and goto the next page
+        var isDone = confirm( 'Are you done?' );
+        if ( isDone ) {
+            window.location.href = nextPageUrl;
+        }
         // Need to update the cart
     },
 
@@ -451,7 +484,9 @@ app.Views.Front.App = Backbone.View.extend({
             console.log( msg );
             // Here we can update.
             loginAccount = '';
+            this.accountView.remove();
             this.render();
+            jQuery('#appLogin').show();
         })
         .fail(function(msg){
             console.log('Fail:');
@@ -475,7 +510,9 @@ app.Views.Front.App = Backbone.View.extend({
                 // Create account model and assign to this.loginAccount
                 loginAccount = new app.Models.Front.Account({
                     id: account.id,
-                    email: account.email
+                    email: account.email,
+                    fname: account.fname,
+                    lname: account.lname
                 });
                 // Destroy the model and remove the view
                 this.loginModel.destroy();
@@ -620,10 +657,12 @@ app.Views.Front.RegClass = Backbone.View.extend({
         'click .glm-add-account': 'addAccount',
         'click .glm-add-new-account': 'addNewAccount',
         'click .add-new-registrant': 'addNew',
+        'click .add-new-registrant-cancel': 'cancelAddNew',
     },
 
     addAccount: function(){
         console.log( 'Add Account Called' );
+        console.log( loginAccount );
         // Check to make sure the loginAccount is not empty
         if ( loginAccount !== '' ) {
             var regRequest   = cart.get( 'request' );
@@ -638,6 +677,8 @@ app.Views.Front.RegClass = Backbone.View.extend({
                     reg_class: this.model.get( 'id' ),
                     reg_rate: this.model.get('reg_rate_id'),
                     email: accountEmail,
+                    fname: loginAccount.get('fname'),
+                    lname: loginAccount.get('lname')
                 });
             }
         }
@@ -647,7 +688,17 @@ app.Views.Front.RegClass = Backbone.View.extend({
         var fname = this.$('.reg_fname').val().trim();
         var lname = this.$('.reg_lname').val().trim();
         var email = this.$('.reg_email').val().trim();
-        console.log( 'email: ' + email + ' fname: ' + fname + ' lname: ' + lname );
+        //console.log( 'email: ' + email + ' fname: ' + fname + ' lname: ' + lname );
+        if ( fname === '' || lname === '' ) {
+            alert( 'First and Last name required!' );
+            return;
+        }
+        if ( email === '' ) {
+            var confAnsw = confirm( 'You have no email address! Are you sure you want to add this registrant?' );
+            if ( !confAnsw ) {
+                return;
+            }
+        }
         var regRequest = cart.get( 'request' );
         this.model.registrants.create({
             option: 'add',
@@ -663,6 +714,11 @@ app.Views.Front.RegClass = Backbone.View.extend({
         this.newRegAccountView.remove();
     },
 
+    cancelAddNew: function(){
+        this.newRegAccount.destroy();
+        this.newRegAccountView.remove();
+    },
+
     addNewAccount: function(){
         console.log( 'Add New Account Called' );
         // Create the new Registrant View
index d39327a..4603a2f 100644 (file)
@@ -5,8 +5,10 @@ app.Models.Front.Account = Backbone.Model.extend({
 
     // Default registrant values
     defaults: {
-        name: 'AppAccount',
         id: '',
+        name: 'AppAccount',
+        fname: '',
+        lname: '',
         email: '',
     },
 
index 515879f..b9a2649 100644 (file)
@@ -22,4 +22,8 @@ app.Models.Front.RegClass = Backbone.Model.extend({
         this.registrants = new app.Collections.Front.RegRequestRegistrants( [] );
     },
 
+    setRegistrants: function( registrants ) {
+        this.registrants.reset( registrants );
+    },
+
 });
index 0799eda..eb73ebd 100644 (file)
@@ -26,4 +26,11 @@ app.Models.Front.RegEvent = Backbone.Model.extend({
         this.classes.reset( regClasses );
     },
 
+    setClassRegistrants: function( registrants ){
+        for ( var i = 0; i < registrants.length; i++ ) {
+            var foundClass = this.classes.findWhere({ id: registrants[i].class_id });
+            foundClass.registrants.create( registrants[i] );
+        }
+    },
+
 });
index 31390ba..f00868c 100644 (file)
@@ -21,6 +21,21 @@ app.Models.Front.RegRequestRegistrant = Backbone.Model.extend({
 
     url: ajaxUrl+'&glm_action=regFront&collection=registrant',
 
+    validate: function( attribs, options ){
+        if ( attribs.fname === undefined || attribs.fname === '' ) {
+            return 'First Name Required';
+        }
+        if ( attribs.lname === undefined || attribs.lname === '' ) {
+            return 'Last Name Required';
+        }
+        if ( attribs.email !== undefined && attribs.email !== '' ) {
+            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
+            if ( reg.test( attribs.email ) == false ) {
+                return 'Invalid Email Address';
+            }
+        }
+    },
+
     // sync: function( method, model ){
     //     //console.log( 'sync in model' );
     //     // console.log( method );
index ed16e89..82a573f 100644 (file)
@@ -17,8 +17,8 @@ app.Views.Front.App = Backbone.View.extend({
         // Check to see if there's a login
         if ( loginAccount ) {
             jQuery('.glm-reg-account-login').hide();
-            var accountView = new app.Views.Front.Account({ model: loginAccount });
-            this.$el.append( accountView.render().el );
+            this.accountView = new app.Views.Front.Account({ model: loginAccount });
+            this.$el.append( this.accountView.render().el );
         }
         this.$el.append( this.event.render().el );
         return this;
@@ -33,6 +33,11 @@ app.Views.Front.App = Backbone.View.extend({
 
     continue: function(){
         console.log( cart );
+        // Confirm they are done and goto the next page
+        var isDone = confirm( 'Are you done?' );
+        if ( isDone ) {
+            window.location.href = nextPageUrl;
+        }
         // Need to update the cart
     },
 
@@ -48,7 +53,9 @@ app.Views.Front.App = Backbone.View.extend({
             console.log( msg );
             // Here we can update.
             loginAccount = '';
+            this.accountView.remove();
             this.render();
+            jQuery('#appLogin').show();
         })
         .fail(function(msg){
             console.log('Fail:');
@@ -72,7 +79,9 @@ app.Views.Front.App = Backbone.View.extend({
                 // Create account model and assign to this.loginAccount
                 loginAccount = new app.Models.Front.Account({
                     id: account.id,
-                    email: account.email
+                    email: account.email,
+                    fname: account.fname,
+                    lname: account.lname
                 });
                 // Destroy the model and remove the view
                 this.loginModel.destroy();
index eade028..c4198ff 100644 (file)
@@ -43,10 +43,12 @@ app.Views.Front.RegClass = Backbone.View.extend({
         'click .glm-add-account': 'addAccount',
         'click .glm-add-new-account': 'addNewAccount',
         'click .add-new-registrant': 'addNew',
+        'click .add-new-registrant-cancel': 'cancelAddNew',
     },
 
     addAccount: function(){
         console.log( 'Add Account Called' );
+        console.log( loginAccount );
         // Check to make sure the loginAccount is not empty
         if ( loginAccount !== '' ) {
             var regRequest   = cart.get( 'request' );
@@ -61,6 +63,8 @@ app.Views.Front.RegClass = Backbone.View.extend({
                     reg_class: this.model.get( 'id' ),
                     reg_rate: this.model.get('reg_rate_id'),
                     email: accountEmail,
+                    fname: loginAccount.get('fname'),
+                    lname: loginAccount.get('lname')
                 });
             }
         }
@@ -70,7 +74,17 @@ app.Views.Front.RegClass = Backbone.View.extend({
         var fname = this.$('.reg_fname').val().trim();
         var lname = this.$('.reg_lname').val().trim();
         var email = this.$('.reg_email').val().trim();
-        console.log( 'email: ' + email + ' fname: ' + fname + ' lname: ' + lname );
+        //console.log( 'email: ' + email + ' fname: ' + fname + ' lname: ' + lname );
+        if ( fname === '' || lname === '' ) {
+            alert( 'First and Last name required!' );
+            return;
+        }
+        if ( email === '' ) {
+            var confAnsw = confirm( 'You have no email address! Are you sure you want to add this registrant?' );
+            if ( !confAnsw ) {
+                return;
+            }
+        }
         var regRequest = cart.get( 'request' );
         this.model.registrants.create({
             option: 'add',
@@ -86,6 +100,11 @@ app.Views.Front.RegClass = Backbone.View.extend({
         this.newRegAccountView.remove();
     },
 
+    cancelAddNew: function(){
+        this.newRegAccount.destroy();
+        this.newRegAccountView.remove();
+    },
+
     addNewAccount: function(){
         console.log( 'Add New Account Called' );
         // Create the new Registrant View
index 3a13667..b68c9a1 100644 (file)
@@ -106,7 +106,7 @@ class GlmMembersAdmin_ajax_account extends GLMDataRegistrationsAccount
             // Check accounts for ones that match
             $returnData = $this->wpdb->get_row(
                 $this->wpdb->prepare(
-                    "SELECT id,password
+                    "SELECT id,password,fname,lname
                        FROM " . GLM_MEMBERS_REGISTRATIONS_PLUGIN_DB_PREFIX .  "account
                       WHERE email = %s",
                     $username
@@ -116,11 +116,19 @@ class GlmMembersAdmin_ajax_account extends GLMDataRegistrationsAccount
             $returnPassword = $returnData['password'];
             $returnId       = $returnData['id'];
             if ( $returnPassword == crypt( $password, $returnPassword ) ) {
-                $return = array( 'valid' => true, 'email' => $username, 'id' => $returnId );
+                $return = array(
+                    'valid' => true,
+                    'email' => $username,
+                    'id'    => $returnId,
+                    'fname' => $returnData['fname'],
+                    'lname' => $returnData['lname'],
+                );
                 // Add the user to the php session
                 $_SESSION['LoginAccount'] = array(
                     'id'    => $returnId,
-                    'email' => $username
+                    'email' => $username,
+                    'fname' => $returnData['fname'],
+                    'lname' => $returnData['lname'],
                 );
             } else {
                 $return = array( 'valid' => false );
index fac5d5d..c0c7f8c 100644 (file)
@@ -79,9 +79,12 @@ class GlmMembersAdmin_ajax_regFront
             wp_die();
         }
 
-        if ( !isset($_REQUEST['model']) && $_REQUEST['option'] === 'delete' ) {
+        if ( !isset($_REQUEST['model']) && isset($_REQUEST['option']) && $_REQUEST['option'] === 'delete' ) {
             $_REQUEST['model'] = json_encode($_REQUEST);
         }
+        if ( !isset($_REQUEST['model']) ) {
+            wp_die();
+        }
         // Try to decode the JSON
         $modelData = json_decode(stripslashes($_REQUEST['model']), true);
 
index 10faff8..e781b53 100644 (file)
@@ -102,7 +102,7 @@ class GlmMembersAdmin_registrations_ajax_registrant extends GlmDataRegistrations
             if ( $modelData['reg_event'] ) {
                 //return false;
             }
-            $regRegquestEventId = $this->wpdb->get_var(
+            $regRequestEventId = $this->wpdb->get_var(
                 $this->wpdb->prepare(
                     "SELECT id
                        FROM " . GLM_MEMBERS_REGISTRATIONS_PLUGIN_DB_PREFIX . "reg_request_event
@@ -126,18 +126,18 @@ class GlmMembersAdmin_registrations_ajax_registrant extends GlmDataRegistrations
                 '%d', // reg_time
                 '%s', // event_datetime
             );
-            if ( !$regRegquestEventId ) {
+            if ( !$regRequestEventId ) {
                 $this->wpdb->insert(
                     GLM_MEMBERS_REGISTRATIONS_PLUGIN_DB_PREFIX . 'reg_request_event',
                     $data,
                     $dataFormat
                 );
-                $regRegquestEventId = $this->wpdb->insert_id;
+                $regRequestEventId = $this->wpdb->insert_id;
             } else {
                 $this->wpdb->update(
                     GLM_MEMBERS_REGISTRATIONS_PLUGIN_DB_PREFIX . 'reg_request_event',
                     $data,
-                    array( 'id' => $regRegquestEventId ),
+                    array( 'id' => $regRequestEventId ),
                     $dataFormat,
                     array( '%d' )
                 );
@@ -150,7 +150,7 @@ class GlmMembersAdmin_registrations_ajax_registrant extends GlmDataRegistrations
                       WHERE reg_request_event = %d
                         AND class = %d
                         AND reg_request = %d",
-                    $regRegquestEventId,
+                    $regRequestEventId,
                     $modelData['reg_class'],
                     $modelData['reg_request']
                 )
@@ -161,7 +161,7 @@ class GlmMembersAdmin_registrations_ajax_registrant extends GlmDataRegistrations
                 'reg_time'          => $modelData['reg_time'],
                 'event_datetime'    => $modelData['event_datetime'],
                 'reg_request'       => $modelData['reg_request'],
-                'reg_request_event' => $regRegquestEventId,
+                'reg_request_event' => $regRequestEventId,
                 'class'             => $modelData['reg_class'],
             );
             $dataFormat = array(
@@ -218,7 +218,7 @@ class GlmMembersAdmin_registrations_ajax_registrant extends GlmDataRegistrations
                 'reg_time'           => $modelData['reg_time'],
                 'event_datetime'     => $modelData['event_datetime'],
                 'reg_request'        => $modelData['reg_request'],
-                'reg_request_event'  => $regRegquestEventId,
+                'reg_request_event'  => $regRequestEventId,
                 'reg_request_class'  => $regRequestClassId,
                 'rate'               => $modelData['reg_rate'],
                 'rate_name'          => $rate['name'],
@@ -272,7 +272,7 @@ class GlmMembersAdmin_registrations_ajax_registrant extends GlmDataRegistrations
             }
             if ( !isset( $accountId ) ) {
                 // We need to create an account for this one
-                $this->insert(
+                $this->wpdb->insert(
                     GLM_MEMBERS_REGISTRATIONS_PLUGIN_DB_PREFIX . 'account',
                     array(
                         'fname' => $modelData['fname'],
@@ -294,11 +294,12 @@ class GlmMembersAdmin_registrations_ajax_registrant extends GlmDataRegistrations
                         AND reg_request_event = %d
                         AND reg_request_class = %d",
                     $modelData['reg_request'],
-                    $modelData['account'],
-                    $regRegquestEventId,
+                    $accountId,
+                    $regRequestEventId,
                     $regRequestClassId
                 )
             );
+
             $data = array(
                 'account'            => $accountId,
                 'reg_event'          => $modelData['reg_event'],
@@ -306,7 +307,7 @@ class GlmMembersAdmin_registrations_ajax_registrant extends GlmDataRegistrations
                 'reg_time'           => $modelData['reg_time'],
                 'event_datetime'     => $modelData['event_datetime'],
                 'reg_request'        => $modelData['reg_request'],
-                'reg_request_event'  => $regRegquestEventId,
+                'reg_request_event'  => $regRequestEventId,
                 'reg_request_class'  => $regRequestClassId,
                 'reg_request_rate'   => $regRequestRate,
                 'fname'              => $modelData['fname'],
index b21088d..32df2be 100644 (file)
@@ -1,6 +1,6 @@
 <?php
  require_once GLM_MEMBERS_REGISTRATIONS_PLUGIN_CLASS_PATH.'/data/dataRegEvent.php';
+
  class GlmMembersFront_registrations_registration extends GlmDataRegistrationsRegEvent {
     /**
     * WordPress Database Object
         }
         //echo '<pre>$_SESSION: ' . print_r( $_SESSION, true ) . '</pre>';
 
+
         switch ( $option ) {
         default:
-            
+
             // Get the RegEvent entry
             $regEvent = $this->getEntry( $eventRegID );
             //echo '<pre>$regEvent: ' . print_r( $regEvent, true ) . '</pre>';
         $regClassJSON = '[' . implode( ',', $jsonClasses ) . ']';
         $regCartJSON = json_encode( $cart );
 
+        // Get terms into JSON
+        $termsJSON = json_encode( $this->config['terms'] );
+        //echo '<pre>$this->config[terms]: ' . print_r( $this->config['terms'], true ) . '</pre>';
+
         // check to see if there's a user logged in
         if ( isset( $_SESSION['LoginAccount'] ) && filter_var( $_SESSION['LoginAccount']['id'], FILTER_VALIDATE_INT ) ) {
             $loginAccount = json_encode( $_SESSION['LoginAccount'], JSON_NUMERIC_CHECK );
 
         //echo '<pre>$_SESSION: ' . print_r( $_SESSION, true ) . '</pre>';
 
+        // If there's a cart then pull any registrants for it
+        // If there classes in the cart with rates and registrants they'll need
+        // be setup.
+
+        //echo '<pre>$cart: ' . print_r( $cart, true ) . '</pre>';
+        $registrants = array();
+        //echo '<pre>$cart[events]: ' . print_r( $cart['events'], true ) . '</pre>';
+
+        if ( isset( $cart['events'] ) && is_array( $cart['events'] ) ) {
+            foreach ( $cart['events'] as $event ) {
+                if ( isset( $event['classes'] ) && is_array( $event['classes'] ) ) {
+                    foreach ( $event['classes'] as $class ) {
+                        if ( isset( $class['rates'] ) && is_array( $class['rates'] ) ) {
+                            foreach ( $class['rates'] as $rate ) {
+                                if ( isset( $rate['registrants'] ) && is_array( $rate['registrants'] ) ) {
+                                    foreach ( $rate['registrants'] as $registrant ) {
+                                        // Need to know the class id for the registrant
+                                        $classId = $this->wpdb->get_var(
+                                            $this->wpdb->prepare(
+                                                "SELECT class
+                                                   FROM " .  GLM_MEMBERS_REGISTRATIONS_PLUGIN_DB_PREFIX . "reg_request_class
+                                                  WHERE id = %d",
+                                                $registrant['reg_request_class']
+                                            )
+                                        );
+                                        // Also need to fetch the email
+                                        $email = $this->wpdb->get_var(
+                                            $this->wpdb->prepare(
+                                                "SELECT email
+                                                   FROM " .  GLM_MEMBERS_REGISTRATIONS_PLUGIN_DB_PREFIX . "account
+                                                  WHERE id = %d",
+                                                $registrant['account']
+                                            )
+                                        );
+                                        $registrant['class_id'] = $classId;
+                                        $registrant['email']    = $email;
+                                        $registrants[]          = $registrant;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        //echo '<pre>$registrants: ' . print_r( $registrants, true ) . '</pre>';
+
         // Compile template data
         $templateData = array(
             'entry'          => $regEventSample,
             'regRequestJSON' => $regRequestJSON,
             'eventData'      => $eventData,
             'loginAccount'   => $loginAccount,
+            'termsJSON'      => $termsJSON,
+            'regJSON'        => json_encode( $registrants, JSON_NUMERIC_CHECK ),
         );
              // Return status, any suggested view, and any data to controller
         return array(
index b9cf7da..aac27de 100644 (file)
@@ -8,8 +8,8 @@
     <% } %>
     <a class="glm-reg-account-login" id="loginCancel">Close</a>
     <a id="forgotLogin">Forgot Password</a>
-    <input class="login">
-    <input class="password">
+    <input class="login" placeholder="Email Address" type="email">
+    <input class="password" placeholder="Password" type="password">
     <input type="submit" id="accountLogin" value="Login">
 </script>
 {/literal}
@@ -27,8 +27,8 @@
     </div>
     <div>
         <p><%= descr %></p>
-        <% if ( attendee_max > 0 ) { %>
-            <p>Maximum Registrants: <%- attendee_max %></p>
+        <% if ( attendees_max > 0 ) { %>
+            <p>Maximum Registrants: <%- attendees_max %></p>
         <% } %>
         <p><%= terms %></p>
     </div>
@@ -41,7 +41,7 @@
         </div>
     </div>
     <div class="glm-reg-submit">
-        <input id="glm-reg-cart-continue" type="submit" value="Complete Registration" />
+        <input id="glm-reg-cart-continue" type="submit" value="Continue" />
     </div>
 </script>
 {/literal}
         <div><%- descr %></div>
         <div>Current Rate: <%= reg_rate_name %></div>
         <div>Base Price: <%= reg_rate_base_price %></div>
-        <div>Per Registrant: <%= reg_rate_per_reg %></div>
+        <div>Per {/literal}{$terms.reg_term_attendee_cap}{literal}: <%= reg_rate_per_reg %></div>
         <% if ( loggedIn ) { %>
             <button class="glm-add-account tiny">Add Me</button>
         <% } %>
-        <button class="glm-add-new-account tiny">Add New</button>
-        <div class="registrant-add clearfix glm-hidden">
-            <input type="text" class="addFname" placeholder="First Name">
-            <input type="text" class="addLname" placeholder="Last Name">
-            <input type="text" class="addEmail" placeholder="Enter Email Address">
-            <input type="submit" class="addRegistrant" value="Add">
-        </div>
+        <button class="glm-add-new-account tiny">Add {/literal}{$terms.reg_term_attendee_cap}{literal}</button>
         <div class="reg-class-accounts">
-            Registrants
+            {/literal}{$terms.reg_term_attendee_plur_cap}{literal}
         </div>
     </div>
 </script>
 {/literal}
 {* Template for registrant add form *}{literal}
 <script type="text/template" id="eventReg-registrant-add">
+    <div>
+        {/literal}{$terms.reg_term_contact_information}{literal}
+    </div>
     <div>
         <input class="reg_fname" placeholder="First Name">
         <input class="reg_lname" placeholder="Last Name">
+    </div>
+    <div>
         <input class="reg_email" placeholder="Email Address" value="<%- email %>">
-        <input class="add-new-registrant" value="Add Registrant" type="submit">
+        (Email is optional)
+    </div>
+    <div>
+        <input class="add-new-registrant button tiny" value="Add {/literal}{$terms.reg_term_attendee_cap}{literal}" type="submit">
+        <a class="add-new-registrant-cancel">Cancel</a>
     </div>
 </script>
 {/literal}
 {* Template for registrant *}{literal}
 <script type="text/template" id="registrant-template">
     <a class="glm-reg-level-registrant-delete">Delete</a>
-    <label class="registrant-label">
-        <span class="glm-reg-level-registrant-email"><%= fname %> <%= lname %> <%= email %></span>
-    </label>
+    <span class="glm-reg-level-registrant-email"><%= fname %> <%= lname %> <%= email %></span>
 </script>
 {/literal}
 <div class="glm-reg-event-list" id="regApp">
+    <h1>{$terms.reg_term_registrations_name}</h1>
     <div class="glm-reg-account">
         <a class="glm-reg-account-login" id="appLogin">Login</a>
     </div>
 var appLoginUrl = '{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=login';
 var appAccountUrl = '{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=account';
 var ajaxUrl = '{$ajaxUrl}?action=glm_members_admin_ajax';
+var nextPageUrl = '{$thisUrl}?page=cart';
 var app = {
     Models: { Front: {}, Admin: {} },
     Collections: { Front: {}, Admin: {} },
@@ -123,6 +126,7 @@ jQuery(function($){
     regEvent = new app.Models.Front.RegEvent;
     regEvent.set( {$regEventJSON} );
     regEvent.setClasses( {$regClassesJSON} );
+    regEvent.setClassRegistrants( {$regJSON} );
     var glmApp = new app.Views.Front.App();
 });
 </script>