Important

You are browsing documentation for version 5.0 of OroCommerce. Support of this version ended in January 2025. Read the documentation for version 6.1 (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. It is possible to subscribe to event viewport:change in view and create a logic based on the viewport changes (for example, DOM Relocation View).

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 4s (320*480), iPhone 5s (320*568), iPhone 6s (375*667), iPhone 6s Plus (414*763)
$breakpoint-mobile-big: 767px;
$breakpoint-mobile-landscape: 640px;
$breakpoint-mobile: 414px;
$breakpoint-mobile-small: 360px;

$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 array:

screenMap: [
    {
        name: 'desktop',
        min: 1100
    },
    {
        name: 'tablet',
        max: 1099
    },
    {
        name: 'strict-tablet',
        max: 1099,
        min: 993
    },
    {
        name: 'tablet-small',
        max: 992
    },
    {
        name: 'strict-tablet-small',
        max: 992,
        min: 641
    },
    {
        name: 'mobile-big',
        max: 767
    },
    {
        name: 'strict-mobile-big',
        max: 767,
        min: 641,
    },
    {
        name: 'mobile-landscape',
        max: 640
    },
    {
        name: 'strict-mobile-landscape',
        max: 640,
        min: 415
    },
    {
        name: 'mobile',
        max: 414
    },
    {
        name: 'mobile-small',
        max: 360
    }
]

You can override these breakpoints via scss variables.

Overriding via js Module Config for a Theme

This config has the highest priority:

{% import '@OroAsset/Asset.html.twig' as Asset %}
{{ Asset.js_modules_config({
        'oroui/js/viewport-manager': {
            screenMap: [
                {
                    name: 'tablet',
                    max: 640
                },
                {
                    name: 'desktop',
                    max: 1260
                },
                {
                    name: 'desktop-hd',
                    max: 1920
                }
            ]
        }
}); }}

To delete an inherited screen type, set skip: true for a specific screen name:

{% import '@OroAsset/Asset.html.twig' as Asset %}
{{ Asset.js_modules_config({
        'oroui/js/viewport-manager': {
            screenMap: [
                {
                    name: 'tablet',
                    skip: true
                },
                {
                    name: 'desktop',
                    max: 1260
                }
            ]
        }
    }
}); }}

Screen Types

A screen type is used to describe a viewport size range; it provides an opportunity to describe the parameters like name, max size of the screen type.

For example:

{
    name: 'screen-type',
    max: 1024
}

name

Type: String

Set name for screen type.

max

Type: Number

Set max viewport size for screen type

min

Type: Number

Set min viewport size for screen type

Events

viewport:change

Event Data: Object

Data Structure:

• type: Object

Current viewport screen type.

• width: Number

Current viewport width.