I am trying to add Google code for remarketing tag in catalog/view/theme/*/template/common/footer.tpl for use in an Opencart project.
I have created this vQmod
<?xml version="1.0" encoding="UTF-8"?>
<modification>
<id>Add Google Code for Remarketing Tag in footer</id>
<version>1.0</version>
<vqmver required="true">2.4.0</vqmver>
<author>nbran#kanenas.net</author>
<file name="catalog/view/theme/*/template/common/footer.tpl">
<operation>
<search position="before" offset="0">
<![CDATA[</body>]]>
</search>
<add><![CDATA[
<script type="text/javascript">
var google_conversion_id = XXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXX/?value=0&guid=ON&script=0"/>
</div>
</noscript>
]]></add>
</operation>
</file>
</modification>
which works with one little problem. Tag Assisant (by Google) is complaining (as a minor issue) about "Missing CDATA comments" meaning this
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
which already contains CDATA.
Is there a way to "escape" CDATA inside CDATA in vQmod?
Thank you!
I am posting this as a workaround, but i will not accept it for a few days in case someone has to suggest something.
<?xml version="1.0" encoding="UTF-8"?>
<modification>
<id>Add Google code for remarketing tag in footer</id>
<version>1.0</version>
<vqmver required="true">2.4.0</vqmver>
<author>nbran#kanenas.net</author>
<file name="catalog/view/theme/*/template/common/footer.tpl">
<operation>
<search position="before" offset="0">
<![CDATA[</body>]]>
</search>
<add><![CDATA[
<script type="text/javascript">
/* ]]><![CDATA[ */
var google_conversion_id = XXXXXXXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]><![CDATA[ */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXX/?value=0&guid=ON&script=0"/>
</div>
</noscript>
]]></add>
</operation>
</file>
</modification>
As #Alexandre Reis Ribeiro suggests, you can also use PHP to combine together the <![CDATA[ into strings. Tip: in large feeds or script arrays where <![CDATA[ is used often, a clean/sane way to do this is to make them variables first. Otherwise, you may end up with a mess to debug.
Simplistic Example:
$c_s = '<![' . 'CDATA['; // defines start of CDATA
$c_e = ']' . ']>'; // defines end of CDATA
// example XML output may need some CDATA, so use $c_s and $c_e:
$output .= "\t" . '<title type="html">' . $c_s . $title . $c_e . '</title>' . "\r\n";
$output .= "\t" . '<subtitle type="html">' . $c_s . $description . $c_e . '</subtitle>' . "\r\n";
// continue your output/indicies using as much CDATA's as required!
I did a small trick. Don't know whether it is the correct way or not , But it worked for me :) Here is my code.
/* ]]<?php echo '>'?> */
Related
The following code works to change multiple related images on the same page when a single button is clicked:
<!-- RR buttons -->
<div class="wrapper-9">
<button onclick="changeImage()" id="2" class="box">2</button>
</div>
<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">
<script>
function changeImage()
{
document.getElementById('theFirstImage').src="RR/images/singles/RR-2.png";
document.getElementById('theSecondImage').src="RR/images/rhythm-2.png";
document.getElementById('theThirdImage').src="RR/images/riff-2.png";
}
</script>
How can I adapt this code to accommodate MANY different buttons, not just one? I have 54 buttons in total. My naming convention ensures that the buttons and the images all correlate by number: that is to say, button "2" corresponds to images "RR-2.png", "rhythm-2.png", and "riff-2.png"; button "46" corresponds to "RR-46.png", "rhythm-46.png", and "riff-46.png". The solution must have to do with excerpting the numeral from the id of the given button, and then inserting it in the source call... but I can't figure out how to do it. I've tried this, to no avail:
<!-- RR buttons -->
<div class="wrapper-9">
<button onclick="changeImage()" id="1" class="box">1</button>
<button onclick="changeImage()" id="2" class="box">2</button>
<button onclick="changeImage()" id="3" class="box">3</button>
</div>
<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">
<script>
function changeImage()
{
var currentLabel = $(this).closest('.box').find('button').attr("id");
document.getElementById('theFirstImage').src="RR/images/singles/RR-'" + currentLabel + "'.png";
document.getElementById('theSecondImage').src="RR/images/rhythm-'" + currentLabel + "'.png";
document.getElementById('theThirdImage').src="RR/images/riff-'" + currentLabel + "'.png";
}
</script>
Would welcome any insight into what I'm doing wrong!
Ah, solved it! Found the answer here: JavaScript - onClick to get the ID of the clicked button
<!-- RR buttons -->
<div class="wrapper-9">
<button class="box" id="1" onClick="reply_click(this.id)">1</button>
<button class="box" id="2" onClick="reply_click(this.id)">2</button>
<button class="box" id="3" onClick="reply_click(this.id)">3</button>
</div>
<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">
<script type="text/javascript">
function reply_click(clicked_id)
{
document.getElementById('theFirstImage').src="RR/images/singles/RR-" + clicked_id + ".png";
document.getElementById('theSecondImage').src="RR/images/rhythm-" + clicked_id + ".png";
document.getElementById('theThirdImage').src="RR/images/riff-" + clicked_id + ".png";
}
</script>
I want to change the set of 5 image on page refresh called in html.
the images should called this under the body tag:
<img src="images/side-logos/1.jpg" alt="">
<img src="images/side-logos/2.jpg" alt="">
<img src="images/side-logos/4.jpg" alt="">
<img src="images/side-logos/5.jpg" alt="">
I want to called the set of images under the body tag not in javascript.
I have searched a lot on website but everyone calling the image in javascript not under the body tag.
So Please help me if anyone has the solutions for it.
just replace onclick event with window refresh event
HTML
<div id="box">
<img id="image" />
</div>
<br />
<input type="button" value="Randomize!" onClick="randImg()" />
JS
var images = [
"http://static.ddmcdn.com/gif/lightning-gallery-18.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-19.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-20.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-17.jpg"];
function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = images[x];
}
randImg();
demo
EDIT
new_demo
Unfortunateley, you can only do this with javascript.
To do that, here is some code that is placed in the tags
<script type="text/javascript">
function Randomize() {
var images = new Array("one.jpg","two.jpg","three.jpg","four.jpg");
var imageNum = Math.floor(Math.random() * images.length);
document.getElementById("divid").style.backgroundImage = "url('" + images[imageNum] + "')";
}
window.onload = Randomize;
</script>
The name of the images shoukd be in the images array and the "divid" is where you want the images to appear.
Lets say I have the following HTML:
<div class="some-class">
<p> some paragraph</p>
<h2>a heading</h2>
</div>
I want to grab everything in <div class='some-class'>, including the HTML. The following only grabs the text:
$descriptions = $xpath->query("//div[contains(#class, 'some-class')]");
foreach($descriptions as $description)
print $description->textContent;
Whats the best way of getting the contained HTML tags as well?
Use this function - I've never found any built in function but this works well:
function getInnerHTML($node)
{
$innerHTML = "";
$children = $node->childNodes;
foreach ($children as $child) {
$tmp_doc = new DOMDocument();
$tmp_doc->appendChild($tmp_doc->importNode($child,true));
$innerHTML .= $tmp_doc->saveHTML();
}
return $innerHTML;
}
I believe you are looking to retrieve the outerXml - have a look at DOMDocument::saveXML. Or have I misunderstood you - do you just need the xml serialization of the <div> element and its attribute axis?
Edit I mean do you want:
<div class="some-class">
<p> some paragraph</p>
<h2>a heading</h2>
</div>
or just
<div class="some-class" />
?
I am trying to call one javascript function present in the html data that i am inserting but i am always getting an error getLoaded is not a method. I have attached the code snippet. What is wrong ?
<canvas width="100%" height="100%" >
<simplelayout axis="y" spacing="2"/>
<button>Set HTML
<handler name="onclick">
<![CDATA[
if (canvas.main) {
canvas.main.setAttribute('html', '<html><head><style type="text/css">body {background-color: #ffffff;}</style><script>function getLoaded(){ return document.images.length;}</script></head><body><img id="imageTag" ></img></body></html>');
}
]]>
</handler>
</button>
<button>test
<handler name="onclick">
<![CDATA[
if (canvas.main) {
var del = new LzDelegate(this,'handlerFunc');
canvas.main.callJavascript('getLoaded',del);
}
]]>
</handler>
</button>
<method name="handlerFunc" args="retVal">
console.log("handlerFunc", retVal);
</method>
<html name="main" x = "50" y="50" width="600" height="400" >
<handler name="oninit">
this.bringToFront();
</handler>
</html>
</canvas>
Here is a solution which works for the both the SWF10 and DHTML runtime. I've tested with IE 9, Firefox and Chrome.
There are two problems with your code:
1) The HTML snippet you are assigning to the #html attribute of the <html> tag should not contain a full HTML document structure. Here is the JavaScript from the iframemanager.js library (part of OpenLaszlo) which is used to assign the HTML snippet to the iFrame:
,setHTML: function(id, html) {
// must be called after the iframe loads, or it will be overwritten
if (html) {
var win = lz.embed.iframemanager.getFrameWindow(id);
if (win) {
win.document.body.innerHTML = html;
}
}
}
As you can see, the value of the html parameter is assigned to the innerHTML of the body element. Therefore it's sufficient to only include the body of the HTML document you are generating.
2) If you want to add JavaScript sections to an iFrame, you cannot inline those into the HTML code you want to assign to the document, but have to create a 'script' element as you can see in the full example below. If you want to support the SWF runtime as well, the most efficient way is to create a small external JavaScript function has a helper function as shown below.
There are two files I'm creating for this solution. The LZX file, and an external JavaScript file called iFrameHelperFunction.js.
Here is a modified version of your LZX file:
<canvas width="100%" height="100%" >
<wrapperheaders>
<script type="text/javascript" src="iFrameHelperFunction.js"></script>
</wrapperheaders>
<simplelayout axis="y" spacing="2"/>
<button>Set HTML
<handler name="onclick">
<![CDATA[
if (canvas.main) {
// Create the HTML content; do not include <html><head><body> structure here,
// since setting the 'html' attribute of an OpenLaszlo <html> tag will set
// the innerHTML property of the iFrame's document.body.
var innerHTML = '<style type="text/css">body {background-color: #ff0000;}</style>'
+ '<img id="imageTag" src="https://www.google.com/images/srpr/logo3w.png"></img>',
jsCode = "function getLoaded() { alert('inside getLoaded()'); return 'getLoaded was called'; }";
canvas.main.setAttribute('html', innerHTML);
lz.Browser.callJS('addJavaScriptToFrame("' + canvas.main.iframeid + '", ' + jsCode + ')');
}
]]>
</handler>
</button>
<button>test
<handler name="onclick">
<![CDATA[
if (canvas.main) {
var del = new LzDelegate(canvas, 'handlerFunc');
canvas.main.callJavascript('getLoaded', del);
}
]]>
</handler>
</button>
<method name="handlerFunc" args="retVal">
Debug.info("handlerFunc", retVal);
</method>
<html name="main" x = "50" y="50" width="600" height="200" >
<handler name="oninit">
this.bringToFront();
</handler>
</html>
</canvas>
First, I'm adding my custom JavaScript file to the page:
<wrapperheaders>
<script type="text/javascript" src="iFrameHelperFunction.js"></script>
</wrapperheaders>
Then the HTML snipped for the iFrame is set, similar to your code. But any JavaScript which is added to iFrame HTML page has to be added using a helper function addJavaScriptToFrame defined in iFrameHelperFunction.js:
function addJavaScriptToFrame(frameId, jsCode) {
var iframeWin = lz.embed.iframemanager.getFrameWindow(frameId);
doc = iframeWin.document;
// Scripts can not be inlined in HTML snippets, but must be created through JavaScript
var scriptEl = doc.createElement('script');
// The JavaScript function or code you want to add
scriptEl.text = jsCode;
// Append the script to the head of the iFrame document
doc.firstChild.appendChild(scriptEl);
}
The call to add the JavaScript to the iFrame in the LZX file:
lz.Browser.callJS('addJavaScriptToFrame("' + canvas.main.iframeid + '", ' + jsCode + ')');
Click the "Set HTML" button to set the content of the frame, and then click the "test" button to make the call to the getLoaded() function inside the iFrame.
I have many elements on page and all of which i want to translate to some language. The language is not the same for all fields, that is, for 1st field it may be fr and for third field it may be en then again for 7th field it may be pa.
Basically i wrote the code and it's working :-
<script type="text/javascript">
//<![CDATA[
google.load("language", "1");
window.onload = function(){
var elemPostTitles = document.getElementsByTagName("h4");
var flag = true;
for(var i = 0 ; i < elemPostTitles.length ; i++){
while(flag == false){
}
var postTitleElem = elemPostTitles[i];
var postContentElem = document.getElementById("postContent_" + i);
var postTitle = postTitleElem.innerHTML;
var postContent = postContentElem.innerHTML;
var languageCode = document.getElementById("languageCode_" + i).value;
google.language.detect(postTitle, function(result) {
if (!result.error && result.language) {
google.language.translate(postTitle, result.language, languageCode,
function(result) {
flag = true;
if (result.translation) {
postTitleElem.innerHTML = result.translation;
}
});
}
});
flag = false;
}
As you can see, what i am trying to do is restrict the loop from traversing until the result of previous ajax call is receieved. If i don't do this only the last field gets translated. My code works nicely, but because of the infinite loop, i keep getting errors from Mozilla to "stop executing scripts". How do i get rid of this? Also, is my approach correct? Or some inbuilt function is available which can ease my task? Thanks in advance :)
Why don't you call the function to check the next h4 recursively from within the detect/translate completed callbacks. Send the next recursion the next h4 using something like JQuery's next() function.
What you're doing is running the endless loop on the same thread as the outer loop.
I suggest you post a more complete question and code next time to prevent people who like to provide working answers from having to spend time guessing what you are trying to do.
Here is a working example using recursion. Unless you have thousands of items, the tail should be tolerable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var elemPostTitles = document.getElementsByTagName("h4");
var index = elemPostTitles.length - 1;
foo(index);
function foo(index) {
var postTitleElem = elemPostTitles[index];
var postTitle = postTitleElem.innerHTML;
var postContentElem = document.getElementById("postContent_" + index);
var postContent = postContentElem.innerHTML;
var languageCode = document.getElementById("languageCode_" + index).value;
google.language.detect(postTitle, function(result) {
if (!result.error && result.language) {
google.language.translate(postTitle, result.language, languageCode,
function(result) {
if (result.translation) {
postTitleElem.innerHTML = result.translation;
}
if (--index > -1) {
foo(index);
}
});
}
});
};
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<h4>
this is some text</h4>
<h4>
this is some text</h4>
<h4>
this is some text</h4>
<h4>
this is some text</h4>
<h4>
this is some text</h4>
<input type="text" id="languageCode_0" value="en" />
<div id="postContent_0">
</div>
<input type="text" id="languageCode_1" value="hi" />
<div id="postContent_1">
</div>
<input type="text" id="languageCode_2" value="es" />
<div id="postContent_2">
</div>
<input type="text" id="languageCode_3" value="fr" />
<div id="postContent_3">
</div>
<input type="text" id="languageCode_4" value="ar" />
<div id="postContent_4">
</div>
</body>
</html>