Need help of programming php if then else with screen width with repsonsive template

[explorer1979]

Hi all,

I am using Zen Cart 1.5.5b, and want to custom to add some php if else code for my skin that with screen width on mobile like iPhone etc display different PHP coding with Google Translate (Two of it)

Yes, I know CSS@media with screen width can help for it, and I am try and add the <div> css class too like this

@media (max-width: 300px){div.google_translate_element{display: none !important;}}
@media (max-width: 300px){div.google_translate_element-mobile{display: inline-block !important;}}

@media (max-width: 767px){div.google_translate_element{display: inline-block !important;}}
@media (max-width: 767px){div.google_translate_element-mobile{display: none !important;}} 

But the BIG problems there for me is ....

If point two Google Translate Code together, only the 8 language work, ALL language one never show (This case will show like two Google Translate, mean without PHP if else, the CSS never work as what I want to be, show one of them coding only and hide other)
Like this one
http://www.myezlap.com/store

or
http://www.myezlap.com/jimmy2.php


Why I am ask for this is because

I go to
http://translate.google.com/translate_tools
And gen two of Google Translate Coding, one for ALL language, and the second one is just few language, total 8 language there (For iPhone width=320px etc)

This is for Desktop Width

<!-- BoF Google Translate A for Desktop All Language -->
<div class="google_translate_element">
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>       </div> 
<!-- EoF Google Translate A for Desktop All Language --> 

This is for Mobile Width 320px etc (It only show of 8 language)

<!-- BoF Google Translate C for Mobile Only Hide All Code On Desktop -->
<div class="google_translate_element-mobile">
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,en,es,fr,ja,ko,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
<!-- EoF Google Translate C for Mobile Only --> 

Then I try to integration this together, but not work, since I don't know how to write the PHP part if else part
What I try is this now
on
/includes/templates/mytemplate/common/tpl_header.php

<?php
print <<<_HTML_
<!-- BoF Google Translate A for Desktop All Language -->
<div class="google_translate_element> 
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>        
</div>
<!-- EoF Google Translate A for Desktop All Language -->
_HTML_;

print <<<_HTML2_
<!-- BoF Google Translate C for Mobile Only Hide All Code On Desktop -->
<div class="google_translate_element-mobile> 
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,en,es,fr,ja,ko,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 
</div>
<!-- EoF Google Translate C for Mobile Only Hide All Code On Desktop -->
_HTML2_;

?>

So I need the coding somthing like this adding the if else that make it work

<?php
if (screen width=700px) {

print <<<_HTML_
<!-- BoF Google Translate A for Desktop All Language -->
<div class="google_translate_element> 
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
   new google.translate.TranslateElement({pageLanguage: 'en', layout:  google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay:  false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'},  'google_translate_element');
}
</script><script  type="text/javascript"  src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>         
</div>
<!-- EoF Google Translate A for Desktop All Language -->
_HTML_;

} else {
// for Mobile
print <<<_HTML2_
<!-- BoF Google Translate C for Mobile Only Hide All Code On Desktop -->
<div class="google_translate_element-mobile> 
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
   new google.translate.TranslateElement({pageLanguage: 'en',  includedLanguages: 'de,en,es,fr,ja,ko,zh-CN,zh-TW', layout:  google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay:  false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'},  'google_translate_element');
}
</script><script  type="text/javascript"  src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>  
</div>
<!-- EoF Google Translate C for Mobile Only Hide All Code On Desktop -->
_HTML2_;

}
?>

Plese help, and I think this also very useful for anyone the using Responsive Template who also need it
Thank you.

[mc12345678]

I'll admit that I haven't read through all of the code, but if your css is in the order presented, it will use the larger max-width settings for all values of width less than the last setting (767 I think it was). Css is applied top down with style sheets loaded later overriding style sheets loaded earlier. You would need to swap the two max-width "statements" so that the higher value is first and the lower value is second/later.

[explorer1979]

mc12345678,

First, thank you of your suggestion of the css.

But look like you misunderstand my question

I want to bypass the CSS part first.

The problem there are, if you make 3 php file, and try one by one on it, you will understand what my problems, and what I am ask for.

Let do this
jimmychan1.php
http://www.myezlap.com/jimmychan1.php
This one show all language

print <<<_HTML_
<!-- BoF Google Translate A -->
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>        
<!-- EoF Google Translate A -->
_HTML_; 

jimmychan2.php
http://www.myezlap.com/jimmychan2.php
This one only show 8 language

<?php
print <<<_HTMLW_
<!-- BoF Google Translate C -->
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,en,es,fr,ja,ko,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- EoF Google Translate C -->
_HTMLW_;
?>

jimmychan3.php
http://www.myezlap.com/jimmychan3.php
This is the wrong one

print <<<_HTML_
<!-- BoF Google Translate A -->
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>        
<!-- EoF Google Translate A -->
_HTML_;

print <<<_HTMLW_
<!-- BoF Google Translate C -->
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,en,es,fr,ja,ko,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- EoF Google Translate C -->
_HTMLW_; 

So, I want the jimmychan3.php using PHP's if else way to show the coding, but PHP need know how to check the screen width
So, sorry of my poor English
What I want is like this

<?php
if (screen width=300px) {
code set 1 (This 1 mean code of jimmychan1.php above)
} else {
code set 2 (This 2 mean code of jimmychan2.php above)
}
?>

If you look on the jimmychan3.php
Then you will know that, the Google only work with ONE CODE SET ONLY, if copy of the coding and just 8 language on same file, it will not work, look like it is JavaScript function error? I am not good at JavaScript ... so why ask there hope can find a easy way to fix, and integration with PHP

The problem for me is that, how do PHP can know the screen width (Not using CSS?)

Thank you.

[mc12345678]

From what I see of how the ZC 1.5.5 responsive template is implemented, ZC doesn't "know" nor really consider the screen width in determining the applicable php to be run, it detects the device type that is communicating with the server and provides an indicator of which "set of files" to be considered.

You can see this flow of information by looking at the includes/templates/responsive_default/common/html_header.php file and it's use/execution of the Mobile_Detect.php class.

From there, the applicable css file is loaded within which the screen dimensions are taken into account. So, at least in ZC's implementation of mobile templating, the process is multi-fold and not just width of the screen.

If anything, one pitfall of the computing "industry's" implementation of mobile templating (and honestly desktops are not immune to a similar issue) is the need to maintain the device list up-to-date as each manufacturer implements new devices without a single standardization of interaction with the internet... Yes, there are some parts which make it possible to determine information about the device, but having to list 20 plus devices under one manufacturer that will continue to add to that list is itself a challenge.

[DrByte]

PHP doesn't know anything about screen sizes.
Some people try to detect that using "PHP Mobile Detect" (which is included in the Responsive Classic template, and some other contributed responsive templates).

The other approach, used by most people, is to have PHP output BOTH, but wrap them in different <div class="(whatever css screen media size here)"> tags and let the browser+CSS determine which <div> to show, based on the CSS rules.
As long as it's not causing 1000000000 MB extra download data, this usually is adequate for most cases.

If you need something more, you can experiment with the PHP Mobile Detect library, and make a point of regularly uploading any relevant updates to that library every month.

[explorer1979]

Dr. Byte:

Thank you ...

But .... how about using jQuery or JavaScript?
I search Google "JavaScript load different script"
Find a blog there
https://responsivedesign.is/develop/...on-media-query


It have a real cool logic idea
if (document.documentElement.clientWidth < 900) {
// scripts
}

but ... I am not real how to write the code can do with the Google, can anyone there who can help for push?

And on W3School, I find a JavaScript if else
I change it coding that work (at least the on the logic side, but I still thinking how to change it, integration with two of my Google code)

<p id="demo"></p>
<script>
    var time = new Date().getHours();
    if (time < 13) {
        document.getElementById("demo").innerHTML = "Good day";
    } else {
    document.getElementById("demo").innerHTML = "WoW day";
    }
</script> 

so base on above if else logical
How do I do like this?

if (document.documentElement.clientWidth < 640) {
    // scripts load script a
   /home/abc/public_html/store/js/script_a.js
} else {
// scripts load script b
   /home/abc/public_html/store/js/script_b.js
} 

This way I think can fix my problems, once time just load ONLY one of the Google Script

[mc12345678]

If you didn't have the if else statement and were trying to load just one script, how would you accomplish that? Certainly it is not in the manner presented above of just typing out the file path of the file on the server.

Also, if not mistaken if the javascript method described above is used, a "look" to the page will be assigned on page load, but if something about the dimensions is changed without reloading the page, then whatever the javascript brought into action is what will continue to be used. For example a tablet typically has two dimensions depending on which way it is rotated. On a desktop, the screen could be resized, though the biggest issue with the resizing and the proposed code is if the page is loaded while the width is small and then expanded without reloading the page. The additional "features" are not present to be displayed until the customer again loads the page if they even choose to do that...

[Website Rob]

See how this works for you.

Insert in your main CSS stylesheet.

@media screen and (min-width:381px) {
  .language--mobile {
    display:hide;
    visibility:hidden;
  }
}

@media screen and (max-width:380px) {
  .language--desktop {
    display:hide;
    visibility:hidden;
  }
}

Insert this in the PHP page of your choice.

<aside class="language--desktop">
<?php // show All Languages
echo <<<_languages_all
  <!-- BoF Google Translate A for Desktop All Language -->
  <div class="google_translate_element">
    <div id="google_translate_element"></div>
    <script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', layout:  google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay:  false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'},  'google_translate_element');
    }
    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  </div>
  <!-- EoF Google Translate A for Desktop All Language -->
_languages_all;
</aside>

<aside class="language--mobile">
<?php // show only 8 Languages
echo <<<_languages_eight
  <!-- BoF Google Translate C for Mobile Only Hide All Code On Desktop -->
  <div class="google_translate_element-mobile">
    <div id="google_translate_element"></div>
    <script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en',  includedLanguages: 'de,en,es,fr,ja,ko,zh-CN,zh-TW', layout:  google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay:  false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'},  'google_translate_element');
    }
    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  </div>
  <!-- EoF Google Translate C for Mobile Only Hide All Code On Desktop -->
_languages_eight;
?>
</aside>

I use 380px for Mobile as one has to take Landscape View into account, which is wider than Portrait.

[rbarbour]

Use MobileDetect which is built in to 1.5.5

in /includes/templates/YOUR_TEMPLATE/common/html_header.php

find:

  if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
    echo $responsive_mobile;
  } else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
    echo $responsive_tablet;
  } else if ( $_SESSION['layoutType'] == 'full' ) {
    echo '';
  } else {
    echo $responsive_default;
  } 

Based on the code you provided

@media (max-width: 300px)

this would be for mobile

@media (max-width: 767px)

this would be for tablets

so change the above to

  <?php  if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
    echo $responsive_mobile; ?>

<!-- BoF Google Translate C for Mobile Only Hide All Code On Desktop -->
<div class="google_translate_element-mobile">
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,en,es,fr,ja,ko,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
<!-- EoF Google Translate C for Mobile Only -->  

<?php } else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
    echo $responsive_tablet; ?>

<!-- BoF Google Translate A for Desktop All Language -->
<div class="google_translate_element">
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>       </div> 
<!-- EoF Google Translate A for Desktop All Language -->

<?php } else if ( $_SESSION['layoutType'] == 'full' ) {
    echo '';
  } else {
    echo $responsive_default; ?>

<!-- BoF Google Translate A for Desktop All Language -->
<div class="google_translate_element">
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-89152281-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>       </div> 
<!-- EoF Google Translate A for Desktop All Language -->

<?php   }

[explorer1979]

Website Rob and rbarbour,

First thank you.

I will try this later on my free time see what happened.

Special thank to rbarbour, you make me more easy where to look for a starting point of ZC 1.5.x build in MobileDetect parts

My template is bought from other, so it header have some PHP control on load like header_v1.php, v2.php etc since the design can change by choose.

This make me need more time to look on it coding.

Whatever this, I will update this post to let you know it work or not for my template.

Real thank there all who give a help for me. More idea and learning something there :-)