We Keep Coding

How to add custom code to prestashop

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.

Hide div from javascript

I have a script that brings up some things that I don't want (a selector).
The script brings up a div class named "selector", and I don't want that div class to show. (I have no access to the css files)
Here is the script:
<script language="javascript" type="text/javascript">
window.onload = function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.setAttribute("language", "javascript");
script.src = "http://js.sbrfeeds.com/js";
script.id = "widget-main-script";
document.body.appendChild(script);
}
Is there any way to put some code in the above script that will hide the div "selector" when loaded?
Basically, I want what's circled in the picture to not show, and it is in a div class name "selector".
Image here: http://imagizer.imageshack.us/v2/800x600q90/543/f385.png

document.getElementsByClassName('selector')[0].style.display = 'none';
Mind you, before you run that, you need to make sure your script fully loaded. Is there a reason you don't just add the script as a script tag so it will load when the page loads? Then you don't have to worry about all that mumbo jumbo.

Assuming that your Div has an ID (and you are using JQuery), you could do something like this: JSFiddle
$('#selDiv').removeClass('selector');
If you aren't using JQuery, you could do this: JSFiddle
document.getElementById("selDiv").className = "";

This isn't really a legitimate answer, but I ended up just hiding what I needed to be hid using a div class. Just throwing that here in case someone else needs it. You could also use a png file if it's an awkward shape to hide. Mine was just rectangular though.

var css = '.selector { display : none}',
header = document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
header.appendChild(style);
This will create a tag at header and then you can hide your element. Additionally you can set other CSS properties. Not sure this will work in your situation.

How to implement Facebook conversion tracking onclick or when there's no separate 'Thank you' page

Trying to implement Facebook conversion tracking within a Facebook Tab. You can view the page here http://www.facebook.com/StChristophersFellowship/app_366591783429546 the issue is a separate page is not run once the form has been submitted. Can I make a section of javascript run but ONLY onclick of the submit button, I think it also has the be injected into the head of the HTML doc.
I found this answer to running Javascript from a link or click - Will this method work if I call the tracking/conversion code from a separate JS doc?
Any help would be greatly appreciated - Thanks!
"I have to agree with the comments above, that you can't call a file, but you could load a JS file like this, I'm unsure if it answers your question but it may help... oh and I've used a link instead of a button in my example...
<a href='linkhref.html' id='mylink'>click me</a>
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "Public/Scripts/filename.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>"

I tried using Nicolás solution but the conversion was never verified.
However I found an article (archived version) describing a technique that worked instantly, using the URL from <noscript><img src="..." /></noscript>.
Place an element on your page like:
<div id="fb_pixel"></div>
Then declare these CSS rules for your conversions, changing the background-image for the <noscript> URL found in your own tracking code.
#fb_pixel { display:none; }
.fb_conversion
{
background-image: url('https://www.facebook.com/offsite_event.php?id=33333333333&value=0&currency=USD');
}
When you want the tracking to occur (e.g. upon AJAX form submission), you add the fb_conversion class to the <div> using JavaScript. For instance, with jQuery:
$("#fb_pixel").addClass("fb_conversion");
This will make the browser load the image, thus tracking your conversion.

I had a similar issue, I solved it putting the AJAX call on the tacking callback. As follows:
$(function () {
$('#btnSend').click(facebookTrackingSendClick);
});
function facebookTrackingSendClick(e) {
e.preventDefault();
var clickedElement = this;
var fb_param = {};
fb_param.pixel_id = '123';
fb_param.value = '0.00';
fb_param.currency = 'BRL';
(function () {
var fpw = document.createElement('script');
fpw.async = true;
fpw.src = '//connect.facebook.net/en_US/fp.js';
fpw.onload = function () {
// Callback here.
};
var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(fpw, ref);
})();
}

How to get text inside span, and use it into other script

let say..
<span id="Singer">Bieber</span>
I know by using DOM I can duplicate 'Bieber' to anywhere..
<script>
x=document.getElementById("Singer");document.write("<span>" + x.innerHTML + "</span>");</script>
..but id doesn't seems working when I want to insert the DOM script into the script below. Is there any way to put 'Bieber' into the script below?
<script language=JavaScript src="http://lyricfind.rotator.hadj7.adjuggler.net/servlet/ajrotator/275968/0/vj?z=lyricfind&dim=35518&click=&kw=<I WANT TO PUT BIEBER HERE>"></script>

The problem you have is the browser will be firing off the request for the script before it is able to access the span element. It could be done by dynamically inserting the script tag after the span is read:
window.onload = function(){
var x = document.getElementById("Singer");
var s = document.createElement("script");
s.src = "http://lyricfind.rotator.hadj7.adjuggler.net/servlet/ajrotator/275968/0/vj?z=lyricfind&dim=35518&click=&kw=" + encodeURIComponent(x.innerHTML);
s.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(s);
};
This assumes your page has a <head> section. If not, you could append to the body instead.

javascript site welcome loader with an HTML5 element

I have an odd problem. the question is not so much about specifics of the code, more to the general approach.
scenario: a website has a "welcome screen". The welcome element is an HTML5 EDGE animation (its not a small file ;) ) Using client side detection, we will check if cookies are enabled. if cookies are enabled, we check for a cookie['loader_shown']. if we dont see this cookie, we want to use JS to show a full screen overlay div half opaque. inside this div, we then want to use AJAX to load in the loading element html - at the moment this is defined in a seperate file, and of course refences other files in the EDGE file package...
Any suggestions on how best to approach this. it is important the HTML5 EDGE element is only loaded from the server once the welcome detection has oipened the first overlay div....
oh, the EDGE element must remain transparent!

solved. the best approach is to dynamically load the js files once the cookies have been checked:
sources in comments
<!DOCTYPE HTML>
<html lang="en">
<head>
<script type="text/javascript">
var cookiesEnabled = are_cookies_enabled();
function are_cookies_enabled() // http://sveinbjorn.org/cookiecheck
{
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if (typeof navigator.cookieEnabled == "undefined" && !cookieEnabled)
{
document.cookie="testcookie";
cookieEnabled = (document.cookie.indexOf("testcookie") != -1) ? true : false;
}
return (cookieEnabled);
}
// http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
if(cookiesEnabled == true)
{
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.charset = 'utf-8';
//newScript.onload=scriptLoaded; // If you're loading an external javascript and you need to know when the script has loaded you can simply use .onload=yourfunction; to set up the onload handler. Here's an example.
newScript.src = '_loader/head3_C_213_no_preloader_edgePreload.js';
headID.appendChild(newScript);
}
</script>
<style>
.edgeLoad-EDGE-614773 {
display:none;
}
</style>
</head>
<body style="margin:0;padding:0;">
<h1>test</h1>
<div id="Stage" class="EDGE-614773">
</div>
</body>
</html>
never really thought about JS loading itself from script like that...... Oh the possibilities!