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.
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>
preview.png
for 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 under app/design/frontend/Genmato/mobile/media/
.composer.json
file: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" ] } }
registration.php
:app/design/frontend/Genmato/mobile/registration.php
<?php MagentoFrameworkComponentComponentRegistrar::register( MagentoFrameworkComponentComponentRegistrar::THEME, 'frontend/Genmato/mobile, __DIR__ );
app/design/frontend/Genmato/mobile
web/ web/css/source/ web/fonts/ web/images/ web/js/
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>
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>
bin/magento cache:clean
Stores | Configuration | [General] Design.
Here, we can create the design exception based on the user agent that is sent by the browser:
bin/magento cache:clean
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.
18.219.228.88