Important

You are browsing upcoming documentation for version 6.1 of OroCommerce, scheduled for release in 2025. Read the documentation for version 6.0 (the latest LTS version) to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Highlight Text View 

Highlight Text View is used to highlight text in view element.

Example: highlight query string in search results.

Initialization 

Initialize in twig:

//example from System Configuration page content
<div data-page-component-view="{{ {
    view: 'oroui/js/app/views/highlight-text-view',
    highlightSwitcherContainer: 'div.system-configuration-content-header',
    highlightStateStorageKey: 'show-all-configuration-items-on-search',
    highlightSelectors: [
        'div.system-configuration-content-title',
        'h5.user-fieldset span',
        'div.control-label label',
        'i.tooltip-icon'
    ],
    toggleSelectors: {
        'div.control-group': 'div.control-group-wrapper',
        'fieldset.form-horizontal': 'div.system-configuration-content-inner'
    },
    viewGroup: 'configuration'
}|json_encode }}">
    {{ _self.renderTabContent(data.form, data.content) }}
</div>

Initialize in JavaScript:

//example from "oroui/js/app/views/jstree/base-tree-view"
this.subview('highlight', new HighlightTextView({
    el: this.el,
    viewGroup: 'configuration',
    highlightSelectors: ['.jstree-search']
}));

Options 

  • text:string - text to highlight

  • viewGroup:string - used as mediator event prefix

  • highlightSwitcherContainer:string - a class or attribute in which will render template of highlight switcher

  • highlightStateStorageKey:string - localStorage key which will contain state of visibility for not found/highlighted elements

  • highlightClass:string - class used for text highlight

  • notFoundClass:string - class used for mark content without highlighted elements

  • foundClass:string - class used for mark content with highlighted elements

  • highlightSelectors:array - array of selectors that used to find elements to highlight

  • toggleSelectors:object - array of selectors that used to find elements to mark as found or not found