AddStuff

How to install and how to use

Installation: 

Please read the dedicated tutorial on https://academy.jahia.com/training-kb/tutorials/administrators/installing-a-module and select the AddStuff module from the store.

Usage:

The idea of this module is to allow any editor to inject some code in the HEAD or the BODY part of a page, without doing anything to your template set or any existing modules. As an example, you can add a JavaScript snippet on the bottom of the BODY, or some CSS inline style in the HEAD section.

There is 4 different placeholders to inject your code:

• Top of the HEAD
• End of the HEAD
• Top of the BODY
• End of the BODY

In term of HTML, here are the different placeholders:

<!doctype html>
<html lang="en">
  <head>
    <!-- Top of the HEAD -->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, world!</title>

    <!-- Some CSS or JavaScript comming from the template:addResource tag -->
    <link href="/modules/anyModule/css/mystyle.css" rel="stylesheet">
    <script src="/modules/anyModule/jacasvript/my.js"></script>

    <!-- End of the HEAD -->
  </head>
  <body>
     <!-- Top of the BODY -->
     <h1>Hello, world!</h1>
     <p>Some content here...</p>

     
     <!-- End of the BODY -->
  </body>
</html>

You can do it using two different ways, the global (site) way or the single page way.

The global (site) way

You will choose the global way if you need to inject some code on all pages of your site.

On Edit mode, on the left panel, you need to right-click on your site node and choose the edit action.

Then, under the option part, you will need to enable the Add stuff in your HTML code (only for preview/live mode). Once it’s done, you will see the 4 placeholders.

You can insert your code in the chosen part, then save it.

As the site node is an auto-published node, you don’t need to start a public workflow.

The page way

If you need to inject some code only on a single page, you can edit your page node from the left panel and enable the Add stuff in your HTML code (only for preview/live mode) in the option part. Once it’s done, you will see the 4 placeholders. You can insert your code in the chosen part, then save it.

On the page way, you can preview this page to see the result (the code is only injected in preview or live mode), and you will need to start a publication workflow to view the result in live mode.

I have deployed my module on my site, but I still can't view where I can add HTML
Right-click on the site node and update the site. Under the "Options" tab you will see a checkbox that allows adding stuff to your HTML code.

I did enter some HTML in the BODY part but I can't see the code in my page
This module only works for for live and preview mode.
 

.header {
    background-color: #e9e9e9;
    padding: 10px; 
}

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-123456');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-123456"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->