Where the global JS variable should be declared in Prestashop 1.6, so every .tpl would have access to it?
global.js doesn't make it.
And the code like this, placed in .tpl:
<script type="text/javascript">
// <![CDATA[
var test = "test";
//]]>
</script>
works for the exact .tpl only
Try this (in Hook methods like hookDisplayHeader or in your front controllers):
Media::addJsDef([
'Modal' => true,
'AjaxNum' => 5
]);
In other case, you can put your js files in "themes\YOUR-THEME\js\autoload" directory. This only affects the front office
Related
Currently I have my Django project set up so that the JS variables that depend on template variables are first defined under a script tag in the HTML template. Then, when the template runs, the JS variable gets created and added to the Javascript context, causing other external JS scripts to be able to use said variable without declaring it anywhere.
Html template:
<body>
content
</body>
<script>
const var = "{{ my_template_var }}";
</script>
<script type="module" src="{% url 'app_name/index.js' %}"></script>
JS Script (app_name/index.js)
console.log(var) // Prints value of "my_template_var" in the form of a string
However, I dont like the fact that the var variable in the JS script just "magically" has the value defined in the template when it runs (there's no actual statement saying const var = something). Is there any way that I can include a declaration in my JS file (not a comment) so that its a bit clearer to the rest of the developers from where the variable is coming from?
(NOTE: I'm mainly doing this as well because when using Typescript, those variables appear as undefined, even though they are receiving a value from somewhere)
The best way that I found I could do this is by using the declare statement on the Typescript file. So variables that received their value from another script tag:
<!-- Index.html -->
<script>
variable = 5
</script>
<script type="text/javascript" src="script.js"></script>
I can just do:
// script.ts that compiles into script.js
declare const variable: type;
I have a EE template in which I use a EE global variable {global_var}.
In the same template I have a js script.
//opening js script tag
{global_var}
//closing js script tag
Inside this script I can read and use {global_var}.
But if I move the script code to a JS template and reference to it like this
<script type="text/javascript" src='{path="js/contact_form"}'></script>
the {global_var} is no more available, why?
More info: {global_var} is a user defined variable that I added to index.php
$assign_to_config['global_vars'] = array(
"base_url" => "http://www.example.com/",
"global_var" => "hello"
);
Is there a way to read EE global variables in the referenced js file?
Try to add quotation mark to the global variable when you're outputting it to the Js.
"{global_var}"
Another reason why it may not work can be either:
The variable doesn't exist in the the DB So you might need to use syncSnippert to synchronize between the two.
The template for the variable doesn't exist so you might need to create it.
I have an MVC 4 project that utilizes javascript bundling.
In my _Layout.cshtml page I have something like this:
#Scripts.Render("~/bundles/scripts/desktop/modernizr",
"~/bundles/scripts/desktop/jquery","~/bundles/scripts/desktop/jqueryui",
"~/bundles/scripts/desktop/jqueryvalidation", "~/bundles/scripts/custom")
There are others, but this is just an example. Within one of my scripts that's called in the custom script I need to reference a global variable that set within the ready function, as shown below:
<script type="text/javascript">
$(function () {
//alert('Page is ready!');
var warning = 10;
var timeout = 20; }); </script>
Problem is, I always seem to get an error within the method that requires the warning and timeout variables. Am I missing something obvious (not to me, though!) on how I should create these variables? Should I var them outside the $Ready, because the js is loading before the page is technically ready?
Where should the global variable go, if everything is already in a render bundle and there are no script blocks?
Thanks!
The warning and timeout variables aren't global. They've only been defined within the function that you provide to the $ function.
I'd generally recommend avoiding global variables where possible, but if you really want to create global variables just use this:
<script type="text/javascript">
var warning = 10;
var timeout = 20;
</script>
Or this:
<script type="text/javascript">
$(function () {
window.warning = 10;
window.timeout = 20;
});
</script>
Thanks for the response.
I don't think adding the variables in the Ready page will work. The functions that require these variables are loaded before the page is 'ready' (per my understanding how this all works), so there are situations on a new page load where the variable will be required but unreferenced.
This is how I'm currently handling it:
I created a new .js file, with the following:
var warning;
var timeout;
Then I created a bundle reference to the file and put it into my #Script.Render stmt in the correct order for scope. Now, I have my global variables, and it's cleanly implemented into my view code. Now, I know that I should be passing around variables vs. having them global, but in this case I don't see a major issue.
I have an app that uses HTML, and Coffeescript in the frontend. I recently made it possible to change the language thanks to i18next.
Now I have some buttons that change my window.userLang to the different languages, but the user has to refresh some elements of the app to see it translated.
My problem comes because I need the translations made without refreshing the HTML.
In the app, I use Craftyjs, so what I need to know is how can (if possible) from HTML file, call a function that it's defined in Craftyjs.
The function I want to call is: Crafty.scene("main").
Thanks all!
Create a global name space defined above where your scripts are included. Then in your javascript you can define the functions you need as fields on that namespace.
<script>
var MySweetWebApp = {};
</script>
<script src="..."></script>
... Inside JS file ....
MySweetWebApp.Crafty = { ... }
... From Anywhere ...
MySweetWebApp.Crafty.scene('main');
I have 2 .js files in the html document like this:
<script type="text/javascript" src="js/1.js"></script>
<script type="text/javascript" src="js/2.js"></script>
That document also have an iframe. I have 2 .js in the iframe aswell:
<script type="text/javascript" src="js/2.js"></script>
<script type="text/javascript" src="js/3.js"></script>
So 2.js is in both documents. My plan was to make that to connect them.
I can not put 3.js in both documents because it will mess up stuff.
1.js got a variable. I want to use that variable in 3.js. But i can't figure out how to pass a variable from 1.js to 3.js.
Is this even possible?
*The variable is declared in 1.js.
You can not "pass" variables through file references. You would need to add code to pass data from the parent frame to the iframe.
If the variable is global it is
//from the iframe
var theVariable = window.parent.yourVaraibleName;
//from the parent
var theVariable = document.getElementById("iframeId").contentWindow.yourVaraibleName;
Why not using jQuery cookies to pass the variables? Even within the multiple pages. Once you pass the variable you can destroy the cookie.
jus create a global variable, don't use var keyword
myGlobal = "probably not a good idea but still";
You cannot pass variables from one js file to the other
Javascript variables are stateless so they wont be retained.
If you are using .Net then you can make use of Session variables to solve this purpose.
If you use MVC you can go for viewbag or viewdata.
If its a must then declare some variable in the homepage, then assign the value to be passed to the variable in home page and then call the function in 3.js passing this parameter.