bootstrap in bootscore and jquery

[kreincke]

Some of the bootstrap functions need jquery , but jquery is not (no longer) incorporated into the bootstrap-lib / packages. (https://getbootstrap.com/docs/4.2/getting-started/introduction/) From this I derive, that the theme developer has to integrate jquery for getting the complete bootstrap service.
Bootscore is the theme for bootstrap. I just tried to find the jquery lib itself in bootscore-main and grepped each file for a respective download command - without any success.
What is the position of bootscore: Is it the task of the bootscore.child developer to integrate jquery in his theme or did I overread something?

Many thanks for your work - again and again: It is very helpful to have a mother theme for which all the work is already done that one normally has to do by oneself if one wants to set up a bootstrap based wordpress instance.

KR

[justinkruit]

Hey Karsten,

I see you're looking at the 4.2 documentation of bootstrap. Bootscore is already up to 5.2 (https://getbootstrap.com/docs/5.2/getting-started/introduction/) which doesn't need jQuery anymore. But if you want to, we still load jQuery. It's provided by WordPress so that's why you can't find it in the bootScore files. On the line below in functions.php we say that jQuery is a dependency for theme.js and so WordPress makes sure it's loaded by default.

bootscore/functions.php

Line 269 in d18b916

wp_enqueue_script('bootscore-script', get_template_directory_uri() . '/js/theme.js', array('jquery'), $modificated_themeJs, true);

Just a heads-up from the jQuery that WordPress loads: it's always loaded in noConflict mode (jQuery docs), meaning that $ does not work directly and you need to call it using jQuery. To get around this you can call it like this:

bootscore/js/theme.js

Line 5 in d18b916

jQuery(function ($) {

[kreincke]

Thanks!! Got it.

[danielmrey]

Hi:

I am trying not to load jquery unless necessary.

It seems that bootscore/assets/js/theme.js triggers the jquery (2 files to load) but if I dequeue this file in my chid, jquery does not load in my current configuration, but I don't know if this code is needed.

So I was thinking that if we need this file bootscore/assets/js/theme.js mabe it could be written in vanilla js, is that possible to be added in the parent for the next version?

I just did a test in my child and dequeued bootscore/assets/js/theme.js and added its vanilla js code in child/assest/js/custom.js but still loads jquery. But then I removed jquery dependency like this:

wp_enqueue_script('custom-js', $child . '/assets/js/custom.js', array('jquery'), $modificated_CustomJS, true);

changed the array('jquery') to: array() and it worked!

Is this the correct way?... sorry currently learning Bootscore.

Thank you.

Daniel.

[crftwrk]

Hi Daniel,

jQuery is loaded by WordPress, not by us. So you need something like this to dequeue:

/**
 * Dequeue jQuery
 */
add_action('wp_enqueue_scripts', function () {

    if ( ! is_admin() ) {
        wp_deregister_script('jquery');
        wp_deregister_script('jquery-core');
        wp_deregister_script('jquery-migrate');

        wp_dequeue_script('jquery');
        wp_dequeue_script('jquery-core');
        wp_dequeue_script('jquery-migrate');
    }

}, 100);

However, this is dangerous because jQuery is used by so many plugins.

So I was thinking that if we need this file bootscore/assets/js/theme.js mabe it could be written in vanilla js, is that possible to be added in the parent for the next version?

We have this already here #565. But, while changing the theme.js into vanilla JS is an "easy" step, the WooCommerce parts are much more complicated:

• https://github.com/bootscore/bootscore/blob/main/woocommerce/js/ajax-cart.js
• https://github.com/bootscore/bootscore/blob/main/woocommerce/js/ajax-login.js
• https://github.com/bootscore/bootscore/blob/main/woocommerce/js/woocommerce.js

So, going the vanilla way, all this files must be translated, which is a hard job. There must be a person who is able and willing to do that and maintain this in the long-term. I am not think it's that worth because jQuery is easy to read and used by nearly all WP plugins/themes.

[danielmrey]

Hi:

Thank you for your reply.

Yes Wordpress loads jquery when this file is loaded, so my question is, what is this file for? Is it needed? Is there a place where I can see info about this file?: bootscore/assets/js/theme.js

If it is needed I already have vanilla js (is done by chatgpt tho) so I could place it in my child, is it here maybe a good place?: child/assest/js/custom.js

I wouldn't dequeue jquery as is maybe used for other plugins in the future.

Thank you.

Daniel.

[neralex]

1. Wordpress is loading jQuery including jQuery migrate by default. It doesn't matter if this file is enqueued in a child-theme, because jQuery is loaded much earlier than the themes.

2. You could just open the file, try a look inside and if all the code including the comments inside of it is not understandable for you, no worries - you could just do a very nice prompt for ChatGPT and I'm pretty sure you will get it well explained. But I will give you hand and provide this link for you, which you can hang on the prompt: https://github.com/bootscore/bootscore/blob/main/assets/js/theme.js - enjoy.

[danielmrey]

Wordpress does not load jquery by default in the front end unless a theme or a plugin enqueues it.

Bootscore enqueues assets/js/theme.js with a jquery dependency.

In my child I dequeue/deregister this file (and its jquery dependency) and I enqueue that file in vanilla js so jquery is not needed/loaded.

I am learning how Bootscore works.

[neralex]

This is what I meant. It doesn't matter if you are dequeue this file. When you are using a plugin, which is doing it on the same way, then you will have it back. As crftwrk pointed, vanilla js is hard to maintain on a long term and also mostly much more complicated to read. These are only some reasons why a lot of devs are still using jQuery for their plugins and addons and why someone build jQuery or other ones started TypeScript. It is just handy.

Anyway, a good starting point is the documentation: https://bootscore.me/documentation/theme/introduction/

[danielmrey]

You said that Wordpress loads jquery by default, which it doesn't, is loaded by themes and plugins.

If I have that file, I will have for sure jquery loaded but if I have it in vanilla js, jquery will be loaded or not depending on the plugins, for example in a simple website jquery will not be loaded.

My point it is to load jquery only when necessary but not always, so I will keep that file in vanilla js for now.

One of my main focus when I create my websites is performance speed.

As Bootstrap doesn't need jquery now, it would be good to make this file in vanilla js in the parent, is not a big file anyway so to make it vanilla js shouldn't be too difficult. Then if Woocommerce is used then leave the Woo files with jquery as Woo needs jquery anyway.

As I said, I am learning Bootscore, so thank you for helping me. I am also newish in GitHub so sorry if I do not use it correctly but I am a fast learner.

[neralex]

The features inside of the theme.js are just simple handy ones, which you can read in the comments. If you don't need them, just dequeue this file. Nothing will get broken. You will just miss some of them probably alter some time of using this theme but if not, all will be fine. As you mentioned before, you can solve it by your own with some prompts, if this is the way you will take and you are able to maintain it by your own, when you didn't get access to the AI.

I can remember, when the boostrap-crew was chosen this way and how hard it was to solve it. They did very nice job but since this big change, it became more and more complicated for just adjusting simple things. It results in extra jQuery hacks, which popped up to solve this unhandy issues because you will have at end with much more vanilla js code, which you wouldn't need with jQuery, with all the knowlegde about how much it costs for sideloading it. So yeah...

Today we have so powerful webservers and client-devices. On the other way I'm noticing these days so much JS-overloaded websites, which are side-loading not only one framework like jQuery on the same document. Yeah in a perfect world, you could do everytime improvements about the performance and this should be everytime a big point on the roadmap of each project but at the end you have to deliver to your clients but how you will tell them, you needed the double amount of time to provide the perfect-world-code, which is doing nothing better, doesn't run noticable faster but you have all in vanilla js... Anyway - this story is endless, vanialla JS is still unhandy since the beginning and hopefully it will popup a real alternative solution to get rid of extra frameworks.