Where to save custom javascript code

sage
1

Just want to know where exactly I can save my custom javascript to hide and show some elements of the page?

thanks

2
3

Sorry I am little confuse
will I add that on assets/scripts/ ?

what about jquery function?

4

pls.help where exactly I can add the custom jquery

$(“p”).hover(function(){
$(this).css(“background-color”, “yellow”);
}, function(){
$(this).css(“background-color”, “pink”);
});

5

Assuming you’re using sage 8 the main.js is setup with dom based routing,

so if you want that function to fire on all pages ‘common’ you’d want something like:

// All pages
    'common': {
      init: function() {
        // JavaScript to be fired on all pages
        $("p").hover(function(){
          $(this).css("background-color", "yellow");
        }, function(){
          $(this).css("background-color", "pink");
        });
      },
      finalize: function() {
        // JavaScript to be fired on all pages, after page specific JS is fired
      }

for page specific stuff you can use the page specific section of the file - which is quite well commented.

6

thank you will try it out

7

the sample you provide work

thank you

8

Can I piggyback off this one @chrisk2020:

What if my javascript functions are quite large / complicated? I have a 600 line main.js file at the moment and I’d REALLY love to split it up over separate files…

Even when I try to do go into /lib/setup.php and do:

wp_enqueue_script('sage/js', Assets\asset_path('scripts/tracker-setup.js'), ['jquery']);

This doesn’t work though, even though I’m putting the files into my manifest.json like:

"tracker-setup.js": {
      "files": [
        "scripts/tracker-setup.js"
      ]
    }

Any ideas on what I’m doing wrong here?

9

@jascination considering its been a year since the previous post, you’d be better served making this a new topic.