Add Checkout Modules for Customizati...

You can add modules to steps in multiple-step groups within SuiteCommerce. For instance, prompting guest shoppers to register during the final confirmation step can be accomplished by placing the OrderWizard.Module.RegisterGuest module at various points in the checkout flow. This flexibility allows for a more interactive and user-friendly experience.

Each module adheres to a standard naming convention and structure, which is beneficial when creating custom modules. Below are the key components of a module:

Module Definition

Each module is defined from the most general to the most specific components. For example:

javascript

"text-purple-400">define('OrderWizard.Module.RegisterEmail', ['Wizard.Module'], "text-purple-400">function (WizardModule) {

Associated Template

The module's HTML layout is defined through its associated template, which can be found in the templates folder:

javascript

template: 'order_wizard_registeremail_module'

Render Function

The render function is crucial, as it sequentially displays each step of the wizard based on the defined code:

javascript

1render: "text-purple-400">function() {
2    "text-purple-400">this.profile = "text-purple-400">this.wizard.options.profile;
3 
4    // "text-purple-400">if the user is logged we don't render the module
5    "text-purple-400">if ("text-purple-400">this.profile.get('isGuest') !== 'T') {
6        "text-purple-400">this.trigger('ready', true);
7    } "text-purple-400">else {
8        "text-purple-400">this._render();
9        "text-purple-400">if ("text-purple-400">this.profile.get('email') && "text-purple-400">this.wizard.isPaypalComplete()) {
10            "text-purple-400">this.trigger('ready', true);
11        }
12    }
13}

Submit Function

The submit function specifies the logic that runs when the Continue button is clicked:

javascript

1submit: "text-purple-400">function() {
2    "text-purple-400">var email = "text-purple-400">this.$('input[name=email]').val(),
3        newsletter = "text-purple-400">this.$('input[name=sign-up-newsletter]').is(':checked'),
4        self = "text-purple-400">this;
5    // Logic "text-purple-400">for handling guest and email validation
6    "text-purple-400">if ("text-purple-400">this.profile.get('isGuest') !== 'T' || (email === "text-purple-400">this.profile.get('email') && "text-purple-400">this.profile.get('emailsubscribe') === (newsletter ? 'T' : 'F'))) {
7        "text-purple-400">return "text-purple-400">this.isValid();
8    }
9    "text-purple-400">this.profile.set('email', email);
10    "text-purple-400">this.profile.set('confirm_email', email);
11    "text-purple-400">return "text-purple-400">this.isValid().then("text-purple-400">function() {
12        self.profile.set('emailsubscribe', newsletter);
13        "text-purple-400">return self.profile.save();
14    });
15}

isValid Function

The isValid function conducts error checks on the module’s inputs:

javascript

1isValid: "text-purple-400">function() {
2    "text-purple-400">var promise = jQuery.Deferred();
3    "text-purple-400">if ("text-purple-400">this.wizard.options.profile.get('isGuest') !== 'T') {
4        "text-purple-400">return promise.resolve();
5    }
6    "text-purple-400">if (!Backbone.Validation.patterns.email.test("text-purple-400">this.wizard.options.profile.get('email'))) {
7        "text-purple-400">return promise.reject(_('Email is required').translate());
8    }
9    "text-purple-400">return promise.resolve();
10}

Best Practices for Module Development

When customizing modules for SuiteCommerce, adhering to best practices is crucial for maintaining code efficiency and readability. Always follow component naming conventions to ensure consistency, and leverage existing templates when building custom implementations.

Add Checkout Modules for Customization in SuiteCommerce

Module Definition

Associated Template

Render Function

Submit Function

isValid Function

Best Practices for Module Development

Related Topics

Frequently Asked Questions (4)

More in Commerce