Examples of Components

Purpose

The purpose of this work instruction is to provide examples of components.

Prerequisites

Create a New Task

HTML markup

CSS

Supplementary

Working with the Page Tree

SEO Component

Search engine optimization is something that all websites should have. An SEO component can be created within Forrit and dragged into the head section of every page.

Here is some standard code that could be used for an SEO Component:

CODE

    <title>@SEO.Title</title>
    <meta name="description" content="@SEO.Description">
    <meta name="keywords" content="@SEO.Keywords">
    <meta property="og:title" content="@SEO.Title">
    <meta property="og:description" content="@SEO.Description">
    <meta property="og:image" content="@SEO.SEO_Image.url">

The SEO content will be different for each page, below is a short description of what each section does:

Description Summary of the page's content.
Keywords Keywords and phrases in the web content that make it possible for people to find the site via a search engine.
SEO Image The icon that appears on the left of the browser tab when viewing the page.
Title The title of the page. This is typically the first thing a search engine looks for so make sure it describes the page accurately.

This component should be added to the head section of a page.

Component to Add Script / Styles

CSS and Javascript links should be placed in a component, which can be added to multiple pages.

CODE

<link href="[Insert a link to your css]" rel="stylesheet"/>
<script src="[Insert link to your javascript]"></script>

This component should be added to the head section of a page.

Component Collection

Collections allow the same block of HTML to be repeated multiple times but the content may change in each iteration.

This example contains a collection of links. The collection is defined by the ctx-foreach tag.

CODE

<div ctx-foreach="link in Content.Links">
    <a href="@link.Href" id="@link.Client_id" class="ctex-cta @link.Classes" target="@link.Target" aria-label="@link.Aria_label" data-hide="@link.Hide" onclick="@link.Event">
        <span>@link.Text</span>
    </a>
</div>

When this HTML is added, a collection variable is added to the component. It is possible to set the maximum number of items within the collection, and configure each of the variables within the collection.

Items can be added to the collection and the values edited from the Page Editor.