1

I'm working for displaying the clock in the logo. it must display the current time.

I had modified logo.phtml and put the js for clock in pub/static/fronend/theme/js folder. All are went well.

And I had declare the js files on app/design/front_end/theme/Magento_theme/layout/default_head_blocks.xml

while seeing the output al my js files are automatically merged in a single js file in dynamic so, my clock logo is failed to load and also an error in required.js

How can i avoid automatic merge of js files in dynamic ?

my js code is below,

var hands = [];
hands.push(document.querySelector('#secondhand > *'));
hands.push(document.querySelector('#minutehand > *'));
hands.push(document.querySelector('#hourhand > *'));

var cx = 100;
var cy = 100;

function shifter(val) {
 return [val, cx, cy].join(' ');
}

var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));
5
  • anyone answer my question.. :{
    – Ask Xah
    May 1, 2018 at 9:45
  • 1
    In magneto, you can easily add any third party javascript, But you need to follow certain steps to add third-party javascript. magento.stackexchange.com/questions/76921/… check this thread it might help you. May 1, 2018 at 12:05
  • 1
    inchoo.net/magento-2/… another one good post which you can read-learn and implement to your module :) May 1, 2018 at 12:06
  • Adding JS in other that requirejs, you will have many problems ! please post your code and what you did ?
    – PЯINCƎ
    May 1, 2018 at 13:47
  • @Prince i had added my js code.. i want to initialize this on startup of magento..
    – Ask Xah
    May 1, 2018 at 13:53

1 Answer 1

3

Add your js code in theme via Requirejs like this: clockjs.js = your clock js

app/design/{Vendor}/{theme}/requirejs-config.js

var config = {
    map: {
        '*': {
            clock: 'Vendor_theme/js/clockjs'
        }
    }
};

app/code/{Vendor}/{theme}/web/js/clockjs.js

define(['jquery'], function($){
   "use strict";
       return function clock()
       {
           alert('hello clock);
           //put all your js clock code
       }
});

app/code/{Vendor}/{theme}/Magento_Theme/templates/{logofile}.phtml

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

Info: don't forget to :

  • clean the cache

  • clean var/view_preprocessed content

  • clean pub/static content

  • deploy the static content = php bin/magento setup:static-content:deploy -f

2
  • thank you.. it works.. i need one clarification.. my store has a multi language views is it necessary to add manually the js file to all lang folder in pub folder?
    – Ask Xah
    May 2, 2018 at 8:38
  • No, you don't need this, this is done automatically when you deploy the static contents. You're welcome
    – PЯINCƎ
    May 2, 2018 at 8:56

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.