6

Say you have a js file in your module: MyModule/view/frontend/web/js/. How would you reference the image found in MyModule/view/frontend/web/images/?

A solution would be this one, but looks wrong and inserts global variables:

<script>
    window.imgpath = '<?php echo $block->getViewFileUrl('images/image.png') ?>';
</script>

and reading that variable from window in *.js:

function someFunction() {
    var imgPath = window.imgpath;
}

Update, using with widgets:

#template.phtml:
<script type="text/x-magento-init">
    {
        "*": {
            "mywidget": { 

                "marker_image": " <?php echo $block->getViewFileUrl('images/map_pin.png'); ?> "

            }
        }
    }
</script>

in my mywidget.js:

define([
    'jquery',
    'jquery/ui'
], function ($) {
    'use strict';
    $.widget('company.mywidget', {

    _create: function(){
        console.log(this.options.marker_image); //OUTPUTS THE RIGHT VALUE IN THE CONSOLE
        return this.options.marker_image; //THIS IS THE BIT THAT DOESN'T WORK
    },
   test_string: "this appears fine" //IF IT IS A STRING THEN IT IS FINE


});

return $.company.mywidget;

});

in my main js file where all comes together:

require([
        'jquery',
        'mywidget'
    ],
    function($,mywidget){  



    $(document).ready(function(){

        data = new mywidget();

        console.log(data) // returns an object where I cannot find my paramater, but test_string is there.

enter image description here

5

you can make your function as a jQuery UI widget and then call it from the template and sending the image url as a parameter.
For an idea on how to create a UI widget you can check how the configurable products widget is built and how it is called in the frontend with parameters
I know there are better examples but this is the first one I found that has parameters set on a template.
See my comments in the code to what means what.

<script type="text/x-magento-init">
    {
        "#product_addtocart_form": { //element to map the ui widget on, you can use 'body' if it's not element specific
            "configurable": { //widget name to initialize
                "spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>, //parameter
                "onlyMainImg": <?php /* @escapeNotVerified */ echo $block->getVar('change_only_base_image', 'Magento_ConfigurableProduct') ?: 'false'; ?> //parameter
            }
        }
    }
</script>
  • thanks for the answer. I think I am doing something wrong with Jquery widgets, because strings work fine, but if I try to use return the info is not there. I updated my question. – Claudiu Creanga Jul 6 '16 at 21:27
5

The "Magento 2" way to do this would be

  1. Initialize your script as a RequireJS module using the x-magento-init <script/> tag, using the * feature so its not bound to a DOM element as a Magento jQueryUI style widget

  2. Use PHP to dynamically generate the JSON object you'll pass into your script

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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