2

I have some script code in my phtml like below.

path - Company/Module/view/templates/test.phtml

<script type="text/javascript">

var color = null;
var framecolor = null;

function Calculation(){

//frame color calculation
color = document.getElementById('color').value;

    if(color=="White"){
        framecolor = (0 * circumeference);
        document.getElementById("framecolor").innerHTML = "FrameColor Price : " + framecolor;
    }
    else if(color=="Red"){
        framecolor = (4 * circumeference);
        document.getElementById("framecolor").innerHTML = "FrameColor Price : " + framecolor;
    }
    else if(color=="Green"){
        framecolor = (8 * circumeference);
        document.getElementById("framecolor").innerHTML = "FrameColor Price : " + framecolor;
    }
    else if(color=="Black"){
        framecolor = (12 * circumeference);
        document.getElementById("framecolor").innerHTML = "FrameColor Price : " + framecolor;
    }
    else if(color=="Wood limitation"){
        framecolor = (18 * circumeference);
        document.getElementById("framecolor").innerHTML = "FrameColor Price : " + framecolor;
    }
}

How can I add this script code as a js file

4 Answers 4

4

Step 1 : Move your file in Company/Module/view/frontend/web/js/some_name.js

Step 2 : Add your file in layout like module_index_index.xml

<head>
    <script src="Companu_Module::js/some_name.js"/>
</head>

Step 3 : Execute Command php bin/magento setup:static-content:deploy

Then give permission if required.

Now , refresh your page.

2
  • 1
    Why is this better than the other solutions?
    – Wouter
    Jul 10, 2019 at 14:23
  • By add in layout, when you merge minify js then, this js file merge with main js file. So, it's better standard and it's call in this page only so. Jul 10, 2019 at 17:34
5

Step 1: Move your JS code into Company/Module/view/frontend/web/js/test.js

Step 2: Create requirejs-config.js file in Company/Module/view/frontend/ with content:

var config = {
    map: {
        '*': {
            testjs:     'Company_Module/js/test'
        }
    }
};

Step 3: add this at the end of your template file where you want this JS to be called

<script type="text/x-magento-init">
    {
        "*": {
            "Company_Module/js/test": {}
        }
    }

</script>
2

Step 1: Move your JS code into Company/Module/view/frontend/web/js/some_name.js

Step 2: Create requirejs-config.js in Company/Module/view/frontend/ with content like this

var config = {
    paths: {
        "someName":           "js/some_name"
    }
}

Step 3: Inside your template file, where you put your previous javascript code, add this

<script type="text/javascript">
    require(['someName'], function () {});
</script>

Step 4: You can use Calculation() from now inside any template of the current module. (Obviously you need to require() it first in template).

4
  • I tried as u said but not working
    – Hemal
    Aug 31, 2017 at 4:32
  • You need to clear static content or switched to developer on your local. Aug 31, 2017 at 5:07
  • im in developer mode but its not working I cant even display a simple alert
    – Hemal
    Aug 31, 2017 at 5:09
  • @ToanNguyen, getting require is not defined error in console Oct 6, 2020 at 8:22
0

you can used jquery like this

$m=jQuery.noConflict();

$m('#color').val();
1
  • can u explain more im new to these stuff
    – Hemal
    Aug 31, 2017 at 6:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.