Magento Allow Customers to Switch Between Mobile and Desktop Themes

Aug 23, 2016 · 3 minute read
Category: Magento

In this post I’ll cover how to create a basic theme switcher for switching between mobile and desktop themes in Magento.

The basic steps for the theme switcher are as follows:

Customer clicks ‘switch to desktop site’ link
Cookie is set saying the user has requested the desktop theme
The cookie is detected and the correct user agent is set in index.php.

By using a cookie we can make the selection persistent so customers don’t need to click this link each time they visit the site.

Switcher Block and Template

First we want to create our switcher block and template.

NameSpace/ModuleName/Block/Switcher.php

class NameSpace_ModuleName_Block_Switcher
    extends Mage_Core_Block_Template
{
    public function setSwitchToTheme($switchToTheme)
    {
        $this->setData('switch_to_theme', $switchToTheme);
    }

    public function getSwitchToTheme()
    {
        return $this->getData('switch_to_theme');
    }
}

app/design/frontend/base/default/template/your/folder/structure/switcher.phtml

<a id="theme_switcher" href="<?php echo Mage::helper('core/url')->getCurrentUrl() ?>">
    switch to <?php echo $this->getSwitchToTheme() ?> site
</a>
<?php
    $viewDesktopTheme = $this->getSwitchToTheme() === 'desktop' ? 'true' : 'false';
    $maxAge = '157680000';  // 157680000 secs = 5 years (but set this to whatever you want)
?>
<script type="text/javascript">
    $('theme_switcher').observe('click', function (e) {
        document.cookie = 'view_desktop_theme=<?php echo $viewDesktopTheme ?>; max-age=<?php echo $maxAge ?>';
    });
</script>

By using the setter provided by our block within our layout.xml (we’ll see this later) we can use the same block and template for both our mobile and desktop themes.

Add Block to Page

Next we want to add our switcher block to both our mobile and desktop themes.

app/design/frontend/your/desktop/theme/layout/mobile_to_desktop_switcher.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="where_you_want_the_switcher_to_go">
            <block name="mobile_to_desktop_switcher" type="namespace_modulename/switcher" template="your/folder/structure/switcher.phtml">
                <action method="setSwitchToTheme">
                    <switch_to_theme>mobile</switch_to_theme>
                </action>
            </block>
        </reference>
    </default>
</layout>

app/design/frontend/your/mobile/theme/layout/mobile_to_desktop_switcher.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="where_you_want_the_switcher_to_go">
            <block name="mobile_to_desktop_switcher" type="namespace_modulename/switcher" template="your/folder/structure/switcher.phtml">
                <action method="setSwitchToTheme">
                    <switch_to_theme>desktop</switch_to_theme>
                </action>
            </block>
        </reference>
    </default>
</layout>

This is where we make use of our blocks setter. By placing a layout.xml in each theme we can tell the block which theme we should switch to. In the desktop theme we pass ‘mobile’, in the mobile theme we pass ‘desktop’.

You can then add the switcher to your theme using:

<?php echo $this->getBlockHtml('mobile_to_desktop_switcher') ?>

Add Switch to index.php

Finally we need to add code to index.php which checks for our cookie and sets the current user agent based on this.

/* Show theme based on view_desktop_theme cookie */
if (isset($_COOKIE['view_desktop_theme'])) {
    if ($_COOKIE['view_desktop_theme'] === 'true') {
        $_SERVER['HTTP_USER_AGENT']
            = 'Mozilla/5.0 (X11; Fedora; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36';
    }
    else if ($_COOKIE['view_desktop_theme'] === 'false') {
        $_SERVER['HTTP_USER_AGENT']
            = 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1';
    }
}

And that’s it, now when your customers click the link they should be toggled between the mobile and desktop themes.