Where i can call common js into boost theme moodle 3.5

Where i can call common js into boost theme moodle 3.5

by Mark Brand -
Number of replies: 15

Hello Friends,

Where i can call common javascript into boost theme moodle 3.5. Please help me.


Thank you

Advance.


Average of ratings: -
In reply to Mark Brand

Re: Where i can call common js into boost theme moodle 3.5

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi

This would depend on what you mean by 'common js'?

If you mean a javascript file, then you can add that to any theme.

First make a directory called javascript in your chosen theme and put your JS file in it.

Then add the following to the theme's config.php

$THEME->javascript_footer = array('myjavascript')[

Here is an example...notice the javascript directory?

https://github.com/lazydaisy/tiny-bootstrap-project

https://github.com/lazydaisy/tiny-bootstrap-project/blob/master/config.php#L155

That should work OK...

However it is not advisable to change Moodle default themes.

Mary

In reply to Mary Evans

Re: Where i can call common js into boost theme moodle 3.5

by Mark Brand -

Hello Mary,

Thank you for your reply.

I have tried to add js(javascript) file as per your instraction into my new theme/ copy of my boost theme 3.5 but it is not working . see below code in config.php

$THEME->javascript_footer = array('jquery.min','responsiveslides.min','custom');

this process was worked for clean theme but now in boost theme it is not working. Please any help.

When i add these files into frontpage.php file like below it is working but got error in console

$PAGE->requires->js('/theme/mytheme/javascript/jquery.min.js');

$PAGE->requires->js('/theme/mytheme/javascript/responsiveslides.min.js');

$PAGE->requires->js('/theme/mytheme/javascript/custom.js');


Thank You

Advance.


In reply to Mark Brand

Re: Where i can call common js into boost theme moodle 3.5

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Mark,

First of all you do not need to call those JS files as they are added automatically into the footer of your Moodle site. That is why you added those file names to your theme's config.php.

That said, if the files you added are Bootstrap 2.3 related then the reason they do not work in a child theme of Boost is because Boost 3.5 uses Bootsrap 4. and already has that versions js files. Also Moodle carries a copy of JQuery https://github.com/moodle/moodle/tree/master/lib/jquery.

Tyr removing the jquery and the responsiveslides from the config.php settings and just leave the custom one.

Remove all those $PAGE->requires calls from of the frontpage too. Then test to see it that works.

Hope this helps?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Where i can call common js into boost theme moodle 3.5

by Mark Brand -

Thank you so much Mary. 

Now bootstrap 4 slider is working in my theme. But when i add custom.js into config.php file, it is not working into my theme.

$THEME->javascript_footer = array('custom');

please find attached file custom.js


Thank you again Mary. You are very helpful.



In reply to Mark Brand

Re: Where i can call common js into boost theme moodle 3.5

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

OK...

Try changing it to this...

require(['core/first'], function() {
    require(['jquery', 'theme_boost/bootstrap', 'core/log'],
    function($, bootstrap, log) {
        log.debug('Theme JavaScript initialised');
        $(document).ready(function(){
            $('.carousel').carousel({
                interval: 2000
            });
        });
    });
});

It is something that Gareth Bernard figured out for the BootstrapBase child themes. So may work with Boost so I have made changes to update it so it refers to Boost theme.

If it fails then try reading this page...it may help you!

https://www.w3schools.com/bootstrap4/bootstrap_ref_js_carousel.asp

In reply to Mary Evans

Re: Where i can call common js into boost theme moodle 3.5

by Mark Brand -
Thank you Mary for your reply.

Still it is not working. Actually i think there is no enough documentation about boost theme. I mean about how to add common javascript into theme, and many more. So it is very difficult to use this theme.


Thank you again.

In reply to Mark Brand

Re: Where i can call common js into boost theme moodle 3.5

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

The only way you can make changes is to make a theme of your own then you are responsible for it. To do this you need to understand how to use PHP, jQuery, JavaScript, and Mustache.

At the moment I am struggling with Boost theme myself, so I am not the best person to ask. That said, have you thought about creating your own theme based on Boost?

https://docs.moodle.org/dev/Creating_a_theme_based_on_boost

That link is one of the best to learn about Boost as you build it.

There are lots of other tutorials about jQuery and Javascript too.

https://docs.moodle.org/dev/Javascript_FAQ

Hope this helps?

Mary

In reply to Mary Evans

Re: Where i can call common js into boost theme moodle 3.5

by Mark Brand -

Hello Mary,

Yes, i create a new theme based on Boost theme. But the problem is that when i try to add a custom javascript file, browser shows error, and file not working into theme. and here(https://docs.moodle.org/dev/Creating_a_theme_based_on_boost) is no guidline for how to add custom/common javascript into theme which is based on boost theme.


i create a folder into theme folder name javascript and put custom.js file

also, I add below line into config.php

$THEME->javascripts_footer = array('custom');


But it is not working.


Thank you Mary for your help.


Attachment 2018-06-15 11_33_23-Moodle35.png
In reply to Mark Brand

Re: Where i can call common js into boost theme moodle 3.5

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

'theme_campus'?  Ok, given the name and the font above that in the stack trace, are you trying to make the Campus theme work on M3.5?  I thought you said it was your custom theme?  Or am I wrong?  Is all the source code public?

In reply to Gareth J Barnard

Re: Where i can call common js into boost theme moodle 3.5

by Mark Brand -

Hello Gareth,

Yes, it is my custom theme. not the plugin theme campus. source code are not public. This theme is the child theme of boost theme like " photo". Actually i am trying to add some feature into this theme like slider and some other custom feature. But no idea about how to add custom/common js file into this theme.



Thank you advance.

In reply to Mark Brand

Re: Where i can call common js into boost theme moodle 3.5

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mark,

I'm now confused as this https://moodle.org/mod/forum/discuss.php?d=371369#p1500243 describes the problem you are having and yet the screen shot showing the problem is of the Campus theme and not your theme.

Gareth

In reply to Gareth J Barnard

Re: Where i can call common js into boost theme moodle 3.5

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Is this a Copyright Issue?

https://github.com/moodleuulm/moodle-theme_boost_campus

I found link to it HERE

Amazing what can crop up when you least expect it!

Mary

In reply to Mary Evans

Re: Where i can call common js into boost theme moodle 3.5

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Wrong theme Mary.

In reply to Gareth J Barnard

Re: Where i can call common js into boost theme moodle 3.5

by Mark Brand -

Hello Gareth and Mary,

I have copied boost theme and  change the name of the theme "Boost" to "Campus". My moodle version is 3.5. This is not moodle free theme or free moodle plugin "https://moodle.org/plugins/theme_campus" and "https://moodle.org/plugins/theme_boost_campus". I think now all confusion are cleared. It is created by me only. Only naming confusion.

Anyway, my issue is resolved. Now common/custom javascript working fine.


Thank You Gareth and Mary for your help.

In reply to Mark Brand

Re: Where i can call common js into boost theme moodle 3.5

by Andrew Grossmann -

Hi Mark. I am running into the same issue with the Boost theme adding a custom JS file. Can you share how you resolved this?