Including HTML/JS Page into Kirby CMS

Kirby 3 Solved ✅
1

Hey there, I am new to Kirby and try to include a complete HTML/JS Application into a existing Kirby CMS.

In Detail I want to include this: http://www.mat-o-wahl.de/ tool into the CMS.
It’s written as an HTML5 Bootstrap Page with classic Javascript and some Data stored in .csv Files.
Now I wanted to include it into a Kirby snippet and tried it via the php-‘include’ and directly while I tried different places for the files (in the directories: snippets/site, assets and plugins).

With the include it worked but all the dependencies within the tool had to be rewritten as php instead of html and the url() function for the referencing, the major problem are the JS scripts where I cannot use url() - there I tried to solve it via window.location.host … but I did not work.

I already saw this: Display content from HTML file on a page?
but this somehow only works for single .html files without dependencies.

I also tried to do it with an iFrame and the files-located out of the kirby structure (into the root directory), but had no luck either.

I there something I am missing out? Any Hints are Welcome!
Thanks in Advance

2

If you create a template containing the HTML of your current tool, then kirby should just display that (you should doublecheck the paths of includes such as images, js & css files though).

3

Thanks for the quick reply - this is essentially what I’ve already done the only difference was that the html was covered in a snippet. The behaviour is the same when dealing with include - the dependency links and the JS Files which use AJAX to load the .csv files are the major pain point.

Hoped there is a solution to this if one just keeps it away from kirbys internal routing.

4

What exactly do you want to achieve.

You could just put the complete folder into your Kirby project root and link to it from Kirby or probably use a route?

5

I just want to display an existing html/JS page within the Kirby CMS.

You could just put the complete folder into your Kirby project root and link to it from Kirby?

That’s exactly what I planned to do - how can I do this?

6

If you put the folder into the Kirby root folder and then use a route like this…

  'routes' => [
        [
            'pattern' => 'mat-o-wahl', ## assuming you called the folder "mat-of-wahl, otherwise adapt
            'action'  => function() {
                return go(url().'/mat-o-wahl/index.html');
            }
        ],
  ]

…that installation should then work independently.

Then put a link into your navigation and you should be good to go.

7

Thank you so much - I think this goes into the right direction.
I have two questions left:

  1. where do I defines this I have a config in the kirby folder and panel/app/config but there the routes have a different style like:

      array(
 'pattern' => 'login',
 'action'  => 'AuthController::login',
 'filter'  => 'isInstalled',
 'method'  => 'GET|POST'

    ),

  2. is it possible to include this route in the body of a other snippet?

8

You would define the route in your /site/config/config.php within the return array

<?php
return [
  'routes' => [
        [
            'pattern' => 'mat-o-wahl', ## assuming you called the folder "mat-of-wahl, otherwise adapt
            'action'  => function() {
                return go(url().'/mat-o-wahl/index.html');
            }
        ],
  ]

];

As an alternative, you could create a folder e.g. called mat-o-wahl with a mat-o-wahl.txt inside, then a template with the same name and inside that template do the redirect.

Don’t touch the kirby folder.

9

Thanks - there already existed an wahlomat folder with the corresponding .txt and the template file therefore I just copied the mat-o-wahl directory into the root of the side and did the with the codesnippet but now I just get an blank page - so there must be an error somewhere in the linking

10

Thank you so much! I found the error seems to work right now!

11

Please show us an screenshot with your current project structure where everything relevant is visible.

Edit: Ah, ok.

12

Such a good support! Thanks!
The only remaining issue is that the redirect of course just displays the html of the tool not the side structure as before. Is there a quick way to do the redirect just for the body section? Or is it easier just to adapt the index.html to the feel of the rest of the site

13

Not sure I understand what you mean?

14

The normal page has a standard kirby structure with templates and snipptes making up a page with:
Header
Body
Footer
where the Header and Footer are global Templates and the Body is filled via a snippet.
Now as I am doing the redirect of the structure is lost of course as the index.html I am linking to has e.g. not the global navigation. Therefore my question was if it is possibly to fill just Body with the content of the redirect - if you get what I mean (more like an iFrame).

15

Since your index.html is already a complete HTML document, you would indeed have to include it within an iframe then, but this would probably result in the same problem with the links not working as expected.

16

Thanks again - it works! Now I only have to deal with the quriky iFrame properties :roll_eyes: