How To Guides
Client Dimensions
Client Dimensions is a module built into Miva that gives a developer access to the screen size of the device the customer is using to access your website. These dimensions are available both in JavaScript (as cookies) and in the Miva Template Language (SMT).
How It Works
Client Dimension works by outputting some JavaScript in the head tag on the page to detect the screen size. Once it gets this data it sets cookies to save the screen size and refreshes the page on the very first page load. All this happens in very quickly and most times should be completely transparent to the customer. Because the code does the refresh is the head tag, you should rarely notice it.
There are two cookies that get set:
There is also logic checking the if the screen dimensions change, typically if a device is rotated. If they are changed, the cookies get updated to reflect this change.
Once the cookies are set and the code runs, you will have access to the following variables in the page templates:
&mvte:clientdimensions:class;
&mvte:clientdimensions:detected;
&mvte:clientdimensions:height;
&mvte:clientdimensions:orientation;
&mvte:clientdimensions:width;
This allows you to create server side responsive designs, also called Adaptive Design. It allows you to limit the code that gets sent from the browser based on the screen size. Possible uses include sending a smaller image size to a mobile device to improve page load times or changing the content that gets output on mobile/tablet vs desktop so less HTML is sent to the browser. Both cases give you granular control over the output primarily to improve page speed on mobile devices.
Installation Instructions
In order to use Client Dimensions you first need to create the item for it. Go to User Interface then Items tab and click the plus sign to add an item.
Create Item
The code should be: clientdimensions
Module should be: cmp-mv-clientdimensions
Assign To Pages
Next you need to assign the item to the pages you want to use it on. Most of the time it will only be the following 3 pages: SFNT, CTGY, PROD
However, there may be other pages you want to use it on such as checkout. You should assign it to as many pages you will need it on. If you use its variables in the global header, you will need to assign it to all pages.
Add Item Tag to Head
You will want to place the following item in your Head tag.
This item outputs a block of JavaScript to the page. This template is editable, and customizable under User Interface, Settings
You’ll notice the above code has some existing logic to set the class. The dimensions here can be customized to your specific needs, however this allows you to give elements on your site a dynamic class:
You can then add some styles in your stylesheet to style/position elements based on their screen size.