Laravel Standalone Page

Resources

Standalone Page Integration Tutorial

How it works:

Add CMS content to an existing page in the site
Generate a JSON object for that page on publish
On page view:
- Load the JSON object and render it in a server-side template

Standalone Page Limitations:

Standalone pages need to be configured one-at-a-time in the CMS

Overview:

Standalone Integration can be used to add editable CMS content areas to existing individual pages in an application. This can be used together with, or apart from, a site with a Router Integration.

Watch Video Tutorial

Integration:

In the jsHarmony CMS, on the Sites tab, create a new Site
* Skip steps 1-2 if you already have a jsHarmony site configured for this application
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
Generate the Integration Code:
1. In the Deployment Target, click on the "Integration Code" tab
2. Select the Environment "PHP - Standalone" to get the Integration Code
In your Laravel application, install the "jsharmony-cms-sdk-php" Composer library:
```
composer require apharmony/jsharmony-cms-sdk-php
```
* Alternatively, the SDK can be downloaded directory from the Github jsharmony-cms-sdk-php project.
In your Laravel Config file, (ex. config/app.php), add the config from the Integration Code tab in step 3:
```
'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 that loads the standalone page (ex. routes/web.php), modify the standalone page's route to call CmsRouter->getStandalone, and pass the resulting cmsPage content variable to the template engine:
```
use apHarmony\jsHarmonyCms\CmsRouter;

...

Route::get('/path/to/standalone_page', function () {
  return view('login', ['cmsPage' => app(CmsRouter::class)->getStandalone('/path/to/standalone_page')]);
});
```
In the CMS, add the standalone page to the Sitemap:
1. On the Pages tab, add a new page
2. Set the Template to "<Standalone>"
3. Set the Template Path to the full URL of the standalone page
  * Make sure the Page Path matches the path passed to getStandalone in Step 7
Add the Editor Launcher script to the head tag of the standalone page:
```
{!! $cmsPage->editorScript !!}
```
Define the editable content areas in the standalone page, using the Page Template attributes ("cms-title", "cms-content-editor").

* After this step, the standalone page should be editable from the CMS.

Render the CMS Content in the standalone page using the "$cmsPage" object passed from step 7. 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 a JSON file 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