Add Checkout Modules

You can add modules to steps in multiple-step groups. For example, a guest shopper is prompted to register in the final confirmation step by default. By placing the OrderWizard.Module.RegisterGuest module in multiple steps, you can offer the registration at many points during the checkout process.

Each module is designed to use components and naming conventions consistent between the modules. When creating custom modules, we suggest that you follow similar conventions. For example, the RegisterEmail module contains the following components that are common among most other modules:

Module definition: named from the most generic component (OrderWizard) to the most specific component (RegisterEmail).

              define('OrderWizard.Module.RegisterEmail', ['Wizard.Module'], function (WizardModule)

Associated Template: this defines the HTML layout for the rendered output. Templates are found in the templates folder of each specific module.
```
              template: 'order_wizard_registeremail_module' 

            
```

Render function: the wizard object renders each step sequentially as it is defined in the code. The _render(); function is responsible for displaying the template in the layout.

                 ,   render: function()
      {
         this.profile = this.wizard.options.profile;

         // if the user is logged we dont render the module
         if (this.profile.get('isGuest') !== 'T')
         {
            this.trigger('ready', true);
         }
         else
         {
            this._render();
            if (this.profile.get('email') && this.wizard.isPaypalComplete())
            {
               this.trigger('ready', true);
            }
         }
      }

Submit function: defines the logic performed when the Continue button is clicked.

              submit: function()
      {

         var email = this.$('input[name=email]').val()
         ,   newsletter = this.$('input[name=sign-up-newsletter]').is(':checked')
         ,   self = this;
         
         // if the user is not guest or not change the current values we just resolve the promise
         if (this.profile.get('isGuest') !== 'T' || (email === this.profile.get('email') && this.profile.get('emailsubscribe') === (newsletter ? 'T' : 'F') ))
         {
            return this.isValid();
         }
         
         this.profile.set('email', email);
         this.profile.set('confirm_email', email);
         
         return this.isValid().then(function() {
            self.profile.set('emailsubscribe', newsletter);
            return self.profile.save();
         });

      }

isValid function: defines error checking for entries.

              isValid: function() 
      {
         var promise = jQuery.Deferred();

         if (this.wizard.options.profile.get('isGuest') !== 'T')
         {
            return promise.resolve();
         }
         
         if (!Backbone.Validation.patterns.email.test(this.wizard.options.profile.get('email')))
         {
            return promise.reject(_('Email is required').translate());
         }
         
         return promise.resolve();
      }

Related Topics