How to display a client-side javascript app in a WoltLab page

  • Hello,


    I've created a app/webpage that shows a slippy map of a game world for our gaming community.

    Now we want to limit access to that, and since we're already using woltlab it would be ideal if we could use the user permission system for that.

    This seemed like a simple way to solve our problem, but it seems there is no documentation for using javascript within the woltlab (the javascript link at https://docs.woltlab.com/ goes nowhere).


    Is there anyway to show a standalone page like this without exposing a link with which people can circumvent the login system?

  • I'm sorry but you'll never get real support here from the community because your account is not really flagged as "customer", like i am actually.


    I would suggest you to log in with the customer account and ask your question after :)

  • I don't have direct access to our customer account, but I can ask our admin to pop in if it is an issue.


    Anyway, without the documentation I've been poking around randomly a bit. I also got Core running on a local XAMPP install now which makes things easier.

    For now I've manually placed my javascript files in the wfc root, and try to load them with <script> in the template.


    This seems to break things in all kinds of interesting ways though:

    - I can't access jQuery from my script anymore, even though wfc already has it included.

    - I also get this error from WoltLabSuite.Core.min.js:

    Uncaught Error: Mismatched anonymous define() module: [object Object]


    I'm probably trying to do this in entirely the wrong way, but as I mentioned in my initial post I cannot find any documentation or examples on how to include your own javascript in a wfc page.

  • Jerodar is the one trying to get this working for me. I'm the admin on the site he is working on. As you can see I'm a Customer, so can you please help him, since I'm not able to help him personally.

    Gave Jerodar support access now as well. I didn't even know that was possible. So thanks for sharing that info!

  • For now I've manually placed my javascript files in the wfc root, and try to load them with <script> in the template.

    I would suggest that you create a new CMS page using the HTML-type (*) and include your script like this:

    HTML
    <script data-relocate="true" src="…"></script>
    <script data-relocate="true">
    $(function() {
    console.log("jQuery is ready.");
    });
    </script>

    The import part is the data-relocate="true" which is basically a marker for the output handler that moves your script-tag around. It will basically move them to the end of the body element, while preserving their order based on the original location. This step syncs the execution order with the other components of the software, so you won't run into conflicts anymore.


    (*) Or Template-type, if you plan to use template-scripting.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • Thanks, that did the trick for getting jQuery to work.


    Next I'm trying to get the css styles working. I can't seem to set a custom css for CMS pages, but I did manage to import it using a package.

    However the script tags in the .tpl I included do not work as they did in the CMS page. So now I have a CMS page with working javascript, and a package with working css, but not both. Of course the css gets applied to the CMS page so it kinda works that way, but that's a rather hacky way of solving this problem.


    So in short;

    Is there a way to include javascript in a package using AbstractPage or is there a way to define custom css for a CMS page?


    Another question; when I tried to find more about template-scripting I found that the template page in the documentation is empty as well, is there any place where I can find more information about templates so I don't have to bother you all every time?

  • The templates mostly use Smarty-like syntax. So if you look at smarty and the existing templates a bit, its not hard to figure out what goes where.

    "A life is like a garden. Perfect moments can be had, but not preserved, except in memory. LLAP" — Leonard Nimoy

  • I figured out why my <script> elements were not working in the template, apparently the data-relocate="true" attribute moves them to the footer template, which was not included in my own template. Adding the footer back in made it all work as a package.


    And thanks Netzwerg, I've been able to understand this a lot better by taking a look at how Smarty works.