Symfony 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.

Integration:

In the jsHarmony CMS, on the Sites tab, create a new Site
In the Site Settings, add a Deployment Target:
1. Configure the Deployment Target to publish to a public folder in the Symfony project
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 Symfony project, 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 Symfony page's Controller, add the "use" reference below, and the code to initialize the router from the Integration Code tab in step 3. Pass the Standalone page content as a "page" variable to the view:

use apHarmony\jsHarmonyCms\CmsRouter;
//...

public function index(): Response
{
    $cmsRouter = new CmsRouter([
        "redirect_listing_path" => "jshcms_redirects.json",
        "cms_server_urls" => ["https://cms.example.com/"],
        "content_path" => $_SERVER['DOCUMENT_ROOT']."/path/to/published_files"
    ]);
    return $this->render('standalone_page.html.twig', [ 'page' => $cmsRouter->getStandalone() ]);
}

* Be sure to update the "content_path" property to match the CMS files publish folder in your Symfony project

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
Add the Editor Launcher script to the head tag of the standalone page:
```
{{ page.editorScript|raw }}
```
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 "page" object passed from step 5. Any of the following page properties can be used:

<html>
<head>
  {% if (page.seo.title) %}<title>{{ page.seo.title }}</title>{% endif %}
  {% if (page.seo.keywords) %}<meta name="keywords" content="{{ page.seo.keywords }}" />{% endif %}
  {% if (page.seo.metadesc) %}<meta name="description" content="{{ page.seo.metadesc }}" />{% endif %}
  {% if (page.seo.canonical_url) %}<link rel="canonical" href="{{ page.seo.canonical_url }}" />{% endif %}
  {% if (page.css)  %}<style type="text/css">{{ page.css|raw }}</style>{% endif %}
  {% if (page.js) %}<script type="text/javascript">{{ page.js|raw }}</script>{% endif %}
  {{ page.header|raw }}
  {{ page.editorScript|raw }}
</head>
<body>
  <h1 cms-title>{{ page.title }}</h1>
  <div cms-content-editor="page.content.body">{{ page.content.body|raw }}</div>
  {{ page.footer|raw }}
</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">{{ page.content.breadcrumbs|raw }}</div>

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

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

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

Publish to the Deployment Target, generating a JSON file in the CMS Content subfolder of the Symfony project, and test.

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