2

Is there any way by which I can include block or .phtml in my theme layout?

For e.g. I've a .phtml that I only want to include when site is visited in Mobile devices.

How to achieve this?

Any help would be appreciated.

2 Answers 2

1

Mobile detect is not possible from Layout XML

You can call custom phtml file via Layout XML and from that custom.phtml you can use below code to show .phtml file only when user visit via Mobile

    <?php
        //Identifying if user is on mobile browser or not
        if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$_SERVER['HTTP_USER_AGENT'])||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($_SERVER['HTTP_USER_AGENT'],0,4))) {

           echo $this->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("Vendor_Module::your-template-file.phtml")->toHtml();

        }
   ?>
5
  • Thanks for responding, But is there any to implement in layout ?
    – TBS Mage
    Commented Aug 8, 2018 at 13:10
  • you can add custom.phtml file using layout and in your custom.phtml you can add my code, so it will show only in mobile device Commented Aug 8, 2018 at 13:13
  • Will try this and let you know !!
    – TBS Mage
    Commented Aug 8, 2018 at 13:21
  • Have you tried this ? Commented Aug 17, 2018 at 11:19
  • Does not reliably work because of Magento 2 caching
    – Cypher909
    Commented Nov 11, 2020 at 20:34
2

It is not possible to detect the device in layout XML.

I highly suggest you do not use user agent sniffing or try to detect a device ever, ever, ever. See https://css-tricks.com/browser-detection-is-bad/ for info on why. Your best bet is to use CSS and/or Javascript to achieve it, you should be detecting features and/or browser size to determine which functionality to show and not trying to detect the device.

For example if you need to only show a certain block on mobile then use CSS media queries. If you need to detect if the browser support a certain feature use Javascript:

if(window.sessionStorage) {
    // Browser supports session storage
} else {
    // Browser does not support session storage
}

If you need to make a change based on the browser width in CSS:

@media screen and (min-width: 768px) {
    .example {
        color: blue
    }
}
5
  • I did this but Customer respond me that if my PHTML is only for mobile than no need to request that file in Desktop !!! :(
    – TBS Mage
    Commented Aug 8, 2018 at 13:14
  • Any ideas for above comment ?!
    – TBS Mage
    Commented Aug 8, 2018 at 13:21
  • I would stand my ground a bit more, that isn't how front-end developments typically works - especially not in Magento. It's a very slippery slope to go down, you could end up spending all your time maintaining different files for different devices. Then one day Apple change how their user agents work and your back to square one.
    – Ben Crook
    Commented Aug 8, 2018 at 13:22
  • Do some research on why user agent sniffing is bad then have a discussion with the client - is my advice.
    – Ben Crook
    Commented Aug 8, 2018 at 13:22
  • Hahah Correct One.
    – TBS Mage
    Commented Aug 8, 2018 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.