Extending Native Events in SuiteCommerce

If you are a developer who works to customize SuiteCommerce websites, you'll find that adding or updating the defined events for a native SuiteCommerce view file is a common need. Doing it correctly is key. See the example below for how to safely extend events in SuiteCommerce.

define('ExtendEvents.Example', [
        'ProductDetails.Full.View' //load the view you wish to extend
    ],
    function (
        ProductDetailsFullView
    ) {
        'use strict';


        return {
            mountToApp: function (container) {
                    
                ProductDetailsFullView.prototype.events = _.extend(ProductDetailsFullView.prototype.events || {}, {
                    'some event': 'functionName'
                });
                
            }
        };
    });

Key Takeaways of Extending Native SuiteCommerce Events

“events” may not be defined on the object. Be sure to handle that by using code like:

ProductDetailsFullView.prototype.events || {}

You can change multiple things when extending events

1. Add a new event for a view. Be sure to define the function on the view prototype as well in this case.
2. Remove an event from a view.
3. Change the function an existing event is mapped to.
4. Change an existing event.

 Author: Sam Gagliardi

---

Got stuck on a step in this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!