/   /   /  OroCommerce Customize header top bar programmatically

Note:

For more extensions and themes visit our store

OroCommerce Customize header top bar programmatically


OroCommerce give you the ability to customize your header by combining many components and bundles like layout service management and other , first go to file : vendor/oro/customer-portal/src/Oro/Bundle/CommerceMenuBundle/Resources/views/layouts/blank/page/top_nav.yml
you need observe that is inside blank basic theme (the big parent of default and custom and other theme) the content is :

  1.  
  2. layout:
  3.     actions:
  4.         - '@setBlockTheme':
  5.             themes: 'top_nav.html.twig'
  6.         - '@addTree':
  7.             items:
  8.                 top_nav_container:
  9.                     blockType: container
  10.                     siblingId: ~
  11.                     prepend: true
  12.                 top_nav_menu_container:
  13.                     blockType: container
  14.                 top_nav:
  15.                     blockType: menu
  16.                     options:
  17.                         item: '=data["menu"].getMenu("commerce_top_nav")'
  18.                         allow_safe_labels: true
  19.             tree:
  20.                 page_header:
  21.                     top_nav_container:
  22.                         top_nav_menu_container:
  23.                             top_nav: ~

the file related to this .yml is  top_nav.html.twig , you can see 2 container and one block , the tree used to orgnize the rendering inside twig :
  1.  
  2. {% block _top_nav_container_widget %}
  3.     {% set attr = layout_attr_defaults(attr, {
  4.         '~class': " topbar"
  5.     }) %}
  6.     <div {{ block('block_attributes') }}>
  7.         <div class="container-fluid">
  8.             {{ block_widget(block) }}
  9.         </div>
  10.     </div>
  11. {% endblock %}
  12. {% block _top_nav_widget %}
  13.     {% set attr = layout_attr_defaults(attr, {
  14.         '~class': " topbar-navigation"
  15.     }) %}
  16.   {% set child_attr = layout_attr_defaults(child_attr, {
  17.         '~class': ' topbar-navigation__item'
  18.     }) %}
  19.     {% set link_attr = layout_attr_defaults(link_attr, {
  20.         '~class': 'topbar-navigation__link'
  21.     }) %}
  22.      <div class="topbar-navigation-wrap">
  23.         {{ block('menu_widget') }}
  24.     </div>
  25. {% endblock %}
  26. {% block _top_nav_menu_container_widget %}
  27.     {% set attr = layout_attr_defaults(attr, {
  28.         '~class': " pull-right"
  29.     }) %}
  30.     <div {{ block('block_attributes') }}>
  31.         {{ block_widget(block) }}
  32.     </div>
  33. {% endblock %}
  34. ​​

but we get content of block with : 

​​

  1.  
  2.                         item: '=data["menu"].getMenu("commerce_top_nav")'
  3. ​​

what's this easy here we use the menu data provider with alias 'menu' and we have called the function
getMenu() , if you go to services,yml you can find the declaration of service :
  1.  
  2.     oro_commerce_menu.data_provider.menu:
  3.         class: 'Oro\Bundle\CommerceMenuBundle\Layout\DataProvider\MenuProvider'
  4.         arguments:
  5.           - '@oro_menu.builder_chain'
  6.         tags:
  7.             - { name: layout.data_provider, alias: menu }
  8. ​​

the content of class is :

  1.  
  2. <?php
  3. namespace Oro\Bundle\CommerceMenuBundle\Layout\DataProvider;
  4. use Knp\Menu\ItemInterface;
  5. use Knp\Menu\Provider\MenuProviderInterface;
  6. class MenuProvider
  7. {
  8.     /** @var MenuProviderInterface */
  9.     private $provider;
  10.     /**
  11.      * @param MenuProviderInterface $provider
  12.      */
  13.     public function __construct(MenuProviderInterface $provider)
  14.     {
  15.         $this->provider = $provider;
  16.     }
  17.     /**
  18.      * Retrieves item in the menu, eventually using the menu provider.
  19.      *
  20.      * @param string $menuName
  21.      * @param array  $options
  22.      *
  23.      * @return ItemInterface
  24.      */
  25.     public function getMenu($menuName, array $options = ['check_access' => false])
  26.     {
  27.         return $this->provider->get($menuName, $options);
  28.     }
  29. }
  30. ​​

but what's 'commerce_top_nav' ? Easy :

1 - the menu name you can find inside vendor/oro/customer-portal/src/Oro/Bundle/CommerceMenuBundle/Resources/config/oro/navigation.yml
the tree is :

  1.  
  2.             commerce_top_nav:
  3.                 type: commerce_top_nav
  4.                 scope_type: menu_frontend_visibility
  5.                 children:
  6.                     telephone: ~
  7.                     free_shipping: ~
  8. ​​


and content is :

  1.  
  2.             telephone:
  3.                 label: 'oro.commercemenu.frontend.navigation.items.telephone.label'
  4.                 extras:
  5.                     position: 10
  6.             free_shipping:
  7.                 label: 'oro.commercemenu.frontend.navigation.items.free_shipping.label'
  8.                 uri: '/about'
  9.                 attributes:
  10.                     class: topbar__controls
  11.                 linkAttributes:
  12.                     class: cart__promo__link
  13.                 extras:
  14.                     position: 20
  15. ​​

2 - For edit manually you can go to admin System -> Frontend Menu -> click on the link  commerce_top_nav 

i think that is great ….

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.