Help Center

Menu

Reference static files in your site template

Squiz Content Management Service will automatically include your static files. However, you must configure your design parse file to include static files correctly, or Squiz Content Management Service will not load them.

Squiz Content Management Service will also deduplicate any included files. If you include the same component five times or many components referencing the same file, the file is only loaded once.

This process will not work for deeply nested components. For example, components added through a nested page or components only added to the rendered page.

Edit the parse file

To reference your static files in your Squiz Content Management Service site template:

  1. Edit your design parse file.
    If you have not configured this before, you can test these updates on a development site first.

  2. Add the following design area near the top of your parse file:

    <MySource_AREA id_name="dxp" design_area="dxp"></MySource_AREA>

  3. Add the following design area within your <head> element:

    <MySource_PRINT id_name="dxp" var="header_includes" />

  4. Add the following design area immediately before the closing </body> tag:

    <MySource_PRINT id_name="dxp" var="footer_includes" />

  5. Save the parse file.

  6. Edit your page to include your component.

    Read Deploy your component to the DXP and the pages following to find out how to deploy your component and add it to a Squiz Content Management Service page.

Preview the page

You will see a red border around the component from your CSS file. Open the web browser developer tools console, and check whether the "Testing the JavaScript is working" statement is printed once.

Parse file example

A very minimal parse file loading component static files will look like this:

<MySource_AREA id_name="dxp" design_area="dxp"></MySource_AREA>
<html>
  <head>
    <MySource_PRINT id_name="dxp" var="header_includes" />
  </head>
  <body>
    <MySource_AREA id_name="page_body" design_area="body" />
    <MySource_PRINT id_name="dxp" var="footer_includes" />
  </body>
</html>