Hey All,
I wanted to share here a tip for those who may not yet be aware of them to look into the regClient helpers/commands. Since discovering these tools several years ago, I have found them invaluable for developing truly drop-in, complex and modular projects into my sites, often with a SINGLE chunk doing all the heavy lifting.
Make sure you get the regClientHelpers xtra to make all this easy:
https://extras.modx.com/package/regclienthelpers
This extra will give you access to these already built in functions in MODX via a collection of snippets
- regClientScript
- regClientStartupScript
- regClientCSS
- regClientHTMLBlock
- regClientStartupHTMLBlock
Example use case:
Let’s say you’ve developed a Bootstrap modal form you want to include on a page, but you have a bunch of head css and scripts that are required, as well as a couple scripts needed to be added to the end of your page, before the body closes. This is your answer to all of this via ONE easy chunk.
First of all, in your chunk, you can include your HEAD code a couple of ways:
regClientStartupScript & regClientCSS
Both of these will put a properly formatted script into the head section of your page, with a single parameter, which is the path/URL to your file.
Examples:
[[regClientStartupScript? &f=`assets/javascript/script.js`]]
[[regClientStartupScript? &f=`http://code.jquery.com/jquery-latest.min.js`]]
[[regClientCSS? &f=`https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css`]]`
The above examples will also only insert the code if it has not yet been previously registered, so you do not need to worry about duplicate calls. This is what the above would have inserted into the head:
<script src="assets/javascript/script.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" type="text/css" />
You can also accomlish pretty much the same thing, using regClientStartupHTMLBlock but having complete control over the code insertion. To accomplish exactly the same output as above in such a way you would do the following:
[[!regClientStartupHTMLBlock? &html=`<script src="assets/javascript/script.js"></script>`]]
[[!regClientStartupHTMLBlock? &html=`<script src="http://code.jquery.com/jquery-latest.min.js"></script>`]]
[[!regClientStartupHTMLBlock? &html=`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" type="text/css" />`]]
Or, all in one call like this:
[[!regClientStartupHTMLBlock? &html=`<script src="assets/javascript/script.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" type="text/css" />`]]
LOTS of flexibility
Next in this process you might want the actual button that launches your bootsrap modal. And you want this button to appear at the place on the page you put your chunk call, so it would be this:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
Next step is to insert the bootstrap modal code. I have found that putting these at the very end of the page before the body has been ideal for not messing up DOM flow, so this is an example for accomplishing that using regClientHTMLBlock:
[[!regClientHTMLBlock? &html=`<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>`]]
Finally, finish off your chunk by injecting closing body scripts you need using either regClientHTMLBlock or regClientScript. These work exactly the same as the startup script options in the first step above, but… you guessed it… the code gets injected BEFORE the closing body tag instead of in the head section:
[[!regClientHTMLBlock? &html=`<script src="https://cdnjs.cloudflare.com/ajax/libs/css-animations.js/0.1.0/css-animations.min.js" integrity="sha512-ccBegvp9O+Mwr3jQ2hYRmsWLKxUY02rZBSE+3x7EcLHO3HPC6/ROBMSVfpivfIk7M0NCO6SVeJTNNcK/8GLZ4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>`]]
[[!regClientScript? &f=`https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js`]]
So in summary, with all these calls in a SINGLE chunk you can get some extremely manageable and complex application functionality.
I hope I’m not preaching to the choir with these - I just see them referenced so little and they are almost daily tools I use in my MODX projects
