Using a responsive theme allows you to build a single theme that has the same look and feel through all devices and will also generate more traffic and slower loads on devices with a smaller viewport if you don't want to show the same information to them. With dynamic serving, you can assign a custom theme with your own layout configuration based on the User-Agent string that is sent by the client browser. This allows you to show only the content that is relevant to that user's device; this can be useful for images shown on the home page and also with the way you display your product details.
In order to use dynamic serving, you must first know what devices you want to show a different layout for.
In this recipe, we will see how to create a new theme that depends on the theme created in the Creating a new theme recipe of this chapter. Remove the desktop definition CSS and show this theme to users of the iPhone only.
- Create the theme definition file:
app/design/frontend/Genmato/mobile/theme.xml<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>M2 Cookbook Sample Mobile Theme</title> <parent>Genmato/default</parent> <media> <preview_image>media/preview.png</preview_image> </media> </theme> - Create
preview.pngfor how your theme will look. (This file needs to be present but you can start with a blank file and replace this later when your theme is done.) Place this preview image underapp/design/frontend/Genmato/mobile/media/. - To install the theme through Composer, we need to create a
composer.jsonfile:app/design/frontend/Genmato/mobile/composer.json{ "name": "genmato/mobile-theme", "description": "Genmato Sample Mobile Theme", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "genmato/default-theme": "1.0.*", "magento/framework": "100.0.*" }, "type": "magento2-theme", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } } - In order to register the theme when loaded through Composer, it needs
registration.php:app/design/frontend/Genmato/mobile/registration.php<?php MagentoFrameworkComponentComponentRegistrar::register( MagentoFrameworkComponentComponentRegistrar::THEME, 'frontend/Genmato/mobile, __DIR__ );
- Create a static file directory structure in your theme:
app/design/frontend/Genmato/mobileweb/ web/css/source/ web/fonts/ web/images/ web/js/
- Remove the desktop CSS file as specified by the parent blank theme:
app/design/frontend/Genmato/mobile/Magento_Theme/layout/default_head_blocks.xml<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <remove src="css/styles-l.css"/> </head> </page> - Add a custom static block to the mobile home page:
app/design/frontend/Genmato/mobile/Magento_Cms/layout/cms_index_index.xml<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="MagentoCmsBlockBlock" name="homepage-content"> <arguments> <argument name="block_id" xsi:type="string">sample-homepage</argument> </arguments> </block> </referenceContainer> </body> </page> - After uploading the files to your Magento installation, refresh the cache to load the new theme:
bin/magento cache:clean
- In the Magento backend, navigate to the store theme configuration:
Stores | Configuration | [General] Design.
Here, we can create the design exception based on the user agent that is sent by the browser:
- After saving the configuration, the cache must be refreshed again:
bin/magento cache:clean
- Now, the theme shown should be different when the website is accessed through an iPhone and normal browser on your desktop.
During the page load process, the theme for the request is selected. When a User-Agent exception is found, the MagentoFrameworkViewDesignExceptions class' getThemeByRequest method will check whether it matches the User-Agent sent by the client. If there is a match found, the theme specified will be used; otherwise, the default theme will be used.
The mobile theme used in this recipe only has a small number of changes; you can further optimize your theme by optimizing every page and removing components that aren't necessary to be displayed on the device that the theme is designed for.