/   /   /  OroCommerce JS: Mediator listen-trigger example

Note:

For more extensions and themes visit our store

OroCommerce JS: Mediator listen-trigger example


The Mediator pattern enables communication (mediation) between views using a mediator object.

The mediator inside is extend  Backbone mediator and come with Oro Platform in the path vendor/oro/platform/src/Oro/Bundle/UIBundle/Resources/public/js/mediator.js , So you can use by calling inside your custom js by :
   

  1.  
  2.       var mediator = require('oroui/js/mediator');
  3.    

So the mediator trigger many events like :

  1.  
  2.    mediator.trigger('cms:content-variant-collection:add', this.$el);
  3.    mediator.trigger('checkout-content:updated');
  4.  

Is clean trigger every new content variations added in Content block , the second trigger any content update in checkout step .

So exist too some other with after and before like:

  1.  
  2.    mediator.trigger('checkout-content:before-update'); 
  3.  

How you can Listen Event with mediator:

first method is using on function:

  1.  
  2.         initialize: function() {
  3.             mediator.on('checkout-content:updated', this._onContentUpdated, this);
  4.         }
  5.  

and add you function :

  1.  
  2.         _onContentUpdated: function() {
  3.            //some code;
  4.         }
  5.  

to stop trigger:
  1.  
  2.         dispose: function() {
  3.             if (this.disposed) {
  4.                 return;
  5.             }
  6.             mediator.off('checkout-content:updated', this._onContentUpdated, this);
  7.         }
  8.  

Second technique:
  1.  
  2.         listen: {
  3.             'grid_load:complete mediator': 'onGridLoadComplete'
  4.         }
  5.  

and add you function:
  1.  
  2.         onGridLoadComplete: function(collection) {
  3.             //some code
  4.         }
  5.  

Full example of Listening add to shopping cart:

  1.  
  2. define(function(require) {
  3.     'use strict';
  4.     var AddShoppingListDetectorComponent;
  5.     var BaseComponent = require('oroui/js/app/components/base/component');
  6.     var mediator = require('oroui/js/mediator');
  7.     var routing = require('routing');
  8.     var _ = require('underscore');
  9.     AddShoppingListDetectorComponent = BaseComponent.extend({
  10.         /**
  11.          * @inheritDoc
  12.          */
  13.         listen: {
  14.             'shopping-list:line-items:update-response mediator': '_onLineItemAdd'
  15.         },
  16.         /**
  17.          * @inheritDoc
  18.          */
  19.         constructor: function AddShoppingListDetectorComponent() {
  20.             AddShoppingListDetectorComponent.__super__.constructor.apply(this, arguments);
  21.         },
  22.         _onLineItemAdd: function(model, response) {
  23.              //Some code
  24.         }
  25.     });
  26.    return AddShoppingListDetectorComponent;
  27. });
  28.  

Is simple code .

Comments

IBNAB is a company made of a group of professionals whose work is providing secure open source solutions. Our company strives for reaching magnificent results with each experience and provides professional open source solutions that cover every part of the business process.