Client-side JS 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 folder in the client-side JS 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 "Client-side JavaScript - Standalone" to get the Integration Code
Download the jsHarmonyCmsClient.min.js library into your project. Alternatively download from the jsharmony-cms-sdk-clientjs GitHub page or NPM

Add the Integration Code from step 3 into the standalone page:
* Be sure to update the path to jsHarmonyCmsClient.min.js to where the file was saved in step 5

<script type="text/javascript" src="path/to/jsHarmonyCmsClient.min.js"></script>
<script type="text/javascript">
var cmsClient = new jsHarmonyCmsClient({
    redirect_listing_path: "jshcms_redirects.json",
    access_keys: ["*****ACCESS_KEY*****"]
});
cmsClient.Standalone('path/to/cms_content_page.html');
</script>

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
Define the editable content areas in the standalone page HTML, using the Page Template attributes ("cms-title", "cms-content-editor"). For example:
```
<html>
<head>

</head>
<body>
  <h1 cms-title>Page Title</h1>
  <div cms-content-editor="page.content.body">Page Content</div>
</body>
</html>
```
* After this step, the standalone page should be editable from the CMS.

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">
  {
    "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"></div>

<!-- onRender / showIf -->
<h1 cms-title cms-onRender="showIf(page.properties.showTitle!='N');">Page Title</h1>

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

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

Enter page content in the CMS and publish to the Deployment Target, generating a JSON file in the subfolder of the client-side JS application.

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