I am trying to add the following code to my prestashop site to be able to display my google trusted site badge:
<!-- BEGIN: Google Trusted Stores -->
<script type="text/javascript">
var gts = gts || [];
gts.push(["id", "STORE_ID"]);
gts.push(["badge_position", "BOTTOM_RIGHT"]);
gts.push(["locale", "english_australia"]);
gts.push(["google_base_offer_id", "ITEM_GOOGLE_SHOPPING_ID"]);
gts.push(["google_base_subaccount_id", "ITEM_GOOGLE_SHOPPING_ACCOUNT_ID"]);
gts.push(["google_base_country", "ITEM_GOOGLE_SHOPPING_COUNTRY"]);
gts.push(["google_base_language", "ITEM_GOOGLE_SHOPPING_LANGUAGE"]);
(function() {
var gts = document.createElement("script");
gts.type = "text/javascript";
gts.async = true;
gts.src = "https://www.googlecommerce.com/trustedstores/api/js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(gts, s);
})();
</script>
<!-- END: Google Trusted Stores -->
i need it to be visible on every page and no matter what i do, i cant get it to display the badge.
most likely you need installing a module to add custom html.
here is one to add on the bottom/footer area.
http://www.prestashop.com/forums/topic/165066-free-prestashop-module-easy-footer/
you can add custom html content on footer area and it will be visible to whole website.
It's a little bit late, but the easiest way is to create a js file, and put it in your theme script folder : /themes/yourtheme/js/autoload
That way it's loaded on every pages.
The simplest way is to insert your code in header.tpl.
Related
I have issues firing this link (that triggers a script from Chargebee) when is added dynamically via JavaScript. When it's added directly in html it works normally.
The entire generated link is appearing correctly (populated with the variants) in browser when inspected just it doesn't fire.
Here are the pieces I have related to this:
The JavaScript part:
var checkout = document.getElementById("checkout");
var link = '<a href="javascript:void(0)" data-cb-type="checkout"' + data-cb-1 + data-cb-2 + data-cb-3'>Order</a>';
checkout.innerHTML = link;
A simple div:
<div id="checkout"></div>
The script from chargebee:
<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="site-name"></script>
Once you've loaded chargebee.js script it starts to look for a tag a with specific data-cb attributes. The script does it one time only. If the tag a did not exist in the DOM then, the script does nothing. When you add the tag a later that makes no effect at all, because a "discovery phase" is over.
If you want to have more control over chargebee initialisation process, you should go for "Checkout via API" option provided by the developers.
P.S. There are two hacky solutions:
You may load Chargebee script after adding tag a to the DOM.
function loadChargebee() {
var script = document.createElement("script");
script.src = "https://js.chargebee.com/v2/chargebee.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
var checkout = document.getElementById("checkout");
var link = '<a href="javascript:void(0)" data-cb-type="checkout"' + data-cb-1 + data-cb-2 + data-cb-3'>Order</a>';
checkout.innerHTML = link;
loadChargebee(); // <=== add Chargebee.js
Leave the tag a in the DOM, load the script as usual but modify data attributes as needed after page load:
<a id="beecheckout" href="javascript:void(0)" data-cb-type="checkout" data-cb-1="" data-cb-2="" data-cb-3="">Order</a>
document.getElementById('beecheckout').setAttribute('data-cb-1','new data value');
The question says it all. How to update the "src" of script tag using jQuery.
Let say, I have a script,
<script id="somescript" type="text/javascript" src=""></script>
So when I a click on a button, the src of the script must be added. Like,
<script id="somescript" type="text/javascript" src="linktoscript.js"></script>
I am doing it with a click handler like this, using the following code.
$("#somescript").attr("src","linktoscript.js");
It actually updates the src but when I check it via firebug, it tells me to refresh the page to get the script working.
Research:
After some research, I've found $.get() of jQuery would do the job and yes, it loads the script. But it is not getting my job done.
The Actual Problem:
I am trying to load Google's conversion code using Ajax on successful form submission.
Here is the part of the Ajax script that should work for the Google's conversion code.
if (res == "yes") {
$('#success').fadeIn().delay(5000).fadeOut();
$('#regform')[0].reset();
window.location.href = '#';
/* <![CDATA[ */
var google_conversion_id = xxxxxxxxx;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "CiaXCOXjzlcQy__EyQM";
var google_remarketing_only = false;
/* ]]> */
$.getScript("http://www.googleadservices.com/pagead/conversion.js");
}
It loads the conversion script but when I check it from firebug, all the values of the conversion variables are null.
So I am giving it a try by putting all of the conversion code into the html file and then load the conversion script like,
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = xxxxxxxxx;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "CiaXCOXjzlcQy__EyQM";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="#"></script> <!--Update this src-->
<noscript>
<div style="display:inline">
<img height="1" width="1" style="border-style:none;" alt="" src="#" />
</div>
</noscript>
Any Help?
Link:
Here is the link to the live site : Link
Update:
This is what I get. In the firebug's script panel, after form submission,
It would appear that the Google conversion script relies on google_conversion_id, google_conversion_language, etc. to be available as global variables. Presuming that the code you have there is executing inside a function (which would make sense if this is inside an event), the code you have there will not work because the variables will be local to the function they are in, and the google code will have no way to get at them.
There are two things you can do.
One is to define those variables in the global scope ahead of time, i.e. do this:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = xxxxxxxxx;
var google_conversion_language = "en";
var google_conversion_format = "2";
...
</script>
(you can also put these in an external script file and load that file when the page loads:
If you do that, you can load the google conversion script whenever you want, and it will be able to access those variables:
$.getScript("http://www.googleadservices.com/pagead/conversion.js");
The other option is to assign your variables to the window object right before you load the script, which is equivalent to putting them in the global scope:
if (res == "yes") {
$('#success').fadeIn().delay(5000).fadeOut();
$('#regform')[0].reset();
window.location.href = '#';
window.google_conversion_id = xxxxxxxxx;
window.google_conversion_language = "en";
window.google_conversion_format = "2";
window.google_conversion_color = "ffffff";
window.google_conversion_label = "CiaXCOXjzlcQy__EyQM";
window.google_remarketing_only = false;
$.getScript("http://www.googleadservices.com/pagead/conversion.js");
}
Note: regarding the issue that this question was originally about, you can't load a script by changing the src attribute of an existing script element:
http://jsfiddle.net/5vf6b924/
Once a script element has loaded whatever is indicated by the src (even if it's #), it is essentially "used up" and won't load anything else.
What you can do is to create a new script element and add it to the DOM:
http://jsfiddle.net/ydu52cn1/
That should succeed in loading the script (asynchronously).
As you've found, jQuery also provides the $.getScript convenience method for this.
At the end, the following did the job for me. Thanks to JLRishe and A. Wolff for their support.
In my previous code, there were two problems.
I was not inserting the "img" element along with other conversion code. (Silly mistake but I was working with conversion code for the first time. So please pardon me).
Inserting src of the "img" tag in the default format would give error. The default & would render Invalid URL encode error upon AJAX response. Thanks for Tag Assitant. Rather than using &, use & directly like this.
www.googleadservices.com/pagead/conversion/xxxxxxxxx/?label=CiaXCOXjzlcQy__EyQM&guid=ONscript=0
Here is what finally worked for me.
if (res == "yes") {
$('#success').fadeIn().delay(5000).fadeOut();
$('#regform')[0].reset();
<!-- Google Code for Lead Conversion Page -->
/* <![CDATA[ */
window.google_conversion_id = xxxxxxxxx;
window.google_conversion_language = "en";
window.google_conversion_format = "2";
window.google_conversion_color = "ffffff";
window.google_conversion_label = "CiaXCOXjzlcQy__EyQM";
window.google_remarketing_only = false;
/* ]]> */
$.getScript("//www.googleadservices.com/pagead/conversion.js");
window.scriptTag2 = document.createElement('noscript');
window.imgTag = document.createElement('img');
imgTag.height = 1;
imgTag.width = 1;
imgTag.border = 0;
imgTag.src = "//www.googleadservices.com/pagead/conversion/xxxxxxxxx/?label=CiaXCOXjzlcQy__EyQM&guid=ONscript=0";
}
I hope it will help the someone else with the same problem.
Thank you.
You could append the script tag to the DOM
if (yourCondition === true) {
$('head')
.append($('<script id="somescript" type="text/javascript" src="linktoscript.js"></script>'));
}
The script is loaded at the moment it is appended, that way you have total control of when it is loaded.
I have the following code in my document:
<a class="twitter-widget" href="url" data-widget-id="138843679974442730">Twitter Timeline</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
data-widget-id is connected to one style. Right now if there is a theme change on the website (I replace all responsible stylesheets and images) everything changes but the Twitter widget.
Since the widget itself is an iframe, I can't change any stylesheets attached to it.
Is there an easy way to change the style of the widget without reloading it (deleting the tag, creating the tag, running js)?
You can style elements in the Twitter widget iframe using JavaScript.
First, you need the active document in the iframe's nested browsing context:
var doc = document.getElementById("twitter-widget-0").contentDocument;
Then, you can apply styles (e.g.):
doc.querySelector(".timeline-header").style["background-color"] = "black";
doc.querySelector(".timeline-header a").style["color"] = "white";
Example: http://codepen.io/smockle/pen/IJHnj
There is no straight forward way of doing this, so I've decided to bring in another dependency that will be delaying the onload event..
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
And here is the code that did the job:
var twitterBox = document.getElementsByClassName("twitterBox");
if (!twitterBox || twitterBox.length == 0) { return true; }
var twitterTimeline = document.createElement('a');
twitterTimeline.className = 'twitter-timeline';
twitterTimeline.href = 'url';
twitterTimeline.innerHTML = 'Twitter Timeline';
twitterTimeline.setAttribute('data-widget-id', '388742673974046720');
twitterBox[0].removeAttribute('data-twttr-id');
twitterBox[0].innerHTML = '';
twitterBox[0].appendChild(twitterTimeline);
twttr.widgets.load();
We are using the Ning platform, and in order to add a new container DIV underneath the blog content (but before the comment section), we added the following before the body tag:
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("DIV.xg_module.xg_blog.xg_blog_detail.xg_blog_mypage.xg_module_with_dialog").after('<div>CONTENT GOES HERE </div>');
}
else{
}
</script>
However, then the content we need to load is javascript from an affiliate program, who sent us this code to add into that div:
<div style="width:750px;">
<div style="border-bottom:1px solid #FFFFFF;color:#FFFFFF;font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:bolder;margin-bottom:10px;padding-bottom:2px;text-transform:uppercase;">From Around the Web</div>
<script type='text/javascript'>
var _CI = _CI || {};
(function() {
var script = document.createElement('script');
ref = document.getElementsByTagName('script')[0];
_CI.counter = (_CI.counter) ? _CI.counter + 1 : 1;
document.write('<div id="_CI_widget_');
document.write(_CI.counter+'"></div>');
script.type = 'text/javascript';
script.src = 'http://widget.crowdignite.com/widgets/29949?_ci_wid=_CI_widget_'+_CI.counter;
script.async = true;
ref.parentNode.insertBefore(script, ref);
})(); </script>
</div>
And obviously, that does not work.
THE QUESTION: is there a better way to do this? Is it just a matter of all the conflicting 's and "s? Is there an easier way to format this or output it? Is it failing because it's simply not loading the javascript after the JQuery has already run post-page load? I have been trying different things and none seem to work and my eyes are ready to pop out of their sockets because I know there's something stupid I'm missing, so I thought I'd get some more eyes on it.
Thanks for any help/ideas/suggestions.
Try appending your new script element to the head element on your page. Most dynamic script loaders do this.
See Ways to add javascript files dynamically in a page for an example.
I'm currently trying to create a tweet button with the horizontal count feature dynamically:
JavaScript
var twitter = document.createElement('a');
twitter.setAttribute('href', 'http://twitter.com/share');
twitter.setAttribute('class', 'twitter-share-button twitter-tweet');
twitter.setAttribute('data-url','http://mindcloud.co.uk/idea/?idea=' + this.id);
twitter.setAttribute('data-count', 'horizontal');
twitter.setAttribute('data-via', 'jtbrowncouk');
twitter.style.top = '20px';
twitter.style.left = '300px';
twitter.innerHTML = "Tweet";
The problem i'm having is that the button is being displayed as a text link, not as a button with the horizontal count box.
I've created a facebook button in the same way, which works correctly, however to make it work I use the following:
JavaScript
var facebook = document.createElement('fb:like');
facebook.setAttribute('id', 'like'+this.id);
facebook.setAttribute('href', 'http://mindcloud.co.uk/idea/?idea=' + this.id);
facebook.setAttribute('layout', 'button_count');
facebook.setAttribute('send', 'false');
facebook.setAttribute('width' , '300');
facebook.setAttribute('font', '');
facebook.setAttribute('show_faces', 'true');
facebook.style.top = '0px';
facebook.style.left = '300px';
using the following:
FB.XFBML.parse();
to parse and draw the button. FB.XFBML.parse() comes from
http://connect.facebook.net/en_US/all.js
When I create the Tweet button statically inside a .html file it works correctly. I'm including the following script within my index page where the tweet button should be created dynamically:
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
If you can see what i'm doing incorrectly please inform me!
The following screenshot gives a visual explanation to what is going wrong with the tweet button!
Solution:
I've now managed to solve the problem. The problem i'd imagine is that the twitter script is running on load, and not being re-run upon creating the element.
using the following jQuery works correctly!
$.getScript("http://platform.twitter.com/widgets.js");
It's worth noting that as of recently you can use the following twitter widget function:
twttr.widgets.load();
Assuming you've loaded the widgets.js file:
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
This will dynamically re-create the tweet button for you.
I've now managed to solve the problem. The problem i'd imagine is that the twitter script is running on load, and not being re-run upon creating the element.
using the following jQuery works correctly!
$.getScript("http://platform.twitter.com/widgets.js");
You're just using the wrong code. To specify the URL, you use url, not data-url. This works:
var twitter = document.createElement('a');
twitter.setAttribute('href', 'http://twitter.com/share');
twitter.setAttribute('class', 'twitter-share-button twitter-tweet');
twitter.setAttribute('url','http://mindcloud.co.uk/idea/?idea=' + this.id);
twitter.setAttribute('data-count', 'horizontal');
twitter.setAttribute('data-via', 'jtbrowncouk');
twitter.style.top = '20px';
twitter.style.left = '300px';
twitter.innerHTML = "Tweet";
For more details, check out Twitter's documentation at https://dev.twitter.com/docs/tweet-button#properties