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.

Viewport Manager 

Viewport manager contains a collection of available screen types that can be used on the theme. It is also responsible for triggering event viewport:change through the mediator, when the type of the screen changes. You can subscribe to the event viewport:change in the view and create a logic based on the viewport changes (for example, DOM Relocation View). You can also subscribe to a specific event viewport:desktop, viewport:tablet or any other registered media type in scss. Viewport manager has several public methods:

  • isApplicable(mediaTypes): the method accepts a string or an array of strings of media types as arguments.
    • For example:

      • viewportManager.isApplicable('tablet')

      • viewportManager.isApplicable('tablet', 'tablet-small')

      • viewportManager.isApplicable(['tablet', 'tablet-small'])

  • getBreakpoints(context): returns an object with all registered breakpoints from css property --breakpoints. You can pass the context of the document as an argument.

  • getMediaType(mediaType): returns MediaQueryList by mediaType argument.

Screen Map 

By default these settings for list of screen types synchronized with scss breakpoints.

// Desktop Media Breakpoint
$breakpoint-desktop: 1100px;

// iPad mini 4 (768*1024), iPad Air 2 (768*1024), iPad Pro (1024*1366)
$breakpoint-tablet: $breakpoint-desktop - 1px;
$breakpoint-tablet-small: 992px;

// iPhone 6s (375*667), iPhone 6s Plus (414*763)
$breakpoint-mobile-big: 767px;
$breakpoint-mobile-landscape: 640px;
$breakpoint-mobile: 414px;

$oro-breakpoints: (
    'desktop': '(min-width: ' + $breakpoint-desktop + ')',
    'tablet': '(max-width: ' +  $breakpoint-tablet + ')',
    'strict-tablet': '(max-width: ' +  $breakpoint-tablet + ') and (min-width: ' + ($breakpoint-tablet-small + 1) + ')',
    'tablet-small': '(max-width: ' +  $breakpoint-tablet-small + ')',
    'strict-tablet-small': '(max-width: ' +  $breakpoint-tablet-small + ') and (min-width: ' + ($breakpoint-mobile-landscape + 1) + ')',
    'mobile-landscape': 'screen and (max-width: ' +  $breakpoint-mobile-landscape + ')',
    'strict-mobile-landscape': '(max-width: ' +  $breakpoint-mobile-landscape + ') and (min-width: ' + ($breakpoint-mobile + 1) + ')',
    'mobile': '(max-width: ' + $breakpoint-mobile + ')',
    'mobile-big': '(max-width: ' +  $breakpoint-mobile-big + ')',
);

Default scss breakpoints are converted to the following object:

mediaTypes: {
    'desktop': '(min-width: 1100px)',
    'tablet': '(max-width: 1099px)',
    'strict-tablet': '(max-width: 1099px) and (min-width: 993px)',
    'tablet-small': '(max-width: 992px)',
    'strict-tablet-small': '(max-width: 992px) and (min-width: 641px)',
    'mobile-big': '(max-width: 767px)',
    'strict-mobile-big': '(max-width: 767px) and (min-width: 641px)',
    'mobile-landscape': '(max-width: 640px)',
    'strict-mobile-landscape': '(max-width: 640px) and (min-width: 415px)',
    'mobile': '(max-width: 414px)'
}

You can override these breakpoints via scss variables.

Media Types 

A media type is used to describe a named media query;

For example:

{
    'screen-type': '(max-width: 1024px)'
}

Events 

viewport:change 

Event: MediaQueryListEvent

Media Query of the changed media type. Additionally contains a mediaType field with the name of the media type.