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 :
layout: actions: - '@setBlockTheme': themes: 'top_nav.html.twig' - '@addTree': items: top_nav_container: blockType: container siblingId: ~ prepend: true top_nav_menu_container: blockType: container top_nav: blockType: menu options: item: '=data["menu"].getMenu("commerce_top_nav")' allow_safe_labels: true tree: page_header: top_nav_container: top_nav_menu_container: 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 :
{% block _top_nav_container_widget %} {% set attr = layout_attr_defaults(attr, { '~class': " topbar" }) %} <div {{ block('block_attributes') }}> <div class="container-fluid"> {{ block_widget(block) }} </div> </div> {% endblock %} {% block _top_nav_widget %} {% set attr = layout_attr_defaults(attr, { '~class': " topbar-navigation" }) %} {% set child_attr = layout_attr_defaults(child_attr, { '~class': ' topbar-navigation__item' }) %} {% set link_attr = layout_attr_defaults(link_attr, { '~class': 'topbar-navigation__link' }) %} <div class="topbar-navigation-wrap"> {{ block('menu_widget') }} </div> {% endblock %} {% block _top_nav_menu_container_widget %} {% set attr = layout_attr_defaults(attr, { '~class': " pull-right" }) %} <div {{ block('block_attributes') }}> {{ block_widget(block) }} </div> {% endblock %}
but we get content of block with :
item: '=data["menu"].getMenu("commerce_top_nav")'
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 :
oro_commerce_menu.data_provider.menu: class: 'Oro\Bundle\CommerceMenuBundle\Layout\DataProvider\MenuProvider' arguments: - '@oro_menu.builder_chain' tags: - { name: layout.data_provider, alias: menu }
the content of class is :
<?php namespace Oro\Bundle\CommerceMenuBundle\Layout\DataProvider; use Knp\Menu\ItemInterface; use Knp\Menu\Provider\MenuProviderInterface; class MenuProvider { /** @var MenuProviderInterface */ private $provider; /** * @param MenuProviderInterface $provider */ public function __construct(MenuProviderInterface $provider) { $this->provider = $provider; } /** * Retrieves item in the menu, eventually using the menu provider. * * @param string $menuName * @param array $options * * @return ItemInterface */ { return $this->provider->get($menuName, $options); } }
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 :
commerce_top_nav: type: commerce_top_nav scope_type: menu_frontend_visibility children: telephone: ~ free_shipping: ~
and content is :
telephone: label: 'oro.commercemenu.frontend.navigation.items.telephone.label' extras: position: 10 free_shipping: label: 'oro.commercemenu.frontend.navigation.items.free_shipping.label' uri: '/about' attributes: class: topbar__controls linkAttributes: class: cart__promo__link extras: position: 20
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