24/7 Support: 800.608.6482

How To Guides

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:

Screen Dimensions

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

Screen Dimensions

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

Screen Dimensions

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.

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept

Copyright © 1997 – 2024 Miva®, Miva Merchant®, MivaPay®, MivaCon®, Camp Miva®, Miva Connect®, Miva, Inc. All Rights Reserved.