/   /   /  OroCommerce for Frontend developers: reloadEvents Overview

Note:

For more extensions and themes visit our store

OroCommerce for Frontend developers: reloadEvents Overview


OroCommerce organize page view by loading subpart-subtree. any view is constructed by many blocks defined by block_id . when you make an event like add item to shopping or delete item from shopping list as result the layout system load and refresh some block related to this change for example for  -add to shopping list - the layout load the main_menu_shopping_lists_wrapper which means the top shopping list toggle and all informations content  (by adding the new items to content and chonging the items counts) .

let’s explain by complete example inside: src/Ibnab/Bundle/ImanBundle/Resources/views/layouts/iman/page/shopping_list_widget.html.twig

  1.  
  2. {% block _main_menu_shopping_lists_wrapper_widget %}
  3.     {% set attr = layout_attr_defaults(attr, {
  4.         'data-page-component-module': 'oroshoppinglist/js/app/components/shoppinglist-widget-view-component',
  5.         '~data-page-component-options': {
  6.             view: 'oroui/js/app/views/layout-subtree-view',
  7.             blockId: id,
  8.             reloadEvents: ['shopping-list:refresh', 'frontend:shopping-list-item-quantity:update', 'frontend:item:delete'],
  9.         },
  10.         'data-dropdown-trigger': true,
  11.         '~class': " main-menu__item main-menu__item--nested"
  12.     }) %}
  13.  <div {{ block('block_attributes') }}>
  14.         {{ block_widget(block) }}
  15.     </div>
  16. {% endblock %}
  17.  

So we have here  reloadEvents for some predefined actions like  frontend:item:delete → reload full block with custom id on  trigger by mediator frontend:item:delete → example of this trigger is in
vendor/oro/customer-portal/src/Oro/Bundle/FrontendBundle/Resources/public/js/app/components/delete-item-component.js

  1.  
  2.         deleteWithoutRedirect: function(e) {
  3.             mediator.execute('showMessage', 'success', this.successMessage, {flash: true});
  4.             mediator.trigger('frontend:item:delete', this.triggerData || e);
  5.         }
  6.  

when the customer delete item from shopping list mediator lunch event with trigger method which catched by reloadEvents .

The result url returned to refresh some part in the dom has all blocks which has reloadEvents like:
http://iman.com/index_dev.php?layout_block_ids%5B%5D=header_row_shopping_toggle&layout_block_ids%5B%5D=main_menu_shopping_lists_wrapper
or 
http://iman.com/index_dev.php?layout_block_ids%5B%5D=main_menu_shopping_lists_wrapper&layout_block_ids%5B%5D=header_row_shopping_toggle&layout_block_ids%5B%5D=main_menu_shopping_lists_wrapper&layout_block_ids%5B%5D=shopping_list_view_container_content 
you can see in url  layout_block_ids%5B%5D=main_menu_shopping_lists_wrapper from our example

the component responsible to loading the subview is layout-subtree-manager.js in vendor/oro/platform/src/Oro/Bundle/UIBundle/Resources/public/js/layout-subtree-manager.js

they has many function addView , removeView , callViewMethod and last is reloadLayouts and more important and using ies
with             

  1.  
  2.            var eventBlockIds = this.reloadEvents[event] || [];
  3.             if (!(eventBlockIds instanceof Array) || !eventBlockIds.length) {
  4.                 return;
  5.             } 
  6.  

the component generate all block layout_block_ids here for example for ‘frontend:item:delete’ all content blocks in bottom will get reloaded on event   frontend:item:delete
main_menu_shopping_lists_wrapper & header_row_shopping_toggle & main_menu_shopping_lists_wrapper & shopping_list_view_container_content 

Other thing you can call  reloadEvents directly inside js component like:

  1.  
  2.             mediator.trigger('layout-subtree:update:product', {
  3.                 layoutSubtreeUrl: routing.generate('oro_product_frontend_product_view', {
  4.                     id: productId,
  5.                     parentProductId: this.model.get('parentProduct'),
  6.                     ignoreProductVariant: true
  7.                 }),
  8.                 layoutSubtreeCallback: _.bind(this.afterProductChanged, this)
  9.             });
  10.  

and pass argument but the important is :  layoutSubtreeUrl and  layoutSubtreeCallback , which get used inside  layout-subtree-manager.js like:
  1.  
  2.             options = options || {
  3.                 layoutSubtreeUrl: null,
  4.                 layoutSubtreeCallback: null
  5.             };
  6.             this._callViewMethod(eventBlockIds, 'beforeContentLoading');
  7.             $.ajax({
  8.                 url: options.layoutSubtreeUrl || this.url,
  9.                 type: this.method,
  10.                 data: {
  11.                     layout_block_ids: eventBlockIds
  12.                 }
  13.             })
  14.                 .done(function(content) {
  15.                     self._callViewMethod(eventBlockIds, 'setContent', function(blockId) {
  16.                         return [content[blockId] || ''];
  17.                     });
  18.                     self._callViewMethod(eventBlockIds, 'afterContentLoading');
  19.                     if (options.layoutSubtreeCallback) {
  20.                         options.layoutSubtreeCallback();
  21.                     }
  22.                 })
  23.                 .fail(function(jqxhr) {
  24.                     self._callViewMethod(eventBlockIds, 'contentLoadingFail');
  25.                 });
  26.  

So  you can call callViewMethod with 3 methods  beforeContentLoadingsetContentafterContentLoading ,  contentLoadingFail

The result Response of subtree layout (block view part) generate inside LayoutListener by function :

  1.  
  2.     protected function getLayoutResponse(
  3.         ContextInterface $context,
  4.         Request $request,
  5.         LayoutManager $layoutManager
  6.     ) {
  7.         $blockIds = $request->get('layout_block_ids');
  8.         if (is_array($blockIds) && $blockIds) {
  9.             $response = [];
  10.             foreach ($blockIds as $blockId) {
  11.                 if ($blockId) {
  12.                     $layout = $layoutManager->getLayout($context, $blockId);
  13.                     $response[$blockId] = $layout->render();
  14.                     
  15.                 }
  16.             }
  17.             $response = new JsonResponse($response);
  18.         } else {
  19.             $layout = $layoutManager->getLayout($context);
  20.             $response = new Response($layout->render());
  21.         }
  22.         return $response;
  23.     }
  24.  

this is quick view.

Comments

Related Posts

make your store more efficient

Solving problems. With open source technology. Professional results. That’s what makes Ibnab your best choice

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.