Oro Documentation
Oro Documentation
  • USERS
  • DEVELOPERS
    • Backend Developer Guide
    • Frontend Developer Guide
    • Bundles & Components
    • Web Services API Guide
    • Community Guide
  • CLOUD
  • BLOG
  • ACADEMY
  • Home >
  • Oro Bundles and Components >
  • OroCommerceMenuBundle >
  • Menu Templates
  • Oro Bundles and Components
    • Components
      • Configuration Merger
      • Cumulative Resources
      • System Aware Resolver
      • Resources Loader Factory
    • ActionBundle
    • ActivityBundle
      • Commands
    • ActivityListBundle
    • AddressBundle
    • ApiBundle
    • AssetBundle
      • Commands
    • AttachmentBundle
      • OroAttachmentBundle Configuration
      • Displaying Pictures
      • Generating Image and File URLs
      • Image Placeholder Configuration
    • BatchBundle
    • CacheBundle
    • CalendarBundle
      • Calendar Provider
      • Calendar Context Menu
      • System Calendars
      • Workflow Action
      • Recurring Events
      • UID (Unique Calendar Identifier)
      • Calendar Event Ownership
      • Attendees
    • ChartBundle
    • CookieConsentBundle
    • CommentBundle
    • ConfigBundle
    • CronBundle
    • CurrencyBundle
      • Multi Currency Cell Content Editor
    • DashboardBundle
    • DataAuditBundle
    • DataGridBundle
      • Default Editors
    • DistributionBundle
    • DigitalAssetBundle
    • ElasticSearchBundle
      • Index Agent and Search Engine
      • ElasticSearch Indexes Backup
      • ElasticSearch Configuration
      • Request Builders
      • Troubleshooting
      • Upgrade Website Index to Elasticsearch >=8.4, <9.0
    • EmailBundle
      • Transports
      • Events
      • Emails
      • Email Templates
      • Email Templates Migrations
      • System Mailboxes
      • Email Ownership
      • Sending Emails in Workflows and Actions (Operations)
      • Recipients Autocompletion
      • Public and Private Emails
      • Commands
    • EmbeddedFormBundle
    • EntityBundle
      • EntityModel
      • EntitySelectSearchApiAccessor ⇐ SearchApiAccessor
      • EntityStructureDataProvider
    • EntityConfigBundle
    • EntityExtendBundle
    • EntityMergeBundle
    • EntityPaginationBundle
    • EntitySerializedFieldsBundle
    • FeatureToggleBundle
    • FilterBundle
      • Filter Form Types
      • Grid Extension
    • FormBundle
      • Form Components Overview
      • Update Handler
      • Entity Create or Select Form Type
      • Rich Text Form Type
      • Autocomplete Form Type
      • Text Autocomplete Form Type
      • UI DataBlock Config Overview
      • Expression Editor
      • Client Side Validation
      • InlineEditableViewComponent
      • Index of Supported Editors
        • AbstractRelationEditorView
        • TextEditorView
        • NumberEditorView
        • PercentEditorView
        • DateEditorView
        • DatetimeEditorView
        • SelectEditorView
        • MultiSelectEditorView
        • MultiCheckboxEditorView
        • MultiRelationEditorView
        • RelatedIdRelationEditorView
        • RelatedIdSelectEditorView
      • Search APIs
    • GaufretteBundle
    • GridFSConfigBundle
    • ImapBundle
      • Usage Example
      • Synchronization with IMAP Servers
      • OAuth Providers for Mailboxes
      • User Email Origin Transport
    • ImportExportBundle
      • Commands
    • InstallerBundle
      • Commands
    • IntegrationBundle
    • LayoutBundle
      • Layout Cache
    • LocaleBundle
      • Locale Settings
      • Number Formatting
      • Date and Datetime Formatting
      • Name Formatting
      • Address Formatting
      • Localization
      • Managing Localizations
      • Current Localization
      • Localized Values
      • CLI Commands (LocaleBundle)
    • LoggerBundle
    • MessageQueueBundle
      • Commands
    • MigrationBundle
      • Commands
    • MicrosoftSyncBundle
    • NavigationBundle
      • Menu Updates
      • Commands
    • NoteBundle
    • NotificationBundle
    • OAuth2ServerBundle
    • OrganizationBundle
    • PlatformBundle
      • Commands
    • QueryDesignerBundle
      • Query Designer Configuration
      • Condition Builder Component
    • RedisConfigBundle
      • Configure Redis Servers
      • Configure Application to Use Redis
    • ReportBundle
    • ScopeBundle
    • SearchBundle
      • ORM Search Engine
      • Search Relevance Weight
      • DateTimeFormatter
    • SecurityBundle
    • SegmentBundle
    • SidebarBundle
    • SyncBundle
      • Configuration
      • Client
      • Topics and Handlers
      • Authentication
      • Content Outdating
      • Origin Checking
      • Mediator Handlers
    • TagBundle
      • TagsEditorView
      • TagsView
    • TestFrameworkBundle
      • Additional Doctrine Events
    • ThemeBundle
    • TranslationBundle
      • Commands
    • TwigInspectorBundle
    • UIBundle
      • Action Manager
      • Client Side Navigation
      • Content Providers
      • Dynamic Assets
      • Formatters
      • Scroll Data Customization
      • TWIG Placeholders
      • TWIG Filters
      • Widgets
      • ApiAccessor
      • BaseClass
      • HiddenInitializationView ⇐ BaseView
      • Layout Subtree View
      • LoadMoreCollection
      • Loading Mask View
      • MultiUseResourceManager ⇐ BaseClass
      • PersistentStorage
      • Highlight Text View
      • RouteModel
      • RoutingCollection
      • SearchApiAccessor
      • Viewport Manager
      • Error Handler
      • Input Widgets
      • Items Manager
      • Mediator Handlers
    • WindowsBundle
    • WorkflowBundle
      • Commands
    • DraftBundle
      • How to Use Drafts
      • How to Use Draft ACL
      • How to Use the Draft Filter
      • How to Resolve Draft Conflicts
      • How to Use a Draft Extension
    • CatalogBundle
    • CheckoutBundle
    • CMSBundle
      • Content Widgets
      • WYSIWYG Field
        • How to Add WYSIWYG Field
        • How to Display a WYSIWYG Field
        • How to Change Textarea Field to WYSIWYG Field
        • WYSIWYG Field Validation
      • Content Blocks
      • Create Editor Components
    • ConsentBundle
      • Add the Customer Consents Field to a Form (Example)
      • Add the Agreements Step to a Custom Checkout Based on the Default Checkout Workflow (Example)
      • Add the Agreements Section to a Custom Checkout Based on the Single Page Checkout Workflow (Example)
    • CommerceMenuBundle
      • Main Navigation Menu
      • Menu Updates
      • Menu Templates
      • Content Node Menu Items
      • Category Menu Items
    • CustomerBundle
    • FrontendBundle
      • Frontend Sessions and Debug Routes
      • Frontend Access
      • Set Up Mass Action in Datagrid
      • Sticky Panel View
      • Dom Relocation Global View
    • InventoryBundle
    • OrderBundle
      • Previously Purchased Products
    • PayPalBundle
    • PromotionBundle
    • PricingBundle
      • Configure Price List Sharding
      • Optimize Website Indexation and Price Recalculation
      • Combined Price List
      • Price Storage
      • Pricing Strategy
      • Commands
    • ProductBundle
      • Product Actions
      • Product Attributes
      • Product Unit Formatting
      • Product Variant Search
      • Related Items
      • Externally Stored Product Images
      • Product Customization Using Layouts
        • Customize Product View Page
        • Customize Product List Page
        • Customize Product Lists
        • Customize Products SKU Validation
    • RedirectBundle
    • SellerDashboardBundle
    • SEOBundle
      • Sitemap
      • SEO Meta Fields
    • TaxBundle
    • WebCatalogBundle
    • WebsiteElasticSearchBundle
      • Website ElasticSearch Search Engine
      • Website ElasticSearch Configuration
      • Attributes Boost
      • Request Builders
      • Upgrade Website Index to Elasticsearch >=8.4, <9.0
      • Search Synonym Management
    • WebsiteSearchBundle
      • Website Search VS Regular Search
      • Website Search Configuration
      • Search Index Structure
      • Console Commands
      • Perform Search
      • Indexation Process
      • Reindexation During Platform Update
      • ORM Search Engine
      • Search Relevance Weight
      • Testing
    • ActivityContactBundle
    • AnalyticsBundle
    • ChannelBundle
    • SalesBundle
    • ApruveBundle
    • AuthorizeNetBundle
    • DotmailerBundle
    • DPDBundle
    • GoogleTagManagerBundle
    • InfinitePayBundle
    • MailchimpBundle
    • MakerBundle
    • PaypalExpressBundle
    • StripeBundle
    • CustomerRecommendationBundle
  • Contents
    • Menu Item Renderer

Menu Templates

OroCommerceMenuBundle introduces the ability to render menu items using different menu templates. Menu templates allow to customize the way menu item is displayed in the storefront. Menu template represents a set of layout updates specific for each menu template defined by a frontend theme developer.

Note

The name of the menu template used for each storefront menu item is specified under the extra option Oro\Bundle\CommerceMenuBundle\Entity\MenuUpdate::MENU_TEMPLATE that is set automatically based on the related menu updates.

Available menu templates are collected from theme.yml configuration files across all themes and can be accessed by a developer using the Oro\Bundle\CommerceMenuBundle\Provider\MenuTemplatesProvider provider. The configuration structure is illustrated below:

Resources/views/layouts/default/theme.yml
 config:
     menu_templates:
         custom_flat:
             label: 'Custom Flat' # Label to use in Menu Template dropdown in the menu item form on the menu management page.
         custom_tree:
             label: 'Custom Tree'
             template: 'custom_tree_1' # Optional setting that specifies the directory where the menu template layout updates are located. Fallbacks to menu template key if not set, i.e. "custom_tree".

Although a Menu Template can be specified for each storefront menu item, out-of-the-box only top-level items of the main navigation menu, as the most demanded, make use of menu templates. Usually storefront theme developers judge whether they require menu templates in other menus.

Menu Item Renderer

The rendering mechanism of menu items according to their menu templates consists of the following parts:

  1. TWIG function oro_commercemenu_render_menu_item that expects menu item object (\Knp\Menu\ItemInterface) and returns rendered HTML code.
  2. Renderer Oro\Bundle\CommerceMenuBundle\Layout\MenuItemRenderer that makes use of layouts mechanism.

Oro\Bundle\CommerceMenuBundle\Layout\MenuItemRenderer takes the layout updates found under the Resources/views/layouts/%THEME%/menu_template/ and Resources/views/layouts/%THEME%/menu_template/%MENU_TEMPLATE_NAME%/ directories and renders them in a separate layout context. Additionally to the common data, the menu item layout context contains the following:

  1. Context variable menu_template - the name of the menu template being used for rendering a menu item. Can be accessed in the layout update via =context[“menu_template”] expression.
  2. Context variable menu_item_name - the name of the menu item being rendered. Can be accessed in the layout update via =context[“menu_item_name”] expression.
  3. Context data variable menu_item - the menu item object (\Knp\Menu\ItemInterface) being rendered. Can be accessed in the layout update via =data[“menu_item”] expression.

Note

Having a separate layout context while rendering a menu item means that the rendering process is isolated - its layout updates are not affected by layout updates from the page layout context.

Note

Use Symfony Profiler to get suggestions on where to place layout updates and get information about rendering process.

Oro Documentation
  • Oro inc
  • OroCommerce
  • OroMarketplace
  • OroCRM
  • OroPlatform
  • Partners
  • Services
  • Events
  • Twitter
  • Terms & conditions
  • Privacy policy
  • Contributor license agreement

@2021 Oro, Inc. All Rights Reserved.

Back to top