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

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();

        }
   ?>
  • Thanks for responding, But is there any to implement in layout ? – TBS Mage Aug 8 '18 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 – Aasim Goriya Aug 8 '18 at 13:13
  • Will try this and let you know !! – TBS Mage Aug 8 '18 at 13:21
  • Have you tried this ? – Aasim Goriya Aug 17 '18 at 11:19
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
    }
}
  • 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 Aug 8 '18 at 13:14
  • Any ideas for above comment ?! – TBS Mage Aug 8 '18 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 Aug 8 '18 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 Aug 8 '18 at 13:22
  • Hahah Correct One. – TBS Mage Aug 8 '18 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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