siment/module-http-header-theme-switch

Magento 2 module that enables automatic theme switching based on the X-UA-Device HTTP header. (Or any other header)

siment/module-http-header-theme-switch

Build status

, _(*1)

Magento 2 module that enables automatic theme switching based on X-UA-Device header. (Or any other header), _(*2)

What does this module do?

This module makes sure that Magento's design exceptions logic checks the value of the header "X-UA-Device" in addition to "User-Agent" when determining what theme it should use. You can also configure it to listen to other headers than the pre-configured "X-UA-Device" header., _(*3)

Why this module?

Short version

Because many web proxies, like Varnish, suggest to use the "X-UA-Device" header for device detection and Magento should respect it., _(*4)

Longer version

Magento 2 allows for theme switching based on design exceptions which enables "you to specify an alternative theme for particular user-agents"., _(*5)

There are hundreds of user agents out there now and it makes it challenging to correctly identify which agents are coming from mobile, tablet and desktop devices., _(*6)

There are great libraries for making detection easier - like the generic mobiledetect/mobiledetectlib and the excellent Magento module eadesignro/module-mobiledetect. Those modules will not work out of the box if you have a web proxy like Varnish installed., _(*7)

That is why I wanted to use the Varnish Mobile Detect module which sends the "X-UA-Device" header from Varnish for device detection rather than tampering with the "User-Agent" header., _(*8)

How to install

In Magento root:, _(*9)

$ composer require siment/module-http-header-theme-switch:"~1.0"
$ php bin/magento module:enable Siment_HttpHeaderThemeSwitch
$ php bin/magento cache:clean

Configuration

In Magento admin:, _(*10)

Stores -> (Settings) Configuration -> General -> Design -> HTTP Header Theme Switch -> HTTP Header:, _(*11)

HTTP header which will be matched for theme exceptions in addition to the standard header "User-Agent". Standard value is "HTTP_X_UA_DEVICE", _(*12)

You define the matching rules under Content -> (Design) Configuration -> (Select a theme) Edit -> User Agent Rules, _(*13)

How to test

Make sure the Composer dependencies have been installed and that the "post-install-cmd" scripts have executed., _(*14)

In module directory:, _(*15)

$ composer install
$ composer run-script post-install-cmd          # May not be necessary
$ vendor/bin/phpunit                            # For unit tests
$ vendor/bin/phpcs                              # For code sniffs
$ vendor/bin/phpmd src/,Test/ text phpmd.xml    # For mess detector

How to contribute

Create an issue or a pull request., _(*16)

Changelog

See CHANGELOG.md, _(*17)

License

• Licensed under Academic Free License ("AFL") v. 3.0
• See LICENSE.txt or https://opensource.org/licenses/afl-3.0