Output of scripts and styles for selected pages

General questions relating to Joomla! 4.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1415
Joined: Tue Jun 30, 2020 12:17 pm

Re: Output of scripts and styles for selected pages

Post by Pavel-ww » Mon Sep 18, 2023 4:23 pm

kosh2323 wrote:
Mon Sep 18, 2023 12:07 pm
For a template without jQuery, how will the code look like that it doesn't work for me.
Hi. Here is base. Change or add the code in accordance with your case and selectors. If you will can't figure it out, then just hire someone for this work or try ChatGPT, or use the very first way (a module in debug position). Since there were already enough examples above for your success with this. I do not know how to explain more clearly. At least the basic skills of HTML/CSS/JS are required to understand.

Code: Select all

// Check if there is more then 0 elements with class "my-slider"
if (document.querySelectorAll("my-slider").length > 0) {

  // Create a <link> element
  let link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "path/to/your/styles.css";

   // Create a <script> element
  let script = document.createElement("script");
  script.src = "path/to/your/script.js"; 

  // Append the <script> and <link> elements before closing body tag
  document.body.appendChild(link);
  document.body.appendChild(script);
}

kosh2323
Joomla! Intern
Joomla! Intern
Posts: 85
Joined: Mon Aug 22, 2022 3:01 pm

Re: Output of scripts and styles for selected pages

Post by kosh2323 » Tue Sep 19, 2023 6:24 am

Hi. Here is base. Change or add the code in accordance with your case and selectors. If you will can't figure it out, then just hire someone for this work or try ChatGPT, or use the very first way (a module in debug position). Since there were already enough examples above for your success with this. I do not know how to explain more clearly. At least the basic skills of HTML/CSS/JS are required to understand.
Hi, thanks for the reply. In order to understand that I have other connection paths in my template, I do not need ChatGPT, I also do not need to hire anyone, otherwise there would be no questions then. You can also search in this way through document.querySelector(".class"); before the first occurrence, which will be significantly faster. But the question is, is it right to connect it dynamically, if, for example, scripts and styles are large in size, will it slow down the rendering of the page, besides, if the user has script blocking enabled on mobile devices, what will happen? Is this the correct connection method?

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1415
Joined: Tue Jun 30, 2020 12:17 pm

Re: Output of scripts and styles for selected pages

Post by Pavel-ww » Tue Sep 19, 2023 7:40 am

kosh2323 wrote:
Tue Sep 19, 2023 6:24 am
But the question is, is it right to connect it dynamically, if, for example, scripts and styles are large in size, will it slow down the rendering of the page...
Why not, if you connect it at the bottom of the document? The browser reads scripts and styles from top to bottom. Only the first rendering of content for interaction is important.

If we care about performance and talk specifically about Swiper Slider, you should evaluate whether it really needs to be used in your case or you can do with lighter solutions. Swiper Slider weighs like the entire JQuery library. Personally, I would prefer to include jQuery in Cassiopea (child template) and use jQuery sliders like Slick or Owl, or even Bootstrap Carousel (requires a separate inclusion).
--
kosh2323 wrote:
Tue Sep 19, 2023 6:24 am
... besides, if the user has script blocking enabled on mobile devices, what will happen? Is this the correct connection method?
If the user turned it off, then not only your script will not work but all other scripts that will turn the site into chaos. Get sites in this form - the choice of the user. Therefore, you should not even think about such a scenario.

kosh2323
Joomla! Intern
Joomla! Intern
Posts: 85
Joined: Mon Aug 22, 2022 3:01 pm

Re: Output of scripts and styles for selected pages

Post by kosh2323 » Tue Sep 19, 2023 8:48 am

Yes, you're right, Swiper is a bit heavy, we need to try something else.

Aaronn78
I've been banned!
Posts: 1
Joined: Sat Sep 16, 2023 6:35 am

Re: Output of scripts and styles for selected pages

Post by Aaronn78 » Thu Sep 21, 2023 7:36 am

kosh2323 wrote:
Sun Sep 03, 2023 6:02 pm
There is such a question, how to connect scripts and styles to Joomla 4, in the <head> section only for those pages where they will be used? For example, there is an image gallery that is displayed on some pages, which can be connected only for selected pages. Maybe there is such a plugin, or you only need to manually register some routes? Please advise.
To selectively connect scripts and styles to specific pages in Joomla 4, you can utilize conditional statements in your template files. You can check the current page or component being displayed and conditionally load your resources based on that.[ redacted ]
Last edited by toivo on Thu Sep 21, 2023 8:54 am, edited 1 time in total.
Reason: mod note: spam URL removed

kosh2323
Joomla! Intern
Joomla! Intern
Posts: 85
Joined: Mon Aug 22, 2022 3:01 pm

Re: Output of scripts and styles for selected pages

Post by kosh2323 » Thu Sep 21, 2023 8:38 am

Aaronn78 wrote:
Thu Sep 21, 2023 7:36 am
To selectively connect scripts and styles to specific pages in Joomla 4, you can utilize conditional statements in your template files. You can check the current page or component being displayed and conditionally load your resources based on that.[ redacted ]
This is just understandable, if we were talking about a simple PHP, then we could prescribe if...else, but here Joomla, how it is processed there and where, where it is correct and how to prescribe, these are the questions.
Last edited by toivo on Thu Sep 21, 2023 8:54 am, edited 1 time in total.
Reason: mod note: spam URL removed


Post Reply

Return to “General Questions/New to Joomla! 4.x”