Custom PromocodeNotifications Module

In addition to modifying existing SuiteCommerce Advanced modules, you need to add a custom module for Promotion Notifications. This custom module provides the template, Sass, and JavaScript files required to extend the Order Wizard module with promotions notifications.

Step 1: Create the custom PromocodeNotifications module:

Create a directory to store your custom module.

Give this directory a name similar to the module being customized. For example:

Modules/extensions/OrderWizard.Module.PromocodeNotifications@1.0.0 module

In your new OrderWizard.Module.PromocodeNotifications@1.0.0 module , create the following subdirectories and files.

OrderWizard.Module.PromocodeNotifications@1.0.0\Templates\ order_wizard_promocodenotifications.tpl

                    <div data-type="Promocode.Notifications"></div>

OrderWizard.Module.PromocodeNotifications@1.0.0/Sass/ _order-wizard-promocodenotifications.scss
```
                    //empty file 

                  
```

OrderWizard.Module.PromocodeNotifications@1.0.0/JavaScript/OrderWizard.Module.PromocodeNotifications.js

                    // @module OrderWizard.Module.PromocodeNotifications
define( 'OrderWizard.Module.PromocodeNotifications'
, [ 'Wizard.Module' , 'SC.Configuration' , 'Backbone.CollectionView' , 'Cart.Promocode.Notifications.View' , 'order_wizard_promocodenotifications.tpl' , 'underscore' , 'jQuery' ]
, function ( WizardModule , Configuration , BackboneCollectionView , CartPromocodeNotificationsView , order_wizard_promocodenotifications_tpl , _ , jQuery )
{ 'use strict'; // @class OrderWizard.Module.PromocodeNotifications @extends Wizard.Module return WizardModule.extend({ //@property {Function} template template: order_wizard_promocodenotifications_tpl //@method initialize , initialize: function initialize () { WizardModule.prototype.initialize.apply(this, arguments); this.wizard.model.on('change:promocodes', this.render, this); this.wizard.model.on('promocodeNotificationShown', this.removePromocodeNotification, this); this._render(); } , render: function() { var promocodes = _.filter(this.wizard.model.get('promocodes') || [], function (promocode) { return promocode.notification === true; }); if(promocodes.length){ var message_collection_view = new BackboneCollectionView({ collection: promocodes , viewsPerRow: 1 , childView: CartPromocodeNotificationsView , childViewOptions: { parentModel: this.wizard.model } }); message_collection_view.render(); jQuery('[data-type="Promocode.Notifications"]').html(message_collection_view.$el.html()); } } // @method removePromocodeNotification // @param String promocode_id // @return {Void} , removePromocodeNotification: function (promocode_id) { var promocode = _.findWhere(this.wizard.model.get('promocodes'), {internalid: promocode_id}); delete promocode.notification; } //@method getContext //@returns {OrderWizard.Module.PromocodeNotifications.Context} , getContext: function getContext () { //@class OrderWizard.Module.PromocodeNotifications.Context return {}; //@class OrderWizard.Module.PromocodeNotifications } });
});

Step 2: Prepare the Developer Tools for Your Extension

Create a ns.package.json file in the OrderWizard.Module.PromocodeNotifications@1.0.0 module.

Modules/extensions/OrderWizard.Module.PromocodeNotifications@1.0.0/ns.package.json

Build the ns.package.json file using the following code.

                { "gulp": { "javascript": [ "JavaScript/*.js" ] , "sass": [ "Sass/**/*.scss" ] , "templates": [ "Templates/*.tpl" ] }
}

Add your custom module to the modules object of the distro.json file.

This file is located in the top-level directory of your SuiteCommerce Advanced source code. Adding a reference to your custom module ensures that the Gulp tasks include your module when you deploy. In this example, the OrderWizard.Module.PromocodeNotifications module is added at the beginning of the list of modules. However, you can add the module anywhere in the modules object. The order of precedence in this list does not matter.

                { "name": "SuiteCommerce Advanced Elbrus", "version": "2.0", "buildToolsVersion": "1.3.0", "folders": { "modules": "Modules", "suitecommerceModules": "Modules/suitecommerce", "extensionsModules": "Modules/extensions", "thirdPartyModules": "Modules/third_parties", "distribution": "LocalDistribution", "deploy": "DeployDistribution" }, "modules": { "extensions/OrderWizard.Module.PromocodeNotifications": "1.0.0", "suitecommerce/Account": "2.3.0", "suitecommerce/Address": "2.4.0", ...

Include the module definition (“OrderWizard.Module.PromocodeNotifications”) in the dependencies array of the Checkout application JavaScript object.

Your distro.json file should look similar to the following:
```
                "tasksConfig": {
//...
"javascript": [ //... { "entryPoint": "SC.Checkout.Starter", "exportFile": "checkout.js", "dependencies": [ //... "OrderWizard.Module.PromocodeForm", "OrderWizard.Module.PromocodeNotifications" ], //... 

              
```
Note:
Best practice is to place any new modules at the bottom of the list in the dependencies array.
Save the distro.json file.

Note:
Any changes to the distro file must also include references to any custom modules you may have created to extend or override files described in the section Modifications to Existing Promotions Code.

General Notices