Сreate a module including html + JS + CS

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
Post Reply
krog_net
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Nov 28, 2021 7:58 am

Сreate a module including html + JS + CS

Post by krog_net » Sun Nov 28, 2021 8:41 am

Hey
Can't find a practical solution - how to create a module including html + JS + CSS. There are theoretical descriptions - but no practical example. Where can I find information on this issue - help me.

User avatar
ceford
Joomla! Explorer
Joomla! Explorer
Posts: 419
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Сreate a module including html + JS + CS

Post by ceford » Sun Nov 28, 2021 9:20 am

The Joomla 4 Tutorials page contains some working module examples:

https://docs.joomla.org/JDOC:Joomla_4_Tutorials_Project

but none cover adding css or js. The former is not often needed because you can add some css with the module options and with the template user.css style sheet. And js in a module is a specialist need. You could look at the code for an existing module, for example mod_banners, to figure out what to do.

What is your use case for javascript in a module?

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 313
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: Сreate a module including html + JS + CS

Post by ghazal » Sun Nov 28, 2021 10:21 am

@ceford
why don't you mention your own module:
https://github.com/ceford/j4xdemos-mod-custom-bscompos

which is a good model to show how to add JS in a specific context, ie with Bootstrap.

I wouldn't do it your way, but it is a good way anyhow.
A little tuto in the readme would be useful though.

krog_net
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Nov 28, 2021 7:58 am

Re: Сreate a module including html + JS + CS

Post by krog_net » Sun Nov 28, 2021 5:53 pm

Thanks for the feedback, but the reviews and links received do not answer my question.
I have a working site on Joomla 3 (http://www.utsks.com/raschety.html) - where there are several
modules with scripts (implemented via the Sourserer plugin). I want to move the site to Joomla 4.
Joomla 4 adds the css and JS code via Assets.
I am interested in a practical step-by-step implementation of creating such a module in the form of Assets.
Sourserer plugin for Joomlu 4 - I found it on the developer's website and applied it successfully,
but I couldn't find a solution through Assets.

User avatar
ceford
Joomla! Explorer
Joomla! Explorer
Posts: 419
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Сreate a module including html + JS + CS

Post by ceford » Sun Nov 28, 2021 6:46 pm

Go to the Joomla 4 Tutorials page and follow the Web Assets link. A number of the admin and site modules use the web asset manager. The call to load the asset is usually in the template file: default.php or edit.php or .... You need to create a joomla.asset.json file in your media folder. See examples in mod_banners or mod_menu. I don't think we have a specific example of a module using web assets but the principle is the same is for components.

ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 313
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: Сreate a module including html + JS + CS

Post by ghazal » Mon Nov 29, 2021 10:18 am

I made a very basic tutorial on how to include js and css via webassets or HTMLHelper::_

React/JS App with joomla 4.x - Joomla! Forum - community, help and support
viewtopic.php?f=808&t=988958&p=3641358#p3641358

Any question ? Just ask.

krog_net
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Nov 28, 2021 7:58 am

Re: Сreate a module including html + JS + CS

Post by krog_net » Mon Nov 29, 2021 8:25 pm

Thanks everyone for the answers. But just after reading https://docs.joomla.org/J4.x:Web_Assets
I turned to the forum for advice - because I did not understand the very essence of where to start. By the way, joomla.asset.json is in the root of the Casiopea template - but not in the media. Apparently, there is no answer to my question yet, or I still don’t have enough experience to understand this.


Post Reply

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