Need help serving mobile version

Discussion in 'Subrion CMS Templates' started by olusambal, Dec 28, 2019.

  1. olusambal

    olusambal New Member

    I am trying to add different templates for mobile and desktop into my layout.tpl file. I have created the mobile.tpl and desktop.tpl file and have added the jQuery code to the head section of my layout.tpl file as follows:
    {ia_add_js}
    $( document ).ready(function() {
    var isMobile = false; //initiate as false
    // device detection
    if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|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.test(navigator.userAgent)
    || /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.test(navigator.userAgent.substr(0,4))) {
    isMobile = true;
    }
    });
    {/ia_add_js}

    My problem is how to include the mobile.tpl and desktop.tpl files in the body of my layout.tpl file.

    I tried this:
    {if $isMobile}
    {Include file = 'mobile.tpl'}
    {else}
    {Include file = 'desktop.tpl'}
    {/If}
    What is showing is only the desktop version whether or not am using a mobile device.

    Please help is needed. Thanks.
    Last edited: Dec 28, 2019
  2. Vasily_B.

    Vasily_B. Project Manager

    Hi,

    It won't work this way as jquery is used in ready compiled Smarty files. It cannot affect tpl files inclusion itself.
    You need to use PHP MobileDetect library, and then pass variable to Smarty and then you will be able to use IF condition there.

    Cheers
  3. olusambal

    olusambal New Member

    Ok Vasily, thanks for response. I am not sure how to use the PHP MobileDetect library. I have used {ia_hooker name='phpCoreBeforePageDisplay'} to add the following codes in the head section of my layout.tpl file:

    require_once IA_INCLUDES . 'utils/Mobile_Detect.php';
    $detect = new Mobile_Detect;

    $iaView->assign('isMobile', $detect->isMobile());

    But am not sure which folder to place the Mobile_Detect.php file.
    Last edited: Jan 1, 2020
  4. Vasily_B.

    Vasily_B. Project Manager

    Hi,

    You should put it in includes/utils/ folder. Once you do this, then you need to add code in your files. Just open includes/classes/ia.core.view.php, find output() function, and add the code above into case self::REQUEST_HTML section.

    In TPL you will be able to use it as {if $isMobile} then put your code here {/if}
  5. olusambal

    olusambal New Member

    Thanks Vasily. Its done.
  6. BrillMindzuae

    BrillMindzuae New Member

    You should put that in the folder includes / utils/. Once you do this, then add code to your files. Simply open includes/classes / ia.core.view.php, find output) (and add the above code to the section of the case:: REQUEST HTML.
    we are looking for the best mobile app development company

Share This Page