Move javascript after variable declaration

[slashdev]

Hello community.

 

I have next configuration in my shop:

Smart cache for JavaScript - ON

Minify HTML - ON

Compress inline JavaScript in HTML - ON

Move JavaScript to the end - ON

 

I use hook DisplayOrderConfirmation in my module and display some tpl file that contains this code:

<!-- Google Code for Purchase Conversion Page -->
<script type="text/javascript"> 
/* <![CDATA[ */
var google_conversion_id = 999999999;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "555555";
var google_conversion_label = "xxx_XxXxXx";
var google_remarketing_only = "false";
/* ]]> */ 
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<img height=1 width=1 border=0 src="//www.googleadservices.com/pagead/conversion/999999999/?value=9&currency_code=USD&label=xxx_XxXxXx&guid=ON&script=0">
</noscript>

but block of variable declaration follows after calling script conversion.js on result page.

 

I need help guys.

Edited September 25, 2017 by slashdev (see edit history)

[bellini13]

but in final page block of variable declaration follow after calling script conversion.js.

I do not understand what this means?

[slashdev]

I do not understand what this means?

 

Fragment of result page:

<script type="text/javascript" src="https://www.googleadservices.com/pagead/conversion.js"></script> 
...
<script type="text/javascript">
/* <![CDATA[ */;
var google_conversion_id = 999999999;
...
/* ]]> */ 
</script>

Javascript conversion.js called before variables that will be declared.

Edited September 25, 2017 by slashdev (see edit history)

[bellini13]

probably because you have "move javascript to bottom" enabled.  You should look into the data-keepinline="true" attribute for the script tag

[slashdev]

probably because you have "move javascript to bottom" enabled.  You should look into the data-keepinline="true" attribute for the script tag

 

Thanks for a tip but this solution solve a part of problem.

 

I noticed that CDATA-section is missing when "Minify HTML" is ON. I was looking for a long time and I found function that removed this section. It's called _removeScriptCB. I made changes and everything is Ok.

 

find and comment:

$js = $this->_removeCdata($js);

add before:

$existsCdata = (false !== strpos($js, '<![CDATA[')) ? 1 : 0;

find and edit:

return $this->_reservePlace($this->_needsCdata($js) && !$existsCdata
            ? "{$ws1}{$openScript}/*<![CDATA[*/{$js}/*]]>*/</script>{$ws2}"
            : "{$ws1}{$openScript}{$js}</script>{$ws2}"

[bellini13]

any particular reason you are using CDATA in your scripts?

[slashdev]

any particular reason you are using CDATA in your scripts?

 

See this link https://support.google.com/tagassistant/answer/2947038?hl=en#cdata_comments

[Tiphaine Desmasures]

I'm facing the same problem, when enabling "js at the end" my scripts are called before variables are defined (see attached image).

How did you fix it? I couldn't find the code you are talking about and my "CDATA-section" is NOT missing.

edit: actually it is missing when using "keep-datainline"...

[Solved]
If anyone face this problem, you need to add " data-keepinline='true' " in your script variables declaration (the script call will be deplaced at the bottom so it should be called after).

If the "minify HTML" option removes the <![CDATA[ tag in your scripts, you need to edit tools/minify_html/minify_html.class.php, follow slashdev's recommandation and everything should be ok !

Edited January 9, 2018 by FLORENT GERAULT (see edit history)