Laravel Router w/Page Object

Resources

Router w/Page Object Integration Tutorial

How it works:

Generate a JSON object for each page
Includes a Router to enable:
- Loading the JSON object and passing it to a server-side template renderer
- Page URLs anywhere in the site
- Redirects defined in CMS

Overview:

The Router integration method:

Serves static content (images, files) out of a public content folder
Adds a route to the Laravel application, to serve CMS pages and redirects

The route should be placed at the end of other application routes.

Watch Video Tutorial

Integration:

In the jsHarmony CMS, on the Sites tab, create a new Site
Download the jsHarmony Redirects Component and extract into your site's SFTP folder. This contains a "jshcms_redirects.html" component that exports the Redirects as JSON into a file named "jshcms_redirects.json" in the root of the site. A site_config.json file is also included with the "redirect_listing_path" parameter, so that the integration code will be properly generated.
In the Site Settings, add a Deployment Target:
1. Configure the Deployment Target to publish to a public folder in the Laravel application
2. Set the URL Prefix to the path prefix for the CMS Content files
3. Set the "Override Page URL Prefix" to the path prefix for the CMS Page URLs, if different from the CMS Content path.
  For example, if URLs should be root-relative, set the Page URL Prefix to "/"
Generate the Integration Code:
1. In the Deployment Target, click on the "Integration Code" tab
2. Select the Environment "PHP - Router" to get the Integration Code
In your Laravel application, install the "jsharmony-cms-sdk-php" Composer library:
```
composer require apharmony/jsharmony-cms-sdk-php
```
In your Laravel Config file, (ex. config/app.php), add the config from the Integration Code tab in step 4:
```
'cms' => [
    "redirect_listing_path" => "jshcms_redirects.json",
    "cms_server_urls" => ["https://cms.example.com/"],
    "content_path" => $_SERVER['DOCUMENT_ROOT']."/path/to/published_files"
],
```
* Be sure to update the "content_path" property to match the CMS files publish folder in your Laravel application

In your Laravel Service Provider (ex. app/Providers/AppServiceProvider.php), initialize the CMS Router:

use apHarmony\jsHarmonyCms\CmsRouter;

...

    public function register()
    {
        $this->app->singleton(CmsRouter::class, function($app){
          return new CmsRouter(config('app.cms'));
        });
    }

In your Laravel application Router (ex. routes/web.php), add routes for:
a. The template, used when creating and editing pages in the CMS
b. The catchall route, typically at the end of the other application routes, to serve CMS files to end-users:

use apHarmony\jsHarmonyCms\CmsRouter;

...

//Template Route, for creating and editing CMS pages
Route::view('/path/to/template/view.blade.php', 'template.name', ['cmsPage' => app(CmsRouter::class)->getPlaceholder()]);

//CMS Catchall Route, for rendering CMS content to the end-user
Route::get('{url}', function ($url='') {
    return app(CmsRouter::class)->serve($url, [
        'onPage' => function($router, $fileName){
            return view('/path/to/template/view.blade.php', ['cmsPage' => app(CmsRouter::class)->getPageFromFile($fileName)]);
        },
        'on301' => function($router, $url){
            return redirect($url, 301);
        },
        'on302' => function($router, $url){
            return redirect($url, 302);
        },
        'onPassthru' => function($router, $url){
            $passthru = $router->passthru($url);
            return response($passthru->content, $passthru->http_code)->header('Content-Type', $passthru->content_type);
        },
        'on404' => function($route){
            abort(404);
        },
    ]);
})->where('url', '.*');

In the CMS, add a Remote Page Template under the Site "Page Templates" tab
1. Set a Name and Title for the new template
2. Enter the full URL of the Remote Template in the URL field (matching the path to the Template route from Step 8)
3. Configure the pages to publish as JSON, by clicking "Edit" under the Config column, and adding the following JSON:
```
{
  "templates":{ "publish":"format:json" }
}
```
Create a Laravel view for the Page Template, using the template path from Step 8 (ex. /resources/views/path/to/template/view.blade.php)
Add the Editor Launcher script to the head tag of the Page Template:
```
{!! $cmsPage->editorScript !!}
```
Define the editable content areas in the Page Template, using the Page Template attributes ("cms-title", "cms-content-editor").

* After this step, it should be possible to add and edit pages from the CMS.

Render the CMS Content in the Page Template using the "$cmsPage" object passed from step 8. Any of the following page properties can be used:

<html>
<head>
  @if($cmsPage->seo->title)
    <title>{{ $cmsPage->seo->title }}</title>
  @endif
  @if($cmsPage->seo->keywords)
    <meta name="keywords" content="{{ $cmsPage->seo->keywords }}" />
  @endif
  @if($cmsPage->seo->metadesc)
    <meta name="description" content="{{ $cmsPage->seo->metadesc }}" />
  @endif
  @if($cmsPage->seo->canonical_url)
    <link rel="canonical" href="{{ $cmsPage->seo->canonical_url }}" />
  @endif
  @if($cmsPage->css)
    <style type="text/css">{!! $cmsPage->css !!}</style>
  @endif
  @if($cmsPage->js)
    <script type="text/javascript">{!! $cmsPage->js !!}</script>
  @endif
  {!! $cmsPage->header !!}
  {!! $cmsPage->editorScript !!}
</head>
<body>
  <h1 cms-title>{{ $cmsPage->title }}</h1>
  <div cms-content-editor="page.content.body">{!! $cmsPage->content->body !!}</div>
  {!! $cmsPage->footer !!}
</body>
</html>

If applicable, add advanced CMS features, such as a Page Template Config, Static Page Components, and onRender functions:

<!-- Page Template Config -->
<script type="text/cms-page-config">
  {
    "default_content": { "body": "Default Page Content" },
    "properties": {
      "fields": [
        { "name": "showTitle", "caption": "Show Title", "control": "checkbox", "default": "Y", "controlparams": { "value_true": "Y", "value_false": "N" } },
        { "name": "containerClass", "caption": "Container CSS Class" },
        { "name": "containerStyle", "caption": "Container CSS Style" },
      ]
    }
  }
</script>

<!-- Static Page Component -->
<div cms-component="breadcrumbs" cms-component-content="breadcrumbs">{!! $cmsPage->content->breadcrumbs !!}</div>

<!-- onRender / showIf -->
@if($cmsPage->properties->showTitle!='N')
  <h1 cms-title cms-onRender="showIf(page.properties.showTitle!='N');">{{ $cmsPage->title }}</h1>
@endif

<!-- onRender / addClass -->
<div cms-onRender="addClass(page.properties.containerClass);" class="{{ $cmsPage->properties->containerClass }}"></div>

<!-- onRender / addStyle -->
<div cms-onRender="addStyle(page.properties.containerStyle);" style="{{ $cmsPage->properties->containerStyle }}"></div>

Publish to the Deployment Target, generating JSON files and content in the CMS Content subfolder of the Laravel application, and test.

Video Tutorial:

Phone: 630-855-7522
1235 Humbracht Cir, Unit F
Bartlett, IL 60103