Change log

Ultimate Migration Guide (Step by Step)

So you’ve decided to move your site across to Treepl CMS. Good choice.

And you’ve decided to do it yourself. Good for you! You’re probably going to be doing this quite a few times so let’s make it fun…

Set aside a good chunk of uninterrupted time, crank up your favourite tunes and grab a strong drink. It’s migration time.

The below sections are ordered to try and minimise the amount of back and forth when creating the various components of a site. If a section doesn’t apply to your site, feel free to skip right over it.

A ‘BC to Treepl Migration App’ is in constant development and can be used to help automate much of your site migration. The sections detailed below also indicate where the migration app can be used. The Migration App also converts BC Liquid tags, ie: {module_…} and {tag_…} to Treepl CMS Liquid tags! For more info on this, view the Forum discussion here.

1
Download the BC Site via FTP

Parityhigh Effortlow Timelow Docshigh Migration Toolactive

Download all files available via FTP from your BC site, if for no other reason than to just have a backup. However, these files can be referenced in the following steps as well.

You can also automatically migrate all files in the BC file system directly to your Treepl CMS site via the BC to Treepl CMS Migration App.

There is also now the ability to download a .zip archive of your BC site directly from BC or a more comprehensive export via the BC to Treepl CMS migratiom app, including data from the following modules:

BC Provided Export:

  • Pages
  • Page Templates
  • Module Layouts
  • Static files
  • Apps
  • Content Holders
  • System Pages
  • Email Templates
  • Web Apps

Further Resources:

BC FTP connection details BC .zip archive

Treepl CMS Provided Export:

  • Pages
  • Page Templates
  • Module Layouts
  • Static files
  • Apps
  • Content Holders
  • System Pages
  • System Emails
  • Email Templates
  • System Modules
  • Web Apps
  • E-commerce
  • Web Forms
  • URL Redirects
  • Menus
  • Media Downloads

Further Resources:

Advanced BC Export

2
Deep-Clean the BC Site (Optional)

Parityna Effortmed Timemed Docsna Migration Toolna

This step is optional, but you may want to take the opportunity to clear out the BC site of old pages, templates, files, etc. Particularly if it’s an old site, there can be a lot of junk floating around. And this can just get in your way during migration and could cause unnecessary work. However, be very careful not to remove assets that may still be in use somewhere (hence the backup in the previous step).

Once you’ve cleaned up, repeat the FTP download step to collect a new, clean, set of files.

3
Setup Treepl CMS Site Instance

Parityhigh Effortlow Timelow Docshigh Migration Toolna

So you can start work with the Treepl CMS platform you'll need to set up a Trial Site. Log into your Treepl Portal (portal.treepl.co) and click the "Create New Site" button.

Trial Site Documentation

View full article

The number of Trial Sites available and the timeframe until they expire, depend on your Treepl CMS reseller level.

Quick Start

Setup a Trial Site

Once logged into your Treepl Portal you should arrive at the ‘Trial Sites’ page.

From here, use the “Create New Site” button to start a new site instance, completing the information required for your site as follows:

Option
Description
Site Name
A descriptive name for your project.
Root Domain
Either treepl.co or, for white-labelling, trialsite.co or your own branded domain/s (if your reseller level allows).
Subdomain
Usually autocompletes, but you can change if needed.
CMS Plan
An appropriate plan for your project requirements/budget.
Template
Choose a blank site or one of the free Treepl CMS templates (preview the templates via the blue button).
Data Center
Choose the server location best for your site.
Country
Set your sites primary location.
Time Zone
Set the server time to be used for all your site's date/time functions.
Enable two-factor authentication (2FA)
Enable Two-Factor Authentication (2FA) for any admin logging into the site. See 2FA documentation here for more info.

Click "Save" and within approximately 1 minute your site instances should spin up and be ready to access.
(the instance will appear in your ‘Trial Sites’ list with a pending status until ready)

Manage a Trial Site

Once a Trial Site is ready, you'll see additional options available for managing your instance:

Option
Description
Site
Name given to the site instance.
URL
View the Trial Site with the system generated subdomain.
Status
Displays the current status of the site while deploying. Once deployed, displays the “Activate” button to start the activation process for publishing the site under a custom domain.
2FA
Displays whether Two-Factor Authentication is enabled or disabled.
Admin
Navigate to the site's admin.
Date Created
Displays the instance creation date.
Plan
Displays the instance CMS plan.
Actions
Copy Site: Create an complete copy of the instance.
Edit Site: Access the instance settings.
Delete Site: Remove the instance from your account.

Editing a Trial Site

From the Trial Sites list, clicking the pencil () icon for a site instance will provide further configuration options.

Site Settings

Under the ‘Site Settings’ tab, you’ll see the same settings as when setting up the Trial Site initially.

Here you’ll be able to edit the site's Name, CMS Plan, Country, Time Zone and 2FA settings. Other settings are locked and cannot be changed or require Treepl CMS support to change on your request.

FTP

Provides the general FTP configuration details for the site instance.

Further details regarding FTP settings can be found here.

Extensions

All available extensions for the site instance will be listed here under the heading ‘Available Extensions’, where they can be installed or further information about the extension be reviewed.

Any installed extensions will be listed separately under the heading ‘Installed Extensions’, where their settings (if applicable) can be configured or the extension uninstalled (via the trash can () icon)

Commission

Reseller commission, for this site instance, can be customised here which will apply if Direct Billing is enabled.

With Direct Billing enabled, your client will be able to pay directly for the site plan via the site admin. They will see your customised pricing only (not the regular Treepl CMS pricing) and you’ll receive your commission value once the payment has been processed.

Both the yearly and monthly subscription types can have customised commission values, either via a percentage markup or fixed value.

Pricing and calculations will be shown based on the currently configured CMS site plan, giving you the profit amount as well as any PayPal processing fees.

Access to Customisable Commissions and Direct Billing depends on your Treepl CMS reseller level.

4
Start BC Hosted Email Transfer Process (If Applicable)

Parityna Effortlow Timemed Docshigh Migration Toolpending

If your BC site has BC hosted emails, they can be transferred directly to Treepl CMS after following the below steps.

Transfer of BC Hosted Email Accounts

View full article

Managing Hosted Email Accounts with Treepl CMS

Hosted email accounts can be managed via your Treepl Portal.

After clicking the edit/pencil () icon against the desired site in your ‘Live Sites’ list, you’ll see the ‘Email Accounts’ tab.

Here you’ll find controls to manage existing email accounts, create new accounts or set up new email hosting altogether.

Starting New Hosted Email Service

To start a new hosted email service (when none is currently set up), click the “Get Started” button to begin the process.

Select the primary domain you’ll be using for email from the dropdown list available (you’ll be able to add domain aliases later).

Clicking “Save” will provision the email service for that domain.

Email Domain Alias

Clicking the “+ Add domain alias” link under the primary domain listed for hosted email, you’re able to add additional domains that will be used as email domain aliases. That is, other domains that will also be mapped to ALL other email address you create here.

Once added, you’ll need to ensure MX and SPF records are in place as per this article.

Domain aliases create additional email addresses for ALL email users, although they don’t create additional email inboxes or count towards your site plan’s email user limit. They simply allow secondary domain/s to be used to deliver email messages to all existing email user’s inboxes (as an alias address).

Adding Email Addresses

Clicking the “Add New Email” button under the ‘Email Accounts’ heading allows you to set up new email users/inboxes for your domain/s, within the email limit of your site plan (shown in this sections heading, ie: ‘Email Accounts (0/3)’ indicates zero users added out of 3 available).

Upon creating a new email address, you’ll be prompted to enter the username portion of the address (preceding the ‘@yourdomainname.com’) and to set and confirm an account password.

Managing Email Accounts

Once you have email addresses added to your Treepl hosted email service you’ll be able to manage most aspects of the user accounts.

At a glance, you’ll see a list of existing addresses along with the storage quota used.

Clicking the 3 dots () context menu at the far right of the user address, allows you to reset the email account password for that address or delete the email account completely - removing that users inbox and all emails stored online for that address.

Expanding the email address listing, via the arrow icon on the far left, reveals the “+ Add email alias” link where you can create alternative email names that can be used to deliver email messages to this users inbox. Email aliases don’t create additional email inboxes or count towards your site plan’s email user limit.

Ensure your DNS records are in place for all domains used for Treepl hosted email, particularly for MX and SPF records, as per this article.

Configuring your Email Client

As there are many different email clients across various operating systems and devices, we will not detail steps on adding or editing email accounts. However, below are all the connection details all email clients require in order to connect to your email service.

For further assistance with setting up accounts in your email client, refer to the programs help documentation, its support channels, or Google your email client name and version number for instructions.

Username:
[your full email address]

Password:
[your email account password]

Incoming and Outgoing mail server:
mail.b.hostedemail.com or mail.mailconfig.net

For those transferring from BC hosted email; for the foreseeable future you will likely be able to continue using mail.worldsecuresystems.com as the incoming/outgoing mail server. However, at some point this address will likely stop working so we advise updating this to the above details as soon as possible.

Incoming port settings:
Both IMAP and POP3 protocols are supported
IMAP 993 (SSL enabled) | 143 (SSL disabled)
POP3 995 (SSL enabled) | 110 (SSL disabled)
Authentication Password

Outgoing port settings:
SMTP 465 (SSL enabled) | 25 or 587 (TLS) | 8025 (SSL disabled)

Webmail

You can access your email accounts via a browser, without the need of an email client with the Webmail facility.
Using your email address and password log into Webmail here: https://mail.b.hostedemail.com or here: https://mail.mailconfig.net/.

Alternatively, you could set up a subdomain for accessing Webmail. For example 'mail.yourdomain.com' could be used to direct you to the Webmail address above specific to your domain.
See below for details on setting up CNAME Records to achieve this.

MX Records

If you are newly setting up hosted email accounts with Treepl CMS you will need to have the relevant MX record in your DNS.

Once logged into your DNS service, locate the DNS settings option.
If you have any existing MX records listed you’ll need to remove these.

Removing any existing MX records will stop that email service form working and you’ll likely lose access there. So be sure you have finished up with prior email accounts before proceeding.

DNS settings

Locate an option to add additional records.

Add Record

Choose a record type of “MX” and add @ to the Host/Name field (or leave it blank, depending on how your DNS service prefers it).

In the Value/Address field add mx.yourdomain.com.cust.b.hostedemail.com (replacing yourdomain.com with your actual domain name).

For example: if your domain was mycooldomain.com.au, then the MX record would be formatted like so:
mx.mycooldomain.com.au.cust.b.hostedemail.com

For the Priority field, you can leave any default value there or if no value exists add a priority of 10.

You can usually leave the "TTL" (Time To Live) set at the default. Generally though, the accepted value is 24 hours (86,400 seconds).

Record Values

Be sure to save/apply any changes and confirm you receive a successful message and no errors have occurred.
If unsure, or to double check, refresh the page or revisit the DNS settings to confirm your changes have applied.

Once the MX record has successfully propagated, you’re emails should then begin working.

Changes to your DNS may take an hour or two to become fully available on the internet.

CNAME Records for Webmail Access

Optionally, you may also like to set up a subdomain for a convenient way to log into the webmail service.
You can do this by adding a “CNAME” record type with a Host/Name of mail and a Value/Address of mail.yourdomain.com.cust.b.hostedemail.com
Then, when you visit mail.yourdomain.com you’ll be directed to the webmail login screen.

SPF Records

An SPF record is a TXT record that defines which authorised parties can send email on behalf of (in the name of) your own domain name.

There are various cases where Treepl CMS can send out emails in which you would want to appear as though they originated from you or your clients email address. Such as web form notifications, autoresponders, system messages, etc.

So that Treepl CMS can do this in an authorised, non-spam risk way, it is strongly advised that you add the following 'SPF' record to any domain name's DNS that will be used with Treepl CMS. The 'SPF' record would have @ as the Host/Name field (or left blank, depending on how your DNS service prefers it).

Use the SPF Generator to easily construct your SPF record, or to understand more about these values, or to manually construct your SPF record, see further details below.

SPF Generator

From your current DNS, eg: v=spf1 a mx include:_spf.google.com ~all





Instructions for manually creating, or updating, your SPF Record

For any domain name added to a Treepl CMS website that will utilise system email messages, you'll need to add include:_spf.trustedemail.co to your SPF Record, or create one if an SPF Record does not already exist.

Example:

v=spf1 include:_spf.trustedemail.co ~all

If your DNS services doesn't list 'SPF' as a record type choose 'TXT' as the record type instead.

Additionally, if you have Treepl hosted email (OpenSRS), your SPF record must also have include:_hosted.trustedemail.co.

So building on the example above we'd now have:

v=spf1 include:_spf.trustedemail.co include:_hosted.trustedemail.co ~all

It may be the case that you already have other 3rd parties sending emails on behalf of your domain and therefore already have an SPF record in place. In which case you'd need to add to this record and combine any existing entries with Treepl CMS values above.

Below is an example including an existing domain name of a 3rd party service (Google) plus Treepl CMS includes for both system emails and hosted emails:

v=spf1 include:_spf.trustedemail.co include:_hosted.trustedemail.co include:_spf.google.com ~all

For more information regarding SPF Record syntax refer to the official specification here.
And to check your SPF record syntax is valid you can use a service such this SPF Syntax Validator

5
Upload Site Assets

Parityhigh Effortlow Timelow Docshigh Migration Toolactive

Now we'll want to connect to our new Treepl CMS instance via FTP so we can upload some of our BC assets.

If working manually, we'll probably only want to upload assets relating to the front-end site, such as images, CSS, JS, documents, etc. We don't want to move over pages, templates or other layout files just yet.

Below are instructions for getting connected via FTP client.

FTP Access Documentation

View full article

8

FTPS is different to SFTP. SFTP is not currently supported.

Requirements

In order to connect to your Treepl CMS website through FTP you would need to have:

  • Live or trial website on Treepl CMS
  • FTP Client

Credentials

All Treepl sites’ FTP credentials follow the following pattern, using the sites’ system domain and your Partner email address:

Hostname:
[sitename].treepl.co
or
[sitename].trialsite.co
Username:
[sitename].treepl.co|[partner/admin-email]
or
[sitename].trialsite.co|[partner/admin-email]
Password:
[partner/site-password]

Replace [text in the brackets] with the relevant sitename (as shown in your Treepl Portal), username and password and use these credentials in your FTP client to connect to your website.

It is recommended to always use a secure connection via the supported FTPS configuration.

To do this in your FTP client may vary, however generally it involves selecting 'TLS/SSL' as an encryption type along with the standard FTP protocol selection.

Ensure to use 'explicit TLS/SSL' if the option is given, or set 'explicit' in your FTP client settings.

File Naming Best Practises

When creating a page (or file) via FTP (or via the admin File Manager), please follow these best practises to avoid unpredictable result and/or errors:

9
Duplicate File Names

Do not create files with the same name but with different variations of the same file extension. Eg; myfile.html and myfile.htm

Doing so may result in inconsistent updating of file content when one or the other file is changed, along with other errors.

10
Empty File Names

Do not create files with an empty name (eg: .htm, .html).

The CMS logic of creating and changing the page via FTP, or via the admin File Manager, will ignore such files and will not result in the creation of a page.

11
Reserved URL Characters

Avoid using % and # characters in file names - particularly where these file names may be referenced in the URL (ie: as a link to a page or file). These characters are used in standard URL operations, therefore, including them in links/URLs can cause conflicts with existing URL constructs.

If these characters are to be used in your file naming, ensure any links/paths to such files are correctly URL encoded.

The URL encoding for these characters is listed below:

% –> %25
# –> %23

You can either manually encode these characters or make use of the Liquid filter url_encode.

Manual example:

// actual file name
<a href="/path/to/#my100%file.html">My Link</a>

// encoded file name
<a href="/path/to/%23my100%25file.html">My Link</a>

Liquid example:

{% assign fileSlug = "#my100%file.html" %}
<a href="/path/to/{{fileSlug | url_encode}}">My Link</a>
<a href="/path/to/%23my100%25file.html">My Link</a>

Admin Users

All Partner/Reseller level admin users of your site will have FTP access following the same credential pattern as described above but using their site admin email address and site admin password.

Additional admin users will have full site permissions except for FTP access. If FTP access is required for added admin users, be sure to create a User Role with FTP permissions enabled.

For sites on the ESSENTIAL plan, where custom admin user roles are not available, all permissions, including FTP access, will be active for any admin user added.

Directory Structure

You have the freedom of creating your own folders and files within your sites directory structure. Keep in mind though, that Treepl CMS has certain directories/folders within a sites file structure which are utilised for system functionality.

The default system directory structure (and FTP access) is outlined below:

  • ROOT
  • cms-assets
    • css
      • event-calendar.min.css
      • jquery.fancybox.min.css
      • main.css
    • includes
      • event-calendar.inc
    • js
      • event-calendar.min.js
      • jquery.fancybox.min.js
      • payment.js
  • Contact
    • ContentTemplates
      • Master.html
    • EmailTemplates
      • System Default.html
    • Forms
      • [your form name].html
    • MenuLayouts
      • [your_menu_alias]
        • Default
          • item.layout
          • menu.layout
          • sub_items.layout
    • ModuleLayouts
      • Custom
        • [YourCustomModule]
          • Detail_Detail.html
          • List.html
      • System
        • Banner
          • List.html
        • BannerGroup
          • List.html
        • Blog
          • Blog List Layout.html
          • General Blog Layout_Detail.html
        • BlogPost
          • List.html
          • Post Detail_Detail.html
        • Event
        • EventGroup
        • FAQGroup
          • List.html
        • FAQQuestion
          • List.html
        • GallerySlider
          • Detail_Detail.html
          • List.html
        • ItemAuthor
          • Detail_Detail.html
          • List.html
        • Page
          • Page Detail_Detail.html
          • Site Search List.html
        • PageFolder
          • Folder Detail_Detail.html
        • Slide
          • List.html
    • Pages
      • home.html
    • Snippets
    • SystemEmails
      • confirm-email-notification.html
      • invoice.html
      • password-retrieve-email.html
      • secure-zone-login-details.html
      • workflow-notification.html
    • SystemPages
      • 401.html
      • 403.html
      • 404.html
      • default-page.html
      • email-confirmation.html
      • error-page.html
      • form-submission-results.html
      • request-reset-password-result.html
      • request-reset-password.html
      • reset-password.html
    • WorkflowEmails
  • _tmp

Alternatively, you can automatically migrate all files in the BC file system directly to your Treepl CMS site via the BC to Treepl CMS Migration App.

6
Upload or Setup Placeholder Templates

Parityhigh Effortlow Timelow Docsmed Migration Toolactive

You can manually upload your BC page templates into your Treepl CMS instance via FTP into the ‘Content / ContentTemplates’ directory.

Alternatively the BC to Treepl CMS Migration App can be used to automate this process.

If manually migrating templates, don’t worry about editing the template code/markup at this stage. We just want to get them loaded in Treepl CMS so we can reference it in the following steps. We’ll work on the template code later.

If not using FTP, to manually create a content template, go to 'Content' > 'Content Templates'.

Click ‘Add New Template’ button.

Just complete ‘Name’ and choose whether it's the default template. Leave the content as is for now.

Repeat this for all required templates.

Content Templates Documentation

View full article

Content Templates are the framework of your HTML document when rendering Pages and module items, helping set up the common elements, scripts, and styles as well as any common footer elements and additional scripts.
Your site can include any number of Content Templates for various layout requirements or content types.

Quick Start

7
Upload or Setup Site Pages

Parityhigh Effortlow Timelow Docsmed Migration Toolactive

Upload your BC pages into your Treepl CMS instance via FTP into the ‘Content / Pages’ directory.

Alternatively the BC to Treepl CMS Migration App can be used to automate this process.

If manually migration pages, there will still be several properties you will want to set for each page, such as a more relevant system name, assigning it to a template, SEO and meta details, etc. and we’ll likely need to review the page content for any system tags or Liquid that needs replacing. However, all in good time and we’ll take those actions in a later step. For now we just want to get the bulk of the setup in place.

Pages Documentation

View full article

Pages allow the creation and management of standard page content and folders. Pages can be arranged within folders, secured from unauthorised access, hidden from either site search or search engines, assigned to templates and given full SEO properties among various other settings.
They can contain all manner of website content which can be managed via the WYSIWYG editor or directly via Code View.

Quick Start

Searching Ultimate Migration Guide (Step by Step) Items

Searching within Ultimate Migration Guide (Step by Step) can be achieved with a search form and the module’s component tag configured with the isSearchResult parameter.

Simple keyword based searches can be set up as well as more advanced search forms with specific system and custom fields searchable along with range searches for date and price/number fields.

You can configure a Ultimate Migration Guide (Step by Step) search with two parts; the search form and the module’s component tag. More on these parts below:

Component Tag with ‘isSearchResult’

To render the search results to the page and/or a collection, you need to configure the module’s component tag with the isSearchResult parameter set to true (see the Ultimate Migration Guide (Step by Step) component documentation for technical details).

{% component type: "module", source: "Page", layout: "List", isSearchResult: "true" %}

This will allow the component to reference search parameters in the resulting URL.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

You may want to separate the search form from the component tag if you want a dedicated search results page, or where you have a search input in the header or footer of all pages as so searches could be made from any page.

This method also alleviates a side-effect of the isSearchResult configured component whereby it will output all indexed items by default if no search query has been specified (ie: when a user first navigates to a search page).

If you do want one single search page, with both search form and component and don’t want to initially list all results, another solution to this is to wrap the component tag in a Liquid condition which looks for the presence of the prop_KeyWords parameter in the URL, like so:

{% if request.request_url.params.prop_KeyWords %}
    {% component type: "module", source: "Page", layout: "List", isSearchResult: "true" %}
{% endif %}

Basic Search Form

A basic keyword based search form for Ultimate Migration Guide (Step by Step) would be constructed like the following:

<form>
    <input type="hidden" name="prop_ModuleId" value="1234">
    <label>Keywords</label>
    <input type="text" name="prop_KeyWords" maxlength="255" value="{{request.request_url.params.prop_KeyWords}}">
    <input type="submit" value="Search">
</form>

This form element includes a prop_KeyWords text input, prop_ModuleId hidden input, a submit button and no form action attribute.

The prop_ModuleId hidden input tells the search which module to search (replace ‘1234’ with the ID of your module).

The prop_KeyWords text input allows multiple keywords to be entered for searching.

The search logic combines multiple keywords with an AND operator, so items will be returned only if they include ALL keywords entered.

Currently, searching does not support any manual logic operators to be used in the keyword input field (such as; AND, OR, NOT...)

When the form is submitted, prop_ModuleId and prop_KeyWords, along with their values, will be passed as URL parameters for the isSearchResult configured component tag to interpret.

By default, the search form has no action attribute, so it will redirect to the current page with the URL parameter appended to the current page URL.

You can, instead, separate the search form from the ‘site_search’ component, having the module component on a separate page and sending the search query to that page instead of the current page.

To do this, you’d add the other page URL slug to the form element. So if the other page was “/search-results”, you’d adjust the form to include an action attribute as such:

<form action="/search-results">

Advanced Search Form

Building further on the basic form structure above, you can add Ultimate Migration Guide (Step by Step) specific fields to search their contents, either individually or combined with other fields and/or keyword queries.

The search logic combines all field queries with an AND operator, so items will be returned only if they include ALL the queries entered.

The fields that can be search upon include:

  • Name
  • URL (Slug)
  • SKU Code
  • Release Date
  • Expiry Date
  • Site Search Keywords
  • Description
  • Any ‘Default Properties’ (eg: Categories, Tags, Author...)
  • Any ‘Custom Properties’
  • Module specific ‘System Properties’ (Price, Product Dimensions, Unit Type, Capacity...)

To add these fields to your search form, create an appropriate input with the name attribute configured like prop_PropertyName.

So, if you were adding a search field for a custom property called “Vehicle Colour”, the form input might look like this:

<input type="text" name="prop_VehicleColour">

Follow this same format for most other properties. Although you may like to change the input type to suit the type of data required.

For example, if our above “Vehicle Colour” property was actually a dropdown field with predefined colour values, you may choose to create a <select> element instead, like so:

<select name="prop_VehicleColour">
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
    <option value="Green">Green</option>
</select>

After the search form has been submitted, you might also like to keep the search queries filled in the search form fields, for better usability. So to do this you can pull the query parameters out of the URL and into the input values, like so:

<input type="text" name="prop_VehicleColour" value="{{request.request_url.params.prop_VehicleColour}}">

Search Within Number Ranges

For property types such as dates, prices and numbers, you can search with a to-from/min-max range by adding _Min or _Max to the property name.

So let’s say you want to search for items within a certain date range, based on their release/expiry dates.

<input type="datetime-local" name="prop_ReleaseDate_Min">
<input type="datetime-local" name="prop_ExpiryDate_Max">

And to populate these fields with the searched values:

<input type="datetime-local" name="prop_ReleaseDate_Min" value="{{request.request_url.params.prop_ReleaseDate_Min | date: "%Y-%m-%dT%H:%M"}}">
<input type="datetime-local" name="prop_ExpiryDate_Max" value="{{request.request_url.params.prop_ExpiryDate_Max | date: "%Y-%m-%dT%H:%M"}}">

Searching for a minimum release date will return all items with a release date newer (or the same as) the query date. And likewise searching for a maximum expiry date will return all items with an expiry date older (or the same as) the query date.

Programmatically Search (without a form)

There may be times when you require the search results for a module based on constructed data, other than that of a user’s input into a search form.

You can achieve this with the use of the searchScope parameter on the module’s component tag (see the Ultimate Migration Guide (Step by Step) component documentation for technical details).

This parameter allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid constructed) values without the use of a search form.

The search queries are similar to that used in the above form based search method, but use JSON syntax for their construction.

Below is an example of a constructed searchScope configured component tag, with min/max release date search, keywords and multiple tags query:

{% component type: "module", source: "Page", layout: "List", searchScope: "{'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2']}" %}

The search logic combines all field queries with an AND operator, so items will be returned only if they include ALL the queries entered.

8
Replicate Menus & Menu Layouts

Parityhigh Effortmed Timemed Docshigh Migration Toolactive

You can easily recreate your BC menus into your Treepl CMS instance via the admin ‘Content' > 'Menus’, and copy over and adjust your menu layouts.

Alternatively the BC to Treepl CMS Migration App can be used to automate this process.

If manually recreating your menus you can follow the documentation and tips below:

Menus Documentation

View full article

This modular approach to site navigation allows for links to be managed from a single location and with full access to the menu Layouts you can implement any 3rd party CSS framework or Javascript plug-in for advanced Menu functionality.

Quick Start

Creating a Menu

To create a new Menu, go to ‘Content’ > ‘Menus’ and click the “ADD MENU” button at the top of the page. Set the ‘Menu Name’ and ‘Menu Alias’ (described in more detail in the Settings section below) and click “SAVE” to continue setting up your new Menu - as described in the following sections below.

Editing a Menu

To edit an existing Menu, go to ‘Content’ > ‘Menus’ and click on the Menu name or the associated pencil icon on the far right of the list view.
Further options are as described in the following sections below.

Items

Under the ‘Items’ tab you can create new items by clicking the “+ Add New Item” button.

Menu items can also be created directly under other menu items (using the items “3 dots” context menu) to create nested/multi-level menu functionality, or by simply dragging and dropping an existing item onto the desired parent item.
Drag and drop can also be used to reorder item within the menu structure.

Creating a new item, or selecting an existing item, will display all the properties available to it which you can further edit as needed.

Item Properties

Property
Liquid
Description
Item Name
{{item.itemName}}
The menu item’s descriptive name which, by default, will display as the label text in your site menu.
URL
{{item.itemUrl}}
The page address or web link your menu item is to follow when clicked.
Use the link manager (link icon) to source internal module items and pages to link to, or manually add your own internal or external link path.
Target Frame
{{item.itemTargetFrame}}
The instruction for where the URL will open to with reference to a HTML document frame. Eg; _blank, _self, _parent, _top or custom named frame.
ID
{{item.itemId}}
A unique, identifying name assigned to the item for targeting with Javascript and/or CSS.
Class
{{item.itemClass}}
A style name assigned to the item for targeting with Javascript and/or CSS.
Title
{{item.itemTitle}}
The value of the items title attribute for SEO purposes, screen-readers and other assistive technology.
Custom Attribute
{{item.itemCustomAttribute}}
Any custom attributes you may wish to add at an item level. Typically used for configuring Javascript Menu plug-ins. Here you would add the full attribute name/value pair/s, eg: data-custom-name="myCustomAttr"
Enabled
{{item.itemEnabled}}
Uncheck to disable the menu item from rendering on the front-end of your site.

Settings

Under the ‘Settings’ tab you can change the Name and Alias assign to the Menu.

Changing the Alias will result in any existing references to the previous Menu Alias breaking.

Layouts (Layout Groups)

A Layout Group provide full access to the HTML and Liquid markup of your Menu, allowing you to fully customise the layout and functionality of the menu as needed.

Menus can have any number of Layout Groups created for rendering menus on your site in different ways.

Layout Groups consist of 3 sub layouts which are responsible for the rendering process of the menu container, items and sub-items.

These Layout Groups can also be accessed via the File Manager or FTP in the /Content/MenuLayouts/<menu_alias>/ directory in the site's root.

The Default Layout Group is detailed below.

menu

You’ll notice how the ‘menu’ sub layout consists of the navigational wrapper (typically nav and/or ul elements) and sets up a Liquid forloop to call into the wrapper all of the Menu’s top level items using the ‘item’ sub layout to define how these will be rendered.

<nav class="{{this.alias}}">
	<ul>
	{% for item in this.items -%}
		{% include "/Content/MenuLayouts/{{this.alias}}/{{this.layoutGroup}}/item.layout" %}
	{% endfor -%}
	</ul>
</nav>

item

The ‘item’ sub layout consists of the individual item’s wrapper (typically an li element) and is where we can conditionally render the item’s attributes (such as values for href, target, title, custom attributes, etc...) via the use of Liquid tags and objects.

You’ll also notice the use of Liquid here to get the current page URL, match it against the menu item link and assign a selected class for targeting via your CSS.

{% assign isSelected = "" %}
{% if request.request_url.path == item.itemUrl %}
    {% assign isSelected = "selected" %}
{% endif -%}
<li{% if item.itemId != null %} id="{{item.itemId}}"{% endif -%}{% if item.itemClass != null or isSelected != null %} class="{{item.itemClass}} {{isSelected}}" {% endif -%}{% if item.itemCustomAttribute != null %}{{item.itemCustomAttribute}}{% endif -%}>
	<a href="{{item.itemUrl}}"{% if item.itemTargetFrame != null %} target="{{item.itemTargetFrame}}"{% endif -%} {% if item.itemTitle != "" %} title="{{item.itemTitle}}" {% endif -%}>{{item.itemName}}</a>
    {% include "/Content/MenuLayouts/{{this.alias}}/{{this.layoutGroup}}/sub_items.layout" %}
</li>

sub_items

The ‘sub_items’ sub layout consists of a conditional statement to only render a forloop if any sub-menu items exist for a given parent item. If so, we repeat the ‘item’ sub layout to again render the individual item and its properties and, once again any sub-menu items if present.

{% if item.items != null %}
    {% assign currentItem = item -%}
    <ul>
        {% for item in currentItem.items -%}
            {% include "/Content/MenuLayouts/{{this.alias}}/{{this.layoutGroup}}/item.layout" %}
        {% endfor -%}
    </ul>
{% endif -%}

BC Menu V2

If using BC’s menu v2 method for your menus, upload your menu layouts from ‘ModuleTemplates / Menu / <menu-name>’ into the corresponding Treepl CMS menu layouts in ‘Content / MenuLayouts / <menu_alias_name>’

The corresponding layouts from BC to Treepl CMS are:

  • “container.html” --> “menu.layout”
  • “group.html” --> “item.layout”
  • “childitem.html” --> “sub_items.layout”

Now, we’re finally going to get our hands dirty with some code.

We’ll need to convert the BC tags into the Treepl CMS way of doing things. Let’s reference the Menu documentation above while doing this.

Starting with the “menu.layout” file you'll want to weave your HTML markup into the Treepl CMS Liquid so that the Liquid logic renders the same markup you are referencing from BC.

Next, do the same with the “item.layout” file, weaving in the BC “group.html” markup.

Finally, the “sub_items.layout” file,

Repeat for each menu group you are using.

If you have multiple menus using the same layout group in BC, simply copy the same code you just set up into each menu layout files (menus don’t share layouts in Treepl CMS).

BC Menu V1 (legacy module)

If using BC’s original/legacy menu method, we’ll need to reference the rendered source code for your menu in the browser.

Load one of your BC site pages that features the menu. View the page source (right click, 'View Source') and identify the complete section of menu elements including the BC JS references.

Copy the menu elements into your “menu.layout” file so we can start working on converting that code.

Back in the source view, for the two JS references BC outputs, right click on the source links and save those JS files to your BC site files in an appropriate directory and than upload those to Treepl CMS in the corresponding directory.

Back in your menu layout, we'll relink the JS references to point to the new location.

Work through recoding the menu HTML into the Treepl CMS menu layouts to complete the process.

9
Setup Secure Zones

Parityhigh Effortlow Timelow Docshigh Migration Toolactive

Recreating all Secure Zones from BC into Treepl CMS is a fairly straight forward process.

Alternatively the BC to Treepl CMS Migration App can be used to automate this process.

If manually recreating your Secure Zones, you can follow the steps below:

Go to ‘Content’ > ‘Secure Zones’

Click ‘Add Secure Zone’ button.

Complete ‘Name’ and ‘Landing Page’ then “Next” to save and move to ‘Step 2: Secure Content’.

Pages will be ready for you to secure, however most other content we havn't migrated over yet so you'll need to revisit this section to secure all relevant items.

Click “Next” to save and move to ‘Step 3: Members’

Here you can manage the members subscribed to the secure zone.

For further documentation expand the box below:

Secure Zones Documentation

View full article

Multiple Secure Zones can be added to create different member’s only areas or tiered membership structures.

Creating Secure Zones

Secure Zones can be found under ‘Content’ > ‘Secure Zones’ where a list of any available Secure Zones will be shown along with the number of Members subscribed to each zone.

You’ll also be able to create, edit or delete Secure Zones - as detailed below.

1
Details

Option
Description
Secure Zone

Assign a name for your Secure Zone. This name will be used throughout the admin when referencing this Secure Zone and may also be displayed to the site user on the front-end or in Secure Zone related system emails.

Landing Page

Selecting a Page here determines the page to redirect a user to after a Secure Zone signup form submission. If multiple Secure Zones are selected for the signup form, the landing page used will be determined by the last selected Secure Zone in the list. This landing page can be overridden by use of the custom confirmation page method.

Type

Sets the access type to this Secure Zone.

“Free Access” allows subscriptions without requiring payment.

“Paid Access” allows pricing to be assigned to the Secure Zone via subscription forms.

Membership Renewal Rate

When 'Paid Access' type is applied, this option allows a billing recursion to the Secure Zone.

“Daily” billing recurs every day from initial subscription date.

“Weekly” billing recurs every week from initial subscription date.

“Monthly” billing recurs every month from initial subscription date.

“Yearly” billing recurs every year from initial subscription date.

When using Daily recurence, 5 hours is added to the secure zone expiration date to avoid loss of access while pending notification of successful payment.

Currency / Price

When 'Paid Access' type is applied, this option sets the billing currency and price.

The curreny options are defined under 'Settings' > 'Domains' > 'Currency and Format'

Subscription expiry date

Sets the default membership expiry setting when users subscribe to this Secure Zone*.

“Not Specified” sets no default option for membership expiry.

“Custom Date” defines the default expiry date for users subscribing to this Secure Zone*.

“Number of Days” defines the default number of days before expiry for users subscribing to this Secure Zone*.

*Unless alternative expiry date methods are used in the signup form which will override this setting.

2
Secure Content

Option
Description
Select Source Content

Choose the CMS content type to be listed in the window below (ie: Pages, System and Custom Modules...).

All available items from the selected Content Source will display in the left hand window and can be selected and moved to the right hand window in order to assign those items to this Secure Zone’s protection.
Likewise, protected items on the right can be selected and moved to the left in order to unassign them.

Moving items can be achieved by clicking the single arrow icons (in the direction of the desired move), or by dragging and dropping the items into the desired side.
Multiple items can be selected by holding down Ctrl (on PC) or Command (on MAC) and clicking multiple items.
The double arrows will move all items (regardless of selection) from one side to the other.

To secure Folders/directories and uploaded files, such as PDF’s, Word Docs, etc. see the 'Files and Folders' section below.

3
Members

A list of currently subscribed Members will be listed here along with their email address along with the ability to click through to their individual CRM records (by clicking their name or the pencil icon to the right), or removing the Member from the Secure Zone (by clicking the associated trash can icon to the right).
Quick searching the list is also possible via the search field just above the list view.

You can also subscribe existing CRM contacts to the Secure Zone by clicking the “Add New Member” button at the top of the page.
From the ‘Email Address’ field a dropdown list of existing contacts will be presented for selection. Start typing a known email address to filter the list to those matching your search.

The “Send email details to user” checkbox allows you to send the ‘Secure Zone Login Details’ system email to the contact at the same time as subscribing them.

4
Files & Folders

This interface allows files and folders, from the website, to be be selected from the left ‘All content’ region and moved into the right ‘Secure content’ region.

After selecting the required items (which will highlight), clicking the lock icon in the middle will list the selected items in the ‘Secure content’ region.

Multiple items can be selected by Ctrl (on PC) or Command (on MAC) clicking subsequent items.

Unsecuring items can be done in the same way but in reverse, removing items by selecting them from the right ‘Secured content’ region and clicking the unlock icon.

The “Clear All” button at the bottom can be used to unsecure all items at once.

Securing a folder will in turn secure all child items, even though they are not explicitly listed as being secured. Likewise, you do not need to secure every individual child item of a folder if that parent folder is secured.

Files and folders can also be assign to Secure Zones via the File Manager.

To secure Pages and Module items see the 'Secure Content' section above.

Editing Secure Zones

From the Secure Zone section (‘Content’ > ‘Secure Zones’) you can edit any existing Secure Zones from the list view by clicking on it’s name or the pencil icon on the right.
Secure Zones can also be deleted by clicking on the trashcan icon.

Adding a Login Form

Secure Zone login forms can be added anywhere within your site and the required form code can be obtained from the Components Manager.

For example, on a standard Page, in the ‘Content’ editor field, open the Components Manager (at the top right of this field), choose ‘Secure Zone’ > ‘Login Form’ and select “Login Form”.
The markup and form code will be copied to your clipboard ready to paste into the ‘Content’ field (or any other content area or layout within your site).

You can customise this markup as needed providing the form and inputs remain in place.

By default, the user will remain on the page they were on upon a successful login form submission, and a URL parameter will be added to the current page address of ?login=success.
However, this behaviour can be overridden by use of the custom confirmation page method, redirecting the user to a defined page, again with the URL parameter ?login=success added to the page address.

For example, you could set the confirmation page so the user is taken into their account page after logging in.

Alternatively, you can instruct the login process to redirect the user to a specific Secure Zone's Landing Page (defined in that Secure Zone's settings) by adding the following hidden input to the form code, replacing [secureZoneID] below with the ID of your Secure Zone:

<input type="hidden" name="secureZoneId" value="[secureZoneID]">

If the user submits incorrect login details, the ‘Forbidden’ (403) system page will be displayed.

If a visit to a secured page/item is attempted while the user is not logged in, the ‘Unauthorised’ (401) system page will be displayed.

These system pages can be customised and are found under ‘Settings’ > ‘System Pages’.

See System Pages documentation for more details.

Logged in users will be logged into all Secure Zones they are subscribed to and will have access to all the secured content corresponding to those Secure Zones.

A logged in session will expire after 24hrs regardless of member activity on the site during that session. Members will be required to log in again after their session has expired if they attempt further access.

Rendering Logged In Member Data

When a user is logged in to a secure zone, the request.currentmember property (part of the request object) will return the logged in member's data. An example is below:

{
    "is_logged": true,
    "currentmember": {
        "id": 162,
        "email": "asmith@example.com",
        "firstname": "Alex",
        "lastname": "Smith",
        "address": null,
        "city": null,
        "state": null,
        "zipcode": null,
        "country": "Australia",
        "site": null,
        "phone": null,
        "status": "",
        "notes": "",
        "type": 2,
        "stripecustomerportallink": "https://YOUR-SITE.treepl.co/public/api/stripe/create-customer-portal-session",
        "isDataUsingAllowed": true,
        "createddatetime": "9/11/2019 3:32:23 AM",
        "updateddatetime": "3/24/2021 2:44:32 AM",
        "securezones": [
            {
            "id": 2,
            "name": "Members Secure Zone",
            "landingpageid": 2541,
            "createddatetime": "2018-11-21T15:17:23.037",
            "updateddatetime": "2018-11-21T15:17:23.037",
            "expirydatetime": "9999-12-30T13:00:00"
            }
        ]
    }
}

To access data within the securezones array you can use a forloop to loop through each secure zone item.
So we might render a list of available secure zones and their expiry dates, like so:

<ul>
{% for zone in request.currentmember.securezones %}
    <li>{{zone.name}} (Expiry: {{zone.expirydatetime | date}})</li>
{% endfor %}
</ul>

Rendering the following details:

  • Members Secure Zone (Expiry: 30-Dec-9999)

For more information about retrieving this Liquid data, see the request object documentation.

Adding a Logout Action

You’ll probably also want to give users the ability to log out of their secured session.
You can do this by generating a logout link from the Component Manager under ‘Secure Zone’ > ‘Logout Action’. Which will copy the following code to your clipboard:

<a href="/public/api/members/logout">Logout</a>

You can also add to this link with a redirect parameter if you would like users to be redirected to a specific page upon logout. Add the redirectURL parameter along with your page URL to the link path like so:

<a href="/public/api/members/logout?redirectURL=/YOUR-REDIRECT-PAGE">Logout</a>

Adding a Signup Form

If you’d like website users to be able to subscribe themselves to a Secure Zone, or even multiple Secure Zones, you’ll need to create a Form (‘Content’ > ‘Forms’) in order to add the user to the CRM and store their credentials for the Secure Zone/s.

This form can also contain any other fields, subscriptions, payments, etc. so you can customise this for your specific requirements.

The only requirement for the Form to be able to subscribe a user to a Secure Zone is to have a system email address field and a Secure Zone selected from the ‘Settings’ tab. However, additional Secure Zone options can be added such as Secure Zone expiry date/days and set/confirm password fields.

See Forms documentation for more details on form fields and settings.

After a user submits a Secure Zone subscription form they may receive up to three system emails. A first-time subscriber, by default, may receive the ‘Confirm Email Notification’ email, to ensure that they are a valid user (users with confirmed email addresses will not continue to receive this email). Secondly, they will receive the ‘Secure Zone Login Details’ email, providing details about the Secure Zone/s they are now subscribed to. Both of these emails can be customised and are found under ‘Email Notifications’ > ‘System Emails’. And third, they may receive a Auto-response email if one has been configured for the form used.

The email confirmation requirement for subscribing members can be disabled under ‘Settings’ > ‘Misc’ > ‘CRM Settings’. For information can be found here.

See System Emails documentation for more details.

Update Account Form

You can add a system form to a page which will allow a logged in user to edit/update the data in their CRM Contact record (including any Advanced CRM Group fields).

This form code can be generated by going to the Component Manager (top right of most admin WYSIWYG fields), expanding the ‘Secure Zone’ section and selecting “Update Account Form”. The form code will then be copied to your clipboard ready for pasting into your page or code editor.

Only the logged in user can update their own CRM record

Paid Secure Zone Subscriptions

Secure Zones can be configured with paid access requirements allowing you to charge membership to the secure zone on a recurring basis. See above Creating Secure Zones for setting price and renewal rate for the zone.

To initiate billing for a recurring Secure Zone membership you would create a subscription form (as noted above in Adding a Signup Form) and include payment fields to collect payment from the user and for the Treepl CMS to configure the recurring payment profile with the payment gateway (you’ll also need to configure a Payment Gateway that supports recurring billing [/site-settings-and-management/payment-settings]).

Forms collecting payment for paid recurring Secure Zone should be configured with the “Generic” form type.
If your Secure Zone only requires an initial, one-off payment you would not configure the Secure Zone with a recurring payment rate and instead, simply collect an arbitrary payment upon initial signup.

To set the price in your signup form you can add a price parameter to your form component tag when adding the form to your page, like so:

{% component type: "form", alias: "my_paid_zone", price: "30" %}

You can also use the Component Manager to configure your form component tag and calculate the required price based on the form settings. In the Component Manager, under ‘Secure Zones’, select “Sell Memberships Forms” and select the payment form from the available list of forms.

Only forms correctly configured with a Secure Zone assignment and payment method will display in this list.

If subscribing users to multiple paid Secure Zones the price will need to be the total of both zones.

The calculated total must match the price being collected else the form submission will produce an error. However, you can apply discount codes and/or gift vouchers to reduce the charged amount (providing your site plan allows discount codes and gift vouchers).

If using discount codes to reduce a Secure Zone subscription amount, there are settings that you can configure if the discounted amount applies only for the initial transaction or for the recurring transactions as well - found under ‘eCommerce’ > ‘Settings’ > ‘Recurring Settings’.

Manually Subscribing Contacts

Adding Contacts to a Secure Zone during creation of the Secure Zone or while editing a Secure Zone is one way of subscribing Contacts, as noted in the above Creating Secure Zones section. However, you can also subscribe Contacts directly from their CRM record.
Locate the Contact in the CRM and navigate to the ‘Subscriptions’ tab. Here you find options to select from available Secure Zones, set the subscription expiry dates, or send password recovery or login details system emails to the Contact.

Manually Approve Secure Zone Subscribers

If you’d like to allow users to create their accounts via the front-end of the website but not be able to log in until an admin users has approved them, you would configure the sign up form with your desired fields (and likely the password fields), but you would not select a secure zone to be assigned upon submission, under the forms ‘Settings’ tab.

After reviewing the account request, the admin user would simply subscribe the Contact to the appropriate Secure Zone/s and, if needed, send out either the Password Recovery email and/or the Login Details email. Or otherwise inform the user that their request has been approved.

When a first-time user submits a form with password fields present, they will receive the ‘Confirm Email Notification’ system email and will need to follow the validation link and confirm their email address before they are able to log in.

Resetting Password

A password reset workflow can be initiated either by the site user, from the front-end of the site (if made available), or by an admin user from the site admin area.

On the front-end, providing a link has been made available to the site’s ‘Request Reset Password’ system page (usually a link is included with the login form), the Member can submit the form on this page to trigger the password reset workflow. This workflow will send the Member an email with a unique, temporary link to the ‘Reset Password’ system page where they’ll be able to create a new password.
Upon submitting the password reset, the user will be directed to the ‘Request Reset Password Result’ system page.

All of these system pages can be customised and are found under ‘Settings’ > ‘System Pages’.

See System Pages documentation for more details.

From the site admin, an admin user can also initiate the same password reset workflow for an individual Contact.
First, locate the Contact in the CRM, or from the list of members in the Secure Zones section. Once in the Contact’s record, navigate to the ‘Subscriptions’ tab and click the “Send Password Recovery E-mail” button.

The temporary link for a password reset is valid for 24hrs.

Email Domain Sender Verification

As the Secure Zone module requires various system emails be sent out to website users, it’s strongly recommended to review your ‘From’ email domains that you’re using for these outbound system emails.
By default, the ‘trustedemail.co’ domain is set as the ‘From’ address for system emails and as such is already verified. However, if you are personalising these emails with your own email addresses, ensure you have the relevant SPF records in place for those domains and that you’ve added the domain to the verified senders list under ‘Settings’ > ‘Domains’ > ‘Email Domains’ tab.
Failing to configure these settings for custom sending addresses may result in lower deliverability rates.

10
Setup Mailing Lists (MailChimp)

Paritylow Effortmed Timelow Docshigh Migration Toolpending

Before you can set up Mailing Lists in Treepl CMS you need to connect a MailChimp account using their provided API key.

Below are documentation for setting up the API connection and further inofrmation about adding Mailing Lists.

API Provider Documentation

View full article

Found under ‘Email Marketing’ > ‘API Provider’, select the service provider from the dropdown list and then enter your API key provided by your email marketing provider.

Mailchimp API Key

To generate your Mailchimp API key, log into your Mailchimp account and click on your profile name in the top right of the screen. Select ‘Account’ from the dropdown. Then click on the ‘Extras’ tab and select ‘API keys’.

Under the “Your API keys” heading, click the “Create API Key” button and your key will be generated.
Copy the key value and add it to the Treepl ‘API Provider’ section and save the settings.

Your Mailchimp integration is now complete and you can start managing Mailing List and Subscribers directly from within Treepl CMS.

Mailing Lists Documentation

View full article

Found under ‘Email Marketing’ > ‘Mailing List’, if you have set up an email marketing provider integration with Treepl CMS, this section will be integrated with that service and allow synchronisation of data.

Current email marketing integration allows for Mailchimp connections only. See the ‘API Provider’ documentation in the ‘Related Articles’ section below for setting up your integration.

Existing lists can be managed here, with any changes or removal of the lists reflected in your email marketing provider account.

Creating a new list here will prompt you for all the required information that your email marketing provider will need, and upon saving, the Mailing List will be created in both Treepl CMS and your email marketing provider in real-time.

You can also view and manage list subscribers under the “Subscribers” tab with the ability to remove (unsubscribe) contacts or manually add them.
From this section you can only add subscribers from already existing contacts within your site, locating the contact by starting to type their email address into the input field.
The subscribed contact will then be pushed to the matching list at your email marketing provider.

As at version 2.3, Mailing List and subscriber changes will only be pushed up to Mailchimp. Changes made to Mailing Lists within Mailchimp are not currently pulled back into Treepl CMS. With the exception of an unsubscribe event (either from within the Mailchimp admin or via an unsubscribe link) which will be reflected in both Mailchimp and Treepl CMS in real-time.
Further syncronisation methods are coming soon.

Currently, Email Campaigns would generally be managed in MailChimp for full functionality of the MailChimp service. However, basic Email Campaigns can be add via Treepl CMS and pushed to MailChimp.
More documentation coming soon on this.

11
Setup Site Search

Paritymed Effortlow Timelow Docsmed Migration Toolpending

You don’t need to set up any Site Search module in Treepl CMS. This functionality is ready to use simply by inserting the search form and component tag.

So there is nothing you need to do in this step.

Later in the migration we’ll need to replace any BC site search forms so we’ll reference back to this documentation:

Site Search Documentation

View full article

Results from multiple modules (ie: Pages, Products, Blog Posts...) will all be included in the one output/collection and displayed using the one specified list layout.

Search queries are currently made against all of the following modules:

  • Pages
  • Blogs (Blogs and Posts)
  • Events (Groups and Items)
  • Banners (Groups and Items)
  • Galleries/Sliders (Groups and Items)
  • FAQs (Groups and Items)
  • Custom Modules
  • Authors
  • Products/Catalogs

The fields that can be search upon include:

  • Name
  • SKU Code
  • Site Search Keywords
  • Description

Search List Layout

The site search list layout, by default, is found under ‘Pages’ > ‘Edit Settings’ > ‘Layouts’ and you can create additional list layouts in the Page settings for this purpose.

You can also change the source of the layout used with the source parameter on the ‘site_search’ component tag. For example, you could change the source form “Page” to “Blog Post” and create your list layout within the Blog Post layout interface.

Regardless of where the list layout is sourced from, only data output in the resulting items can be rendered to the list. For example, the name and description are common fields across all module types and so you can safely use {{this['name']}} and {{this['description']}}, respectively. However, if you wanted to render a Products price, for example, in the site search results, using {{this['price']}} would only work for module items that have a price field and so you may need to allow for this for when other item types are listed. Such as with a Liquid IF statement: {% if this['price'] %}Our price is: ${{this['price']}}{% endif %}

Adding a Search Form

There is no admin interface or settings page for this feature. However, the code for the search form and results component can be generated from the Component Manager when using the admin editor for any item/page.

In the Component Manager, selecting “Site Search” from the list of available Components will copy the full search form code and results component tag to your clipboard, ready to be pasted in your page or layout.

The default code is as follows:

<form action="">
    <input type="text" name="SearchKeyword">
    <input class="button" type="submit" value="Search">
</form>
{% component type: "site_search", source: "Page", layout: "Site Search List", displayPagination: "true" %}

This generates a form element including a SearchKeyword text input, submit button and an empty form action attribute and the ‘site_search’ component tag for rendering the list of results. More on these elements below.

Keyword Input

The SearchKeyword text input allows multiple keywords to be entered for searching.

The search logic combines multiple keywords with an AND operator, so items will be returned only if they include ALL keywords entered.

Currently, Site Search does not support any manual logic operators to be used in the keyword input field (such as; AND, OR, NOT...)

Keywords submitted will be passed as URL parameters for use by the ‘site_search’ component tag.

‘site_search’ component

This component outputs data relating to a keyword search query passed in the URL parameter SearchKeyword (typically from a search form submission) to the page that the component resides on.

By default, the Site Search form has an empty action attribute, so, once submitted, it will redirect to the current page with the URL parameter appended to the page URL.

The ‘site_search’ component will use the value of this parameter (the keyword/s) to return items to its layout and/or collection.

For example, if you placed the default Site Search code onto a page with URL slug “/my-search”, and entered “Keywords to Search” for the search query, the form submission will reload the page as “/my-search?SearchKeyword=Keywords+to+Search”.

You can, instead, separate the Site Search form from the ‘site_search’ component, having the component on a separate page and sending the search query to that page instead of the current page.

To do this, you’d add the other page URL slug to the form’s action attribute. So if the other page was “/search-results”, you’d adjust the form as such:

<form action="/search-results">

Then, insert the ‘site_search’ component tag on this page where the search query will be passed as “/search-results?SearchKeyword=Keywords+to+Search”.

In either case, any items found that include all those keywords will be returned via the component.

You may want to separate the Site Search form from the component tag if you want a dedicated search results page, or where you have a search input in the header or footer of all pages as so searches could be made from any page.

There are additional ways to configure the ‘site_search’ component tag, such as, for controlling pagination, sorting results, assigning the data to a collection, etc. More information on this can be found in the Site Search Component article here.

For searching specific modules only and/or with additional query fields, see the “Searching Module Items” heading for that particular module’s documentation.

Site Search Component Documentation

View full article

This component outputs data relating to a site search request passed in a URL parameter SearchKeyword to any page (typically from a search form submission).

{% component type: "site_search", source: "Page", layout: "Site Search List" %}

Search queries are currently made against all of the following modules:

  • Pages
  • Blogs (Blogs and Posts)
  • Events (Groups and Items)
  • Banners (Groups and Items)
  • Galleries/Sliders (Groups and Items)
  • FAQs (Groups and Items)
  • Custom Modules
  • Authors
  • Products/Catalogs

Parameters and Options

Parameter
Values
Required
Description
type
site_search

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
Page (default)
<Entity name/ID>
The entity name or ID that the layout is to be referenced from.
layout
Site Search List (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Retrieves matched search results at random. For example, if you limit the results to 5 but 10 items are matched to the search term, 5 of the 10 results will be output at random. If pagination applied, th esecond page will be the 5 remaining random items.

If used in conjunction with sortOrder the sorting criteria will be applied to the randomly retrieved results.

limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no value is passed to the SearchKeyword parameter (not if no search results are found). The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

For an example of the Liquid data that will be output from this components, please see the ‘Basic Site Search Demo’ link in the External Resources section below.

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible in two main ways:

1. Using Liquid in the specified Layout via the this object.

{{this['name']}}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "searchResults" is as follows:

{% component type: "site_search", source: "Page", layout: "", collectionVariable: "searchResults" %}

Looping through the collection to render all the item names in a list:

<ul>
{% for sr in searchResults.items %}
    <li>{{sr['name']}}</li>
{% endfor %}
</ul>

Accessing a specific item within the collection. In this case the first item name (zero based index):

{{searchResults.items[0]['name']}}

12
Replicate Existing URL Redirects

Parityhigh Effortmed Timemed Docshigh Migration Toolactive

While you can import URL Redirects into Treepl CMS in bulk, BC doesn't have an export function available from their admin, so you’ll need to enter URL redirects manually. Alternatively the BC to Treepl CMS Migration App can be used to automate this process.

Dragging a selection over, and copying, BCs table list of URL Redirets, you can then paste this into a spreadsheet as a quick and mostly effective export method (with exception to long URLs which may be truncated in the BC table view)

See below for more information on URL Redirects.

URL Redirects Documentation

View full article

You may want to do this if migrating a previous website to a new website structure within Treepl CMS where page addresses need to change or are structured differently, or if changing the URL/path of an existing page. Creating a 301 redirect will help you maintain SEO ranking for that URL while moving it’s address.

Quick Start

Managing URL Redirects

When adding or editing a URL redirect you’ll need to enter in the source URL (the previous URL path) and the destination URL (where you’d like the visitor the end up if attempting to access the source URL).
You’ll also be able to turn the redirect off and on at any time using the ‘Enable’ checkbox.

The option to set the case sensitivity of your redirects is also available, which is particularly helpful if migration from a previous platform where URLs were case sensitive and need to be handled as such.

If you have many URL Redirects listed, you can use the search filter at the top of the list to help quickly locate items containing your keyword search.

Removing a URL redirect completely can be done using the trashcan icon to the right of the item.

Import / Export

URL Redirects can also be imported, exported or deleted in bulk via the context menu () next to the "Add New URL" button.

13
Setup Admin User Roles

Paritymed Effortlow Timelow Docshigh Migration Toolpending

While we won’t be adding Admin Users just yet, we’ll still get the User Roles set up and in place ready to assign users to in a later step.

To set up Admin User Roles, go to ‘Settings’ > ‘Admin User Roles’

Click ‘Add Admin Role’ button.

Complete a 'Name' for your Role and configure the permissions, turning off checkboxes to block users access to those items.

Many permission items have nested items for further fine-grain control.

User Roles Documentation

View full article

Admin User Roles and Permissions

Adding / Editing User Roles

There is no limit to the number of roles you can create and you can add or remove admin users from roles at any time. See ‘Admin Users’ for details on assigning roles.

To create a new role click the 'ADD ADMIN ROLE' button at the top of the page, or to edit an existing role click on the role’s name or the associated pencil icon on the far right.
The trash can icon allows you to delete a role.

User permissions cover almost all areas of the admin, as well as FTP access, with most items allowing individual control for viewing, creating, editing and deleting items.

There are also permissions for allowing access to module and system settings, reports and even controlling admin users and roles.

Use the checkboxes to enable or disable group level permissions, or sub-level permissions (using the arrow to expand a group), and click the ‘SAVE’ button at the bottom to save the permissions for that role.

For Custom Modules there is a permissions group called “Default Custom Module Permissions” which will be applied to any new Custom Modules that are created. However, each Custom Module will also have its own set of permissions available for independent control if needed.

For sites on the ESSENTIAL plan, where custom admin user roles are not available, all permissions, including FTP access, will be active for any admin user added.

Use Cases

Admin User Roles are suited for securely controlling access to sections of the admin interface as well as the tasks that the admin user can perform within those sections.

This makes it ideal for providing admin access to a variety of different people for different job roles without risking exposure of sensitive information or site misconfigurations by untrained/unauthorised users.

For example; you or your client might employ the services of a third party SEO provider and need to provide site content control to them. However, access to the CRM needs to be prohibited from third parties - or perhaps they can 'view' CRM records but not 'edit' them. Admin User Roles can be configured to do this.

Another use case might be to restrict access to your client for certain features, either while in development or due to how your agency bills for services and site functionality - independent to the actual Treepl CMS site plan. Eg: While the site may require the eCommerce plan for various functionality, a shopping cart is not part of your project agreement with your client and would otherwise require additional fees/contracts in order to be implemented under the terms of your agency.

For controlling the appearance or layout of the admin menu and what the content managers most need to see, it is usually best to use the ‘Admin Menu Configurator’ rather than permissions set via Admin User Roles.

14
Setup Email Notification Workflow/s

Paritymed Effortlow Timelow Docshigh Migration Toolactive

We’ll set up the default Notification Workflow email (and additional ones if needed - make sure you’re site plan supports multiple Workflow Emails if you need more than one Workflow)

You can optionally, upload your BC workflow email layouts into your Treepl CMS instance via FTP into the ‘Content / SystemEmails’ directory. However, if you only have a few email layouts it may be better to set these up via the Admin as you'll need to configure other settings as well.

Alternatively the BC to Treepl CMS Migration App can be used to automate this process.

See below for documentation on Workflows.

Workflows Documentation

View full article

A Workflow is an action (or rule) that determines how a notification is handled. Workflows allow for greater control of email notifications that get sent when Forms are submitted on the front-end of your website. In this case we’re looking at Email Notifications.

Workflows consist of 3 main components. The ‘trigger’, which would be a form submission occurring on your website. The ‘action’, which is the workflow rule determining how the email notification will be sent and the ‘content’, which is the actual message delivered.

To help further visualise how all this comes together we can nest these components together as in the below diagram.

Custom Workflow Components Diagram

The outer layer is the form triggering the Workflow, which in turn governs the email content components to be used. Noting here that an email can consist of an overall template as well as the message body.

Furthermore, the trigger can activate multiple Workflows, in the case where various email notifications may need to be sent with different content and/or different recipients.

Built-In 'Inquiry Workflow'

Let’s first look at the built-in ‘Inquiry Workflow’ available by default.

This Workflow cannot be renamed or deleted as it’s the system default available to all website plans. You can add additional custom workflows if your website plan includes the Custom Workflow feature.

Assigning a Workflow

You can assign a workflow to a form under the forms settings tab, found under ‘Content’ > ‘Forms’, choosing the desired form (or creating one), and navigating to the ‘Settings’ tab.

Select the workflow from the ‘Workflow’ dropdown list and save the form.

If no Workflow is selected the form will not trigger any notification and so no admin users will be notified.

The ‘Email Notification’ section found here is for enabling an email autoresponder to be sent out to the users upon form submission. More on this can be found in the documentation around Forms.

Edit a Workflow

You can also customise the workflow recipient/s.

Under ‘Email Notifications’ > ‘Workflows’ you’ll find the workflows available and you can edit a chosen workflow’s settings. The built-in workflow has a preset name and the workflow email to be used, and from here you can add the email addresses of the recipients that are to be notified. Multiple recipients can be added.

Duplicate a Workflow

When on the edit page for a Workflow, you can use the duplicate icon (), next to the Workflow tilte at the top of the page, to make a copy of the current Workflow, including the recipients and assigned Workflow Email.

Workflow Notification Email

The preset workflow email is labeled ‘Workflow Notification’ and we can access this email, again under ‘Email Notifications’ > ‘System Emails’ and choosing the item called ‘Workflow Notification’.

This is only for the built-in workflow email notification. If you create your own custom email notifications they will be found under ‘Email Notifications’ > ‘Workflow Emails’ (see Custom Workflows section below).

The email notification can be assigned an email template, which can be further edited under ‘Email Notifications’ > ‘Email Templates’. As well as a “Subject” line, “From email” address and “From name” which would likely represent the staff member responsible for these notifications and to whom the recipient/s would likely reply to.

Dynamic content can be added to the email body, rendering information from the form submission as well as inserting most other Liquid components and logic (suitable for email content).

Email Notification Template

Similar to above, the built-in “System Default” email template can be edited or you can create your own custom templates. Again, with the ability to insert dynamic content related to the notification or other website data accessible via Liquid.

Custom Workflows

Now, to look at setting up custom workflows.

In this case, you’ll likely be creating all the various workflow components from scratch and bypassing the system built-in options. So I suggest working backwards (from the email template through to the form) to avoid stepping on your own toes, otherwise, you’ll need to assign items to items you’re working on that haven’t yet been created.

So, starting at the email templates level, under ‘Email Notifications’ > ‘Email Templates’, we’d create a new template. You could duplicate the “System Template” as a starting point, using the ‘Duplicate’ action, or start from scratch with your own code.

Once the template has been created and saved we can move on to the custom workflow email, under ‘Email Notifications’ > ‘Workflow Emails’.

Set an appropriate name, assign the template we just created and configure the subject, and senders details. For the content, you can use the “Email Data” button to insert dynamic Liquid collections for further coding along with your custom HTML and message.

You may even want to go back to the system notification email and copy it’s HTML and Liquid code as a starting point.

After saving your email content, we can add a custom workflow rule to control when the email notification is sent. Under ‘Email Notifications’ > ‘Workflows’, click “Add New Workflow” and set an appropriate name for your workflow. Assign the workflow email we just created and then add the email addresses of any recipients who need to receive this notification and save the workflow.

Finally, assign your custom workflow to a form (or create a new form) under ‘Content’ > ‘Forms’, choosing the desired form to work with and navigating to it’s ‘Settings’ tab where we can assign the Workflow.

Save the form and your new custom workflow will now be triggered upon its submission.


Triggering Different Workflows

A form can be configured, via its ‘Settings’ tab, to trigger single, or multiple, predefined Workflows. However, there may be cases where you want to trigger a different Workflow/s based on conditions during the form's submission on the website.

An example of this might be allowing the user to select which department an enquiry is to be sent to. Or perhaps the condition is dynamically set, without user input, based on other variables such as Liquid data or detecting a users selection of another input via Javascript.

You can achieve this by adding an input to the form with name="customWorkflows" and value="[WorkflowID]" where [WorkflowID] is to be replaced with your desired workflow’s ID.

You can find the Workflow ID by navigating to the appropriate Workflow in the Treepl CMS Admin and noting the trailing number in the URL.
eg: https://[YOURSITE]/admin/custom-workflow/2

Insure your site plan supports multiple Workflows in order to utilise this method.

In the first example, where the user can select the appropriate workflow, you could add a dropdown to the form with the following values:

<select name="customWorkflows">
    <option value="[WorkflowID]">Sales Enquiry</option>
    <option value="[WorkflowID]">Technical Support</option>
</select>

Or the second example, where the Workflow is set based on other conditions such as a Liquid variable, you could have a hidden input field like so:

<input type="hidden" name="customWorkflows" value="{{myWorkflowVariable}}">

Or, if setting the Workflow ID with Javascript based on the selection made in another dropdown:

<input type="hidden" name="customWorkflows" value="1">

<select name="enquiryType">
    <option value="">- Please select -</option>
    <option value="Sales Enquiry" data-workflowid="1">Sales Enquiry</option>
    <option value="Technical Support" data-workflowid="2">Technical Support</option>
</select>
<script>
    var workflow = document.querySelector('input[name="customWorkflows"]');
    var selector = document.querySelector('select[name="enquiryType"]');
    
    selector.addEventListener('change', changeWorkflow);
    
    function changeWorkflow(el) {
        var dataID = el.target.options[el.target.options.selectedIndex].getAttribute('data-workflowid');
        workflow.value = dataID;
    }
</script>

You can even trigger multiple Workflows by changing the input type to a multi-selection style input, such as checkboxes:

<input type="checkbox" name="customWorkflows" value="1">
<input type="checkbox" name="customWorkflows" value="2">

Or even with a comma separated list of Workflow ID’s in a text input.

<input type="text" name="customWorkflows" value="1,2">

Triggering Workflows based on form inputs, with either a valid or invalid value for the Workflow ID, will override any Workflow settings configured in the forms ‘Settings’ tab, even if no Workflow is enabled there.

SPF Records

An SPF record is a TXT record that defines which authorised parties can send email on behalf of (in the name of) your own domain name.

There are various cases where Treepl CMS can send out emails in which you would want to appear as though they originated from you or your clients email address. Such as web form notifications, autoresponders, system messages, etc.

So that Treepl CMS can do this in an authorised, non-spam risk way, it is strongly advised that you add the following 'SPF' record to any domain name's DNS that will be used with Treepl CMS. The 'SPF' record would have @ as the Host/Name field (or left blank, depending on how your DNS service prefers it).

Use the SPF Generator to easily construct your SPF record, or to understand more about these values, or to manually construct your SPF record, see further details below.

SPF Generator

From your current DNS, eg: v=spf1 a mx include:_spf.google.com ~all





Instructions for manually creating, or updating, your SPF Record

For any domain name added to a Treepl CMS website that will utilise system email messages, you'll need to add include:_spf.trustedemail.co to your SPF Record, or create one if an SPF Record does not already exist.

Example:

v=spf1 include:_spf.trustedemail.co ~all

If your DNS services doesn't list 'SPF' as a record type choose 'TXT' as the record type instead.

Additionally, if you have Treepl hosted email (OpenSRS), your SPF record must also have include:_hosted.trustedemail.co.

So building on the example above we'd now have:

v=spf1 include:_spf.trustedemail.co include:_hosted.trustedemail.co ~all

It may be the case that you already have other 3rd parties sending emails on behalf of your domain and therefore already have an SPF record in place. In which case you'd need to add to this record and combine any existing entries with Treepl CMS values above.

Below is an example including an existing domain name of a 3rd party service (Google) plus Treepl CMS includes for both system emails and hosted emails:

v=spf1 include:_spf.trustedemail.co include:_hosted.trustedemail.co include:_spf.google.com ~all

For more information regarding SPF Record syntax refer to the official specification here.
And to check your SPF record syntax is valid you can use a service such this SPF Syntax Validator

15
Replicate Web Forms

Parityhigh Effortlow Timemed Docshigh Migration Toolpartial

You can create new web forms in the Treepl admin for each of your BC Web Forms and copy over and adjust your form layout/code.

Alternatively the BC to Treepl CMS Migration App can be used to automate this process.

See below for documentation on Forms.

Forms Documentation

View full article

12

Quick Start

Creating a Form

Found under 'Content' > 'Forms' in the admin, you can create as many forms as needed, add system and custom fields, edit the forms HTML layout and configure advanced settings such as notifications and Form behaviour.

Forms - Create / Edit

To create a new form click the blue 'ADD NEW FORM' button at the top of the page, or to edit an existing form click on the form name or the associated pencil icon on the far right.

13
Form Builder

When creating or editing a form you'll be able to set the name, alias and type of the form and build out the desired fields using the form builder.

Name
Description
Name
Descriptive name for the form.
Form Alias
System reference for the form.

Changing the alias will result in any existing references to the previous Form alias breaking.

Type

Generic
If payments are collected via the form, this option configures the form for general collection of any arbitrary amount.

SingleItem
If payments are collected via the form, this option configures the form for collection of payment against Event or Module items that have a price.

CheckOut
If payments are collected via the form, this option configures the form for use in the shop checkout process, collecting the order total.

Simply click on the system field button on the left to add them to your form preview on the right.
You can also create custom fields of various data types by clicking the '+ Add custom field' link under the system field button.

By dragging the form preview fields around you can rearrange the order they will be output in the default HTML form layout.
Fields added to your form preview can also be further edited by hovering over the field and clicking the pencil icon.
Likewise, clicking the trashcan icon will remove the field from your form configuration.

Field options vary depending on the data type chosen, however most fields can also be set to "required", which will enforce those fields to be completed before a successful submission can be made.

Make sure you save both the field you are working on AND the whole form itself (with the save button at the bottom of the page) to ensure all changes are applied.

reCAPTCHA v2 or v3 is required on all forms unless they include payment fields or are submitted via a logged in user.

Form fields that are removed from an existing form can compromise any previously collected data for that field that exists in the CRM (Form Submissions).
Collected data will remain visible in the Form Submission preview screen and in the cases Liquid component output only while the Form Submission item has not been resaved/edited. However, any legacy data will not be included in Form Submission exports at any stage as the column headers are derived from active form field properties only.

System Fields

Name
Description
Email
Field to accept users email address into the CRM.
First Name
Field to accept users first name into the CRM.
Last Name
Field to accept users last name into the CRM.
Phone
Field to accept users phone number into the CRM.
Site
Field to accept users website address into the CRM.
Address
Field to accept users address line (unit/number and street) into the CRM.
City
Field to accept users city/suburb/provence into the CRM.
State
Field to accept users state/territory into the CRM.
ZipCode
Field to accept users zipcode/postcode into the CRM.
Country
Field to accept users country into the CRM (will accept any string value; country name, country code or otherwise)
Status
Field to accept an arbitary value into the CRM to assign any particular status to a user.
Notes
Field to accept an arbitary value into the CRM to assign any particular notes to a user.
Mailing Lists
When an Email Marketing provider is enabled for your site and Mailing Lists have been created, they will be listed for this form field option where you can select which mailing list/s the user will be subscribed to.
Accept Payment
Adds payment related fields to the form, including a dropdown to select payment method (based on payment gateway/s enabled) and an amount field.
The amount field is expecting a value set via a custom property in the form's component tag, eg: {% component type: 'form', alias: '<form_alias>', price: '9.95' %}
Or otherwise passed as a Liquid variable called paymentAmount (as is the case when used in conjunction with a paid Event).
Accept Event Subscription
Adds Event related fields and Liquid data to the form, including the appropriate Event component tag and an allocations (seats) field.
The form is expecting an Event ID to be provided via a custom property in the form's component tag, eg: {% component type: 'form', alias: '<registration_form_alias>', eventId: '{{this['id']}}' %}

This assumes the Event form is placed on the Event detail layout, where {{this['id']}} will work. Otherwise, the Event ID will need to be hard-coded manually or added via an alternative Liquid variable.

Password
Adds a password field and corresponding confirm password field, which needs to match for a successful form submission. Password will be assigned to the user in the CRM.
Secure Zone Expiry Date
Adds a date field which will assign the provided date as the users Secure Zone Expiry Date.

Cannot be combined with below Secure Zone Expiry Duration

Secure Zone Expiry Duration
Adds a number field which will assign the provided value as the users Secure Zone Expiry Days.

Cannot be combined with above Secure Zone Expiry Date

reCAPTCHA v2
Adds Google reCAPTCHA v2 spam protection to the form.

Cannot be combined with below reCAPTURE v3

reCAPTCHA v3
Adds Google reCAPTCHA v3 spam protection to the form.

Cannot be combined with above reCAPTURE v2

Field Types

Type
Data
Description
DateTime
string
This field will accept any string as it's value.
Although, may want to use a standard date format (such as ISO 8601) or implement a date picker plugin to correctly format a date so you can better use that data later in your code.
CheckboxList
comma-separated list
Allow multiple options to be selected from a list of available options as checkboxes.
DropdownList
comma-separated list
Allow a single option to be selected from a dropdown list of available options.
ListboxList
comma-separated list
Allow multiple options to be selected from a list of available options.
RadioList
comma-separated list
Allow a single option to be selected from a list of available options as radio buttons.
Multiline
string
Multiline inputs allow larger amounts of text to be entered along with line breaks.
String
string
String inputs allow for a single line of text.
Boolean
true/false
Booleans allow only a true of false selection. When not selected its submitted value will be blank and when selected its value is 'on'.
Upload
path
A file input allowing users to select a file from their computer to upload.

If using the Upload field type you must add enctype='multipart/form-data' as an attribute to your form element.

Upon successful upload the file will be listed in the CRM under 'Form Submissions' and the file will be stored on the server using a directory structure in the following format:
/_form_submissions/<form_id>/<submission_id>/<file_name>-<dateStamp><.ext>

The multiple parameter is currently not supported for file type inputs. To add multiple file upload fields to your form you will need to add additional upload fields in the Form Builder and insert the corresponding HTML into your form layout.

14
Edit Layout

Upon first creation of a Form, the Layout will auto-generate the default Form code that will be used to render your fully functioning Form to the page.
Whilst this default Form Layout has not been edited it will continue to auto-update if any fields are added or edited.
If however, your Form Layout has been customised, you will need to manually adjust it for any fields added or modified in the Form Builder.

To get the correct form field code for any system or custom field added via the Form Builder, click the “Form Fields” button and select the desired field from the list. Doing this will copy the field code to your clipboard ready for pasting into the Layout.

The Form Layout can also be reset back to default by clicking the “Restore to Default” button.

This will remove any custom code changes made in this Layout.

15
Settings

Form Settings allow you to control aspects of the Forms behaviour after it is submitted, such as the Workflow triggered, Secure Zone subscription process and Auto-responder settings.

Option
Description
Workflows

Assign the Workflow/s to be triggered upon successful form submission.

You can also programatically trigger Workflow Notifications - see below for details.

Secure Zones

Subscribe the user to a Secure Zone/s upon successful form submission.

This setting will redirect the user to the Secure Zone's landing page after successful form submission (unless a custom redirect is enabled - see below for details) and will also trigger the 'Secure Zone Login Details' System Email to be sent to the user.

Enable Secure Uploads

Enables restricted access to any files in the designated upload folder (assigned in the ‘Uploads Folder’ setting below). Access to the files will only be granted for logged in admin users, else, the 403 - Forbidden system page will be shown.

Uploads Folder

Assign a folder to be used for this form’s file uploads (if any ‘Upload’ field types are used). Default folder path is ‘/_form_submissions/’. If the folder does not exist at time of form submission the folder will be created.

Autoresponder

The autoresponder is an email sent out to the user after the Form has been submitted from the front-end of the website.

Option
Description
Enable
Enable the auto-response email to be sent.
Template
The Email Template to be used for the auto-response email.
From Name

The display name used for the email sender.

This field supports Liquid which can be used to insert dynamic content such as member details, form submission details or even data from other modules.

From Email
The email address used for the email sender and reply address.

If using a non-verified email domain you’ll see a warning message and icon (). For more info on Email Domain verification see here.

Subject

The subject line used for the auto-response email.

This field supports Liquid which can be used to insert dynamic content such as member details, form submission details or even data from other modules.

Body

The content of your auto-response email.

This field supports Liquid which can be used to insert dynamic content such as member details, form submission details or even data from other modules.

Redirecting Forms to a Custom Confirmation Page

By default, form submissions will direct users to the /_form-submission-results/ system page. However, you can override this behaviour and redirect users to any other page you require.

To do this, you can add a hidden form input with name redirectURL and set it's value to the new page URL:
(If this input is included in the form and it's value is empty it will continue to redirect to the default confirmation page.)

<input type="hidden" name="redirectURL" value="/my-new-confirmation-page">

Triggering Different Workflows

A form can be configured, via its ‘Settings’ tab, to trigger single, or multiple, predefined Workflows. However, there may be cases where you want to trigger a different Workflow/s based on conditions during the form's submission on the website.

An example of this might be allowing the user to select which department an enquiry is to be sent to. Or perhaps the condition is dynamically set, without user input, based on other variables such as Liquid data or detecting a users selection of another input via Javascript.

You can achieve this by adding an input to the form with name="customWorkflows" and value="[WorkflowID]" where [WorkflowID] is to be replaced with your desired workflow’s ID.

You can find the Workflow ID by navigating to the appropriate Workflow in the Treepl CMS Admin and noting the trailing number in the URL.
eg: https://[YOURSITE]/admin/custom-workflow/2

Insure your site plan supports multiple Workflows in order to utilise this method.

In the first example, where the user can select the appropriate workflow, you could add a dropdown to the form with the following values:

<select name="customWorkflows">
    <option value="[WorkflowID]">Sales Enquiry</option>
    <option value="[WorkflowID]">Technical Support</option>
</select>

Or the second example, where the Workflow is set based on other conditions such as a Liquid variable, you could have a hidden input field like so:

<input type="hidden" name="customWorkflows" value="{{myWorkflowVariable}}">

Or, if setting the Workflow ID with Javascript based on the selection made in another dropdown:

<input type="hidden" name="customWorkflows" value="1">

<select name="enquiryType">
    <option value="">- Please select -</option>
    <option value="Sales Enquiry" data-workflowid="1">Sales Enquiry</option>
    <option value="Technical Support" data-workflowid="2">Technical Support</option>
</select>
<script>
    var workflow = document.querySelector('input[name="customWorkflows"]');
    var selector = document.querySelector('select[name="enquiryType"]');
    
    selector.addEventListener('change', changeWorkflow);
    
    function changeWorkflow(el) {
        var dataID = el.target.options[el.target.options.selectedIndex].getAttribute('data-workflowid');
        workflow.value = dataID;
    }
</script>

You can even trigger multiple Workflows by changing the input type to a multi-selection style input, such as checkboxes:

<input type="checkbox" name="customWorkflows" value="1">
<input type="checkbox" name="customWorkflows" value="2">

Or even with a comma separated list of Workflow ID’s in a text input.

<input type="text" name="customWorkflows" value="1,2">

Triggering Workflows based on form inputs, with either a valid or invalid value for the Workflow ID, will override any Workflow settings configured in the forms ‘Settings’ tab, even if no Workflow is enabled there.

reCAPTCHA

reCAPTCHA is an abuse prevention engine powered by Google which can be implemented for website form submissions.

reCAPTCHA v2 or v3 can be selected when building your Treepl CMS form to help protect your CRM from spam/bot submissions that may be attempting to send malicious code to the server or to simply spam your inbox with abusive content and links.

Either reCAPTCHA v2 or v3 is required for all Treepl CMS form submissions (including those with payment collection), with the exception for logged-in users. Forms or payments submitted while a user is logged in to a Secure Zone do not require reCAPTCHA.

Changing from reCAPTCHA v2 to v3

Upgrading from Google’s reCAPTCHA v2 to v3

Upgrading from Google’s reCAPTCHA v2 to v3 can be done in just a few easy steps.

First, you’ll need to delete the “reCAPTCHA v2” field from your form builder configuration and add the “reCAPTCHA v3” field.

Then, in your form’s layout, you’ll remove the old code and replace with the new code.

If your form layout has not been modified/saved from the default, Treepl CMS will automatically regenerate the correct form code.

Assuming your form layout has previously been modified in some way, identify the code responsible for rendering the v2 reCaptcha (shown in the image above) and remove it from your form layout. Then, from the “Form Fields” toolbox (at the upper right of the form layout window) you can select the new reCAPTCHA v3 field - which will copy the required code to your clipboard.

Paste this code into your form layout anywhere inside the <form> element (it's location is not critical as it will not be visible in the rendered form).

Optionally, you can restore the whole form layout to default, which will regenerate the new form code. However, this action will also override any customisations you may have done to your form.

Save the form layout and you’re done.

Other considerations may need to be taken into account if you have any customisations in place, such as Javascript/AJAX submission scripts or custom form validation that is expecting the reCAPTCHA v2 elements to be present.

Supported Domains for reCAPTCHA

Treepl CMS includes Google reCAPTCHA integration with all site plans under a system wide registration. However, Google limits the number of domain extensions that one registration can cover.

Below are a list of all supported domain extensions covered by Treepl CMS system wide reCAPTCHA keys.

If you are activating a site with a domain extension not included in this list then your form’s reCAPTCHAs will not work under those domains. To resolve this, please set up your own Google reCAPTCHA registration by following these instructions.

You can optionally set up a custom reCAPTCHA key for any of your sites, regardless of a supported domain extension, as this provides additional statistics and settings for your reCAPTCHA at an individual site level.

reCAPTCHA v2
reCAPTCHA v3
.com
.org
.net
.edu
.ca
.us
.au
.it
.co
.se
.de
.no
.cy
.uk
.eu
.dk
.design
.digital
.stewart
.name
.me
.nu
.ie
.info
.london
.auto
.biz
.works
.nz
.law
.br
.pro
.fi
.tv
.investments
.il
.tech
.farm
.fr
.gov
.nl
.health
.asia
.in
.at
.media
.casino
.pl
.localhost
.com
.org
.net
.edu
.ca
.us
.au
.it
.co
.se
.de
.no
.cy
.uk
.eu
.dk
.design
.digital
.stewart
.name
.me
.nu
.ie
.info
.london
.auto
.biz
.works
.nz
.law
.br
.pro
.fi
.tv
.investments
.il
.tech
.farm
.fr
.gov
.nl
.health
.asia
.in
.at
.media
.casino
.pl
.scot

JSON Response & AJAX Form Submission

The form supports jsonResponse=1 as a parameter in the form's action attribute.

You can then render the JSON response using the formSubmissionData object or use it to handle the form submission via AJAX (see Related Articles and External Resources below for more details).

<form action="/forms/cases.ashx?form=my_form&jsonResponse=1" method="post">

Front-End Updating Contacts Logic

How a Contact’s CRM fields are updated after a front-end form submission depends on the Contact’s status in the CRM.

For example; existing stored data against a non-verified Contact can be overridden by subsequent form submissions. However, for verified Contacts (with a ‘member’ status), their data should be protected from unauthorised updates.

Below is a table describing when a Contact’s data is or isn’t updated (based on a front-end form submission that isn’t a Secure Zone registration form):

Case
Logged In As
Email Used In Form
Email's CRM Status
Update Data
1
not logged in
contact_1@gmail.com
Contact
2
not logged in
member_2@gmail.com
Member (Non Verified)
3
not logged in
member_3@gmail.com
Member (Verified)
4
member_3@gmail.com
contact_1@gmail.com
Contact
5
member_3@gmail.com
member_2@gmail.com
Member (Non Verified)
6
member_3@gmail.com
member_3@gmail.com
Member (Verified)
7
member_3@gmail.com
member_4@gmail.com
Member (Verified)

The logic changes slightly for front-end forms that subscribe Contacts to a Secure Zone (assuming current password entered for those Contact's already Members), as described in the table below:

Case
Logged In As
Email Used In Form
Email's CRM Status
Update Data
8
not logged in
contact_1@gmail.com
Contact
9
not logged in
member_2@gmail.com
Member (Non Verified)
10
not logged in
member_3@gmail.com
Member (Verified)
11
member_3@gmail.com
contact_1@gmail.com
Contact
12
member_3@gmail.com
member_2@gmail.com
Member (Non Verified)
13
member_3@gmail.com
member_3@gmail.com
Member (Verified)
14
member_3@gmail.com
member_4@gmail.com
Member (Verified)

To update a Contact’s CRM fields, of which has a ‘member’ status, it would be best to use the Update Account Form or the ‘member_update_form’ component.

16
Replicate System Pages

Parityhigh Effortlow Timelow Docshigh Migration Toolactive

This process can be automated with the BC to Treepl CMS Migration App.

Or, if manually migrating system pages, locate your relevant BC System Pages either in your downloaded BC site files, or in the “Develop” tab of the BC Admin under ‘Layouts / SystemMessages’, or directly in the BC Admin under ‘Site Manager’ > ‘System Pages.

You’ll need to copy over the HTML from these into the corresponding system page in Treepl CMS found in the Admin under ‘Settings / System Pages’

While you can upload system pages into Treepl CMS, you'd first need to rename the relevant BC files to match those of Treepl CMS in order to override them. However, this is not recommended as you'll lose the default layouts and Liquid markup required for those layouts.

For more information refer to the below documentation article.

System Pages Documentation

View full article

System Pages, under 'Settings', is where you’ll find all those pages required by certain system functionality, error messages and confirmations. Such as the Page Not Found 404 error page. Form Submission Results page for a confirmation message when someone submits a form on your site, and various secure zone pages for password reset workflows, etc.

This section gives you control over how these pages are presented and allows for creative improvements for your user’s experience.

For example, you could insert a site search on the 404 ‘Page Not Found’ page, or dynamically list your most recent blog posts, to improve your visitors experience if they, for whatever reason, fall on a broken page link or incorrect URL. Or perhaps you want to provide further security information or instructions during the password reset workflow.

Treepl CMS provides full creative and development control over such system pages.

System Page Descriptions

Name
Description
401

This page is presented to the user if they are not authorized to access the current resource/URL, but authorisation may be possible (ie: via a Secure Zone login).

403

This page is presented to the user if the current resource/URL attempting to be accessed is forbidden and cannot be accessed in this manner.

404

This page is presented to the user if the current resource/URL attempting to be accessed is not found (either temporarily or permanently).

checkout

The eCommerce checkout page for submitting a shopping cart order and any payment details.

default-page

The default page presented to the user following any undeclared or unknow system actions.

deferred-order-payment

This page is presented to the user after following the system generated link from the 'Deferred Order Payment' system email. This page contains a payment form allowing the payment of an existing unpaid order.

email-confirmation

This page is presented to the user after they have completed the process of verifying their email address (ie: after subscribing to a Secure Zone).

error-page

The default page presented to the user following any undeclared or unknow system error.

form-submission-results

The default page presented to the user after a form submission (either if successful or if a submission error has occured).

missing-home-page

This page is presented to the user if there is no system home page specified and they are attempting to access the root domain for the web site.

order-receipt

This page is presented to the user after a check out form submission (either if successful or if a submission error has occured).

request-reset-password

The default system page holding the password reset request form.

request-reset-password-result

The default system page presented to the user after a password reset form submission (either if successful or if a submission error has occured.

reset-password

This page is presented to the user after they have followed a tokenised password reset link and provides the form for setting and confirming a new password.

shopping_cart

The eCommerce shopping cart page for displaying pending order items and overall order details, as well as th eability to select shipping options, enter discount codes, redeem gift vouchers and other shopping cart functionality.

Review your HTML for any BC specific tags or modules which will need to be converted to Treepl CMS equivalents. Either making note of them to come back to once other items are set up, or replace them now if you can. For example, you may have a site search form on your 404 Not Found page, or a secure zone login form on your 401 or 403 pages.

17
Replicate System Emails

Parityhigh Effortlow Timelow Docshigh Migration Toolactive

This process can be automated with the BC to Treepl CMS Migration App.

Or, if manually migrating system emails, locate your relevant BC System Emails, either in your downloaded BC site files, or in the “Develop” tab of the BC Admin under ‘Layouts / OutboundEmails’, or directly in the BC Admin under ‘Site Manager’ > ‘System Emails’.

You’ll need to copy over the HTML from these into the corresponding system emails in Treepl CMS found in the Admin under ‘Email Notifications / System Emails’

While you can upload system emails into Treepl CMS, you'd first need to rename the relevant BC files to match those of Treepl CMS in order to override them. However, this is not recommended as you'll lose the default layouts and Liquid markup required for those layouts.

Review your HTML for any BC specific tags or modules which will need to be converted to Treepl CMS equivalents. Be sure to reference the default tags already in the email layouts in Treepl CMS to identify which ones can replace your BC tags.

For more information refer to the below documentation article.

System Emails Documentation

View full article

System Email Descriptions

Name
Description
Password Retrieve Email

The email layout used when a reset of a member's password has been requested (either via the admin or a 'Password Reset' request form on the website).
This email is sent to the member's email address.

Secure Zone Login Details

The email layout used when a user registers to a Secure Zone, or when a member's Secure Zone details are manually sent from the admin.
This email is sent to the member's email address.

Workflow Notification

The email layout used when the system default Workflow is triggered.
This email is sent to any recipients added to the Workflow settings.

Confirm Email Notification

The email layout used when the system needs to confirm the user’s email address. Typically when subscribing to a secure zone.
This email is sent to the email address provided during the form submission.

GiftVoucher

The email layout used when an eCommerce order includes the purchase of a gift voucher product.
This email is sent to the supplied recipient to deliver the gift voucher details to them.

Invite Admin User

The email layout used when adding an Admin user to your web site instance, providing them with the details to finalise their admin access.

Restore Admin User Password

The email layout used when resetting a site admin's password, providing them with a unique, time sensitive link allowing a new password to be set.

Supplier Notification

The email layout used when an eCommerce order includes a product/s with a supplier assigned to them.
This email is sent to the supplier's email address providing them with details of the order relevant to them.

Low Stock Notification

The email layout used when an eCommerce order includes a product/s that inventory level subsiquently falls below the assigned low stock threshold.

Invoice

The email layout used when a payment is made via a form submission, paid subscription, check out, etc.
This email is sent to the purchasers email address.

Admin Reset Member Password

The email layout used when a member's password has been reset by a site admin user, providing the member with the new password and the email address of the admin that changed it.

Deferred Order Payment

The email layout used when sending an order payment request to a member for an unpaid order, providing them with a unique link to the 'Deferred Order Payment' system page identifying the order to be paid.

Order Status Changed

The email layout used when sending an order status change notification to the purchasing customer.

When editing this email there will be an additional dropdown available in which to select from the available Order Statuses on your site. Therefore, multiple email layouts can be edited via this item.

System Email Fields

Each system email has the following system fields allowing you to customise the email headers, content and layout.

Option
Description
Liquid Support
Template

Templates are used as a wrapper for the system email and are handy for setting a single, consistant layout for different content/messages. There are two default options plus any custom templates you may have added:

  • Don’t Use a Template
  • System Default
  • <YOUR CUSTOM TEMPLATE/S>

Email templates can be created or further edited under ‘Email Notifications’ > ‘Email Templates’.
Any custom email templates will also appear here for selection.

Subject

This is the subject line of the email sent to the recipient.
eg: “This email is about resetting your password

From Email

This is the sending email address of the email sent to the recipient.
eg: “support@yoursitename.com

If using a non-verified email domain you’ll see a warning message and icon (). For more info on Email Domain verification see here.

From Name

This is the sending name of the email sent to the recipient.
eg: “Your Site Name

Content

This is the body content of the email sent to the recipient.
A basic message is included in each system email to get you started. However, HTML (suitable for email) along with most other Liquid components and logic can be added here to further customise the message sent to the recipient.

Currently, system fields 'Subject' and 'From Name' for the "Workflow Notification" email do support Liquid tags.

18
Replicate Categories

Parityhigh Effortlow Timelow Docshigh Migration Toolactive

You can manually recreate any Categories set up in your BC site into Treepl CMS under ‘Settings / Categories’

Alternatively the BC to Treepl CMS Migration App can be used to automate this process.

For more information about Categories see the below documentation article.

Categories Documentation

View full article

Categories can either be a single list or multi-level, nested items.

Managing Categories

Categories can be managed under ‘Settings’ > ‘Categories’. Or they can be created on the fly when editing any module item (for modules configured to support Categories).

To add a Category, click the ‘+ Add New Item’ button at the top of the page. A new blank field will be added to the bottom of your current Category list where you can type in the name of your category.

Click the disk icon () to save your category to the list, or click the cross icon () to cancel the entry.

To edit an existing item, hover over it and click the pencil icon () to activate its text field for editing.

To delete an existing item, hover over it and click on the auxiliary icon () and choose the ‘Delete’ option.

Categories can be nested within other Categories either by dragging an existing item onto the desired parent item, or by clicking the auxiliary icon () on the parent item and choosing ‘Add subcategory’.
There is no limit on the number of Categories or the number of nested levels you can create.

Categories can also be re-ordered via drag and drop, or to create a new item at a certain location in the list click on the auxiliary icon () of an item in the list and choose ‘Add new category’. The new item will be added underneath the target item.

Categories vs Tags

Categories are a global classification system, as they can be applied to any supporting content module throughout the CMS - not just the module where they might have been created. As such, all Category items will display everywhere where a Category option is present. This is unlike Tags, which are only relative to the specific module where they were created and are being used. Tags do not become available for other content modules to use.

How to use Categories

Generally, the intended use for Categories is to display filtered content, on the front-end website, specific to a particular category. Or even to group content items into categories for clearer display or organisation of content.

You may also have other use cases where Categories may prove useful, such as cross-linking multiple items together in a type of relationship.

The simplest way to display content filtered by Category is to use the Component Manager to configure your desired module.
In the screenshot example below, we’re filtering Blog Posts by a Category called “Blog: News & Events”.

Categories - Component Manager

This generates the following module tag:

{% component type: "module", source: "Blog", layout: "Blog List Layout", filterBy: "ItemCategories", filterValue: "Blog: News & Events" %}

Create Dynamic Category Listings

Listing categorised items on a page manually, as per the above example, may not be feasible if you’re categories are many or changeable. And, in the case of a Blog, you’ll probably want to keep the Posts displaying within the main Blog layout.
Creating category links to dynamically change the listings page is straight-forward and powerful.

Let’s say, on a Blog Post detail page you want to link to all other Blog Posts that also share common Categories to the current Post.

In your Blog Post Detail layout you might start by listing out all the currently assigned Categories like so (this will be the same for any type of module):

{% for cat in this['ItemCategories'] %}
    {{cat}},
{% endfor %}

Now, to make these dynamic links to the Blog listing page we’ll make the following adjustments. Adding the anchor element, which we'll link to your main Blog page, along with an appended URL parameter that will form our unique reference to each specific category:

{% for cat in this['ItemCategories'] %}
<a href="/my-blog?cat={{cat | url_encode}}">
    {{cat}}
</a>,
{% endfor %}

Next, we adjust our overall listing page. So in the case of a Blog, this would be the “General Blog Layout” in the Blog module’s Layout section, under “Blog Layouts”.

Categories - General Blog Layout

Instead of simply listing the Blog’s Post’s as per the default component tag, like:

{% component type:"module", source: "Blog Post", layout:"List", filterBy:"parentid", filterValue:"{{this.id}}" %}

We want to make some conditions here so that categorised post’s can be listed if one of our dynamic category links are being used instead.

Our adjusted code might look like this:

{% if request.request_url.params.cat %}
{% assign filterValue = request.request_url.params.cat %}
{% assign filterBy = 'ItemCategories' %}
{% else %}
{% assign filterValue = this.id %}
{% assign filterBy = 'parentid' %}
{% endif %}

{% component type:"module", source: "Blog Post", layout:"List", filterBy: "{{filterBy}}", filterValue: "{{filterValue}}" %}

The above code looks for our category URL parameter, and if present, adjusts the filterBy and filterValue attributes, allowing the component to filter by the desired Catergory and output the filtered Blog Posts.
When the category URL parameter is not being used (ie: not present) the filters revert to the default values, listing all Blog Posts.

19
Contacts & Cases

Paritymed Effortmed Timemed Docshigh Migration Toolactive

The BC to Treepl CMS Migration App can be used to migrate both contact records and cases.

Alternatively, you can import contact records and cases directly into the Treepl CMS CRM.

Treepl CMS default Contact fields are not completely the same as BC's, so it's advisable to export BC CRM data for archive/backup purposes or use the Advanced CRM Groups functionality to extend the Treepl CMS CRM for your needs.

Contacts Documentation

View full article

Ultimate Migration Guide (Step by Step) form the basis of all users interactions with your CRM and can form connections to various other modules throughout the CMS, including Form Submissions, Event Bookings, Orders, and even other system or custom module items.

Managing Ultimate Migration Guide (Step by Step)

View

From the Ultimate Migration Guide (Step by Step) list view you can see all Ultimate Migration Guide (Step by Step) in a paginated table layout (with pagination controls at the bottom of the table) and a sortable column header for the 'Name' field.

Additionally, you’ll find controls for adding, editing and deleting Ultimate Migration Guide (Step by Step), as detailed further below.

Icons, displayed against each Ultimate Migration Guide (Step by Step) row, also indicate the Ultimate Migration Guide (Step by Step) State in which you can see more information on below.

Search/Advanced Search

You can also search the Ultimate Migration Guide (Step by Step) list via the search field at the top of the table, which will search for your keyword/s within the item name and email address.

Additionally, to the right of the search field you can expand open the Advanced Search options. These allow you to display results based on ‘CRM Type’ (whether they are general Ultimate Migration Guide (Step by Step) or subscribed secure zone members) and ‘Member Type’ (whether the member has successfully been through the email verification process [Confirmed member] or not [Non-confirmed member]).

Regardless of the email verification flow setting (found under ‘Settings’ > ‘Misc’ > ‘CRM Settings’), or the member’s icon in the CRM list, the member’s verification state only becomes ‘verified’ if they have actioned the email verification link sent by Treepl CMS, or a site admin has edited and saved the Contact's password manually.

For more information on Ultimate Migration Guide (Step by Step)/member states, see the documentation for Ultimate Migration Guide (Step by Step) States below.

Import/Export

Found under the main auxiliary menu (), you can import/export data to/from your Ultimate Migration Guide (Step by Step). You can further add/update your Ultimate Migration Guide (Step by Step) in bulk using a spreadsheet application and re-import them in an Excel file format (.xlsx).

Use the "Get Import Template" option from the auxiliary menu, or export the current items, in order to get a template import file you can use for importing new data.

If re-importing to update existing items, be sure to maintain the same 'ID' values from those exported items.

Conflicts & Updating Existing Ultimate Migration Guide (Step by Step) via Import

When importing Ultimate Migration Guide (Step by Step) where there is an existing email address, or where you’ve included the existing item ID for updating, a few checks will be performed by the system.

The logic is as follows:

If the import item includes an ID (in the ‘ID’ column of the spreadsheet) but the email address specified in the import is different to the database, the system will first check if the new email address already exists in the database (on another Contact). If it doesn’t, the Contact will be updated with the new email address. However, if it does already exist, the whole item will be skipped with no updates made to that record.

Where no ID is specified, the system will still check all email addresses for duplicates, and if found, will update the existing Contact as per the import file.
New email addresses will, of course, create new Contact records in the database.

Delete

Individual items can be deleted either by clicking the trash can icon () to the right of the item or when on the item's edit page, click the trash can icon () in the lower right of the page.

Additionally, you can make bulk selections from the item list view (by ticking the checkboxes on the left of each item) and click the "DELETE SELECTION" button that will appear at the base of the list view.

Populating Ultimate Migration Guide (Step by Step)

From the Ultimate Migration Guide (Step by Step) item list view, click the “ADD NEW ULTIMATE MIGRATION GUIDE (STEP BY STEP)” button at the top to start creating a new item or click directly on the name (or pencil icon "") of any existing item in the list to view/edit its details.

Upon viewing/editing an item you'll have access to the following data, as detailed below:

Details

The Ultimate Migration Guide (Step by Step) detail view will display any currently populated system fields, along with all added Advanced CRM Groups.

Clicking “EDIT” at the bottom of the page will allow for editing these fields and adding custom fields.

An explanation of the system fields is as follows:

Name
Description
First Name
The contact's first name.
Last Name
The contact's last name.
Email
The contact's email address.
Password
This field can be used to set or override the contact's password.

No password value will be shown here even if there is a password assigned to the contact.

Address
The contact's address line (unit/number and street).
City
The contact's city/suburb/provence.
State
The contact's state/territory.
ZipCode
The contact's zipcode/postcode.
Country
The contact's country.
Site
The contact's website address.
Phone
The contact's phone number.
Status
An arbitary value to assign any particular status to the contact.
Notes
An arbitary value to assign any particular notes to the contact.
Type
Defines the contact as a ‘Consumer’ (default) or a ‘Wholesaler’. A logged in contact with a Wholesaler type will have access to Wholesaler pricing for those products/items that include Wholesaler price options.
The contact’s `Type` is also available in the Liquid output from both the CRMContacts component and the request.currentMember object, for use in custom Liquid applications.
Role
General ...
Admin User ...
Allow listing my contact data in the CMS (GDPR)
Due to GDPR and privacy regulations, CRM contact data (including Advanced CRM Groups) can only be output on the front-end of your website when this option has been ticked. However, this checkbox can only be checked from the front-end via a form collecting this information, or the Update Account Details form under a secure zone login. Ticking this option via the admin will not save it as a checked state.

You can override this need for individual contact data listing and allow all CRM contacts data to be output via the front-end by adjusting the GDPR setting found at 'Settings' > 'Misc' > 'GDPR Settings'.

Custom Fields

You can assign Advanced CRM Groups to an individual Ultimate Migration Guide (Step by Step) by clicking the “+ Add custom fields” link at the bottom of the contact’s edit details page.

For further information on managing custom fields, see the documentation on Advanced CRM Groups.

Form Submissions

This section provides a similar view as per the main ‘CRM’ > ‘Form Submissions’ component of the CRM, but specifically for Form Submissions owned by the Ultimate Migration Guide (Step by Step) currently being viewed.

For more information on viewing these, see the documentation for Form Submissions.

Subscriptions

This section provides an interface for managing the Contact’s Mailing List and Secure Zone subscription status (if applicable for your site plan).

Mailing Lists

If you are using an integrated mailing list solution and have mailing list/s created, you’ll see those lists available here for manually subscribing/unsubscribing the Ultimate Migration Guide (Step by Step).

See the documentation for more information on mailing lists here.

Secure Zones

If you are using secure zones on your site, you’ll see those secure zones available here for manually subscribing/unsubscribing the Ultimate Migration Guide (Step by Step), along with setting an expiry date that the secure zone access will be applicable for.

If the secure zone is a paid recurring zone and the current Ultimate Migration Guide (Step by Step) has an active paid subscription, there will also be a “Cancel recurring subscription” link alongside the relevant zone. This enables you to stop the contacts' future payments and remove their secure zone access.

Further options for secure zones include:

“SEND PASSWORD RECOVERY E-MAIL”, allowing you to send the “Password Retrieve Email” system email (which generates the contact’s reset password link).

“SEND LOGIN DETAILS E-MAIL”, allowing you to send the “Secure Zone Login Details” system email (which lists the zones they have access to).

“RESEND VERIFICATION”, allowing you to send the “Confirm Email Notification” system email (which generates a one-time use, tokenised link to verify the validity of the email address being sent to).

This button will not be visible if the member is already verified, or if you have unchecked the ‘Enable email verification flow’ setting (found under ‘Settings’ > ‘Misc’ > ‘CRM Settings’).

See the documentation for more information on System Emails here.

Ultimate Migration Guide (Step by Step) Statuses

Displayed alongside Ultimate Migration Guide (Step by Step) record names you may see various icons.

These icons indicate the current member/admin status for that Ultimate Migration Guide (Step by Step) and can be described as follows:

Icon
Description
No Icon
If no icon is present, the Ultimate Migration Guide (Step by Step) is a general Ultimate Migration Guide (Step by Step) record - added to the CRM either manually or via a form on the website front-end.
person
This icon indicates the Ultimate Migration Guide (Step by Step) has a ‘member’ state as they are subscribed to one or more secure zones. However, they have a non-verified email status.
how_to_reg
This icon indicates the Ultimate Migration Guide (Step by Step) has a ‘member’ state as they are subscribed to one or more secure zones. They also have a verified email status, either because they have actioned the verification email link from a system email or an admin user has edited their password manually.
manage_accounts
This icon indicates the Ultimate Migration Guide (Step by Step) has a CRM Role of “Admin User” (they may or may not be a member or have a verified email status). For more information on the CRM Role of “Admin User” see the above CRM Ultimate Migration Guide (Step by Step) Details.

Front-End Updating Contacts Logic

How a Contact’s CRM fields are updated after a front-end form submission depends on the Contact’s status in the CRM.

For example; existing stored data against a non-verified Contact can be overridden by subsequent form submissions. However, for verified Contacts (with a ‘member’ status), their data should be protected from unauthorised updates.

Below is a table describing when a Contact’s data is or isn’t updated (based on a front-end form submission that isn’t a Secure Zone registration form):

Case
Logged In As
Email Used In Form
Email's CRM Status
Update Data
1
not logged in
contact_1@gmail.com
Contact
2
not logged in
member_2@gmail.com
Member (Non Verified)
3
not logged in
member_3@gmail.com
Member (Verified)
4
member_3@gmail.com
contact_1@gmail.com
Contact
5
member_3@gmail.com
member_2@gmail.com
Member (Non Verified)
6
member_3@gmail.com
member_3@gmail.com
Member (Verified)
7
member_3@gmail.com
member_4@gmail.com
Member (Verified)

The logic changes slightly for front-end forms that subscribe Contacts to a Secure Zone (assuming current password entered for those Contact's already Members), as described in the table below:

Case
Logged In As
Email Used In Form
Email's CRM Status
Update Data
8
not logged in
contact_1@gmail.com
Contact
9
not logged in
member_2@gmail.com
Member (Non Verified)
10
not logged in
member_3@gmail.com
Member (Verified)
11
member_3@gmail.com
contact_1@gmail.com
Contact
12
member_3@gmail.com
member_2@gmail.com
Member (Non Verified)
13
member_3@gmail.com
member_3@gmail.com
Member (Verified)
14
member_3@gmail.com
member_4@gmail.com
Member (Verified)

To update a Contact’s CRM fields, of which has a ‘member’ status, it would be best to use the Update Account Form or the ‘member_update_form’ component.

Form Submission (Cases) Documentation

View full article

This includes general enquiry forms, custom forms, payment forms, Event registration forms, the shopping cart checkout, etc.

Ultimate Migration Guide (Step by Step) items can also be created manually via the admin as a way of creating customer-specific ‘case files’ and these cases can be rendered, for example, in the contact’s secure member’s zone.

Managing Ultimate Migration Guide (Step by Step)

View

From the Ultimate Migration Guide (Step by Step) list view you can see all Ultimate Migration Guide (Step by Step) in a paginated table layout (with pagination controls at the bottom of the table) and a sortable column headers for 'Name' and 'Submission Date' fields.

You can also search the list via the search field at the top of the table, which will search for your keyword/s within the item name.

Additionally, you’ll find controls for adding, editing and deleting Ultimate Migration Guide (Step by Step), as detailed further below.

Import/Export

Found under the main auxiliary menu (), you can import/export data to/from your Ultimate Migration Guide (Step by Step). You can further add/update your Ultimate Migration Guide (Step by Step) in bulk using a spreadsheet application and re-import them in an Excel file format (.xlsx).

If re-importing to update existing items, be sure to maintain the same 'ID' values from those exported items.

Use the "Get Import Template" option from the auxiliary menu, or export the current items, in order to get a template import file you can use for importing new data.

Delete

Individual items can be deleted either by clicking the trash can icon () to the right of the item or when on the item's edit page, click the trash can icon () in the lower right of the page.

Additionally, you can make bulk selections from the item list view (by ticking the checkboxes on the left of each item) and click the "DELETE SELECTION" button that will appear at the base of the list view.

Populating Ultimate Migration Guide (Step by Step)

From the Ultimate Migration Guide (Step by Step) item list view, click the “ADD NEW ULTIMATE MIGRATION GUIDE (STEP BY STEP)” button at the top to start creating a new item or click directly on the name (or pencil icon "") of any existing item in the list to view/edit its details.

When adding a new Ultimate Migration Guide (Step by Step), an email address of an existing CRM contact needs to be entered in order to assign the case to.

Upon viewing/editing an item you'll have access to the following data, as detailed below:

Details

The Ultimate Migration Guide (Step by Step) detail view will display any currently populated system fields, along with all added fields from the form setup and any Advanced CRM Groups.

If the Ultimate Migration Guide (Step by Step) included a payment, a link to the relevant Order will be displayed in the item heading, helping you link between the two items.

Clicking “EDIT” at the bottom of the page will allow for editing the added form fields and for adding additional custom fields.

System fields displaying here belong to the CRM Contact record and are shown for informational purposes. These fields cannot be edited within the Ultimate Migration Guide (Step by Step) itself.

Custom Fields

You can assign Advanced CRM Groups to an individual case file by clicking the “+ Add custom fields” link at the bottom of the Ultimate Migration Guide (Step by Step) edit details page.

For further information on managing custom fields, see the documentation on Advanced CRM Groups.

Form fields that are removed from an existing form can compromise any previously collected data for that field that exists in the CRM (Form Submissions).
Collected data will remain visible in the Form Submission preview screen and in the cases Liquid component output only while the Form Submission item has not been resaved/edited. However, any legacy data will not be included in Form Submission exports at any stage as the column headers are derived from active form field properties only.

20
Replicate Content Holders

Parityhigh Effortlow Timelow Docsmed Migration Toolactive

The BC to Treepl CMS Migration App can be used to automate this process.

Alternatively, if manually migrating, locate your relevant BC Content Holders, either in your downloaded BC site files, or in the “Develop” tab of the BC Admin under ‘System / ContentHolders, or directly in the BC Admin under ‘Site Manager’ > ‘Content Holders’.

Upload your BC Content Holders into your Treepl CMS instance via FTP into the ‘Content / Snippets’ directory.

If not using FTP, create and copy over the HTML from these into the Treepl CMS admin area under ‘Content / Snippets’.

Review your HTML for any BC specific tags or modules which will need to be converted to Treepl CMS equivalents. Either making note of them to come back to once other items are set up, or replace them now if you can.

Snippets Documentation

View full article

Snippets allow the creation of reusable blocks of code or isolated sections of content.
This helps keep code clean and more easily maintainable, eliminating the need to repeat yourself and the risk of inconsistent code.

Quick Start

Snippets Component Documentation

View full article

This component renders the contents of a Snippet (similar to Content Holders in BC).

{% component type: "snippet", alias: "<snippet_alias>" %}

Parameters and Options

Parameter
Values
Required
Description
type
snippet

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

alias
<alias_name>
The alias name of the module.
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.
If using this parameter, the module will not render its layout.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example is for a Snippet with some content relating to the topic HTML but is otherwise the default data you will get from this Component.

{
  "Parent": {
    "Value": {
      "Id": 1950,
      "ModuleLayoutName": "Detail",
      "Enabled": true,
      "ReleaseDate": "2018-08-04T23:00:00",
      "ExpiryDate": "2099-11-30T00:00:00",
      "Weighting": 1000,
      "Item_Rating": 0,
      "CodeEditor": true,
      "ExternalId": 0,
      "DisableForSiteSearch": false,
      "Author_Name": null,
      "Author_Url": null,
      "Author": 0,
      "SEOTitle": null,
      "CustomProperties": "{\"31e8bc20-c904-481a-b47e-95304c4edcdc\": null, \"8aa52748-df22-4986-8131-f6a9ab1f048a\": 0, \"a11635f8-fa31-49d5-a0c0-2fb45d52caec\": \"<ul><li><a href=\\\"/demo-cs/snippet-example\\\" rel=\\\"noopener noreferrer\\\" target=\\\"_blank\\\">Basic Snippet Demo</a></li></ul>\", \"b0ce44c2-314b-4ab2-b829-6baeb33b6a0e\": true, \"b2b960ff-e003-4b75-b760-9559e127e0b2\": true, \"cb88f1ea-ee57-498c-8781-a47e753b4c0e\": 0, \"e8ef1eaa-93bd-455d-b0ce-0cb5ea9c35a1\": \"2418\"}",
      "LastUpdatedDate": "2021-06-12T01:53:19",
      "Module_Alias": "DocumentationPost",
      "Module_Id": 1870,
      "ParentName": "Liquid Components",
      "ParentUrl": "/component-types",
      "Name": "snippet",
      "UrlSlug": "snippet",
      "Url": "/component-types/snippet",
      "MetaDescription": null,
      "ShowPageForSearchEngine": true,
      "CanonicalLink": null,
      "MetaTitle": null,
      "ParentId": 2127,
      "Url_List": [
        "/component-types/snippet"
      ],
      "ParentId_List": [
        2127
      ],
      "EnableAMP": false,
      "AMPContent": null,
      "SocialMetaTags": null,
      "OpenGraphPropertiesValue": null,
      "SeoPriority": 0.0,
      "Description": "\r\n<p>This component renders the contents of a Snippet (similar to Content Holders in BC).</p>\r\n\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n<p>The below example is for a Snippet with some content relating to the topic HTML but is otherwise the default data you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"demo_html_snippet\", collectionVariable: \"data\" %}\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n<p>You can also directly render this data on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"snippetExample\" is as follows:</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Rendering the collection data to a page:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"html\" %}\r\n</section>\r\n</section>\r\n",
      "TemplateName": "Docs Template",
      "ItemCategories": null,
      "ItemCategoryIdList": null,
      "ItemTags": [
        "Snippets"
      ],
      "SiteSearchKeywords": null,
      "ID": 1950,
      "CreatedByMemberId": "0",
      "IsHome": false,
      "Pagination": {
        "CurrentPage": 1,
        "ItemsPerPage": 1,
        "NumberOfPages": 1,
        "TotalItemsCount": 1
      },
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "Parent": {
        "Value": {
          "Id": 2359,
          "ModuleLayoutName": "Detail",
          "Enabled": true,
          "ReleaseDate": "2019-02-17T00:00:00",
          "ExpiryDate": "2099-11-30T00:00:00",
          "Weighting": 800,
          "Item_Rating": 0,
          "CodeEditor": true,
          "ExternalId": 0,
          "DisableForSiteSearch": false,
          "Author_Name": null,
          "Author_Url": null,
          "Author": 0,
          "SEOTitle": null,
          "CustomProperties": "{\"31e8bc20-c904-481a-b47e-95304c4edcdc\": \"<ul><li>21-Jul-2021 | 5.9.0 | Updated various items based on CMS updates and Migration App improvements</li><li>Added note about new BC .zip Archive functionality</li>\\n    <li>Updated BC to Treepl CMS Migration App compatibility - as per v9.0.4 (Catalogs, Discount codes, Gift vouchers, Products, Shipping options, Tax codes)</li>\\n</ul>\", \"8aa52748-df22-4986-8131-f6a9ab1f048a\": 0, \"a11635f8-fa31-49d5-a0c0-2fb45d52caec\": \"\", \"b0ce44c2-314b-4ab2-b829-6baeb33b6a0e\": true, \"b2b960ff-e003-4b75-b760-9559e127e0b2\": false, \"cb88f1ea-ee57-498c-8781-a47e753b4c0e\": 0, \"e8ef1eaa-93bd-455d-b0ce-0cb5ea9c35a1\": \"2418\"}",
          "LastUpdatedDate": "2021-07-21T04:01:55.741732",
          "Module_Alias": "DocumentationPost",
          "Module_Id": 1870,
          "ParentName": "BC Migration Guides",
          "ParentUrl": "/bc-migration-guides",
          "Name": "Ultimate Migration Guide (Step by Step)",
          "UrlSlug": "ultimate-migration-guide-step-by-step",
          "Url": "/bc-migration-guides/ultimate-migration-guide-step-by-step",
          "MetaDescription": null,
          "ShowPageForSearchEngine": true,
          "CanonicalLink": null,
          "MetaTitle": null,
          "ParentId": 2355,
          "Url_List": [
            "/bc-migration-guides/ultimate-migration-guide-step-by-step"
          ],
          "ParentId_List": [
            2355
          ],
          "EnableAMP": false,
          "AMPContent": null,
          "SocialMetaTags": null,
          "OpenGraphPropertiesValue": null,
          "SeoPriority": 0.8,
          "Description": "<div class=\"migration-guide\">\r\n    <p>So you’ve decided to move your site across to Treepl CMS. Good choice.</p>\r\n    <p>And you’ve decided to do it yourself. Good for you! You’re probably going to be doing this quite a few times so let’s make it fun…</p>\r\n    <p>Set aside a good chunk of uninterrupted time, crank up your favourite tunes and grab a strong drink. It’s migration time.</p>\r\n    <p class=\"notice-note\">The below sections are ordered to try and minimise the amount of back and forth when creating the various components of a site. If a section doesn’t apply to your site, feel free to skip right over it.</p>\r\n    <p class=\"notice-tip\">A <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">‘BC to Treepl Migration App’</a> is in constant development and can be used to help automate much of your site migration. The sections detailed below also indicate where the migration app can be used. The Migration App also converts BC Liquid tags, ie: <code>{module_…}</code> and <code>{tag_…}</code> to Treepl CMS Liquid tags! For more info on this, view the Forum discussion <a href=\"https://forum.treepl.co/t/attention-to-bc-to-treepl-app-users/497\" target=\"_blank\">here</a>.</p>\r\n    <h2 id=\"secBCSiteFTPDownload\" class=\"circle-wrap\"><div class=\"circle\">1</div>Download the BC Site via FTP</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secBCSiteFTPDownload\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n    \r\n    <p>Download all files available via FTP from your BC site, if for no other reason than to just have a backup. However, these files can be referenced in the following steps as well.</p>\r\n    <p>You can also automatically migrate all files in the BC file system directly to your Treepl CMS site via the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a>.</p>\r\n    <p>There is also now the ability to download a .zip archive of your BC site directly from BC or a more comprehensive export via the BC to Treepl CMS migratiom app, including data from the following modules:</p>\r\n    \r\n    <h4>BC Provided Export:</h4>\r\n    <ul>\r\n    \t<li>Pages</li>\r\n        <li>Page Templates</li>\r\n        <li>Module Layouts</li>\r\n        <li>Static files</li>\r\n        <li>Apps</li>\r\n        <li>Content Holders</li>\r\n        <li>System Pages</li>\r\n        <li>Email Templates</li>\r\n        <li>Web Apps</li>\r\n    </ul>\r\n    <p><b>Further Resources:</b></p>\r\n    <a class=\"btn small\" href=\"https://docs.worldsecuresystems.com/user-manual/site-design/bc-and-dreamweaver/connect-to-your-site-using-dreamweaver\" target=\"_blank\">BC FTP connection details</a>\r\n    <a class=\"btn small\" href=\"https://docs.worldsecuresystems.com/Partners/downloading-your-website#Downloadingyoursitearchive\" target=\"_blank\">BC .zip archive</a>\r\n    \r\n    <h4>Treepl CMS Provided Export:</h4>\r\n    <ul>\r\n    \t<li>Pages</li>\r\n        <li>Page Templates</li>\r\n        <li>Module Layouts</li>\r\n        <li>Static files</li>\r\n        <li>Apps</li>\r\n        <li>Content Holders</li>\r\n        <li>System Pages</li>\r\n        <li>System Emails</li>\r\n        <li>Email Templates</li>\r\n        <li>System Modules</li>\r\n        <li>Web Apps</li>\r\n        <li>E-commerce</li>\r\n        <li>Web Forms</li>\r\n        <li>URL Redirects</li>\r\n        <li>Menus</li>\r\n        <li>Media Downloads</li>\r\n    </ul>\r\n    <p><b>Further Resources:</b></p>\r\n    <a class=\"btn small\" href=\"https://treepl.co/advanced-business-catalyst-export\" target=\"_blank\">Advanced BC Export</a>\r\n    \r\n    <h2 id=\"secBCSiteDeepClean\" class=\"circle-wrap\"><div class=\"circle\">2</div>Deep-Clean the BC Site (Optional)</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secBCSiteDeepClean\", parity: \"na\", effort: \"med\", time: \"med\", docs: \"na\", tool: \"na\" %}\r\n    <p>This step is optional, but you may want to take the opportunity to clear out the BC site of old pages, templates, files, etc. Particularly if it’s an old site, there can be a lot of junk floating around. And this can just get in your way during migration and could cause unnecessary work. However, be very careful not to remove assets that may still be in use somewhere (hence the backup in the previous step).</p>\r\n    <p>Once you’ve cleaned up, repeat the FTP download step to collect a new, clean, set of files.</p>\r\n    \r\n    <h2 id=\"secTreeplCMSInstance\" class=\"circle-wrap\"><div class=\"circle\">3</div>Setup Treepl CMS Site Instance</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secTreeplCMSInstance\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"na\" %}\r\n    <p>So you can start work with the Treepl CMS platform you'll need to set up a Trial Site. Log into your Treepl Portal (portal.treepl.co) and click the \"Create New Site\" button.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n    <div class=\"faqs-open-close \">\r\n        <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Trial Site Documentation</a>\r\n        <div class=\"slide js-slide-hidden\">\r\n            {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2151\", limit: \"1\", type: \"module\" %}\r\n        </div>\r\n    </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secHostedEmailTransfer\" class=\"circle-wrap\"><div class=\"circle\">4</div>Start BC Hosted Email Transfer Process (If Applicable)</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secHostedEmailTransfer\", parity: \"na\", effort: \"low\", time: \"med\", docs: \"high\", tool: \"low\" %}\r\n    <p>If your BC site has BC hosted emails, they can be transferred directly to Treepl CMS after following the below steps.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n    <div class=\"faqs-open-close \">\r\n        <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Transfer of BC Hosted Email Accounts</a>\r\n        <div class=\"slide js-slide-hidden\">\r\n            {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2185\", limit: \"1\", type: \"module\" %}\r\n        </div>\r\n    </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secUploadSiteAssets\" class=\"circle-wrap\"><div class=\"circle\">5</div>Upload Site Assets</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secUploadSiteAssets\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n    <p>Now we'll want to connect to our new Treepl CMS instance via FTP so we can upload some of our BC assets.</p>\r\n    <p>If working manually, we'll probably only want to upload assets relating to the front-end site, such as images, CSS, JS, documents, etc. We don't want to move over pages, templates or other layout files just yet.</p>\r\n    <p>Below are instructions for getting connected via FTP client.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>FTP Access Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"1936\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <p>Alternatively, you can automatically migrate all files in the BC file system directly to your Treepl CMS site via the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a>.</p>\r\n    \r\n    <h2 id=\"secSetupPlaceholderTemplates\" class=\"circle-wrap\"><div class=\"circle\">6</div>Upload or Setup Placeholder Templates</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secSetupPlaceholderTemplates\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"med\", tool: \"high\" %}\r\n    <p>You can manually upload your BC page templates into your Treepl CMS instance via FTP into the ‘Content / ContentTemplates’ directory.</p>\r\n    <p>Alternatively the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p>If manually migrating templates, don’t worry about editing the template code/markup at this stage. We just want to get them loaded in Treepl CMS so we can reference it in the following steps. We’ll work on the template code later.</p>\r\n    \r\n    <p>If not using FTP, to manually create a content template, go to 'Content' &gt; 'Content Templates'.</p>\r\n    <p>Click ‘Add New Template’ button.</p>\r\n    <p>Just complete ‘Name’ and choose whether it's the default template. Leave the content as is for now.</p>\r\n    <p>Repeat this for all required templates.</p>\r\n    \r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n    <div class=\"faqs-open-close \">\r\n        <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Content Templates Documentation</a>\r\n        <div class=\"slide js-slide-hidden\">\r\n            {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2132\", limit: \"1\", type: \"module\" %}\r\n        </div>\r\n    </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secSetupSitePages\" class=\"circle-wrap\"><div class=\"circle\">7</div>Upload or Setup Site Pages</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secSetupSitePages\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"med\", tool: \"high\" %}\r\n    <p>Upload your BC pages into your Treepl CMS instance via FTP into the ‘Content / Pages’ directory.</p>\r\n    <p>Alternatively the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p>If manually migration pages, there will still be several properties you will want to set for each page, such as a more relevant system name, assigning it to a template, SEO and meta details, etc. and we’ll likely need to review the page content for any system tags or Liquid\r\n        that needs replacing. However, all in good time and we’ll take those actions in a later step. For now we just want to get the bulk of the setup in place.</p>\r\n    \r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n    <div class=\"faqs-open-close \">\r\n        <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Pages Documentation</a>\r\n        <div class=\"slide js-slide-hidden\">\r\n            {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2131\", limit: \"1\", type: \"module\" %}\r\n        </div>\r\n    </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secReplicateMenus\" class=\"circle-wrap\"><div class=\"circle\">8</div>Replicate Menus & Menu Layouts</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secReplicateMenus\", parity: \"high\", effort: \"med\", time: \"med\", docs: \"high\", tool: \"high\" %}\r\n    <p>You can easily recreate your BC menus into your Treepl CMS instance via the admin ‘Content' > 'Menus’, and copy over and adjust your menu layouts.</p>\r\n    <p>Alternatively the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p>If manually recreating your menus you can follow the documentation and tips below:</p>\r\n    \r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Menus Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"1966\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h3>BC Menu V2</h3>\r\n    <p>If using BC’s menu v2 method for your menus, upload your menu layouts from ‘ModuleTemplates / Menu / &lt;menu-name&gt;’ into the corresponding Treepl CMS menu layouts in ‘Content / MenuLayouts / &lt;menu_alias_name&gt;’</p>\r\n    <p>The corresponding layouts from BC to Treepl CMS are:</p>\r\n    <ul>\r\n        <li>“container.html” --&gt; “menu.layout”</li>\r\n        <li>“group.html” --&gt; “item.layout”</li>\r\n        <li>“childitem.html” --&gt; “sub_items.layout”</li>\r\n    </ul>\r\n    <p>Now, we’re finally going to get our hands dirty with some code.</p>\r\n    <p>We’ll need to convert the BC tags into the Treepl CMS way of doing things. Let’s reference the Menu documentation above while doing this.</p>\r\n    <p>Starting with the “menu.layout” file you'll want to weave your HTML markup into the Treepl CMS Liquid so that the Liquid logic renders the same markup you are referencing from BC.</p>\r\n    <p>Next, do the same with the “item.layout” file, weaving in the BC “group.html” markup.</p>\r\n    <p>Finally, the “sub_items.layout” file,</p>\r\n    <p>Repeat for each menu group you are using.</p>\r\n    <p>If you have multiple menus using the same layout group in BC, simply copy the same code you just set up into each menu layout files (menus don’t share layouts in Treepl CMS).</p>\r\n    \r\n    <h3>BC Menu V1 (legacy module)</h3>\r\n    <p>If using BC’s original/legacy menu method, we’ll need to reference the rendered source code for your menu in the browser.</p>\r\n    <p>Load one of your BC site pages that features the menu. View the page source (right click, 'View Source') and identify the complete section of menu elements including the BC JS references.</p>\r\n    <p>Copy the menu elements into your “menu.layout” file so we can start working on converting that code.</p>\r\n    <p>Back in the source view, for the two JS references BC outputs, right click on the source links and save those JS files to your BC site files in an appropriate directory and than upload those to Treepl CMS in the corresponding directory.</p>\r\n    <p>Back in your menu layout, we'll relink the JS references to point to the new location.</p>\r\n    <p>Work through recoding the menu HTML into the Treepl CMS menu layouts to complete the process.</p>\r\n    \r\n    \r\n    <h2 id=\"secSetupSecureZones\" class=\"circle-wrap\"><div class=\"circle\">9</div>Setup Secure Zones</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secSetupSecureZones\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n    <p>Recreating all Secure Zones from BC into Treepl CMS is a fairly straight forward process.</p>\r\n    <p>Alternatively the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p>If manually recreating your Secure Zones, you can follow the steps below:</p>\r\n    <p>Go to ‘Content’ &gt; ‘Secure Zones’</p>\r\n    <p>Click ‘Add Secure Zone’ button.</p>\r\n    <p>Complete ‘Name’ and ‘Landing Page’ then “Next” to save and move to ‘Step 2: Secure Content’.</p>\r\n    <p>Pages will be ready for you to secure, however most other content we havn't migrated over yet so you'll need to revisit this section to secure all relevant items.</p>\r\n    <p>Click “Next” to save and move to ‘Step 3: Members’</p>\r\n    <p>Here you can manage the members subscribed to the secure zone.</p>\r\n    <p>For further documentation expand the box below:</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Secure Zones Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2199\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secSetupMailingListsMC\" class=\"circle-wrap\"><div class=\"circle\">10</div>Setup Mailing Lists (MailChimp)</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secSetupMailingListsMC\", parity: \"low\", effort: \"med\", time: \"low\", docs: \"high\", tool: \"low\" %}\r\n    <p>Before you can set up Mailing Lists in Treepl CMS you need to connect a MailChimp account using their provided API key.</p>\r\n    <p>Below are documentation for setting up the API connection and further inofrmation about adding Mailing Lists.</p>\r\n    \r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>API Provider Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2311\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Mailing Lists Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2310\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <p>Currently, Email Campaigns would generally be managed in MailChimp for full functionality of the MailChimp service. However, basic Email Campaigns can be add via Treepl CMS and pushed to MailChimp.<br>\r\n    <em>More documentation coming soon on this.</em></p>\r\n    \r\n    <h2 id=\"secSetupSiteSearch\" class=\"circle-wrap\"><div class=\"circle\">11</div>Setup Site Search</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secSetupSiteSearch\", parity: \"med\", effort: \"low\", time: \"low\", docs: \"med\", tool: \"low\" %}\r\n    <p>You don’t need to set up any Site Search module in Treepl CMS. This functionality is ready to use simply by inserting the search form and component tag.</p>\r\n    <p>So there is nothing you need to do in this step.</p>\r\n    <p>Later in the migration we’ll need to replace any BC site search forms so we’ll reference back to this documentation:</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Site Search Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2356\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Site Search Component Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"1959\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secReplicateURLRedirects\" class=\"circle-wrap\"><div class=\"circle\">12</div>Replicate Existing URL Redirects</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secReplicateURLRedirects\", parity: \"high\", effort: \"med\", time: \"med\", docs: \"high\", tool: \"high\" %}\r\n    <p>While you can import URL Redirects into Treepl CMS in bulk, BC doesn't have an export function available from their admin, so you’ll need to enter URL redirects manually. Alternatively the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p class=\"notice-tip\">Dragging a selection over, and copying, BCs table list of URL Redirets, you can then paste this into a spreadsheet as a quick and mostly effective export method (with exception to long URLs which may be truncated in the BC table view)</p>\r\n\r\n    <p>See below for more information on URL Redirects.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>URL Redirects Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2210\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secSetupAdminUserRoles\" class=\"circle-wrap\"><div class=\"circle\">13</div>Setup Admin User Roles</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secSetupAdminUserRoles\", parity: \"med\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"low\" %}\r\n    <p>While we won’t be adding Admin Users just yet, we’ll still get the User Roles set up and in place ready to assign users to in a later step.</p>\r\n    <p>To set up Admin User Roles, go to ‘Settings’ &gt; ‘Admin User Roles’</p>\r\n    <p>Click ‘Add Admin Role’ button.</p>\r\n    <p>Complete a 'Name' for your Role and configure the permissions, turning off checkboxes to block users access to those items.</p>\r\n    <p class=\"notice-note\">Many permission items have nested items for further fine-grain control.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>User Roles Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2313\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    \r\n    <h2 id=\"secSetupNotificationWorkflow\" class=\"circle-wrap\"><div class=\"circle\">14</div>Setup Email Notification Workflow/s</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secSetupNotificationWorkflow\", parity: \"med\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n    <p>We’ll set up the default Notification Workflow email (and additional ones if needed - make sure you’re site plan supports multiple Workflow Emails if you need more than one Workflow)</p>\r\n    <p>You can optionally, upload your BC workflow email layouts into your Treepl CMS instance via FTP into the ‘Content / SystemEmails’ directory. However, if you only have a few email layouts it may be better to set these up via the Admin as you'll need to configure other settings as well.</p>\r\n    <p>Alternatively the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p>See below for documentation on Workflows.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Workflows Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2208\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    \r\n    \r\n    \r\n    <h2 id=\"secReplicateWebForms\" class=\"circle-wrap\"><div class=\"circle\">15</div>Replicate Web Forms</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secReplicateWebForms\", parity: \"high\", effort: \"low\", time: \"med\", docs: \"high\", tool: \"med\" %}\r\n    <p>You can create new web forms in the Treepl admin for each of your BC Web Forms and copy over and adjust your form layout/code.</p>\r\n    <p>Alternatively the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p>See below for documentation on Forms.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Forms Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2041\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secReplicateSystemPages\" class=\"circle-wrap\"><div class=\"circle\">16</div>Replicate System Pages</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secReplicateSystemPages\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n    <p>This process can be automated with the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a>.</p>\r\n    <p>Or, if manually migrating system pages, locate your relevant BC System Pages either in your downloaded BC site files, or in the “Develop” tab of the BC Admin under ‘Layouts / SystemMessages’, or directly in the BC Admin under ‘Site Manager’ &gt; ‘System Pages.</p>\r\n    <p>You’ll need to copy over the HTML from these into the corresponding system page in Treepl CMS found in the Admin under ‘Settings / System Pages’</p>\r\n    <p>While you can upload system pages into Treepl CMS, you'd first need to rename the relevant BC files to match those of Treepl CMS in order to override them. However, this is not recommended as you'll lose the default layouts and Liquid markup required for those layouts.</p>\r\n    <p>For more information refer to the below documentation article.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>System Pages Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2207\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <p>Review your HTML for any BC specific tags or modules which will need to be converted to Treepl CMS equivalents. Either making note of them to come back to once other items are set up, or replace them now if you can. For example, you may have a\r\n        site search form on your 404 Not Found page, or a secure zone login form on your 401 or 403 pages.</p>\r\n    \r\n    <h2 id=\"secReplicateSystemEmails\" class=\"circle-wrap\"><div class=\"circle\">17</div>Replicate System Emails</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secReplicateSystemEmails\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n    <p>This process can be automated with the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a>.</p>\r\n    <p>Or, if manually migrating system emails, locate your relevant BC System Emails, either in your downloaded BC site files, or in the “Develop” tab of the BC Admin under ‘Layouts / OutboundEmails’, or directly in the BC Admin under ‘Site Manager’ &gt; ‘System Emails’.</p>\r\n    <p>You’ll need to copy over the HTML from these into the corresponding system emails in Treepl CMS found in the Admin under ‘Email Notifications / System Emails’</p>\r\n        <p>While you can upload system emails into Treepl CMS, you'd first need to rename the relevant BC files to match those of Treepl CMS in order to override them. However, this is not recommended as you'll lose the default layouts and Liquid markup required for those layouts.</p>\r\n    <p>Review your HTML for any BC specific tags or modules which will need to be converted to Treepl CMS equivalents. Be sure to reference the default tags already in the email layouts in Treepl CMS to identify which ones can replace your BC tags.</p>\r\n    <p>For more information refer to the below documentation article.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>System Emails Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2205\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secReplicateCategories\" class=\"circle-wrap\"><div class=\"circle\">18</div>Replicate Categories</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secReplicateCategories\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n    <p>You can manually recreate any Categories set up in your BC site into Treepl CMS under ‘Settings / Categories’</p>\r\n    <p>Alternatively the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p>For more information about Categories see the below documentation article.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Categories Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2308\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secContactsAndCases\" class=\"circle-wrap\"><div class=\"circle\">19</div>Contacts & Cases</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secContactsAndCases\", parity: \"med\", effort: \"med\", time: \"med\", docs: \"high\", tool: \"high\" %}\r\n    <p>The <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to migrate both contact records and cases.</p>\r\n    <p>Alternatively, you can import contact records and cases directly into the Treepl CMS CRM.</p>\r\n    <p class=\"notice-note\">Treepl CMS default Contact fields are not completely the same as BC's, so it's advisable to export BC CRM data for archive/backup purposes or use the Advanced CRM Groups functionality to extend the Treepl CMS CRM for your needs.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Contacts Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2201\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Form Submission (Cases) Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2202\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    \r\n    <h2 id=\"secReplicateContentHolders\" class=\"circle-wrap\"><div class=\"circle\">20</div>Replicate Content Holders</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secReplicateContentHolders\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"med\", tool: \"high\" %}\r\n    <p>The <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p>Alternatively, if manually migrating, locate your relevant BC Content Holders, either in your downloaded BC site files, or in the “Develop” tab of the BC Admin under ‘System / ContentHolders, or directly in the BC Admin under ‘Site Manager’ &gt; ‘Content Holders’.</p>\r\n    <p>Upload your BC Content Holders into your Treepl CMS instance via FTP into the ‘Content / Snippets’ directory.</p>\r\n    <p>If not using FTP, create and copy over the HTML from these into the Treepl CMS admin area under ‘Content / Snippets’.</p>\r\n    <p>Review your HTML for any BC specific tags or modules which will need to be converted to Treepl CMS equivalents. Either making note of them to come back to once other items are set up, or replace them now if you can.</p>\r\n    \r\n    \r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Snippets Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2133\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Snippets Component Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"1950\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    \r\n    \r\n    \r\n    <h2 id=\"secBuiltInModules\" class=\"circle-wrap\"><div class=\"circle\">21</div>Built-In Modules:</h2>\r\n    <h3 id=\"secBlogs\">Blogs</h3>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secBuiltInModulesBlogs\", parity: \"high\", effort: \"med\", time: \"med\", docs: \"med\", tool: \"high\" %}\r\n    <p>BC Blogs can be replicated in Treepl CMS either in the built-in Blog module or by using Custom Modules to configure your own blog structure.</p>\r\n    <p>The <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS Migration App</a> can be used to automate this process, including Release Dates, Tags, Categories, Authors and SEO data.</p>\r\n    <p>If manually transferring your blogs, for a method of extracting the BC Blog data see this helpful Treepl CMS Forum post (includes code snippets and demo video):</p>\r\n    <a class=\"btn small\" href=\"https://forum.treepl.co/t/bc-blog-export-helper/61\" target=\"_blank\">BC Blog Export Helper</a>\r\n    <p>You can also upload your BC module layouts into your Treepl CMS instance via FTP into the ‘Content / ModuleLayouts / &lt;Blog&gt; &amp; &lt;BlogPost&gt;’ directories.</p>\r\n    <p>For more information about the Blog module see the documentation articles.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Blog module Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2135\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Blog component Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2141\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Blog Post component Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2142\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h3 id=\"secEvents\">Events</h3>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secBuiltInModulesEvents\", parity: \"high\", effort: \"high\", time: \"med\", docs: \"high\", tool: \"high\" %}\r\n    <p>Treepl CMS Events are similar to BC Events and can be set up quite easily.</p>\r\n    <p>The <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate Event migrations as well as transfer Event booking data from the CRM into Treepl CMS CRM.</p>\r\n    <p>For manual migrations, getting the data out of BC is a problem... although, you could likely use a similar approach to the Blog Export Helper above.</p>\r\n    <p>You can also upload your BC module layouts into your Treepl CMS instance via FTP into the ‘Content / ModuleLayouts / &lt;Event&gt; &amp; &lt;EventGroup&gt;’ directories.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Events Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2349\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Event component Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2354\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Event Post component Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2353\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h3 id=\"secPhotoGalleries\">Photo Galleries</h3>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secBuiltInModulesGalleries\", parity: \"med\", effort: \"med\", time: \"med\", docs: \"med\", tool: \"high\" %}\r\n    <p>Galleries in Treepl CMS work more like WebApps, so each image is an item within the parent module. This brings greater control in the long run, however migrating images and data to this new format can make migration a little more involved.</p>\r\n    <p>The <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS Migration App</a> can be used to automate this process.</p>\r\n    <p>If manually transferring your galleries, see this very helpful method of extracting the BC data in a ready format for Treepl CMS posted in the Treepl CMS Forum:</p>\r\n    <a class=\"btn small\" href=\"https://forum.treepl.co/t/bc-photo-gallery-exporter/107\" target=\"_blank\">BC Photo Galleries Export Helper</a>\r\n    <p>For more information about the Galleries/Sliders module see the documentation articles.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Gallery/Slider Group module</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2140\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Gallery/Slider Item module</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2143\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h3 id=\"secNews\">News</h3>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secBuiltInModulesNews\", parity: \"med\", effort: \"low\", time: \"low\", docs: \"med\", tool: \"high\" %}\r\n    <p>There is no “News” module specifically in Treepl CMS, however using the Blog would likely be a more than suitable alternative (see migrating Blogs section above).</p>\r\n    <p>The <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS Migration App</a> can be used to automate this process and a separate Blog module will be created for News items.</p>\r\n    <p>If migrating manually, since BC doesn't provide export functionality for extracting the BC News data, you could likely use a similar approach to the Blog Export Helper above.</p>\r\n    <p>You can also upload your BC module layouts into your Treepl CMS instance via FTP into the ‘Content / ModuleLayouts / &lt;Your Custom Module OR Blog&gt;’ directory.</p>\r\n    \r\n    \r\n    <h3 id=\"secMediaDownloads\">Media Downloads</h3>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secBuiltInModulesMedia\", parity: \"low\", effort: \"med\", time: \"med\", docs: \"low\", tool: \"high\" %}\r\n    <p>There is no direct “Media Downloads” module in Treepl CMS, however setting up a Custom Module along with the ‘<a href=\"https://docs.treepl.co/documentation_group/extras/force-download-handler\" target=\"_blank\">Force Download Handler</a>’ option would see very similar results with greater flexibility.<br>\r\n    (see migrating WebApps section in a later step).</p>\r\n    <p>You can manually migrate Media Downloads or alternatively the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p>For manual migrations, there are 2 main options:</p>\r\n    <p>1. Use the Advanced BC Export tool (in the BC to Treepl CMS migration App) to extract the media files and spreadsheet data:</p>\r\n        <a class=\"btn small\" href=\"https://treepl.co/advanced-business-catalyst-export\" target=\"_blank\">Advanced BC Export</a>\r\n\r\n    <p>2. Use this helpful method of extracting the BC data in a ready format for Treepl CMS, from this Treepl CMS Forum post:</p>\r\n    <a class=\"btn small\" href=\"https://forum.treepl.co/t/bc-media-downloads-exporter/235\" target=\"_blank\">BC Media Downloads Export Helper</a>\r\n    \r\n    \r\n    <h3 id=\"secFAQs\">FAQs</h3>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secBuiltInModulesFAQs\", parity: \"high\", effort: \"med\", time: \"med\", docs: \"low\", tool: \"high\" %}\r\n    <p>FAQs in Treepl CMS work more like WebApps, so each FAQ is an item within the parent module (Question Group). This brings greater control in the long run, however migrating FAQs and data to this new format may make migration a little more involved.</p>\r\n    <p>You can manually migrate FAQs or alternatively the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate this process.</p>\r\n    <p>For manual migrations, you could likely use a similar approach to the Blog Export Helper above.</p>\r\n    <p>You can also upload your BC module layouts into your Treepl CMS instance via FTP into the ‘Content / ModuleLayouts / &lt;FAQGroup&gt; &amp; &lt;FAQQuestion&gt;’ directories.</p>\r\n    <p>For more information about the FAQs module see the documentation articles.</p>\r\n    <div class=\"tab-content faqGroupOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>FAQ Group module</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2144\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"tab-content faqItemOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>FAQ Item module</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2145\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    \r\n    <h3 id=\"secAdRotators\">Ad Rotators</h3>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secBuiltInModulesRotators\", parity: \"med\", effort: \"med\", time: \"med\", docs: \"med\", tool: \"high\" %}\r\n    <p>The Banner module in Treepl CMS was built to replace the BC Ad Rotators and is set up much like the other modules in Treepl CMS and is therefore flexible for you to configure the layouts and behaviour as needed.</p>\r\n    <p>The <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS Migration App</a> can be used to automate this process.</p>\r\n    <p>If migrating manually, since BC doesn't provide export functionality for extracting the BC Ad Rotator data, you could likely use a similar approach to the Blog Export Helper above.</p>\r\n    <p>For more information about the Banners module see the documentation articles.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Banner Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2136\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Banner Group module</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2146\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Banner Item module</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2147\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <h2 id=\"secCustomModulesWebApps\" class=\"circle-wrap\"><div class=\"circle\">22</div>Custom Modules (WebApps)</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secCustomModulesWebApps\", parity: \"high\", effort: \"low\", time: \"med\", docs: \"high\", tool: \"high\" %}\r\n    <p>Generally, WebApps will transfer over quite easily as Custom Modules in Treepl CMS were built around an improved “WebApp” model. Therefore they have a very similar concept with how items are added and list and detail layouts are constructed. Combined with the fact that WebApp data can be easily exported from BC and imported into Treepl CMS, WebApps will likely be an easier job migrating then the other built-in BC modules.</p>\r\n    <p>If you have very complex WebApps there may be more time required to study the different methods with rendering data and converting complex Liquid markup, but the data migration should be relatively straight forward via export/import.</p>\r\n    <p>You can further simplify this process with the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a>, which can migration not only the item data but the WebApp layouts, settings and set up all custom fields including Datasource fields (converting the reference for Treepl CMS use).</p>\r\n    <p>If manually migrating WebApps, you'll will first need to set up your Custom Module with all it's correspondign properties and settings in order to import those matching fields from BC.</p>\r\n    <p>You can also upload your BC module layouts into your Treepl CMS instance via FTP into the ‘Content / ModuleLayouts / &lt;Your Custom Module&gt;’ directory.</p>\r\n    <p>Refer to the Custom Module documentation for more details:</p>\r\n    <a class=\"btn small\" href=\"/documentation_group/content-modules/custom-modules-aka-webapps\" target=\"_blank\">Custom Modules (AKA WebApps)</a>\r\n    \r\n    \r\n    \r\n    <h2 id=\"secEcommerce\" class=\"circle-wrap\"><div class=\"circle\">23</div>eCommerce</h2>\r\n    <p>To get up and running with eCommerce in Treepl CMS, see the getting started article below.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Getting Started with eCommerce</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2522\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <h3 id=\"secPaymentGateways\">Payment Gateways</h3>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secPaymentGateways\", parity: \"med\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"na\" %}\r\n    <p>Since the Payment Gateway settings contain sensitive details you will need to manually set up your Payment Gateway in your new Treepl CMS site by going to ‘Settings’ > ‘Payment’.</p>\r\n\r\n<div class=\"tab-content faqGroupOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Payment settings</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2352\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n<h3 id=\"secTaxCodes\">Tax Codes</h3>\r\n{% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secTaxCodes\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n<p>Tax Codes follow the same structure in Treepl CMS so you can simply enter all the same codes under ‘eCommerce’ > ‘Taxes’.</p>\r\n<p>If you are implementing all or many of the US State taxes you’ll be able to add these automatically when you click “Add New Tax” and select ‘United States’ as the assigned country.</p>\r\n<p>There is no manual export option from BC, nor is there an import option in Treepl CMS for this.</p>\r\n<p>You can also automatically migrate Tax Codes via the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS Migration App</a>.</p>\r\n<div class=\"tab-content faqGroupOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Tax Code documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2439\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n<h3 id=\"secShippingOptions\">Shipping Options</h3>\r\n{% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secShippingOptions\", parity: \"med\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n<p>Shipping Codes follow a very similar format in Treepl CMS so you can simply enter all the same codes under ‘eCommerce’ > Shipping options.</p>\r\n<p>This is for both user-defined shipping rules and integrated shipping providers.</p>\r\n<p>There is no manual export option from BC, nor is there an import option in Treepl CMS for this. </p>\r\n<p>You can also automatically migrate user-defined Shipping Options via the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS Migration App</a>.</p>\r\n<div class=\"tab-content faqGroupOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Shipping Options documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2438\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n<h3 id=\"secCatalogs\">Catalogs</h3>\r\n{% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secCatalogs\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n<p>You can import your Catalogues into Treepl CMS if you have a spreadsheet available, although there is no export feature in BC.</p>\r\n<p>Creating Catalogs manually can be done much the same way as adding any other module item in Treepl CMS via ‘eCommerce’ > ‘Catalogs’ and you will have similar options available.</p>\r\n<p>Options from BC that are not currently available are; Price visibility, XML feed, and Browse Panel settings.</p> \r\n<p>You can also automatically migrate Catalogs via the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS Migration App</a>.</p>\r\n<div class=\"tab-content faqGroupOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Catalogs documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2442\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n<h3 id=\"secProducts\">Products</h3>\r\n{% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secProducts\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n<p>You can import your Products into Treepl CMS with an export from BC, or if you have a spreadsheet available (after formatting to match Treepl CMS import file).</p>\r\n<p>Creating Products manually can be done much the same way as adding any other module item in Treepl CMS via ‘eCommerce’ > ‘Products’ and you will have similar options available.</p>\r\n<p>Additionally, you can add a variety of custom fields to customise your products module (for example, adding additional image fields would be how you’d add the “Poplets” feature from BC).</p>\r\n<p>Options from BC that are not currently available are; Capture Details, Commission Payable.</p>\r\n<p>You can also automatically migrate Products via the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS Migration App</a>.</p>\r\n<div class=\"tab-content faqGroupOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Products documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2443\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n<h3 id=\"secDiscountCodes\">Discount Codes</h3>\r\n{% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secDiscountCodes\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n<p>Discount Codes follow the same structure in Treepl CMS so you can simply enter all the same codes under ‘eCommerce’ > ‘Discount codes’.</p>\r\n<p>There is no manual export option from BC, nor is there an import option in Treepl CMS for this.</p>\r\n<p>You can also automatically migrate Discount Codes via the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS Migration App</a>.</p>\r\n<div class=\"tab-content faqGroupOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Discount Codes documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2441\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n<h3 id=\"secGiftVouchers\">Gift Vouchers</h3>\r\n{% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secGiftVouchers\", parity: \"high\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"high\" %}\r\n<p>Gift Vouchers follow the same structure in Treepl CMS so you can simply enter all the same vouchers under ‘eCommerce’ > ‘Gift vouchers’.</p>\r\n<p>There is no manual export option from BC, nor is there an import option in Treepl CMS for this.</p>\r\n<p>You can also automatically migrate Gift Vouchers via the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS Migration App</a>.</p>\r\n\r\n\r\n    <div class=\"tab-content faqGroupOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>Gift Vouchers documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2440\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n    <h2 id=\"secRevisitSiteTemplates\" class=\"circle-wrap\"><div class=\"circle\">24</div>Revisit Site Templates</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secRevisitSiteTemplates\", parity: \"high\", effort: \"med\", time: \"med\", docs: \"med\", tool: \"high\" %}\r\n    <p>Now let's review the Site Templates markup and replace BC modules and Liquid with Treepl CMS methods.</p>\r\n    <p>The <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can be used to automate much of this process. However, it's recommended to check through the markup for any exceptions.</p>\r\n    <p>Some common examples are:</p>\r\n    <ul>\r\n        <li>Dynamic HEAD elements</li>\r\n        <li>pagecontent tag</li>\r\n        <li>menus</li>\r\n        <li>content holder</li>\r\n        <li>includes</li>\r\n        <li>modules: BC's module syntax (old and new) converted to Treepl CMS 'Component' syntax</li>\r\n    </ul>\r\n    <p>Review the relevant Component types and all their properties and syntax:</p>\r\n    <a class=\"btn small\" href=\"/documentation_group/component-types/\" target=\"_blank\">All Component Types</a>\r\n    \r\n    \r\n    <h2 id=\"secRevisitSitePages\" class=\"circle-wrap\"><div class=\"circle\">25</div>Revisit Site Pages</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secRevisitSitePages\", parity: \"high\", effort: \"med\", time: \"med\", docs: \"med\", tool: \"high\" %}\r\n    <p>Like above, let's review the Site Pages markup and replace BC modules and Liquid with Treepl CMS methods.</p>\r\n    <p>Usign the <a href=\"https://treepl.co/business-catalyst-migration\" target=\"_blank\">BC to Treepl CMS  Migration App</a> can automate many BC to Treepl CMS Liquid and tag conversions.</p>\r\n    <p>For manual migrations, some common examples are:</p>\r\n    <ul>\r\n        <li>menus</li>\r\n        <li>content holder</li>\r\n        <li>includes</li>\r\n        <li>modules: BC's module syntax (old and new) converted to Treepl CMS 'Component' syntax</li>\r\n    </ul>\r\n    <p>Review the relevant Component types and all their properties and syntax:</p>\r\n    <a class=\"btn small\" href=\"/documentation_group/component-types/\" target=\"_blank\">All Component Types</a>\r\n    \r\n    \r\n    <h2 id=\"secSetupSEOandSitemap\" class=\"circle-wrap\"><div class=\"circle\">26</div>Setup SEO & Sitemap</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secSetupSEOandSitemap\", parity: \"med\", effort: \"low\", time: \"low\", docs: \"high\", tool: \"low\" %}\r\n    <p>Add primary domain, language, country, and configure sitemap automation (and possibly enable all items for search engine visibility).</p>\r\n    <p>For more information about SEO settings see the documentation article.</p>\r\n    <div class=\"tab-content faqsOpenCloseHolder\">\r\n        <div class=\"faqs-open-close \">\r\n            <a class=\"opener\" href=\"#\"><i class=\"fas fa-angle-right\"></i>SEO Documentation</a>\r\n            <div class=\"slide js-slide-hidden\">\r\n                {% component source: \"Documentation Post\", layout: \"Body Detail\", filterBy: \"id\", filterValue: \"2212\", limit: \"1\", type: \"module\" %}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <p>On initial setup, it's recommended to manually generate the sitemap to review the items listed - ensuring all your relevant site items are configured for search engine visibility.</p>\r\n    \r\n    \r\n    <h2 id=\"secChecksAndTroubleshooting\" class=\"circle-wrap\"><div class=\"circle\">27</div>Checks and Troubleshooting</h2>\r\n    {% component type: \"snippet\", alias: \"bc_migration_guide_meter\", id: \"secChecksAndTroubleshooting\", parity: \"na\", effort: \"med\", time: \"med\", docs: \"med\", tool: \"na\" %}\r\n\r\n    <p>Run back through the steps above as a quick checklist to review all your site items.</p>\r\n    <p>Comparing your new Treepl CMS site front-end alongside the BC site to check for consistancy.</p>\r\n    <p>Note any URL differences due to page/directory naming or restructuring and ensure URL Redirect are setup for these.</p>\r\n</div>\r\n",
          "TemplateName": "Docs Template",
          "ItemCategories": null,
          "ItemCategoryIdList": null,
          "ItemTags": [
            "Migrations"
          ],
          "SiteSearchKeywords": null,
          "ID": 2359,
          "CreatedByMemberId": "0",
          "IsHome": false,
          "Pagination": null,
          "OpenGraphProperties": {
            "title": null,
            "type": null,
            "url": null,
            "locale": null,
            "image": null
          },
          "Parent": null,
          "TemplateVirtualPointer": {
            "Pointer": 8491950041332711513,
            "TypeId": 1977186194,
            "InstanceId": 89,
            "DbTypeId": 1977186194,
            "DbInstanceId": 89
          },
          "Params": {}
        },
        "Type": 5
      },
      "TemplateVirtualPointer": {
        "Pointer": 8491950041332711513,
        "TypeId": 1977186194,
        "InstanceId": 89,
        "DbTypeId": 1977186194,
        "DbInstanceId": 89
      },
      "Params": {}
    },
    "Type": 5
  },
  "Name": "DEMO HTML Snippet",
  "Alias": "demo_html_snippet",
  "Content": "<p>The <strong>Hyper Text Markup Language</strong> (HTML) is mainly used for writing web pages.</p>",
  "Enabled": true,
  "Params": {}
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

You can also directly render this data on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "snippetExample" is as follows:

{% component type: "snippet", alias: "demo_html_snippet", collectionVariable: "snippetExample" %}

Rendering the collection data to a page:

<p><strong>{{snippetExample['name']}}</strong></p>
<div>{{snippetExample['content']}}</div>

21
Built-In Modules:

Blogs

Parityhigh Effortmed Timemed Docsmed Migration Toolactive

BC Blogs can be replicated in Treepl CMS either in the built-in Blog module or by using Custom Modules to configure your own blog structure.

The BC to Treepl CMS Migration App can be used to automate this process, including Release Dates, Tags, Categories, Authors and SEO data.

If manually transferring your blogs, for a method of extracting the BC Blog data see this helpful Treepl CMS Forum post (includes code snippets and demo video):

BC Blog Export Helper

You can also upload your BC module layouts into your Treepl CMS instance via FTP into the ‘Content / ModuleLayouts / <Blog> & <BlogPost>’ directories.

For more information about the Blog module see the documentation articles.

Blog module Documentation

View full article

Blogs provide a robust blogging platform allowing multiple Blogs per site with unlimited Posts and custom layouts.

Quick Start

Searching Ultimate Migration Guide (Step by Step) Items

Searching within Ultimate Migration Guide (Step by Step) can be achieved with a search form and the module’s component tag configured with the isSearchResult parameter.

Simple keyword based searches can be set up as well as more advanced search forms with specific system and custom fields searchable along with range searches for date and price/number fields.

You can configure a Ultimate Migration Guide (Step by Step) search with two parts; the search form and the module’s component tag. More on these parts below:

Component Tag with ‘isSearchResult’

To render the search results to the page and/or a collection, you need to configure the module’s component tag with the isSearchResult parameter set to true (see the Ultimate Migration Guide (Step by Step) component documentation for technical details).

{% component type: "module", source: "Blog Post", layout: "List", isSearchResult: "true" %}

This will allow the component to reference search parameters in the resulting URL.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

You may want to separate the search form from the component tag if you want a dedicated search results page, or where you have a search input in the header or footer of all pages as so searches could be made from any page.

This method also alleviates a side-effect of the isSearchResult configured component whereby it will output all indexed items by default if no search query has been specified (ie: when a user first navigates to a search page).

If you do want one single search page, with both search form and component and don’t want to initially list all results, another solution to this is to wrap the component tag in a Liquid condition which looks for the presence of the prop_KeyWords parameter in the URL, like so:

{% if request.request_url.params.prop_KeyWords %}
    {% component type: "module", source: "Blog Post", layout: "List", isSearchResult: "true" %}
{% endif %}

Basic Search Form

A basic keyword based search form for Ultimate Migration Guide (Step by Step) would be constructed like the following:

<form>
    <input type="hidden" name="prop_ModuleId" value="1234">
    <label>Keywords</label>
    <input type="text" name="prop_KeyWords" maxlength="255" value="{{request.request_url.params.prop_KeyWords}}">
    <input type="submit" value="Search">
</form>

This form element includes a prop_KeyWords text input, prop_ModuleId hidden input, a submit button and no form action attribute.

The prop_ModuleId hidden input tells the search which module to search (replace ‘1234’ with the ID of your module).

The prop_KeyWords text input allows multiple keywords to be entered for searching.

The search logic combines multiple keywords with an AND operator, so items will be returned only if they include ALL keywords entered.

Currently, searching does not support any manual logic operators to be used in the keyword input field (such as; AND, OR, NOT...)

When the form is submitted, prop_ModuleId and prop_KeyWords, along with their values, will be passed as URL parameters for the isSearchResult configured component tag to interpret.

By default, the search form has no action attribute, so it will redirect to the current page with the URL parameter appended to the current page URL.

You can, instead, separate the search form from the ‘site_search’ component, having the module component on a separate page and sending the search query to that page instead of the current page.

To do this, you’d add the other page URL slug to the form element. So if the other page was “/search-results”, you’d adjust the form to include an action attribute as such:

<form action="/search-results">

Advanced Search Form

Building further on the basic form structure above, you can add Ultimate Migration Guide (Step by Step) specific fields to search their contents, either individually or combined with other fields and/or keyword queries.

The search logic combines all field queries with an AND operator, so items will be returned only if they include ALL the queries entered.

The fields that can be search upon include:

  • Name
  • URL (Slug)
  • SKU Code
  • Release Date
  • Expiry Date
  • Site Search Keywords
  • Description
  • Any ‘Default Properties’ (eg: Categories, Tags, Author...)
  • Any ‘Custom Properties’
  • Module specific ‘System Properties’ (Price, Product Dimensions, Unit Type, Capacity...)

To add these fields to your search form, create an appropriate input with the name attribute configured like prop_PropertyName.

So, if you were adding a search field for a custom property called “Vehicle Colour”, the form input might look like this:

<input type="text" name="prop_VehicleColour">

Follow this same format for most other properties. Although you may like to change the input type to suit the type of data required.

For example, if our above “Vehicle Colour” property was actually a dropdown field with predefined colour values, you may choose to create a <select> element instead, like so:

<select name="prop_VehicleColour">
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
    <option value="Green">Green</option>
</select>

After the search form has been submitted, you might also like to keep the search queries filled in the search form fields, for better usability. So to do this you can pull the query parameters out of the URL and into the input values, like so:

<input type="text" name="prop_VehicleColour" value="{{request.request_url.params.prop_VehicleColour}}">

Search Within Number Ranges

For property types such as dates, prices and numbers, you can search with a to-from/min-max range by adding _Min or _Max to the property name.

So let’s say you want to search for items within a certain date range, based on their release/expiry dates.

<input type="datetime-local" name="prop_ReleaseDate_Min">
<input type="datetime-local" name="prop_ExpiryDate_Max">

And to populate these fields with the searched values:

<input type="datetime-local" name="prop_ReleaseDate_Min" value="{{request.request_url.params.prop_ReleaseDate_Min | date: "%Y-%m-%dT%H:%M"}}">
<input type="datetime-local" name="prop_ExpiryDate_Max" value="{{request.request_url.params.prop_ExpiryDate_Max | date: "%Y-%m-%dT%H:%M"}}">

Searching for a minimum release date will return all items with a release date newer (or the same as) the query date. And likewise searching for a maximum expiry date will return all items with an expiry date older (or the same as) the query date.

Programmatically Search (without a form)

There may be times when you require the search results for a module based on constructed data, other than that of a user’s input into a search form.

You can achieve this with the use of the searchScope parameter on the module’s component tag (see the Ultimate Migration Guide (Step by Step) component documentation for technical details).

This parameter allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid constructed) values without the use of a search form.

The search queries are similar to that used in the above form based search method, but use JSON syntax for their construction.

Below is an example of a constructed searchScope configured component tag, with min/max release date search, keywords and multiple tags query:

{% component type: "module", source: "Blog Post", layout: "List", searchScope: "{'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2']}" %}

The search logic combines all field queries with an AND operator, so items will be returned only if they include ALL the queries entered.

Blog component Documentation

View full article

This module component fetches data relating to Blogs.

{% component type: "module", source: "Blog", layout: "Blog List Layout" %}

Parameters and Options

Parameter
Values
Required
Description
type
module (default)
module_of_member

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
Blog (default)
The entity/alias name or ID that the data is to be sourced from.
layout
Blog List Layout (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

filterBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to filter by. If empty or not present, no filtering will be used.

Remove spaces from custom property names here.

filterValue
<your value>

Your specific value to filter by, eg: name, id, number, date, etc.
Liquid variables can be used here also. If present but no value set, no items will be returned.
sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Displays the available items in a random order.

If used in conjunction with sortBy, that sorting criteria will be applied to the randomly retrieved results. So, if retrieving all, or most, of the items they will not appear to be random since they will then be sorted back into a logical order. To overcome this, set the sortBy parameter to 'enabled' (or another unused property) as this will not provide any viable sorting criteria* and the items will not be sorted from their initial random order.
* Unless there are weighted items, which will always override the random option.

If this param's value is 'true' - pagination will not be shown.
limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no items are returned by the Component. The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

isSearchResult
false (default)
true

Allows search parameters in the URL to override the components output. Therefore, this parameter can be used to output module specific search results from a submitted search form.

Likewise, Tag, Category, and Archive components can be used in conjunction with this parameter for filtering the module's output.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

Any value other than true, (including an empty value), will disable the search functionality and the component will output its regular data.

searchScope
eg:
{'prop_ParentId':'1234', 'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2'], 'page':'2'}

Allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid) values without the use of a search form.

Added search parameters will override any corresponding parameters otherwise configured on the component. If no search parameters are present, searchScope will be ignored.

This value supports Liquid and can therefore be constructed with Liquid data/variables.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example has 3 sample items (Blogs), but is otherwise the default structure you will get from this Component.

{
  "Params": {
    "source": "Blog",
    "layout": "",
    "type": "module",
    "collectionvariable": "allBlogs"
  },
  "Pagination": {
    "CurrentPage": 1,
    "ItemsPerPage": 10,
    "NumberOfPages": 1,
    "TotalItemsCount": 3
  },
  "Parent": {
    "Id": 2141,
    "Name": "module (Blog)",
    "Url": "/component-types/module-blog",
    "Url_List": [
      "/component-types/module-blog"
    ],
    "UrlSlug": "module-blog",
    "ParentId": 2127,
    "ParentId_List": [
      2127
    ],
    "ParentName": "Liquid Components",
    "ParentUrl": "/component-types",
    "TemplateName": "Docs Template",
    "Module_Alias": "DocumentationPost",
    "Module_ID": 1870,
    "Enabled": true,
    "ReleaseDate": "2018-09-03T23:00:00",
    "ExpiryDate": "2099-12-09T00:00:00",
    "SiteSearchKeywords": [],
    "Description": "<p>This module component fetches data relating to Blogs.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n{% component source: \"Blog\", layout: "", type: \"module\", collectionVariable: \"allBlogs\" %}\r\n<p>The below example has 3 sample <code>items</code> (Blogs), but is otherwise the default structure you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{allBlogs}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>This data is accessible in two main ways:</p>\r\n\r\n<p>1. Using Liquid in the specified Layout via the <code>this</code> object.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>2. Directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"allBlogs\" to list all \"Blog\" across the site:</p>\r\n<p class=\"notice-note\">Here we suppress any Layout from rendering by setting <code>layout: \"\"</code> as an empty attribute.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the item URLs in a list, giving us:</em></p>\r\n\r\n<ul>\r\n    \r\n        <li>/demo-custom-blog</li>\r\n    \r\n        <li>/demo-custom-blog-2</li>\r\n    \r\n        <li>/demo-html-blog</li>\r\n    \r\n</ul>\r\n<br>\r\n<p><em>The code:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value <code>/demo-custom-blog-2</code></em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_counter\" %}\r\n</section>\r\n",
    "Weighting": 970,
    "DisableForSiteSearch": false,
    "CreatedByMemberId": "0",
    "ItemCategories": [],
    "ItemCategoryIdList": [],
    "ItemTags": [
      "Blogs"
    ],
    "Author": 0,
    "Author_Name": "",
    "Author_Url": "",
    "Item_Rating": 0,
    "Active": true,
    "IgnoreUpdates": true,
    "UpdatesLog": "<ul><li>27-Oct-2020 | 5.6.0 | Added 'ignoreWeighting' parameter</li><li>'module_of_member' parameter details added.</li></ul>",
    "ExternalResources": "<ul><li><a href=\"/demo-cs/all-blogs\">Demo Site Listing All Blogs</a></li></ul>",
    "AdditionalRelatedArticle": 0,
    "AdditionalRelatedArticle2": 0,
    "Authors": "2418",
    "ShowPageForSearchEngine": true,
    "MetaTitle": "",
    "SEOTitle": "",
    "MetaDescription": "",
    "CanonicalLink": "",
    "SocialMetaTags": "",
    "SeoPriority": 0.0,
    "EnableAMP": false,
    "AMPContent": "",
    "OpenGraphProperties": {
      "title": null,
      "type": null,
      "url": null,
      "locale": null,
      "image": null
    },
    "ExternalId": 0,
    "Params": {
      "source": "Documentation Post",
      "layout": "Body Detail",
      "filterby": "id",
      "filtervalue": "2141",
      "limit": "1",
      "type": "snippet",
      "alias": "section_output",
      "data": "\r\n{% component type: \"module\", source: \"Blog\", layout: \"Blog List Layout\" %}\r\n",
      "lang": "liquid",
      "name": "SECTION Output",
      "content": "<section id=\"secOutput\">\n    <h2>Liquid Output</h2>",
      "enabled": true,
      "required": "true",
      "values": "Blog List Layout <em>(default)</em><br>&lt;Your Layout name&gt;"
    }
  },
  "Items": [
    {
      "Id": 2286,
      "Name": "DEMO Custom Blog",
      "Url": "/demo-custom-blog",
      "Url_List": [
        "/demo-custom-blog"
      ],
      "UrlSlug": "demo-custom-blog",
      "ParentId": 1528,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "Blog",
      "Module_ID": 1528,
      "Enabled": true,
      "ReleaseDate": "2018-12-14T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>This is a description for my blog.<br>\r\nIt has Categories and Tags applied and can be filtered by Category, Tag and Month.<br>\r\nPagination is also enabled.</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": true,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": "",
        "type": "",
        "url": "",
        "locale": "",
        "image": ""
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2464,
      "Name": "DEMO Custom Blog 2",
      "Url": "/demo-custom-blog-2",
      "Url_List": [
        "/demo-custom-blog-2"
      ],
      "UrlSlug": "demo-custom-blog-2",
      "ParentId": 1528,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "Blog",
      "Module_ID": 1528,
      "Enabled": true,
      "ReleaseDate": "2019-11-06T00:00:00",
      "ExpiryDate": "2099-12-12T00:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>This is a description for my blog.<br>\nIt has Categories and Tags enabled and can be filtered by Keyword/Search, Category, Tag and Month.<br>\nFor the depreciated blog layout <a href=\"/demo-custom-blog\">see here</a>.\n</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.5,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2279,
      "Name": "DEMO HTML Blog",
      "Url": "/demo-html-blog",
      "Url_List": [
        "/demo-html-blog"
      ],
      "UrlSlug": "demo-html-blog",
      "ParentId": 1528,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "Blog",
      "Module_ID": 1528,
      "Enabled": true,
      "ReleaseDate": "2018-11-25T18:00:00",
      "ExpiryDate": "2099-12-11T07:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": true,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    }
  ]
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible in two main ways:

1. Using Liquid in the specified Layout via the this object.

{{this['url']}}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "allBlogs" to list all "Blog" across the site:

Here we suppress any Layout from rendering by setting layout: "" as an empty attribute.

{% component type: "module", source: "Blog", layout: "", collectionVariable: "allBlogs" %}

Looping through the collection to render all the item URLs in a list, giving us:

  • /demo-custom-blog
  • /demo-custom-blog-2
  • /demo-html-blog

The code:

<ul>
    {% for i in allBlogs.items %}
        <li>{{i['url']}}</li>
    {% endfor %}
</ul>

Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value /demo-custom-blog-2

{{allBlogs.items[1]['url']}}

Counter

Along with the data output above, there is also a special liquid tag available {{counter}} which increments for each item. This tag is only available within Layouts when object: "item" is used in the Component tag.

Blog Post component Documentation

View full article

This module component fetches data relating to Blog Posts.

{% component type: "module", source: "Blog Post", layout: "List" %}

Parameters and Options

Parameter
Values
Required
Description
type
module (default)
module_of_member

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
Blog Post (default)
The entity/alias name or ID that the data is to be sourced from.
layout
List (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

filterBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to filter by. If empty or not present, no filtering will be used.

Remove spaces from custom property names here.

filterValue
<your value>

Your specific value to filter by, eg: name, id, number, date, etc.
Liquid variables can be used here also. If present but no value set, no items will be returned.
sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Displays the available items in a random order.

If used in conjunction with sortBy, that sorting criteria will be applied to the randomly retrieved results. So, if retrieving all, or most, of the items they will not appear to be random since they will then be sorted back into a logical order. To overcome this, set the sortBy parameter to 'enabled' (or another unused property) as this will not provide any viable sorting criteria* and the items will not be sorted from their initial random order.
* Unless there are weighted items, which will always override the random option.

If this param's value is 'true' - pagination will not be shown.
limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no items are returned by the Component. The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

isSearchResult
false (default)
true

Allows search parameters in the URL to override the components output. Therefore, this parameter can be used to output module specific search results from a submitted search form.

Likewise, Tag, Category, and Archive components can be used in conjunction with this parameter for filtering the module's output.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

Any value other than true, (including an empty value), will disable the search functionality and the component will output its regular data.

searchScope
eg:
{'prop_ParentId':'1234', 'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2'], 'page':'2'}

Allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid) values without the use of a search form.

Added search parameters will override any corresponding parameters otherwise configured on the component. If no search parameters are present, searchScope will be ignored.

This value supports Liquid and can therefore be constructed with Liquid data/variables.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example has 3 sample items but is otherwise the default structure you will get from this Component.

{
  "Params": {
    "source": "Blog Post",
    "layout": "",
    "type": "module",
    "limit": "3",
    "collectionvariable": "allPosts"
  },
  "Pagination": {
    "CurrentPage": 1,
    "ItemsPerPage": 3,
    "NumberOfPages": 3,
    "TotalItemsCount": 7
  },
  "Parent": {
    "Id": 2142,
    "Name": "module (Blog Post)",
    "Url": "/component-types/module-blog-post",
    "Url_List": [
      "/component-types/module-blog-post"
    ],
    "UrlSlug": "module-blog-post",
    "ParentId": 2127,
    "ParentId_List": [
      2127
    ],
    "ParentName": "Liquid Components",
    "ParentUrl": "/component-types",
    "TemplateName": "Docs Template",
    "Module_Alias": "DocumentationPost",
    "Module_ID": 1870,
    "Enabled": true,
    "ReleaseDate": "2018-09-04T23:00:00",
    "ExpiryDate": "2099-12-09T00:00:00",
    "SiteSearchKeywords": [],
    "Description": "<p>This module component fetches data relating to Blog Posts.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n{% component source: \"Blog Post\", layout: "", type: \"module\", limit: \"3\", collectionVariable: \"allPosts\" %}\r\n<p>The below example has 3 sample <code>items</code> but is otherwise the default structure you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{allPosts}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>This data is accessible in two main ways:</p>\r\n\r\n<p>1. Using Liquid in the specified Layout via the <code>this</code> object.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>2. Directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"allPosts\" to list all \"Blog Posts\" across the site:</p>\r\n<p class=\"notice-note\">Here we suppress any Layout from rendering by setting <code>layout: \"\"</code> as an empty attribute.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the item URLs in a list, giving us:</em></p>\r\n\r\n<ul>\r\n    \r\n        <li>/demo-html-blog/demo-html-post</li>\r\n    \r\n        <li>/demo-custom-blog-2/sample2-post-one</li>\r\n    \r\n        <li>/demo-custom-blog-2/sample2-post-three</li>\r\n    \r\n</ul>\r\n<br>\r\n<p><em>The code:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the third item (zero based index), which in our example would render the value <code>/demo-custom-blog-2/sample2-post-three</code></em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n\r\n<section id=\"secListFilteredPosts\">\r\n    <h3>List Posts from a specific Blog</h3>\r\n<p>If you have more than one Blog on your site the above examples will list Posts from all Blogs as one single collection. However, typically you'd want to list all Posts from only the Blog they belong to (their \"parent\" Blog).</p>\r\n<p>To do this we add the <code>filterBy</code> and <code>filterValue</code> attributes to the Component tag.</p>\r\n<p>Typically, you would be listing Blog specific Posts on your Blog detail page/index page. In which case you would be editing the 'General Blog Layout' to insert your Component tag, which would look like this:</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>As we are within the Blog's detail Layout (which represents the 'parent' Blog) we can reference its ID for the filter value using <code>{{this['id']}}</code> and instruct the Component tag to filter the Posts only by their parent (<code>filterBy: \"parentID\"</code>) - giving us only the relevant Posts for the current Blog.</p>\r\n<p>You may however, want to render a list of Posts on a standard page or within another modules layout,  where the Post's parent ID (the Blog it belongs to) is not readily available to us in the Liquid scope. In this case you would need to manually hardcode the desired parent Blog's ID into the component tag in place of the above Liquid generated ID (<code>filterValue: \"1234\"</code>).</p>\r\n<p class=\"notice-tip\">To obtain the Blog's ID from the admin, go to that Blog's list view (where you can see all of the Posts) and note the number in the URL address bar shown after the <code>parentID=</code> parameter.</p>\r\n</section>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_counter\" %}\r\n</section>\r\n",
    "Weighting": 969,
    "DisableForSiteSearch": false,
    "CreatedByMemberId": "0",
    "ItemCategories": [],
    "ItemCategoryIdList": [],
    "ItemTags": [
      "Blogs"
    ],
    "Author": 0,
    "Author_Name": "",
    "Author_Url": "",
    "Item_Rating": 0,
    "Active": true,
    "IgnoreUpdates": true,
    "UpdatesLog": "<ul><li>27-Oct-2020 | 5.6.0 | Added 'ignoreWeighting' parameter</li><li>'module_of_member' parameter details added.</li></ul>",
    "ExternalResources": "<ul><li><a href=\"/demo-cs/all-posts\">Demo Site All Posts</a></li><li><a href=\"/demo-html-blog\">Demo Site Blog</a></li></ul>",
    "AdditionalRelatedArticle": 0,
    "AdditionalRelatedArticle2": 0,
    "Authors": "2418",
    "ShowPageForSearchEngine": true,
    "MetaTitle": "",
    "SEOTitle": "",
    "MetaDescription": "",
    "CanonicalLink": "",
    "SocialMetaTags": "",
    "SeoPriority": 0.8,
    "EnableAMP": false,
    "AMPContent": "",
    "OpenGraphProperties": {
      "title": null,
      "type": null,
      "url": null,
      "locale": null,
      "image": null
    },
    "ExternalId": 0,
    "Params": {
      "source": "Documentation Post",
      "layout": "Body Detail",
      "filterby": "id",
      "filtervalue": "2142",
      "limit": "1",
      "type": "snippet",
      "alias": "section_output",
      "data": "\r\n{% component type: \"module\", source: \"Blog Post\", layout: \"List\" %}\r\n",
      "lang": "liquid",
      "name": "SECTION Output",
      "content": "<section id=\"secOutput\">\n    <h2>Liquid Output</h2>",
      "enabled": true,
      "required": "true",
      "values": "List <em>(default)</em><br>&lt;Your Layout name&gt;"
    }
  },
  "Items": [
    {
      "Id": 2280,
      "Name": "DEMO HTML Post",
      "Url": "/demo-html-blog/demo-html-post",
      "Url_List": [
        "/demo-html-blog/demo-html-post"
      ],
      "UrlSlug": "demo-html-post",
      "ParentId": 2279,
      "ParentId_List": [
        2279
      ],
      "ParentName": "DEMO HTML Blog",
      "ParentUrl": "/demo-html-blog",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "BlogPost",
      "Module_ID": 1534,
      "Enabled": true,
      "ReleaseDate": "2018-11-25T16:55:00",
      "ExpiryDate": "2099-12-10T16:55:00",
      "SiteSearchKeywords": [],
      "Description": "<p>Orci phasellus egestas tellus rutrum tellus pellentesque. Sed enim ut sem viverra aliquet. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Eget duis at tellus at urna condimentum mattis pellentesque. A condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Viverra aliquet eget sit amet tellus cras adipiscing enim.</p><p><span class=\"fr-emoticon fr-deletable fr-emoticon-img\" style=\"background: url(https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.1/assets/svg/1f60e.svg);\">&nbsp;</span>&nbsp;</p>\r\n",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [
        "G1 Sub Sub Cat I"
      ],
      "ItemCategoryIdList": [
        1353
      ],
      "ItemTags": [],
      "Author": 2274,
      "Author_Name": "DEMO Author One",
      "Author_Url": "/demo-author-one",
      "Item_Rating": 0,
      "Image": "",
      "ShowPageForSearchEngine": true,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.5,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2468,
      "Name": "Sample2 Post One ",
      "Url": "/demo-custom-blog-2/sample2-post-one",
      "Url_List": [
        "/demo-custom-blog-2/sample2-post-one"
      ],
      "UrlSlug": "sample2-post-one",
      "ParentId": 2464,
      "ParentId_List": [
        2464
      ],
      "ParentName": "DEMO Custom Blog 2",
      "ParentUrl": "/demo-custom-blog-2",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "BlogPost",
      "Module_ID": 1534,
      "Enabled": true,
      "ReleaseDate": "2019-10-06T20:00:00",
      "ExpiryDate": "2099-12-12T00:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>Cras elementum viverra nisl, at convallis urna tristique eu. Nam ut erat libero. In posuere turpis congue nunc rhoncus laoreet. In volutpat mauris vitae augue bibendum pharetra. Nullam pharetra, ligula ac ultricies porta, erat justo rhoncus nisl, sit amet tempus diam leo vitae turpis. Nam id lorem fringilla, finibus nulla efficitur, gravida lacus. Curabitur in molestie arcu. Sed eget tempor enim, vitae sagittis nisi. Sed porttitor euismod ex, accumsan lobortis quam lacinia quis. Aliquam dignissim vestibulum neque, ornare tristique elit sodales non. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p><p>Aliquam id mattis elit, eu dictum sem. Suspendisse velit diam, pellentesque in commodo nec, tristique vel quam. Donec dapibus gravida volutpat. Nunc tellus metus, laoreet vel odio ut, fringilla posuere velit. Aliquam ut dignissim tellus, et condimentum eros. In aliquam leo nibh, sed facilisis nunc condimentum vitae. Duis vestibulum pellentesque orci, quis volutpat tellus commodo eget. Morbi congue hendrerit euismod. Maecenas vel porttitor sapien. Nam a leo vitae lectus rutrum feugiat. Sed mollis hendrerit odio, in porttitor metus cursus at. Sed vel tellus venenatis, maximus diam in, volutpat massa. Duis sodales, quam id eleifend pretium, felis tortor ullamcorper eros, ut euismod nisl nibh vel est. Vestibulum varius, quam sit amet placerat consectetur, est leo pretium ante, ut bibendum augue elit sit amet velit.</p><p>Donec congue ligula non felis viverra, sed aliquet nisl suscipit. Sed porta ultricies est tempor finibus. Sed tempor mollis nunc. Pellentesque posuere elit et elit varius commodo. Nulla facilisi. Vivamus condimentum nunc sit amet lacus condimentum sagittis at ut dui. Quisque in quam enim. Duis egestas, nisi quis auctor placerat, est sem pretium mi, nec pharetra tortor arcu eu magna. Nullam sed lectus ac nibh placerat vulputate id ut urna. Aenean ullamcorper sed sem id lobortis. Integer ornare bibendum maximus. Quisque venenatis eleifend lorem, at pharetra est fermentum semper. Vivamus turpis orci, molestie eget consequat nec, rutrum a quam. Morbi eu ullamcorper elit. Phasellus a vehicula velit.</p><p>Praesent dignissim sagittis leo ut porttitor. Integer nisi enim, tristique a ligula vel, mattis gravida metus. Praesent sed cursus turpis, pellentesque facilisis risus. Ut ut tortor elementum, euismod nisl nec, rhoncus justo. In lobortis tempus ipsum ut venenatis. Etiam a mi vel ante tempor aliquet sed nec leo. Sed euismod neque at tortor ultrices dapibus. Sed ipsum libero, viverra vel sem a, fringilla fringilla eros. Vivamus sit amet arcu malesuada mi mattis vulputate vel laoreet diam. Vestibulum eu tellus lectus.</p><p>Aenean risus tellus, posuere at ligula eu, elementum rhoncus lacus. Aenean non urna vulputate, aliquam eros ut, pretium ex. Morbi elementum erat vitae est dapibus interdum. Nam sed rhoncus nunc. Sed posuere ullamcorper eros, sed efficitur nisi maximus id. Sed nec aliquam ligula. Quisque ultricies pellentesque nulla, quis auctor eros blandit malesuada. Sed purus leo, imperdiet at justo id, bibendum convallis ex. Donec sagittis, urna vitae posuere viverra, purus purus imperdiet enim, id lacinia lacus velit sit amet neque. Fusce vestibulum tortor ac tortor venenatis vehicula. Donec nec lorem sed nunc pharetra finibus. Pellentesque porttitor augue ex, et mattis erat gravida in.</p>",
      "Weighting": 0,
      "DisableForSiteSearch": true,
      "CreatedByMemberId": "0",
      "ItemCategories": [
        "Group 2",
        "Sample Category"
      ],
      "ItemCategoryIdList": [
        1346,
        1348
      ],
      "ItemTags": [
        "blog posts",
        "demo"
      ],
      "Author": 2274,
      "Author_Name": "DEMO Author One",
      "Author_Url": "/demo-author-one",
      "Item_Rating": 0,
      "Image": "/images/template-courses.jpg",
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.5,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2470,
      "Name": "Sample2 Post Three",
      "Url": "/demo-custom-blog-2/sample2-post-three",
      "Url_List": [
        "/demo-custom-blog-2/sample2-post-three"
      ],
      "UrlSlug": "sample2-post-three",
      "ParentId": 2464,
      "ParentId_List": [
        2464
      ],
      "ParentName": "DEMO Custom Blog 2",
      "ParentUrl": "/demo-custom-blog-2",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "BlogPost",
      "Module_ID": 1534,
      "Enabled": true,
      "ReleaseDate": "2019-11-05T00:00:00",
      "ExpiryDate": "2099-12-11T13:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>Cras elementum viverra nisl, at convallis urna tristique eu. Nam ut erat libero. In posuere turpis congue nunc rhoncus laoreet. In volutpat mauris vitae augue bibendum pharetra. Nullam pharetra, ligula ac ultricies porta, erat justo rhoncus nisl, sit amet tempus diam leo vitae turpis. Nam id lorem fringilla, finibus nulla efficitur, gravida lacus. Curabitur in molestie arcu. Sed eget tempor enim, vitae sagittis nisi. Sed porttitor euismod ex, accumsan lobortis quam lacinia quis. Aliquam dignissim vestibulum neque, ornare tristique elit sodales non. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p><p>Aliquam id mattis elit, eu dictum sem. Suspendisse velit diam, pellentesque in commodo nec, tristique vel quam. Donec dapibus gravida volutpat. Nunc tellus metus, laoreet vel odio ut, fringilla posuere velit. Aliquam ut dignissim tellus, et condimentum eros. In aliquam leo nibh, sed facilisis nunc condimentum vitae. Duis vestibulum pellentesque orci, quis volutpat tellus commodo eget. Morbi congue hendrerit euismod. Maecenas vel porttitor sapien. Nam a leo vitae lectus rutrum feugiat. Sed mollis hendrerit odio, in porttitor metus cursus at. Sed vel tellus venenatis, maximus diam in, volutpat massa. Duis sodales, quam id eleifend pretium, felis tortor ullamcorper eros, ut euismod nisl nibh vel est. Vestibulum varius, quam sit amet placerat consectetur, est leo pretium ante, ut bibendum augue elit sit amet velit.</p><p>Donec congue ligula non felis viverra, sed aliquet nisl suscipit. Sed porta ultricies est tempor finibus. Sed tempor mollis nunc. Pellentesque posuere elit et elit varius commodo. Nulla facilisi. Vivamus condimentum nunc sit amet lacus condimentum sagittis at ut dui. Quisque in quam enim. Duis egestas, nisi quis auctor placerat, est sem pretium mi, nec pharetra tortor arcu eu magna. Nullam sed lectus ac nibh placerat vulputate id ut urna. Aenean ullamcorper sed sem id lobortis. Integer ornare bibendum maximus. Quisque venenatis eleifend lorem, at pharetra est fermentum semper. Vivamus turpis orci, molestie eget consequat nec, rutrum a quam. Morbi eu ullamcorper elit. Phasellus a vehicula velit.</p><p>Praesent dignissim sagittis leo ut porttitor. Integer nisi enim, tristique a ligula vel, mattis gravida metus. Praesent sed cursus turpis, pellentesque facilisis risus. Ut ut tortor elementum, euismod nisl nec, rhoncus justo. In lobortis tempus ipsum ut venenatis. Etiam a mi vel ante tempor aliquet sed nec leo. Sed euismod neque at tortor ultrices dapibus. Sed ipsum libero, viverra vel sem a, fringilla fringilla eros. Vivamus sit amet arcu malesuada mi mattis vulputate vel laoreet diam. Vestibulum eu tellus lectus.</p><p>Aenean risus tellus, posuere at ligula eu, elementum rhoncus lacus. Aenean non urna vulputate, aliquam eros ut, pretium ex. Morbi elementum erat vitae est dapibus interdum. Nam sed rhoncus nunc. Sed posuere ullamcorper eros, sed efficitur nisi maximus id. Sed nec aliquam ligula. Quisque ultricies pellentesque nulla, quis auctor eros blandit malesuada. Sed purus leo, imperdiet at justo id, bibendum convallis ex. Donec sagittis, urna vitae posuere viverra, purus purus imperdiet enim, id lacinia lacus velit sit amet neque. Fusce vestibulum tortor ac tortor venenatis vehicula. Donec nec lorem sed nunc pharetra finibus. Pellentesque porttitor augue ex, et mattis erat gravida in.</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [
        "G1 Sub Cat I",
        "G2 Sub Cat II"
      ],
      "ItemCategoryIdList": [
        1349,
        1352
      ],
      "ItemTags": [
        "blog posts",
        "sample"
      ],
      "Author": 2274,
      "Author_Name": "DEMO Author One",
      "Author_Url": "/demo-author-one",
      "Item_Rating": 0,
      "Image": "/images/home-img-01.jpg",
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.5,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": "My Open Graph Title",
        "type": "article",
        "url": "https://www.mywesite.com/demo-custom-blog-2/sample2-post-three",
        "locale": "en_US",
        "image": "https://www.mywesite.com/images/sample-image.jpg"
      },
      "ExternalId": 0,
      "Params": {}
    }
  ]
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible in two main ways:

1. Using Liquid in the specified Layout via the this object.

{{this['url']}}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "allPosts" to list all "Blog Posts" across the site:

Here we suppress any Layout from rendering by setting layout: "" as an empty attribute.

{% component type: "module", source: "Blog Posts", layout: "", collectionVariable: "allPosts" %}

Looping through the collection to render all the item URLs in a list, giving us:

  • /demo-html-blog/demo-html-post
  • /demo-custom-blog-2/sample2-post-one
  • /demo-custom-blog-2/sample2-post-three

The code:

<ul>
    {% for i in allPosts.items %}
        <li>{{i['url']}}</li>
    {% endfor %}
</ul>

Accessing a specific item within the collection. In this case the third item (zero based index), which in our example would render the value /demo-custom-blog-2/sample2-post-three

{{allPosts.items[2]['url']}}

List Posts from a specific Blog

If you have more than one Blog on your site the above examples will list Posts from all Blogs as one single collection. However, typically you'd want to list all Posts from only the Blog they belong to (their "parent" Blog).

To do this we add the filterBy and filterValue attributes to the Component tag.

Typically, you would be listing Blog specific Posts on your Blog detail page/index page. In which case you would be editing the 'General Blog Layout' to insert your Component tag, which would look like this:

{% component type: "module", source: "Blog Posts", layout: "List", filterBy: "parentId", filterValue: "{{this['id']}}" %}

As we are within the Blog's detail Layout (which represents the 'parent' Blog) we can reference its ID for the filter value using {{this['id']}} and instruct the Component tag to filter the Posts only by their parent (filterBy: "parentID") - giving us only the relevant Posts for the current Blog.

You may however, want to render a list of Posts on a standard page or within another modules layout, where the Post's parent ID (the Blog it belongs to) is not readily available to us in the Liquid scope. In this case you would need to manually hardcode the desired parent Blog's ID into the component tag in place of the above Liquid generated ID (filterValue: "1234").

To obtain the Blog's ID from the admin, go to that Blog's list view (where you can see all of the Posts) and note the number in the URL address bar shown after the parentID= parameter.

Counter

Along with the data output above, there is also a special liquid tag available {{counter}} which increments for each item. This tag is only available within Layouts when object: "item" is used in the Component tag.

Events

Parityhigh Efforthigh Timemed Docshigh Migration Toolactive

Treepl CMS Events are similar to BC Events and can be set up quite easily.

The BC to Treepl CMS Migration App can be used to automate Event migrations as well as transfer Event booking data from the CRM into Treepl CMS CRM.

For manual migrations, getting the data out of BC is a problem... although, you could likely use a similar approach to the Blog Export Helper above.

You can also upload your BC module layouts into your Treepl CMS instance via FTP into the ‘Content / ModuleLayouts / <Event> & <EventGroup>’ directories.

Events Documentation

View full article

From a simple list of upcoming meetings, a calendar view of important dates, to limited seat paid events spanning a few hours or multiple days, the Event module can be tailored for a variety of event types and use-cases and provides administrators with ease of management and access to subscribers and booking information.

The Ultimate Migration Guide (Step by Step) module and its settings can be found under the 'Content' item in the left hand admin menu, then choose "Ultimate Migration Guide (Step by Step)".

Ultimate Migration Guide (Step by Step) Settings

From the Ultimate Migration Guide (Step by Step) item list view, click the " EDIT SETTINGS" button to display a menu for further options, as detailed below.

Ultimate Migration Guide (Step by Step) - Edit

Settings

These settings relate to the overall Ultimate Migration Guide (Step by Step) options and functionality and how content might be managed by site administrators.

For nested modules, such as Blogs, Events, Galleries, FAQs, and any nested Custom Modules, you may wish to edit the settings for each of the 2 nested modules. You can easily switch between the 2 module's settings using the switcher at the top of page (under the modules name). The disabled, greyed out item, indicates the currently active module - while the active, highlighted linked item, provides a link to the related module.

Ultimate Migration Guide (Step by Step) - Edit Parent/Child Switcher
Settings
Option
Description
Module Name
The Module Name to describe the type of content it will contain or the purpose it will serve.
URL

The system will generate a base URL derived from the module name given. You can however, adjust this URL path name if desired. This will set the directory structure for this content on your site. So, for example, if you set a Module's name as “Web Technologies” the URL for this module might be https://your-domain.com/web-technologies. And given an item within this module called “JavaScript”, the item might be accessed via the URL https://your-domain.com/web-technologies/javascript.

Changing an existing Modules URL may affect all of this Module's existing items URLs on your website.

Alternate Item name

Once your Module is configured and ready for adding items, the site admin will generally use the ‘Create New’ item button in the Module's list view. When the list view is changed to display in ‘Tree View’ mode (ie: when using nested/grouped modules) the admin will see a dropdown option referring to the name of the Module item to be created. By default this will show the name of the Module you've created, for example: “Create new… Staff List”. However, while “Staff List” might be appropriate for the overall Module name it’s not quite the right terminology for creating individual items. So instead, you can set this alternative naming to give your Module better context and usability, for example, changing the button option to: “Create New… Staff Member”.

Site User Permissions

Here you can allow website users to submit, or otherwise manipulate, the Module's items from the front-end of the website. Furthermore, these options allow you to control the permissions those users have.

Option
Description
Allow Add New Items

Enables this Module to accept logged in user submitted items from the website front-end.

In addition, you’ll need to add the ‘Create Item’ form (found in the Components Manager) to your layouts or pages to provide this functionality.

Select Workflows

The workflow notification/s that will be triggered upon a user submitting a new item.

Multiple workflows can be selected and will all be triggered at the same time.

Allow Edit Items

Enables logged in users to edit their submitted items for this Module.

In addition, you’ll need to add the ‘Update Item’ form (found in the Components Manager) to your layouts or pages to provide this functionality.

Anyone Can Edit Items

Enables any logged in users to edit or delete any items for this Module.

In addition, you’ll need to add the ‘Update/Delete Item’ form (found in the Components Manager) to your layouts or pages to provide this functionality.

Select Workflows

The workflow notification/s that will be triggered upon a user editing an item.

Multiple workflows can be selected and will all be triggered at the same time.

Allow Delete Items

Enables logged in users to delete their submitted items for this Module.

In addition, you’ll need to add the ‘Delete Item’ form (found in the Components Manager) to your layouts or pages to provide this functionality.

Select Workflows

The workflow notification/s that will be triggered upon a user deleting an item.

Multiple workflows can be selected and will all be triggered at the same time.

No item data is available in this workflow since the item has been deleted.

Specify Item Expiry Date

Enables logged in users to edit the Expiry Date and/or Days before Expiry for their submitted items for this Module.

The Expiry Date and Days before Expiry fields will be included in the ‘Create/Update Item’ form (found in the Components Manager).

Requires Approval

Submitted items for this Module will be set as disabled.
A website admin will be required to enable the item via the admin in order to approve the item and have it published to the website front-end.
Use in conjunction with the Select Workflows option below to be notified of user submitted items.

Auto-response

The auto-response is an email sent out to the user after submitting a new Module item from the front-end of the website.

Option
Description
Enable
Enable the auto-response email to be sent.
Template
The Email Template to be used for the auto-response email.
From Name

The display name used for the email sender.

This field supports Liquid which can be used to insert dynamic content such as member details, form submission details or even data from other modules.

From Email
The email address used for the email sender and reply address.

If using a non-verified email domain you’ll see a warning message and icon (). For more info on Email Domain verification see here.

Subject

The subject line used for the auto-response email.

This field supports Liquid which can be used to insert dynamic content such as member details, form submission details or even data from other modules.

Body

The content of your auto-response email.

This field supports Liquid which can be used to insert dynamic content such as member details, form submission details or even data from other modules.

Secure Zones

Here default secure zone/s can be set in which newly created items will automatically be assigned to. This applies both to items created within the admin and via the front-end of the website.

Option
Description
Select Secure Zones
A list of available Secure Zones. Multiple Secure Zones can be selected.
Advanced Settings

Advanced settings for configuring your Module functionality and behaviour such as nested items and admin list view options.

Option
Description
Enable subscription

When enabled, this will show the capacity field in module item edit page and allows for the subscription logic to work for item.

Allow multiple parent items

In the case of grouped/nested module structures, if this option is enabled for the child module, it will display a tab with the name of the Parent module when editing child items. Likewise the name of the Child module will be displayed as a tab for the Parent module item view.

This tab will allow the selecting of multiple parent relationships of which their URLs can be uses to access the child items.

Additionally, the multiple URLs now created for an item will be listed as preview links along with the primary URL on the item's edit page.

Allow creating foreign items from other existing Modules

Here you can enable the visual grouping of Modules within each other - to form sub items within a parent item.

This allows for more intuitive editing of content items when a parent/child relationship is desired. It also allows deeper, more complex content structures to be created where parent/child content is needed to be displayed on your website.

You will not be able to set a module here if that module is already being used as a parent/child module elsewhere.

Choose Module

Select the existing Module to nest within the Module you are currently working in.

When creating child items, you'll be prompted to select the parent item to be assigned to and this will also determine that items URL structure.
For example, having a parent Module called 'Web Technologies' with an item 'Javascript', assigning a sub item to 'Javascript' called 'String' might produce a URL to the sub item like so https://your-domain.com/web-technologies/javascript/string.
The sub item named 'String', although belonging to its own Module (in this case called 'Technology Types') no longer takes on its own URL structure of https://your-domain.com/technology-types/string because it has now been assigned to the parent Module.

See the External Resources section below for a basic demo of Modules in action.

Module Items View Settings

With Modules in a nested structure, items from the chosen Module can now be nested under items of the current Module and therefore it makes sense to display them to the administrator that way.
So here you can configure how the list of items can be displayed in the admin area and which view should be the default.

Option
Description
Allow Items Tree View

Enables the option to view parent level items as folders, that when clicked, show only a list of their child items (rather than clicking through to edit the parent item itself).
In order to edit the parent item, click on the pencil icon associated with that item on the far right of the list.

Allow Items List View

Enables the option to view ALL items, in the child Module, as a list without the need to drill down into separate parent folders.
This option is not available for the parent Module.

In this view you can still determine the item grouping by looking at the URL shown in the list view, as it will show the directory structure including the parent items URL.

You can also use the search field at the top of the list to filter items based on both their name AND the URL contents.

Allow Simplified Tree View

Enables a more simplistic and condensed view when listing and creating items. Including the ability to edit, delete, move order/nest items all from the one list view.

This option is ideal for managing parent level items that only require basic settings (such as a name and hierarchy) and where the details of the item are generally not needing to be accessed.

Default View
Set which of the above view options are default.

Creating New Items

With Modules in a nested structure, you'll have the option to allow (or restrict) both the creation of parent level items and child items from within the current Module itself - without the administrator having to navigate multiple separate modules in order to manage complex content structures.
The options here allow granular control on how you set this up to manage which items can be added and from where.

For example, you could restrict the creation of parent items altogether - allowing only child items to be created.
Or perhaps, only allow child items to be created when the administrator is within a parent item - to avoid items being created in the wrong place.

Sub items can however, still be added/edited from within its own Module as well if that makes more sense for the administrator.

Item Properties

Here you can define the various options that might be available when creating Ultimate Migration Guide (Step by Step) items, such as the system data fields to be used, default expiry, SEO settings, custom fields, and more...

Default Properties

The default properties relate to system fields and settings available to this module.

Option
Description
Default Template
A list of available Content Templates. The selected Content Template will be applied to newly created Module items by default. Both from within the admin and user submitted.
Enable Multiple Detail Layouts

Show the Detail Layout option when editing module items.
This allows the website administrators to select from multiple detail layouts (if multiple Detail Layouts have been created).

Does not affect ‘Create/Update Item’ form fields for user submitted items.

Multiple Detail Layouts are only available in Pro plans or higher.

Enable Release Date

Show the Release Date option when editing module items.
This allows the website administrators to set a date and time in which the item will be published and available for access on the website front-end.

Does not affect ‘Create/Update Item’ form fields for user submitted items.

Enable Expiration Date

Show the Expiration Date option when editing module items.
This allows the website administrators to set a date and time in which the item will be unpublished and no longer available for access on the website front-end.

Does not affect ‘Create/Update Item’ form fields for user submitted items.

Item Expire

When a number of days is activated, the expiry date will automatically be calculated based on the number of days set.

Does not affect ‘Create/Update Item’ form fields for user submitted items.

The number of days setting is not used to calculate expiry dates for user submitted items. For this, use the expiry date fields in the ‘Create/Update Item’ form.

Enable Weighting

Show the Weighting option when editing module items.
This allows the website administrators to set a numerical value in which the item will be sorted by in default list views on the website front-end.
By default, higher values see the item listed above lower value items.
When a weighting value is applied to an item it overrides the default alpha-numeric sorting of lists (based on the item Name).

Does not affect ‘Create/Update Item’ form fields for user submitted items. The Weighting option is always available by default in the ‘Create/Update Item’ form.

Enable Categories

Show the Categories option when editing module items.
This allows the website administrators to assign global Categories for various display/filtering/sorting options on the website front-end.

Does not affect ‘Create/Update Item’ form fields for user submitted items. Categories cannot be assigned during the user submitted/editing process.

Root Category

Select the parent category that will define the available child categories when adding/editing items. This allows you to lock out other unrelated category groups from cluttering up the category dropdown for this module's items.

Enable Tags

Show the Tags option when editing module items.
This allows the website administrators to assign module specific Tags for various display/filtering/sorting options on the website front-end.

Does not affect ‘Create/Update Item’ form fields for user submitted items. Tags cannot be assigned during the user submitted/editing process.

Enable Author

Show the Author option when editing module items.
This allows the website administrators to assign a system Author for various display/filtering/sorting options on the website front-end.

This option also adds the Author field to the ‘Create/Update Item’ form for user submitted items.

Disable All Items From Site Search

Sets the ‘Disable From Site Search’ option to true, as a default, for all module items created after this setting has been enabled.

Does not affect ‘Create/Update Item’ form fields for user submitted items. ‘Disable From Site Search’ cannot be assigned during the user submitted/editing process.

Default Priority

Sets the ‘SEO Priority’ value (under the SEO tab) for all module items created after this value has been set.

Does not affect ‘Create/Update Item’ form fields for user submitted items. ‘SEO Priority’ cannot be assigned during the user submitted/editing process.

Custom Properties

Here you can add custom field types to your Module setup. These new properties will then be available for you to save data against and sort/filter by on the website front-end.

Create New Property

Click the '+ Create New Property' button to start adding custom fields to your module.

Give your new field a relevant name. This name will be used as the data handle in which to render the fields value in your Layouts.

Field Types allow you to select the appropriate input type for your data requirements.

When creating a custom property, the Mandatory checkbox allows you to set the field as required when an item is being created via the admin AND via the website front-end as a user submitted item.

Be sure to save the new custom property to apply it to your Module setup.

The various input field types are listed below:

Type
Data
Description
CRM Record
number
(CRM Record ID)
Allows the selection of a CRM Record (by Email) to create a relationship.
The linked record‘s ID is included with the current items liquid data.
Only one item is able to be selected per CRM Record field, however, multiple CRM Record fields can be added to your Module setup.
When populating a module item, upon focusing a CRM Record field, an empty search will be performed displaying a dropdown of up to the first 50 items found (for performance reasons). Further typing will perform live searches based on the entered characters matching to the record email address.

Only CRM Records with appropriate permission applied will be available to select in CRM Record fields (Due to GDPR/privacy compliance).

Data Source
number
(Item ID)
Allows the selection of another Module item (by Name) to create a relationship.
The linked item's ID, Name and URL are included with the current items liquid data.
Only one item is able to be selected per Data Source field, however, multiple Data Source fields can be added to your Module setup.
When populating a module item, upon focusing a Data Source field, an empty search will be performed displaying a dropdown of up to the first 50 items found (for performance reasons). Further typing will perform live searches based on the entered characters matching to the item name.
Date Time
number
(seconds since 1970)
Allow a date and time to be set via a date/time picker.
List (Checkbox List)
string
(comma separated values)
Allow multiple options to be selected from a list of available options as checkboxes.
List (Dropdown List)
string
(comma separated values)
Allow a single option to be selected from a dropdown list of available options.
Also with the additional option to switch to a multi-select box where multiple options can be selected from a list of available options.
List (Radio List)
string
(comma separated values)
Allow a single option to be selected from a list of available options as radio buttons.
Media
string
(local path to file)
A file input allowing website administrators to select or upload files from the File Manager.
With user submitted items from the website front-end, this provides a file upload field.

When rendering a media property value (filename/path) via Liquid, the filename will be URL encoded for correct use in HTML attributes. The encoded link will also be provided in the File Manager when using the 'copying to clipboard' function.

Number
number
Accepts only whole numbers (positive or negative).
Decimal values are rounded to their nearest whole number.
Text (Multiline)
string
Multiline inputs allow larger amounts of text to be entered along with line breaks.
Text (String)
string
String inputs allow for a single line of text.
True False (Boolean)
boolean
(number 0 or 1)
Booleans allow only a true or false selection. When not selected its submitted value will be blank and when selected its value is on.
WYSIWYG
string
Enables the admin editor interface (Code View / WYSIWYG) for advanced content formatting and markup control.

Once custom properties have been created they’ll be listed on the page where you can further edit, delete or re-order them.

Converting Custom Properties

If you later need to change a custom property’s field type to a different field type you can do so here, using the same interface.
Simply click on the custom property name, or its pencil icon and make the required change/s.

Changing field types can destroy or change existing data associated with those fields. Below is a conversion table describing the data transformation likely to occur.

Existing Property
Conversion Property
Transformation
Data Source
number
(Item ID)
Data Source
-
Date Time
Use as number of seconds from 1970
List (Checkbox List)
Convert to string of selected values. Add value as prevalue
List (Dropdown List)
List (Listbox List)
List (Radio List)
Number
Set number value
Text (Multiline)
Convert to string
Text (String)
WYSIWYG
True False (Boolean)
If number > 0 then true otherwise false
Date Time
number
(seconds since 1970)
Data Source
Set number value
Date Time
-
List (Checkbox List)
Convert to string of selected values. Add value as prevalue
List (Dropdown List)
List (Listbox List)
List (Radio List)
Number
set number value
Text (Multiline)
Convert number to string
Text (String)
WYSIWYG
True False (Boolean)
If number > 0 then true otherwise false
List (Checkbox List)
List (Dropdown List)
List (Listbox List)
List (Radio List)
string
(coma separated values)
Data Source
Try parse as number. If failed set empty
Date Time
Try parse as number and create date by seconds. If failed set empty
List (Checkbox List)
If multi-select type is converting to a single-select type, than set value to first value from the coma separated values
List (Dropdown List)
List (Listbox List)
List (Radio List)
Number
Try parse as number. If failed set empty
Text (Multiline)
Set csv string as text
Text (String)
WYSIWYG
True False (Boolean)
Try parse as number. If number > 0 then true otherwise false
Number
number
Data Source
set number value
Date Time
Use as number of seconds from 1970
List (Checkbox List)
Convert to string of selected values. Add value as prevalue
List (Dropdown List)
List (Listbox List)
List (Radio List)
Number
-
Text (Multiline)
Convert number to string
Text (String)
WYSIWYG
True False (Boolean)
If number > 0 then true otherwise false
Text (Multiline)
Text(String)
WYSIWYG
string
Data Source
Try parse as number. If failed set empty string
Date Time
Try parse as number and create date by seconds. If failed set empty string
List (Checkbox List)
Try parse csv string as values. Add value as prevalue
List (Dropdown List)
List (Listbox List)
List (Radio List)
Number
Try parse as number. If failed set empty string
Text (Multiline)
Set text
Text (String)
WYSIWYG
True False (Boolean)
If empty then false otherwise true
True False (Boolean)
boolean
(number 0 or 1)
Data Source
Set 0 or 1
Date Time
Set empty
List (Checkbox List)
Convert number to string of selected values. Add value as prevalue
List (Dropdown List)
List (Listbox List)
List (Radio List)
Number
Set 0 or 1
Text (Multiline)
Set 0 or 1 as string
Text (String)
WYSIWYG
True False (Boolean)
-

Layouts

Layouts are the containers for an item's data to be rendered into, along with your custom markup. They are output by way of their associated component tag.
eg:

{% component type: "module", source: "Event", layout: "List" %}

When the component is output it loops through all of its relevant items and renders their data into the specified Layout, as defined by the layout parameter of the component tag.
In other words, the Layout acts as a type of template for displaying the Ultimate Migration Guide (Step by Step) data.

You create your HTML markup or custom code and insert something similar to “data merge tags” by way of Liquid objects (eg: {{this['name']}} would render the item’s name).

From the Ultimate Migration Guide (Step by Step) Layouts screen you’ll also have access to the Event group Layouts as this is a grouped module. For this article, we’ll just focus on the Ultimate Migration Guide (Step by Step) Layouts.

List Layouts

Layouts of type ‘List’ are typically used for rendering repeating data sets. So, if the component you've configured retrieves 3 Ultimate Migration Guide (Step by Step), the List Layout will be rendered 3 times, each with a different item’s data being inserted within a defined markup.

Here is a simple example of how the Layout works, rendering a heading with the item's name as a link:

<div>
    <h2><a href="{{this['Url']}}">{{this['Name']}}</a></h2>
</div>

Using the example above of 3 items, the result on the website's front-end would look something like this:

<div>
    <h2><a href="/module-url/Ultimate Migration Guide (Step by Step)-1">Ultimate Migration Guide (Step by Step) 1</a></h2>
</div>
<div>
    <h2><a href="/module-url/Ultimate Migration Guide (Step by Step)-2">Ultimate Migration Guide (Step by Step) 2</a></h2>
</div>
<div>
    <h2><a href="/module-url/Ultimate Migration Guide (Step by Step)-3">Ultimate Migration Guide (Step by Step) 3</a></h2>
</div>

Detail Layouts

Layouts of type ‘Detail’ are typically used for rendering a single item's detail view, as displayed when browsing to that item’s unique URL.

Here is a simple example of how the detail Layout could look, rendering a heading with the item's name and the item's description field:

<div>
    <h2>{{this['Name']}}</h2>
    <div>
        {{this['Description']}}
    </div>
</div>

So, as per the example above, if viewing the first Ultimate Migration Guide (Step by Step), the Layout would render something like this:

<div>
    <h2>Ultimate Migration Guide (Step by Step) 1</h2>
    <div>
        This is the description content of Ultimate Migration Guide (Step by Step) 1.
    </div>
</div>

Adding/Editing Layouts

You have the freedom of editing these layouts as you need to, with any HTML, CSS or JS as appropriate for your project. As well as creating unlimited, additional layouts.

Click the 'CREATE NEW' button at the top and choose which grouped module you wish to add a list or detail layout for.

You can then add your custom markup and insert dynamic Liquid objects into your layout. Using the ' Properties' manager (found at the top right of the editor), simply click on the desired Liquid object name from the list to have it inserted at your cursors position within your markup, or click on the copy icon () to copy it to your clipboard.

Additionally, you can even add other modules inside of these Layouts, just as you might insert them onto a regular page. Simply click on the ' Components' manager (found at the top right of the editor) and follow the prompts to configure any additional component tags for the desired data output.

For Products, there is a range of additional functionality you can insert on either product list or detail layouts.

Table

This setting allows you to customise the column headers in the table/list view of module items in the admin. Allowing you to provide a better editing experience for you and the site admins.

For example, looking at a list of products, you’d likely want to see, and sort by, different columns of data than you would for a list of gallery slides or a list of staff members.

Reposition or Remove Table Columns

The Tables interface shows a representation of the current column headers which can be repositioned (via drag and drop), or deleted (via the x () icon, shown on hover).

Any changes made to the headers here are saved automatically.

Editing Table Columns

You can add additional columns to your module list view by clicking the “Add New Column” button, or you can edit existing ones via the pencil () icon (shown next to the column label on hover).

Column options are as follows:

Option
Description
Column Name
The display name shown in the column header
Property
The data field from your module items to display in the column
Width
The default column width (in pixels)
Mobile Width
The column width (in pixels) when viewed on a mobile device
Hide on Mobile
Allows hiding of the column when viewed on mobile devices

Duplicating the Module

This option allows you to copy an entire module setup, including all of it's settings and properties, but excluding it's individual items (these can be exported and re-imported into the new module if needed). You'll be prompted for a new module name and URL during the duplication process.

This option is accessed when editing a module's settings via the duplicate icon found next to the module name at the top of the 'Settings' screen.

Duplication of modules is available on the PRO plan and higher.

Duplication of built-in system modules is available, however, they will be converted to regular Custom Modules void of their specific System Properties.

Managing Ultimate Migration Guide (Step by Step) Items

Views

There are 3 different list views your Ultimate Migration Guide (Step by Step) items can be configured to display in, or switched to via the icons ( ) in the top right of the item view.

Depending on how the module is configured, some or all of these icons may be visible and the default view may be different to that of how other modules display.

List View ()

A direct listing of all the current module items, in a tabular layout, which can be clicked on to access their content. A typical view for singular, self contained modules.

Tree View ()

Relevant for nested module structures, this view shows all current module items, in a tabular layout, as folders (parent items) which can be clicked into to access a List View of their child module items.

Simplified Tree View ()

Relevant for nested module structures, this view shows all current module items (parent items) in a simplified list of items only. These can be reordered or nested via drag and drop or further edited via the auxiliary menu () visible next to the item on hover.

For more details on these view options see the module ‘Advanced Settings’ section above.

Import / Export

Found under the main auxiliary menu (), you can import/export data to/from your Ultimate Migration Guide (Step by Step) module where you can then further update your items in bulk using a spreadsheet application and re-import item data in an Excel file format (.xlsx).

If re-importing to update existing items, be sure to maintain the same 'External ID' values from those exported items.

Export the current items in order to get a template import file you can use for importing new data. If you're starting from scratch, first create a dummy item with some sample data so you can see the import format needed.

Import for Nested (Parent/Child) Modules

Nested modules include eCommerce (Products/Catalogs), Blogs, Events, Banners, Galleries & Sliders, FAQs, and any Custom Modules that have been configured to ‘Allow creating foreign items from other existing Custom Modules’.

The import file for such child modules will include a ‘Parents’ column which allows the imported item (row) to be assigned to a parent item (or its root level) via it’s URL path/slug. Or even multiple parents, if ‘Allow multiple parent items’ is configured in the parent module.

For example; if we have a parent module called “Web Technologies” with an item called “Javascript” and we wanted to assign an item from a nested Custom Module to it, we would include the following path in the child item’s “Parent” column cell: /web-technologies/javascript

The item’s full URL would then become /web-technologies/javascript/item-name

And if assigning to multiple parents, we would include each parent item’s slug separated by a semicolon (;), like so: /web-technologies/javascript;/web-technologies/liquid

Similarly, if we want to assign the child item to the root level parent module, include the module slug without any parent item slug included: /web-technologies

If the import file for the child items has empty ‘Parent’ cells or if the column is not present, the child items will be imported into the view you initiated the import from. So if you are viewing the parent items in ‘List View’ or are at the top level/root using ‘Tree View’, the imported items will be assigned to the root level of the parent module. Likewise, if you have navigated into a parent “folder” and initiate the import process, the child items will be assigned to the currently viewed “folder” (only if the Parent cell is empty or omitted from the file).

You can also assign child items as parents to other child items, in the same module, during the same import process. For example; if we have two child items called “Number type” and “Integer” an wanted “Integer” to be a child of “Number type”, then it’s Parent cell value would include the parent module’s root slug and the target child item’s slug, like so:
/web-technologies/number-type

Resulting in the item’s full URL to become /web-technologies/number-type/integer

The sequence of the imported items in the spreadsheet is not important here. They can be in any order.

URL Conflicts

If, upon attempting to create an imported item with the constructed parent/child URL, the URL already exists in your site, the item will be handled in one of two ways (based on the site’s setting in ‘Settings’ > ‘Misc’ > ‘Disable autocomplete for already taken URL slugs’):

  • If setting is unchecked (URL autocomplete enabled) then the conflicting URL will be appended with an incrementing number.
  • If setting is checked (URL autocomplete disabled) then the import will present an error for that item and skip any update/creation of the item.

Other Errors

The import process will present an error of each imported item if any of the following conditions are encountered (and will skip that item from being updated/created):

  • If multiple parent slugs are included in the Parent cell but the module is not configured with the setting “Allow multiple parent items”
  • If multiple parent slugs are included in the Parent cell and one or more of those slugs do not match any existing parent module items (missing parent items will not be created during import).
  • If the slug included in the Parent cell is the same as the item slug being updated/created (cannot assign itself as parent).

If an error is thrown on a child item that is elsewhere assigned, in the import file, to be a parent to other child items, then all of those child items will also be skipped during import, since their parent cannot be created.

Advanced Import Syntax - Prices, Attributes, and Inventory



Product area should be defined as:

  • (1) first line - info of the product and its relations
  • (2) all lines under with the same SKU code before end of file or another SKU code (SKU code should be same and present in all lines of the product data)
Product Import Syntax

Add following fields for specific-serialized relations:

  • Parents [name of the parent module]. eg: `Catalog`
    • Value: [parent item urls separated by `;`].
      eg:
      `/catalog-1/sub-catalog;/catalog-1;/;`
  • Sale Price
    • Value: [country]-[currency]/[sale-price],[quantity for threshold option №1]/[price threshold option №1],[quantity for threshold option №2]/[price threshold option №2];
      eg: AU-AUD/30.00,2/26.00,5/22.00;AU-USD/20.00,10/18.00,100/16.00;

      NOTES:
      If no [currency] specified - use Currency-By-Country-Defaults.json mapper as default currency for country definition
  • Retail Price
    • Value: [country]-[currency]/[sale-price];
      eg:

    AU-AUD/30.00;AU-USD/20.00;

    NOTES:
    If no [currency] specified - use Currency-By-Country-Defaults.json mapper as default currency for country definition

  • Tax Code
    • Value: [country]/[tax_name or "Never"];
      eg:
      AU/Never;US/AZ;

      NOTES:
      If [tax_name] not set to the country or [tax_name] === ”Never”, do not apply tax
  • Grouping Product Codes
    • Value: [product_sku_code][Is_main_product];
      eg:
      sub_prod_1;main_prod*;sub_prod_2;

      NOTES:
      If [Is_main_product] == "*" then this product IS main. Otherwise this product IS NOT main.

      If several products shown to be main - use last one as main and ignore others.
  • Grouping Product Display Name
    • Value: [product_display_name];
      eg:
      Sub product 1;;Sub product 2;

      NOTES:
      Can be empty.
  • Related Products
    • Value: [product_sku_code];
      eg:
      HAYNM5AXVB;sub_prod_1;HMDP9271;
  • Low Stock Notification
    • Value: number
      eg:
      50

      NOTES:
      Greater than or equal to 0
  • Enable Inventory Control
    • Value: (boolean) true or false
      eg:
      Y or TRUE
      N or FALSE or empty
  • Can Pre-Order
    • Value: (boolean) true or false
      eg:
      Y or TRUE
      N or FALSE or empty
  • Hide if Out of Stock
    • Value: (boolean) true or false
      eg:
      Y or TRUE
      N or FALSE or empty
  • Attributes
    (ignore this cell value if product ALREADY EXIST AND has GENERATED VARIATIONS AND "Variations Enabled" cell != FALSE)
    • Value: (complex pattern described below, intended to be on one line)

      [attribute name][is_required]
      |
      [attribute_type]
      |
      [is_inventory_item]
      :
      [option_name]
      |
      [option_image_path]
      |
      [country]-[currency]
      /
      [option_price_1]
      |
      [country]-[currency]
      /
      [option_price_2]
      ,
      [option_name]
      |
      [option_image_path]
      |
      [country]-[currency]
      /
      [option_price_1]
      ,
      [option_name]
      ||
      [country]-[currency]
      /
      [option_price_1]
      ; (repeat)

      NOTES:
      I
      f no [currency] specified - use Currency-By-Country-Defaults.json mapper as default currency for country definition

      [option_name] CAN'T contain following symbols
      - |
      - ,
      - '
      - *

      If [is_required] == * then this product IS required. Otherwise it’s not.

      [attribute_type] is one of the following:
      - 5 or DropDownList
      - 6 or CheckBoxList
      - 7 or RadioList

      [is_inventory_item] - determines if current attribute is inventory attribute, one of:
      - Y or True - (boolean) true
      - N or False - (boolean) false

      [option_image_path] and option prices are not required and can be skipped in format string.

      Example string:
      Test attr checklist*|6|N:option checklist 1|/img.jpg|AU/10|US/5,option checklist 2|/img.jpg|AU/20|US/15,option ck 3|;Test attr Dropdown List*|5|Y:option droplist 1|/img.jpg|AU/10|US/5,option droplist 2|/img.jpg|AU/20|US/15;Test attr radiolist*|7|Y:option radiolist 1|/img.jpg|AU/10|US/5,option radiolist 2|/img.jpg|AU/20|US/15;ddfdsd*|5|Y:aasas||AU/20|US/15,xasas||AU/20|US/15

  • Wholesale Sale Price
    • Value: (pattern described below, intended to be on one line)

      [country]-[currency]
      /
      [sale-price]
      ,
      [quantity for threshold option №1]
      /
      [price threshold option №1]
      ,
      [quantity for threshold option №2]
      /
      [price threshold option №2]
      ; (repeat)

      NOTES:
      If no [currency] specified - use Currency-By-Country-Defaults.json mapper as default currency for country definition

      Example String:
      AU-AUD/30.00,2/26.00,5/22.00;AU-USD/20.00,10/18.00,100/16.00;
  • Recurring Type
    • Value: one of (numeric or string value)
      - 1 or Once
      - 2 or Daily
      - 3 or Weekly
      - 4 or Fortnightly
      - 5 or Monthly
      - 6 or Quarterly
      - 7 or Half Yearly
      - 8 or Yearly
  • Hide if Out of Stock
    • Value: (boolean) true or false
      eg:
      Y or TRUE
      N or FALSE or empty

      NOTES:
      If TRUE and no variations was created earlier - generate all variations and edit them by the values within columns
      Variations Code, Enabled, In Stock, Pre-Order determining variation by attribute options combination in the column Variation Options.
      If FALSE - discard variations.
  • Variation SKU Code
    This column and columns below are assigned both to initial (global) product and to it’s variations.
    - Value for the first row assigned to the global product settings.
    - Values in the row/s below (that relate to initial product) are assigned to each variation row.
    • Value: string (unique SKU code, should be empty for product row but required for variation row)
      If not set - ignore entire variation row data.

      Eg:
      HAYNM5AXVB
  • Enabled
    • Value: (boolean) true or false
      eg:
      Y or TRUE
      N or FALSE or empty
  • Variation Options
    • Value:
      [option_of_attribute_1]
      ;
      [option_of_attribute_2]
      ; etc.

      NOTES:
      Determines what variation should be edited by the fields:
      - Variations Code
      - Enabled
      - In Stock
      - Pre-Order

      If such combination not found in the product - ignore changes in this row for the following columns:
      - Variations Code
      - Enabled
      - In Stock
      - Pre-Order

      eg:
      HAYNM5AXVB;sub_prod_1;HMDP9271;
  • In Stock
    • Value: number (greater than or equal to 0)
  • Pre-Order
    • Value: number (greater than or equal to 0)

Deleting

Found under the main auxiliary menu (), you can delete ALL Ultimate Migration Guide (Step by Step) in bulk using the "Delete All Items" option.

Additionally, you can make bulk selections from the item list view (by ticking the checkboxes on the left of each item) and click the "DELETE SELECTION" button that will appear at the base of the list view.

Individual items can be deleted either by expanding the auxiliary menu to the right of each item and selecting the "Delete" option or when on the item's edit page, click the trash can icon () in the lower right of the page.

Bulk Apply Template

After making a selection of module items, using the checkboxes to the left of each item, an “Apply Template” option will become available in the main auxiliary menu () allowing you to assign a template, in bulk, to the selected items.

Ultimate Migration Guide (Step by Step) Groups

The Ultimate Migration Guide (Step by Step) module is a grouped/nested module by default, which means there are actually two modules configured together in a relationship. One to act as a parent grouping module (think Catalogs in an eCommerce store) and the other as the individual child Ultimate Migration Guide (Step by Step) items (think Products within those eCommerce Catalogs).

However, you don’t need to set up groups for your Ultimate Migration Guide (Step by Step) if that structure is not needed. By default Ultimate Migration Guide (Step by Step) are not added to any parent group.

If you would like to create Ultimate Migration Guide (Step by Step) groups, simply switch the Ultimate Migration Guide (Step by Step) listing to ‘Tree View’ () and clicking the “CREATE NEW” button will now give the options of creating an ‘Ultimate Migration Guide (Step by Step)’ or an ‘Ultimate Migration Guide (Step by Step) group’.

Ultimate Migration Guide (Step by Step) Groups - Tree View

The ‘Tree View’ () will then display any Ultimate Migration Guide (Step by Step) groups you’ve created as well as any Ultimate Migration Guide (Step by Step) that are outside of any group.

To create an Ultimate Migration Guide (Step by Step) within an Ultimate Migration Guide (Step by Step) group, simply enter the desired group (by clicking the group name with the folder icon) and then follow the instructions below for ‘Populating Ultimate Migration Guide (Step by Step) Items’.

To assign an existing Ultimate Migration Guide (Step by Step) to a group, edit the Ultimate Migration Guide (Step by Step) details and select the desired group from the “Ultimate Migration Guide (Step by Step) group” field.

Ultimate Migration Guide (Step by Step) - Assign to Group

Populating Ultimate Migration Guide (Step by Step) Items

From the Ultimate Migration Guide (Step by Step) item list view, click the “CREATE NEW” button at the top to start creating a new item or click directly on the name of any existing item in the list.

Upon editing an item you have access to the following options.

Settings

Item Settings

This group of options mostly correspond with how your Module was configured (see above configuration steps) along with some item specific options.
If your screen doesn’t show some of the options here it’s likely due to how the Module is configured, or due to a site plan functionality restriction.

You can quickly collapse this section, by clicking on its header, to condense your workspace and help with moving to the next set of options.

Below is a detailed explanation of all possible options found here:

Option
Description
Item Name
Set the item's Name
This is used to describe the item within the admin area and also typically used as the display name of the item when rendered to your website front-end.
URL

The system will generate a unique base URL derived from the name you set. You can however, adjust this path (slug) if desired simply by setting a new value in this field.
URL slugs are limited to 254 characters in length.

<Source Module>

If the item belongs to a nested module structure you'll see the name of the parent module here with the ability to select which of those parent module items this new item will belong too.

Nested Modules are only available in Pro plan or higher.

Template
A list of available Content Templates. The selected Content Template will be applied to newly created Module item when viewed at its unique URL.
Detail Layout

The Detail Layout to use for the item when viewed at its unique URL.

Multiple Detail Layouts are only available in Pro plan or higher.

Enabled

Uncheck this option to disable the item from being published to the website front-end. The item will remain available in the admin but will not be made live.

Set as Home Page

If checked, the item will be displayed at the websites root domain (ie: https://www.mydomain.com/) and be flagged as the sites Home page.

Only one item in the site can be assigned as the Home Page. Setting this option for an item will remove any previously assigned home Page setting from another item.

Disable From Site Search

If checked, the item will not be retrieved in any front-end site searches.

Release Date

Set a date and time in which the item will be published and available for access on the website front-end.

Expiration Date

Set a date and time in which the item will be unpublished and no longer available for access on the website front-end.

Weighting

Set a numerical value in which the item will be sorted by in default list views on the website front-end.
By default, higher values see the item listed above lower value items.
When a weighting value is applied to an item it overrides the default alpha-numeric sorting of lists (based on the item Name).

Make Item Secure

A list of available Secure Zones the item can be assigned to. Multiple Secure Zones can be selected.
Assigning a Secure Zone will set its unique URL to authorised access only. Only if the viewer is logged in and is subscribed to the relevant Secure Zone/s can the item be accessed.

Secured items, by default, will still be listed in any relevant searches, list views and liquid collections on the website front-end even when the viewer is not logged in to any secure zones.

With all child items

Secure Zone inheritance for nested child items.
If your module is configured in a nested configuration, where this item belongs to the parent module, all of its child items will inherit this Secure Zone setting.

Site Search Keywords

Should contain Comma Separated Values (CSV) for keywords.
Provides additional keywords to influence Site Search results, along with the item name and description.

System Properties

This group of options correspond with the built-in System Properties specific to this particular module providing special system functionality.
If the ‘System Properties’ section is missing altogether it’s likely due to no system properties being applicable for this module.

You can quickly collapse this section, by clicking on its header, to condense your workspace and help with moving to the next set of options.

Below is a detailed explanation of all possible options found here:

Option
Description
Hide When Full

If checked, the item will not be displayed on the website front-end if the number of subscriptions/bookings to the item has reached its capacity.

Allow Multiple
Subscriptions Per Email

If checked, attempts by a previous subscriber to book this item again (using the same email address) will be allowed. Without this option checked, repeat bookings from the same user will be rejected.
Ideal for allowing one user to book places for other people in separate transactions.

Capacity

The number of places available to be booked for this item. If empty or zero (0) the item will allow unlimited bookings.

Event Date Start

The date and time the Ultimate Migration Guide (Step by Step) starts.

Event Date End

The date and time the Ultimate Migration Guide (Step by Step) ends.

Added By

You can assign a relationship for the item to any contact record that exists in the CRM (new email addresses will not be saved).
If the item was created by a user submitting it from the website front-end, that users email address will be assigned here.

This property will only be available if the module is configured to allow adding/editing/deleting of items via the 'Site User Permissions' settings.

Custom Properties

This group of options correspond with the Custom Properties configured for your Module (see above configuration steps).
If the ‘Custom Properties’ section is missing altogether it’s likely due to no custom properties being added.

You can quickly collapse this section, by clicking on its header, to condense your workspace and help with moving to the next set of options.

Default Properties

This group of options correspond with how your Module was configured (see above configuration steps).
If your screen doesn’t show some of the options here it’s likely due to how the Module is configured, or due to a site plan functionality restriction.
If the ‘Default Properties’ section is missing altogether it’s likely none of these system properties have been enabled.

You can quickly collapse this section, by clicking on its header, to condense your workspace and help with moving to the next set of options.

Below is a detailed explanation of all possible options found here:

Option
Description
Categories

Assign global Categories for various display/filtering/sorting options on the website front-end.
Use the “+ Add New Category” button to create new Categories and/or manage existing ones.

Global Categories can also be managed under 'Settings' > 'Categories' in the main admin menu.

Tags

Assign Tags (unique to the current module) for various display/filtering/sorting options on the website front-end.
Use the “+ Add New Tag” button to create new Tags and/or manage existing ones.

Author

Assign a system Author for various display/filtering/sorting options on the website front-end.

Authors can be managed under 'Content' > 'Authors' in the main admin menu.

Content

The content section is typically used for adding/editing the main body of content for the item, or otherwise described as the main description of the item.

This editor can be toggled between WYSIWYG (design/layout) view and Code View to provide full freedom and flexibility for the content that you can add here, including HTML, CSS, JS, images, video, embed codes, text styling and more.
The editor also supports Liquid and component tags can be added using the ‘Component’ manager at the top right of the editor.

Prices

Price points can be set at multiple currencies for both Consumer and Wholesaler levels along with tax assignment and unlimited volume discount levels.

The ‘+ Add New Price’ button allows you to add additional price points for each currency your site supports. Saved prices will display in a list ready for further editing as needed.

Below are descriptions of the pricing options.

Option
Description
Currency/Country
The Currency/Country combinations available for your site. Based on the domains added to the site and their assigned currency format and country settings. (see Domains for more details on configuring site domains and settings)
Consumer Tab
Prices configured under this tab will apply to all regular site users who are not logged in and not assigned to the ‘Wholesaler’ type in their CRM record.
Wholesaler Tab
Prices configured under this tab will apply to all logged in users who are assigned to the ‘Wholesaler’ type in their CRM record.
RRP
This is a display only price intended for use as a Recommended Retail Price label which can be displayed in your item layouts.

This price is not used by the eCommerce system for any calculations or transactions.

Sell Price
The assigned base price of the item which will be used for price calculations and transactions when ordering.
Enable Volume Discount

When checked, you’ll have the ability to create multiple discount threshold rules (by clicking the ‘+Add New Discount’ link) to be applied based on the item unit quantity being purchased.

Quantity Threshold determines the minimum units needed to be ordered for the new discounted price to apply.

Sell Price sets the new per unit price of the item to be applied whilestever the minimum quantity threshold level is met (or another volume discount rule overrides it).

Tax Never Applies
When checked, tax calculations will not be applied to this item.
Tax Code
The Tax codes available for your site. Based on the taxes added under ‘eCommerce’>‘Taxes’. (see Taxes for more details on configuring taxes)

Event group

This tab will only be visible when the module is in a nested configuration, with a parent and child module grouping, and when the child module allows ‘multiple parent items’ in its advanced settings.

The tab will carry the name of the parent/child module, depending on which module you are viewing.

See module Advanced Setting above for more details on this configuration.

This page will display the items from the Event group module and allows you to assign multiple Event group to the current Ultimate Migration Guide (Step by Step) item - by dragging and dropping from the available items on the left into the assigned list on the right. Or you can remove Event group from the Ultimate Migration Guide (Step by Step) by moving them from right to left.

Additionally, the directional arrows in the middle can be used to move selected items right or left, or to move ALL items together right or left (using the double arrow buttons). This can be useful to clear all assigned Event group from the Ultimate Migration Guide (Step by Step) quickly, for example.

Attributes

Attributes allow you to add any number of options to your product that can then be configured for the product for purchasing.

Attributes can be optional or required, include a price point of their own and even include an additional image reference.

Clicking the ‘ADD NEW ATTRIBUTE’ button will start a new attribute group which will hold that attributes options.

The settings available are as follows:

Option
Description
Attribute Name
The title for the attribute group
Attribute Type

The input type used to display the attributes options. Available types are:

Checkbox list renders a group of checkbox inputs, allowing multiple options to be selected/deselected.

Dropdown list renders a select input, allowing a single option to be selected or reset.

Radio list renders a group of radio inputs, allowing a single option to be selected but not reset.

Value Type
Fixed price (currently the only option) allows attribute options to have a set price that increases the main product price when selected.
Required
Turns on validation for the attribute group, enforcing the user to select one of its options before adding to the cart.
Add to Inventory

Allows the attribute groups options to be added to the inventory control when inventory ‘variations’ are generated. Attribute groups without this option selected will not create their own order variations or be counted as a separate stock item.

If inventory variations are already enabled for the product, this option will not be available. All current inventory variations must first be discarded and re-generated after any new attribute groups have been added (the total inventory levels will be restored to the overall product inventory).
Additional attribute options within the group can be added without the need to discard currently generated variations, however, those newly added options will be disabled in the inventory control system by default. You can then edit the inventory to enable these additions and set their stock levels as required.

See the below Inventory section for more details regarding inventory control and product variations.

To later edit an Attribute group’s settings, click the ‘ Edit Attribute’ link.

To add options to an Attribute group, click the ‘ Add new option’ link, which will open the options panel providing the following settings:

Option
Description
Option
The name of the option presented within the Attribute group input.
Image
Allows the addition of an image to depict the option. Use the ‘add file’ icon () to browse for or upload an image file.

By default, images will display alongside checkbox and radio inputs but cannot be displayed for dropdown inputs due to the nature of that input element. You can, of course, customise these layout components to adapt your own design solutions.

Currency &Price
Allows a price point to be assigned to the option per currency configured for your site. (see Domains for more details on configuring site domains and settings)

Individual attribute options can be later edited or deleted via the pencil () and trash can () icons alongside each individual option.

Both Attribute groups and their options will render on the front-end of your site in the order they appear in the admin.
This ordering can easily be adjusted by grabbing the placement icon () and dragging and dropping the item rows into their desired locations.

To display the Product attributes on your site, you can add the ‘Product attributes’ tag to your Product layouts via the Component Manager under the ‘eCommerce’ section. See also further configuration options for this tag here.

Inventory

Tracking inventory can be managed on a per product level and can be used for controlling how products display and if they can be pre-ordered on the front-end website.

Inventory control also provides functionality for low stock notifications, pre-order quantities and current in-cart quantities.

If products have certain attributes that affect different stock levels that need to be tracked, you can also enable inventory management down to each attribute option, selectively.
For example, if selling a Chair with attributes of colour and assembly, it may be required to track inventory for the colour variations of that single product, but not relevant for the assembly option selected.

A detailed look at the Inventory options are as follows.

Option
Description
Inventory Control Enabled
When checked allows for the management of inventory features (as below).
GENERATE VARIATION
Creates inventory items from any Attributes marked with ‘Add to Inventory’ (more on this below).
When Out of Stock

Determine how Products are to be handled on the front-end website when their stock levels fall below 0.

Hide product disables the product from displaying at all on the front-end when stock falls below 0.

Enable pre-ordering continues displaying the product on the front-end when stock falls below 0 and allows it to be purchased with pre-order status.

Show product but don't accept orders continues displaying the product on the front-end when stock falls below 0 but does not allow it to be added to the cart for purchasing.

You may want to use Liquid to conditionally display a note against such products, or even disable the ‘Add to Cart’ buttons.

Low Stock Notification
Triggers the system Low Stock Workflow Notification when stock falls on or below this value.
If using Inventory Attribute Variations, the notification will be triggered per variation reaching the set threshold value.

See ‘Email Notifications’ in the main admin menu to configure both ‘Workflows’ and ‘System Emails’ regarding the Low Stock notifications layouts and recipients.

In Stock
The quantity level currently in stock available for ordering.
Pre-order
The quantity level of pre-ordered stock (Products ordered whilst out of stock).
Added to Shopping Cart
The quantity level of Products currently added to all active shopping cart sessions.

You can adjust the lifespan of cart sessions under ‘eCommerce’ > ‘Settings’ > 'Shop Settings' in the main admin menu.

Generate Variations

When you enable variations, any attribute groups that have been set as ‘Add to inventory’ will be created here as individual stock lines.

The original stock levels, for the overall product, will be reassigned to the next available stock line where you can then reallocate the levels as needed.

Each attribute option will now have its own ‘In Stock’, ‘Pre-order’, and ‘Added to Shopping Cart’ levels, as per the above table, for fine grain inventory tracking.
Optionally, you can disable an individual attribute option to exclude it from inventory management.

When inventory variations are enabled and you need to add additional attribute groups to the Product, that also require inventory tracking, you will first need to discard the inventory variations and then re-generated after any new attribute groups have been added (the total inventory levels will be restored to the overall product inventory when discarding). Additional attribute options within the group can be added, but will be disabled in the inventory variations by default. You can then edit the inventory to enable these additions and set their stock levels as required.
See the Attributes section above for more details

If using Low Stock Notification, the notification will be triggered per variation reaching the set threshold value.

Related Items

You can create a relationship between two or more items within the Product module which is useful for displaying similar, or potential up-sell, Products alongside the current Product on the front-end website.

This page will display all other Product items and allows you to assign those items to the current Product item - by dragging and dropping available items from the left into the assigned list on the right. Or you can remove relationships by moving them from the right to the left.

Additionally, the directional arrows in the middle can be used to move selected items right or left, or to move ALL items together right or left (using the double arrow buttons). This can be useful to clear all assigned relationships from the Product quickly, for example.

To display the related products on your site, you can add the 'Related Products' tag to your Product layouts via the Component Manager under the ‘eCommerce’ section. See also further configuration options for this tag here.

Group Items

Grouping Products together provides another way to create item relationships and the grouped products can then be displayed in the Product layout and used to easily switch between them.

Grouping Products is useful when you have multiple very similar Products but they differ slightly in ways that can’t be expressed via Product attributes or other options.

To display the grouped products on your site, you can add the 'Grouped Products' tag to your Product layouts via the Component Manager under the ‘eCommerce’ section. See also further configuration options for the Grouped Products tag here.

An example of this component tag is:

{% component type: "grouped_items", source: "Products", itemId: "<Item ID>" %}

How it Works

When a grouped product is selected, either from your list view or detail view of your website, Treepl CMS will use AJAX to fetch that layout region of the selected product and replace it on the page in place of the current product.

To do this, the system needs to identify the region to fetch and to replace and so whenever there is a grouped product detected for a rendered product, list or detail view, a HTML element will be added which wraps the layout with an identifying attribute.

This element is formatted as such:

<div class="cms-product-wrapper" data-cms_product_wrapper="2349" data-cms_layout_name="{model.Layout}"></div>

If you’re rendering products outside of the typical layouts method (ie: via a custom Liquid collection and forloop), you will need to add this wrapper to your code manually.

Javascript Considerations

Since the grouped product layout is being added to the page via AJAX you may encounter issues with any javascript related functionality within that products layout view (such as an image slider/zoom or other interactive effects driven by javascript), as the newly added scripts will not fire since the page has not been reloaded.

To resolve these types of issues, you may need to reinitiate your javascript functions after the grouped product has been fetched.

To make this easier for you, Treepl CMS will fire a javascript event once the AJAX call has completed. The event is named onProductLayoutChanged and an example of its use might be as follows (using jQuery and added to your sites JS file):

$('body').on('onProductLayoutChanged', function(){
    // Do something here like re-initiate your product related Javascript plugins/scripts
});

SEO

SEO Content
Option
Description
Preview

A preview of how the below metadata might display in search engine listings.

This is a simulated preview only. Actual search engine listings may vary.

Meta Title

The descriptive title of the document. Typically displayed in the browser's title bar or tab.
This value, if set, will be automatically output as <title><Meta Title></title> and added to the <head> of the item's page.
If left empty, the item's Name will be used instead.

If your Content Template already contains a hard-coded <title> element it will not be replaced by the system.

Meta Description

A short description of the document.
This value, if set, will be automatically output as <meta name"description” content"Meta Description"/> and added to the <head> of the item's page.
If left empty, no <meta name"description"> element will be added.

If your Content Template already contains a hard-coded <meta name"description"> element the system will add an additional <meta name"description"> element if this value is set.

Additional <head> Code

Item specific <head> elements can be added here for the system to include in the item's <head> section.
Can be used for adding additional metadata, styles, scripts, etc.

Liquid is not currently supported in this field.

Show this page for
search engines

If unchecked, the system will add <meta name"robots” content"noindex, nofollow"> to the item's <head> section.
This helps inform search engines to not display this item's page in search engine results or follow any of the page's links for indexing purposes.

If your Content Template already contains a hard-coded <meta name"robots"> element the system will add an additional <meta name"robots"> element if this option is unchecked.

Canonical Link

The preferred content URL when other similar content pages may exist. This value should be an absolute URL.
The site's primary domain will be displayed as the first option here.
Setting a canonical link helps inform search engines of the primary content source when duplicate or similar content pages exist so as to help avoid SEO penalties and other linking confusion.
This value, if set, will be automatically output as <link rel"canonical” href"Canonical Link"> and added to the <head> of the item's page.
If left empty, no <link rel"canonical"> element will be added.

If your Content Template already contains a hard-coded <link rel"canonical"> element the system will add an additional <link rel"canonical"> element if this value is set.

SEO Priority

The priority value in your system generated sitemap.xml file.
This value, if set, will replace the default priority value of 0.5 in the <priority> element for this item's sitemap entry.

Open Graph
Option
Description
Open Graph

The values provided here help other platforms, such as social media services (particularly Facebook) to better define this item's content.
These values, if set, will be automatically generated into the Open Graph metadata schema into the <head> of the item's page.
eg: <meta property"og:PROP_TYPE" content"PROP_VALUE"/>

If your Content Template already contains any hard-coded <meta property"og:PROP_TYPE"> elements, the system will add an additional <meta property"og:PROP_TYPE"> elements if these values are set.

AMP Content
Option
Description
Enable AMP

Activate AMP content.

Content

Your AMP coded content.

Subscriptions

Here you’ll see a list of bookings made against the Ultimate Migration Guide (Step by Step) item, listing the contacts name and email address (with link to their CRM record) plus the number of seat allocations booked, per form submission.

You can export this list for a simple record of names and seats. Alternatively, see the Custom Reports section for more detailed reporting on Customers and Ultimate Migration Guide (Step by Step) bookings.

You can also manually add existing CRM members by clicking the “ADD NEW MEMBER” button above the list. A dialog box will prompt for the email address of the CRM member, which will run a live search based on the initial letters types, and the seat allocation.

Currently you cannot edit existing subscriptions made, however you can delete them and re add them manually as required.

Displaying Ultimate Migration Guide (Step by Step) Items

You can render Ultimate Migration Guide (Step by Step) items to your website front-end in a variety of ways and places such as; pages, layouts, templates, emails and just about anywhere else that supports Liquid.

Most commonly though, we would use a standard web page to render to and we would insert a Liquid component tag to define the data that is to be displayed there.

You can use the Component Manager to configure your Ultimate Migration Guide (Step by Step) component tag and insert it into the editor, or you can manually configure them by coding the desired parameters directly into the tag.

Using the Component Manager

Found at the top right of the content editor section, clicking the ‘ Components’ button will reveal a list of available modules and other system items.

Accessing Component Manager

Expanding the 'Ultimate Migration Guide (Step by Step)' section and selecting 'List of items' to open the component configuration panel.

Follow the prompts to configure the way you'd like to retrieve Ultimate Migration Guide (Step by Step) then click the blue link/s at the end to copy the constructed component code to your clipboard. Now you can paste this code into your page content or where otherwise required.

Component Manager Copying Code

Component Tag Advanced Customisation

See here for more detailed documentation on manually configuring the Ultimate Migration Guide (Step by Step) component tag.

Searching Ultimate Migration Guide (Step by Step) Items

Searching within Ultimate Migration Guide (Step by Step) can be achieved with a search form and the module’s component tag configured with the isSearchResult parameter.

Simple keyword based searches can be set up as well as more advanced search forms with specific system and custom fields searchable along with range searches for date and price/number fields.

Ultimate Migration Guide (Step by Step) search code can be generated via the Component Manager when using the admin editor for any page/layout.

Expanding the Ultimate Migration Guide (Step by Step) item from the available module list and choosing “Search Forms” will provide the component builder along with the full search form code to be copied for that module.

Component Manager - Module Search

You can configure a Ultimate Migration Guide (Step by Step) search with two parts; the search form and the module’s component tag. More on these parts below:

Component Tag with ‘isSearchResult’

To render the search results to the page and/or a collection, you need to configure the module’s component tag with the isSearchResult parameter set to true (see the Ultimate Migration Guide (Step by Step) component documentation for technical details).

{% component type: "module", source: "Event", layout: "List", isSearchResult: "true" %}

This will allow the component to reference search parameters in the resulting URL.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

You may want to separate the search form from the component tag if you want a dedicated search results page, or where you have a search input in the header or footer of all pages as so searches could be made from any page.

This method also alleviates a side-effect of the isSearchResult configured component whereby it will output all indexed items by default if no search query has been specified (ie: when a user first navigates to a search page).

If you do want one single search page, with both search form and component and don’t want to initially list all results, another solution to this is to wrap the component tag in a Liquid condition which looks for the presence of the prop_KeyWords parameter in the URL, like so:

{% if request.request_url.params.prop_KeyWords %}
    {% component type: "module", source: "Event", layout: "List", isSearchResult: "true" %}
{% endif %}

Basic Search Form

A basic keyword based search form for Ultimate Migration Guide (Step by Step) would be constructed like the following:

<form>
    <input type="hidden" name="prop_ModuleId" value="1234">
    <label>Keywords</label>
    <input type="text" name="prop_KeyWords" maxlength="255" value="{{request.request_url.params.prop_KeyWords}}">
    <input type="submit" value="Search">
</form>

This form element includes a prop_KeyWords text input, prop_ModuleId hidden input, a submit button and no form action attribute.

The prop_ModuleId hidden input tells the search which module to search (replace ‘1234’ with the ID of your module).

The prop_KeyWords text input allows multiple keywords to be entered for searching.

The search logic combines multiple keywords with an AND operator, so items will be returned only if they include ALL keywords entered.

Currently, searching does not support any manual logic operators to be used in the keyword input field (such as; AND, OR, NOT...)

When the form is submitted, prop_ModuleId and prop_KeyWords, along with their values, will be passed as URL parameters for the isSearchResult configured component tag to interpret.

By default, the search form has no action attribute, so it will redirect to the current page with the URL parameter appended to the current page URL.

You can, instead, separate the search form from the ‘site_search’ component, having the module component on a separate page and sending the search query to that page instead of the current page.

To do this, you’d add the other page URL slug to the form element. So if the other page was “/search-results”, you’d adjust the form to include an action attribute as such:

<form action="/search-results">

Advanced Search Form

Building further on the basic form structure above, you can add Ultimate Migration Guide (Step by Step) specific fields to search their contents, either individually or combined with other fields and/or keyword queries.

The search logic combines all field queries with an AND operator, so items will be returned only if they include ALL the queries entered.

The fields that can be search upon include:

  • Name
  • URL (Slug)
  • SKU Code
  • Release Date
  • Expiry Date
  • Site Search Keywords
  • Description
  • Any ‘Default Properties’ (eg: Categories, Tags, Author...)
  • Any ‘Custom Properties’
  • Module specific ‘System Properties’ (Price, Product Dimensions, Unit Type, Capacity...)

To add these fields to your search form, create an appropriate input with the name attribute configured like prop_PropertyName.

So, if you were adding a search field for a custom property called “Vehicle Colour”, the form input might look like this:

<input type="text" name="prop_VehicleColour">

Follow this same format for most other properties. Although you may like to change the input type to suit the type of data required.

For example, if our above “Vehicle Colour” property was actually a dropdown field with predefined colour values, you may choose to create a <select> element instead, like so:

<select name="prop_VehicleColour">
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
    <option value="Green">Green</option>
</select>

After the search form has been submitted, you might also like to keep the search queries filled in the search form fields, for better usability. So to do this you can pull the query parameters out of the URL and into the input values, like so:

<input type="text" name="prop_VehicleColour" value="{{request.request_url.params.prop_VehicleColour}}">

Search Within Number Ranges

For property types such as dates, prices and numbers, you can search with a to-from/min-max range by adding _Min or _Max to the property name.

So let’s say you want to search for items within a certain date range, based on their release/expiry dates.

<input type="datetime-local" name="prop_ReleaseDate_Min">
<input type="datetime-local" name="prop_ExpiryDate_Max">

And to populate these fields with the searched values:

<input type="datetime-local" name="prop_ReleaseDate_Min" value="{{request.request_url.params.prop_ReleaseDate_Min | date: "%Y-%m-%dT%H:%M"}}">
<input type="datetime-local" name="prop_ExpiryDate_Max" value="{{request.request_url.params.prop_ExpiryDate_Max | date: "%Y-%m-%dT%H:%M"}}">

Searching for a minimum release date will return all items with a release date newer (or the same as) the query date. And likewise searching for a maximum expiry date will return all items with an expiry date older (or the same as) the query date.

Programmatically Search (without a form)

There may be times when you require the search results for a module based on constructed data, other than that of a user’s input into a search form.

You can achieve this with the use of the searchScope parameter on the module’s component tag (see the Ultimate Migration Guide (Step by Step) component documentation for technical details).

This parameter allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid constructed) values without the use of a search form.

The search queries are similar to that used in the above form based search method, but use JSON syntax for their construction.

Below is an example of a constructed searchScope configured component tag, with min/max release date search, keywords and multiple tags query:

{% component type: "module", source: "Event", layout: "List", searchScope: "{'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2']}" %}

The search logic combines all field queries with an AND operator, so items will be returned only if they include ALL the queries entered.

Paid Ultimate Migration Guide (Step by Step) and Subscriptions

You can collect registrations/subscriptions to your Ultimate Migration Guide (Step by Step), optionally booking 1 or more seats and even collecting payment per seat (including volume discounts and wholesaler pricing).

To create a subscription’ form, create a Form (‘Content’ > ‘Forms’) with type ‘singleItem’ and include the ‘Accept Event Subscription’ system field (from the form builder step). If you have paid Ultimate Migration Guide (Step by Step), also include the ‘Accept Payment’ system field.

Ultimate Migration Guide (Step by Step) - Form Settings

Adding the Form to a page or content area can be done using the Forms Liquid component tag but you’ll need to add the eventId parameter in order to identify which Ultimate Migration Guide (Step by Step) item the booking is to be made against. The component tag will then look like this:

{% component type: "form", alias: "<your_event_form_alias>", eventId: "1234" %}

The ID value is the system ID for your Event item. However, if you are adding this form to your Event’s detail layout you can dynamically insert the ID using Liquid, like so:

{% component type: "form", alias: "<your_event_form_alias>", eventId: "{{this['id']}}" %}

When working in a content editor region you can also use the Component manager to help you construct the subscription form component tag, for both an individual Ultimate Migration Guide (Step by Step) item or for the Ultimate Migration Guide (Step by Step) detail layout.

Ultimate Migration Guide (Step by Step) - Subscription Form from Component Manager

Providing all the required form fields are in place, from the default form layout, Treepl CMS will calculate the appropriate amount (if a paid Ultimate Migration Guide (Step by Step)) based on number of seats and any other price settings (such as taxes, volume discounts, wholesaler access, etc.).

The system will only accept the correct payment amount upon submission of the form and this cannot currently be adjusted via other factors, such as discount codes or javascript manipulation.

Successful form submissions will capture the users data to the CRM and record a subscription against the specified Ultimate Migration Guide (Step by Step) (which can be viewed under ‘CRM’ > ‘Event Bookings’).

Event component Documentation

View full article

This module component fetches data relating to Events.

{% component type: "module", source: "Event", layout: "List" %}

Parameters and Options

Parameter
Values
Required
Description
type
module (default)
module_of_member

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
Event (default)
The entity/alias name or ID that the data is to be sourced from.
layout
List (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

filterBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to filter by. If empty or not present, no filtering will be used.

Remove spaces from custom property names here.

filterValue
<your value>

Your specific value to filter by, eg: name, id, number, date, etc.
Liquid variables can be used here also. If present but no value set, no items will be returned.
sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Displays the available items in a random order.

If used in conjunction with sortBy, that sorting criteria will be applied to the randomly retrieved results. So, if retrieving all, or most, of the items they will not appear to be random since they will then be sorted back into a logical order. To overcome this, set the sortBy parameter to 'enabled' (or another unused property) as this will not provide any viable sorting criteria* and the items will not be sorted from their initial random order.
* Unless there are weighted items, which will always override the random option.

If this param's value is 'true' - pagination will not be shown.
limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no items are returned by the Component. The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

isSearchResult
false (default)
true

Allows search parameters in the URL to override the components output. Therefore, this parameter can be used to output module specific search results from a submitted search form.

Likewise, Tag, Category, and Archive components can be used in conjunction with this parameter for filtering the module's output.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

Any value other than true, (including an empty value), will disable the search functionality and the component will output its regular data.

searchScope
eg:
{'prop_ParentId':'1234', 'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2'], 'page':'2'}

Allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid) values without the use of a search form.

Added search parameters will override any corresponding parameters otherwise configured on the component. If no search parameters are present, searchScope will be ignored.

This value supports Liquid and can therefore be constructed with Liquid data/variables.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example has 4 sample items (Events), but is otherwise the default structure you will get from this Component.

{
  "Params": {
    "source": "Event",
    "layout": "",
    "type": "module",
    "collectionvariable": "allEvents"
  },
  "Pagination": {
    "CurrentPage": 1,
    "ItemsPerPage": 10,
    "NumberOfPages": 1,
    "TotalItemsCount": 4
  },
  "Parent": {
    "Id": 2354,
    "Name": "module (Event)",
    "Url": "/component-types/module-event",
    "Url_List": [
      "/component-types/module-event"
    ],
    "UrlSlug": "module-event",
    "ParentId": 2127,
    "ParentId_List": [
      2127
    ],
    "ParentName": "Liquid Components",
    "ParentUrl": "/component-types",
    "TemplateName": "Docs Template",
    "Module_Alias": "DocumentationPost",
    "Module_ID": 1870,
    "Enabled": true,
    "ReleaseDate": "2018-09-03T23:00:00",
    "ExpiryDate": "2099-12-09T00:00:00",
    "SiteSearchKeywords": [],
    "Description": "<p>This module component fetches data relating to Events.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n{% component source: \"Event\", layout: "", type: \"module\", collectionVariable: \"allEvents\" %}\r\n<p>The below example has 4 sample <code>items</code> (Events), but is otherwise the default structure you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{allEvents}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>This data is accessible in two main ways:</p>\r\n\r\n<p>1. Using Liquid in the specified Layout via the <code>this</code> object.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>2. Directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"allEvents\" to list all \"Events\" across the site:</p>\r\n<p class=\"notice-note\">Here we suppress any Layout from rendering by setting <code>layout: \"\"</code> as an empty attribute.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the item URLs in a list, giving us:</em></p>\r\n\r\n<ul>\r\n    \r\n        <li>/event/demo-event-1-no-group</li>\r\n    \r\n        <li>/event/demo-event-group-1/sample-event-one</li>\r\n    \r\n        <li>/event/demo-event-group-2/sample-event-three</li>\r\n    \r\n        <li>/event/demo-event-group-1/sample-event-two</li>\r\n    \r\n</ul>\r\n<br>\r\n<p><em>The code:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value <code>/event/demo-event-group-1/sample-event-one</code></em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n\r\n<section id=\"secListFilteredEvents\">\r\n    <h3>List Events from a specific Event group</h3>\r\n<p>If you have more than one Event group on your site the above examples will list Events from all Event groups as one single collection. However, typically you'd want to list all Events from only the Event group they belong to (their \"parent\" Event group).</p>\r\n<p>To do this we add the <code>filterBy</code> and <code>filterValue</code> attributes to the Component tag.</p>\r\n<p>Typically, you would be listing Event group specific Events on your Event group detail page/index page. In which case you would be editing the 'General Event group Layout' to insert your Component tag, which would look like this:</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>As we are within the Event group's detail Layout (which represents the 'parent' Event group) we can reference its ID for the filter value using <code>{{this['id']}}</code> and instruct the Component tag to filter the Events only by their parent (<code>filterBy: \"parentID\"</code>) - giving us only the relevant Events for the current Event group.</p>\r\n<p>You may however, want to render a list of Events on a standard page or within another modules layout,  where the Post's parent ID (the Event group it belongs to) is not readily available to us in the Liquid scope. In this case you would need to manually hardcode the desired parent Event group's ID into the component tag in place of the above Liquid generated ID (<code>filterValue: \"1234\"</code>).</p>\r\n<p class=\"notice-tip\">To obtain the Event group's ID from the admin, go to that Event group's list view (where you can see all of the Events) and note the number in the URL address bar shown after the <code>parentID=</code> parameter.</p>\r\n</section>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_event_calendar\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_counter\" %}\r\n</section>\r\n",
    "Weighting": 964,
    "DisableForSiteSearch": false,
    "CreatedByMemberId": "0",
    "ItemCategories": [],
    "ItemCategoryIdList": [],
    "ItemTags": [
      "Events"
    ],
    "Author": 0,
    "Author_Name": "",
    "Author_Url": "",
    "Item_Rating": 0,
    "Active": true,
    "IgnoreUpdates": true,
    "UpdatesLog": "<ul><li>27-Oct-2020 | 5.6.0 | Added 'ignoreWeighting' parameter</li><li>'module_of_member' parameter details added.</li></ul>",
    "ExternalResources": null,
    "AdditionalRelatedArticle": 0,
    "AdditionalRelatedArticle2": 0,
    "Authors": "2418",
    "ShowPageForSearchEngine": true,
    "MetaTitle": "",
    "SEOTitle": "",
    "MetaDescription": "",
    "CanonicalLink": "",
    "SocialMetaTags": "",
    "SeoPriority": 0.0,
    "EnableAMP": false,
    "AMPContent": "",
    "OpenGraphProperties": {
      "title": null,
      "type": null,
      "url": null,
      "locale": null,
      "image": null
    },
    "ExternalId": 0,
    "Params": {
      "source": "Documentation Post",
      "layout": "Body Detail",
      "filterby": "id",
      "filtervalue": "2354",
      "limit": "1",
      "type": "snippet",
      "alias": "section_output",
      "data": "\r\n{% component type: \"module\", source: \"Event\", layout: \"List\" %}\r\n",
      "lang": "liquid",
      "name": "SECTION Output",
      "content": "<section id=\"secOutput\">\n    <h2>Liquid Output</h2>",
      "enabled": true,
      "required": "true",
      "values": "List <em>(default)</em><br>&lt;Your Layout name&gt;"
    }
  },
  "Items": [
    {
      "Id": 2587,
      "Name": "DEMO Event 1 No Group",
      "Url": "/event/demo-event-1-no-group",
      "Url_List": [
        "/event/demo-event-1-no-group"
      ],
      "UrlSlug": "demo-event-1-no-group",
      "ParentId": 2330,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "Event",
      "Module_ID": 2330,
      "Enabled": true,
      "ReleaseDate": "2020-08-18T23:00:00",
      "ExpiryDate": "2099-12-11T13:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "SKUCode": "97d7d40c-67ec-4eac-b78d-e2aad80d2558",
      "Price": 0.0,
      "PriceHtml": "<span data-cms_product_data_price=\"2587\">0.00</span>",
      "priceWithTax": 0.0,
      "priceWithTaxHtml": "<span data-cms_product_data_price_with_tax=\"2587\">0.00</span>",
      "RecommendedPrice": 0.0,
      "RecommendedPriceHtml": "<span data-cms_product_data_recommended_price=\"2587\">0.00</span>",
      "RecommendedPriceWithTax": 0.0,
      "RecommendedPriceWithTaxHtml": "<span data-cms_product_data_recommended_price_with_tax=\"2587\">0.00</span>",
      "HideWhenFull": false,
      "AllowMultipleSubscriptionPerEmail": false,
      "Capacity": 0,
      "Allocation": 0,
      "EventDateStart": "2020-08-21T08:25:00",
      "EventDateEnd": "2044-08-21T22:59:00",
      "taxRate": 0.0,
      "VolumeDiscount": [
        {
          "Price": 0.0,
          "Quantity": 0
        }
      ],
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.5,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2505,
      "Name": "Sample Event One",
      "Url": "/event/demo-event-group-1/sample-event-one",
      "Url_List": [
        "/event/demo-event-group-1/sample-event-one"
      ],
      "UrlSlug": "sample-event-one",
      "ParentId": 2503,
      "ParentId_List": [
        2503
      ],
      "ParentName": "DEMO Event Group 1",
      "ParentUrl": "/event/demo-event-group-1",
      "TemplateName": "",
      "Module_Alias": "Event",
      "Module_ID": 2330,
      "Enabled": true,
      "ReleaseDate": "2020-02-12T01:30:00",
      "ExpiryDate": "2099-12-11T13:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>This is the event of the year!</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "SKUCode": "06871a94-e2fc-4c74-a3cf-6aabb92f9001",
      "Price": 0.0,
      "PriceHtml": "<span data-cms_product_data_price=\"2505\">0.00</span>",
      "priceWithTax": 0.0,
      "priceWithTaxHtml": "<span data-cms_product_data_price_with_tax=\"2505\">0.00</span>",
      "RecommendedPrice": 0.0,
      "RecommendedPriceHtml": "<span data-cms_product_data_recommended_price=\"2505\">0.00</span>",
      "RecommendedPriceWithTax": 0.0,
      "RecommendedPriceWithTaxHtml": "<span data-cms_product_data_recommended_price_with_tax=\"2505\">0.00</span>",
      "HideWhenFull": false,
      "AllowMultipleSubscriptionPerEmail": false,
      "Capacity": 0,
      "Allocation": 0,
      "EventDateStart": "2020-02-12T20:00:00",
      "EventDateEnd": "2020-02-12T23:59:00",
      "taxRate": 0.0,
      "VolumeDiscount": [
        {
          "Price": 0.0,
          "Quantity": 0
        }
      ],
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.5,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2507,
      "Name": "Sample Event Three",
      "Url": "/event/demo-event-group-2/sample-event-three",
      "Url_List": [
        "/event/demo-event-group-2/sample-event-three"
      ],
      "UrlSlug": "sample-event-three",
      "ParentId": 2504,
      "ParentId_List": [
        2504
      ],
      "ParentName": "DEMO Event Group 2",
      "ParentUrl": "/event/demo-event-group-2",
      "TemplateName": "",
      "Module_Alias": "Event",
      "Module_ID": 2330,
      "Enabled": true,
      "ReleaseDate": "2020-02-12T00:00:00",
      "ExpiryDate": "2099-12-11T13:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "SKUCode": "517a6f72-a736-4d84-be7d-7833a85fb4a0",
      "Price": 0.0,
      "PriceHtml": "<span data-cms_product_data_price=\"2507\">0.00</span>",
      "priceWithTax": 0.0,
      "priceWithTaxHtml": "<span data-cms_product_data_price_with_tax=\"2507\">0.00</span>",
      "RecommendedPrice": 0.0,
      "RecommendedPriceHtml": "<span data-cms_product_data_recommended_price=\"2507\">0.00</span>",
      "RecommendedPriceWithTax": 0.0,
      "RecommendedPriceWithTaxHtml": "<span data-cms_product_data_recommended_price_with_tax=\"2507\">0.00</span>",
      "HideWhenFull": false,
      "AllowMultipleSubscriptionPerEmail": true,
      "Capacity": 50,
      "Allocation": 0,
      "EventDateStart": "2020-02-05T12:00:00",
      "EventDateEnd": "2020-02-05T18:30:00",
      "taxRate": 0.0,
      "VolumeDiscount": [
        {
          "Price": 0.0,
          "Quantity": 0
        }
      ],
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.5,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2506,
      "Name": "Sample Event Two",
      "Url": "/event/demo-event-group-1/sample-event-two",
      "Url_List": [
        "/event/demo-event-group-1/sample-event-two"
      ],
      "UrlSlug": "sample-event-two",
      "ParentId": 2503,
      "ParentId_List": [
        2503
      ],
      "ParentName": "DEMO Event Group 1",
      "ParentUrl": "/event/demo-event-group-1",
      "TemplateName": "",
      "Module_Alias": "Event",
      "Module_ID": 2330,
      "Enabled": true,
      "ReleaseDate": "2020-02-12T00:00:00",
      "ExpiryDate": "2099-12-11T13:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>The longest event in history...</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "SKUCode": "edc7c49d-1077-4f75-8ac7-23bd545d12b1",
      "Price": 0.0,
      "PriceHtml": "<span data-cms_product_data_price=\"2506\">0.00</span>",
      "priceWithTax": 0.0,
      "priceWithTaxHtml": "<span data-cms_product_data_price_with_tax=\"2506\">0.00</span>",
      "RecommendedPrice": 0.0,
      "RecommendedPriceHtml": "<span data-cms_product_data_recommended_price=\"2506\">0.00</span>",
      "RecommendedPriceWithTax": 0.0,
      "RecommendedPriceWithTaxHtml": "<span data-cms_product_data_recommended_price_with_tax=\"2506\">0.00</span>",
      "HideWhenFull": false,
      "AllowMultipleSubscriptionPerEmail": false,
      "Capacity": 100,
      "Allocation": 0,
      "EventDateStart": "2020-02-11T15:15:00",
      "EventDateEnd": "2020-04-25T17:30:00",
      "taxRate": 0.0,
      "VolumeDiscount": [
        {
          "Price": 0.0,
          "Quantity": 0
        }
      ],
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.5,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    }
  ]
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible in two main ways:

1. Using Liquid in the specified Layout via the this object.

{{this['url']}}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "allEvents" to list all "Events" across the site:

Here we suppress any Layout from rendering by setting layout: "" as an empty attribute.

{% component type: "module", source: "Event", layout: "", collectionVariable: "allEvents" %}

Looping through the collection to render all the item URLs in a list, giving us:

  • /event/demo-event-1-no-group
  • /event/demo-event-group-1/sample-event-one
  • /event/demo-event-group-2/sample-event-three
  • /event/demo-event-group-1/sample-event-two

The code:

<ul>
    {% for i in allEvents.items %}
        <li>{{i['url']}}</li>
    {% endfor %}
</ul>

Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value /event/demo-event-group-1/sample-event-one

{{allEvents.items[1]['url']}}

List Events from a specific Event group

If you have more than one Event group on your site the above examples will list Events from all Event groups as one single collection. However, typically you'd want to list all Events from only the Event group they belong to (their "parent" Event group).

To do this we add the filterBy and filterValue attributes to the Component tag.

Typically, you would be listing Event group specific Events on your Event group detail page/index page. In which case you would be editing the 'General Event group Layout' to insert your Component tag, which would look like this:

{% component type: "module", source: "Event", layout: "List", filterBy: "parentId", filterValue: "{{this['id']}}" %}

As we are within the Event group's detail Layout (which represents the 'parent' Event group) we can reference its ID for the filter value using {{this['id']}} and instruct the Component tag to filter the Events only by their parent (filterBy: "parentID") - giving us only the relevant Events for the current Event group.

You may however, want to render a list of Events on a standard page or within another modules layout, where the Post's parent ID (the Event group it belongs to) is not readily available to us in the Liquid scope. In this case you would need to manually hardcode the desired parent Event group's ID into the component tag in place of the above Liquid generated ID (filterValue: "1234").

To obtain the Event group's ID from the admin, go to that Event group's list view (where you can see all of the Events) and note the number in the URL address bar shown after the parentID= parameter.

Event Calendar

Event items can also be listed onto a calendar layout, based on their start and end dates, using the below include.

{% include "/cms-assets/includes/event-calendar.inc", moduleId: "<Event Module ID>" %}

This include can also be generated via the Component Manager, in the Event section, along with some other attributes to further configure the output as detailed below.

Calendar Include Parameters

Parameter
Values
Required
Description
moduleId
<Event Module ID>
The ID of the Event Module (this will be automatically generated for you via the Component Manager).
group
0 (default)
-1
<Event Group ID>

The ID of the Event Module Group/parent module. Or 0 to retrieve all Event items from all groups. Or -1 to retrieve all ungrouped Event items.
category
<Category Name/Sub Category Name/>

Name of the category to filter Event items by. Or the hierarchical category structure if using sub categories.

Counter

Along with the data output above, there is also a special liquid tag available {{counter}} which increments for each item. This tag is only available within Layouts when object: "item" is used in the Component tag.

Event Post component Documentation

View full article

This module component fetches data relating to Event groups.

{% component type: "module", source: "Event group", layout: "List" %}

Parameters and Options

Parameter
Values
Required
Description
type
module (default)
module_of_member

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
Event group (default)
The entity/alias name or ID that the data is to be sourced from.
layout
List (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

filterBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to filter by. If empty or not present, no filtering will be used.

Remove spaces from custom property names here.

filterValue
<your value>

Your specific value to filter by, eg: name, id, number, date, etc.
Liquid variables can be used here also. If present but no value set, no items will be returned.
sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Displays the available items in a random order.

If used in conjunction with sortBy, that sorting criteria will be applied to the randomly retrieved results. So, if retrieving all, or most, of the items they will not appear to be random since they will then be sorted back into a logical order. To overcome this, set the sortBy parameter to 'enabled' (or another unused property) as this will not provide any viable sorting criteria* and the items will not be sorted from their initial random order.
* Unless there are weighted items, which will always override the random option.

If this param's value is 'true' - pagination will not be shown.
limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no items are returned by the Component. The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

isSearchResult
false (default)
true

Allows search parameters in the URL to override the components output. Therefore, this parameter can be used to output module specific search results from a submitted search form.

Likewise, Tag, Category, and Archive components can be used in conjunction with this parameter for filtering the module's output.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

Any value other than true, (including an empty value), will disable the search functionality and the component will output its regular data.

searchScope
eg:
{'prop_ParentId':'1234', 'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2'], 'page':'2'}

Allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid) values without the use of a search form.

Added search parameters will override any corresponding parameters otherwise configured on the component. If no search parameters are present, searchScope will be ignored.

This value supports Liquid and can therefore be constructed with Liquid data/variables.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example has 2 sample items but is otherwise the default structure you will get from this Component.

{
  "Params": {
    "source": "Event group",
    "layout": "",
    "type": "module",
    "collectionvariable": "allGroups"
  },
  "Pagination": {
    "CurrentPage": 1,
    "ItemsPerPage": 10,
    "NumberOfPages": 1,
    "TotalItemsCount": 2
  },
  "Parent": {
    "Id": 2353,
    "Name": "module (Event Group)",
    "Url": "/component-types/module-event-group",
    "Url_List": [
      "/component-types/module-event-group"
    ],
    "UrlSlug": "module-event-group",
    "ParentId": 2127,
    "ParentId_List": [
      2127
    ],
    "ParentName": "Liquid Components",
    "ParentUrl": "/component-types",
    "TemplateName": "Docs Template",
    "Module_Alias": "DocumentationPost",
    "Module_ID": 1870,
    "Enabled": true,
    "ReleaseDate": "2018-09-03T23:00:00",
    "ExpiryDate": "2099-12-09T00:00:00",
    "SiteSearchKeywords": [],
    "Description": "\r\n\r\n<p>This module component fetches data relating to Event groups.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n{% component source: \"Event group\", layout: "", type: \"module\", collectionVariable: \"allGroups\" %}\r\n<p>The below example has 2 sample <code>items</code> but is otherwise the default structure you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{allGroups}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>This data is accessible in two main ways:</p>\r\n\r\n<p>1. Using Liquid in the specified Layout via the <code>this</code> object.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>2. Directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"allGroups\" to list all \"Event groups\" across the site:</p>\r\n<p class=\"notice-note\">Here we suppress any Layout from rendering by setting <code>layout: \"\"</code> as an empty attribute.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the item URLs in a list, giving us:</em></p>\r\n\r\n<ul>\r\n    \r\n        <li>/event/demo-event-group-1</li>\r\n    \r\n        <li>/event/demo-event-group-2</li>\r\n    \r\n</ul>\r\n<br>\r\n<p><em>The code:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value <code>/event/demo-event-group-2</code></em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_event_calendar\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_counter\" %}\r\n</section>\r\n",
    "Weighting": 965,
    "DisableForSiteSearch": false,
    "CreatedByMemberId": "0",
    "ItemCategories": [],
    "ItemCategoryIdList": [],
    "ItemTags": [
      "Events"
    ],
    "Author": 0,
    "Author_Name": "",
    "Author_Url": "",
    "Item_Rating": 0,
    "Active": true,
    "IgnoreUpdates": true,
    "UpdatesLog": "<ul><li>27-Oct-2020 | 5.6.0 | Added 'ignoreWeighting' parameter</li><li>'module_of_member' parameter details added.</li></ul>",
    "ExternalResources": null,
    "AdditionalRelatedArticle": 0,
    "AdditionalRelatedArticle2": 0,
    "Authors": "2418",
    "ShowPageForSearchEngine": true,
    "MetaTitle": "",
    "SEOTitle": "",
    "MetaDescription": "",
    "CanonicalLink": "",
    "SocialMetaTags": "",
    "SeoPriority": 0.0,
    "EnableAMP": false,
    "AMPContent": "",
    "OpenGraphProperties": {
      "title": null,
      "type": null,
      "url": null,
      "locale": null,
      "image": null
    },
    "ExternalId": 0,
    "Params": {
      "source": "Documentation Post",
      "layout": "Body Detail",
      "filterby": "id",
      "filtervalue": "2353",
      "limit": "1",
      "type": "snippet",
      "alias": "section_output",
      "data": "\r\n{% component type: \"module\", source: \"Event group\", layout: \"List\" %}\r\n",
      "lang": "liquid",
      "name": "SECTION Output",
      "content": "<section id=\"secOutput\">\n    <h2>Liquid Output</h2>",
      "enabled": true,
      "required": "true",
      "values": "List <em>(default)</em><br>&lt;Your Layout name&gt;"
    }
  },
  "Items": [
    {
      "Id": 2503,
      "Name": "DEMO Event Group 1",
      "Url": "/event/demo-event-group-1",
      "Url_List": [
        "/event/demo-event-group-1"
      ],
      "UrlSlug": "demo-event-group-1",
      "ParentId": 2337,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "EventGroup",
      "Module_ID": 2337,
      "Enabled": true,
      "ReleaseDate": "2020-02-13T00:00:00",
      "ExpiryDate": "2099-12-11T13:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.5,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2504,
      "Name": "DEMO Event Group 2",
      "Url": "/event/demo-event-group-2",
      "Url_List": [
        "/event/demo-event-group-2"
      ],
      "UrlSlug": "demo-event-group-2",
      "ParentId": 2337,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "EventGroup",
      "Module_ID": 2337,
      "Enabled": true,
      "ReleaseDate": "2020-02-13T00:00:00",
      "ExpiryDate": "2099-12-11T13:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.5,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    }
  ]
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible in two main ways:

1. Using Liquid in the specified Layout via the this object.

{{this['url']}}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "allGroups" to list all "Event groups" across the site:

Here we suppress any Layout from rendering by setting layout: "" as an empty attribute.

{% component type: "module", source: "Event group", layout: "", collectionVariable: "allGroups" %}

Looping through the collection to render all the item URLs in a list, giving us:

  • /event/demo-event-group-1
  • /event/demo-event-group-2

The code:

<ul>
    {% for i in allGroups.items %}
        <li>{{i['url']}}</li>
    {% endfor %}
</ul>

Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value /event/demo-event-group-2

{{allGroups.items[1]['url']}}

Event Calendar

Event items can also be listed onto a calendar layout, based on their start and end dates, using the below include.

{% include "/cms-assets/includes/event-calendar.inc", moduleId: "<Event Module ID>" %}

This include can also be generated via the Component Manager, in the Event section, along with some other attributes to further configure the output as detailed below.

Calendar Include Parameters

Parameter
Values
Required
Description
moduleId
<Event Module ID>
The ID of the Event Module (this will be automatically generated for you via the Component Manager).
group
0 (default)
-1
<Event Group ID>

The ID of the Event Module Group/parent module. Or 0 to retrieve all Event items from all groups. Or -1 to retrieve all ungrouped Event items.
category
<Category Name/Sub Category Name/>

Name of the category to filter Event items by. Or the hierarchical category structure if using sub categories.

Counter

Along with the data output above, there is also a special liquid tag available {{counter}} which increments for each item. This tag is only available within Layouts when object: "item" is used in the Component tag.

Photo Galleries

Paritymed Effortmed Timemed Docsmed Migration Toolactive

Galleries in Treepl CMS work more like WebApps, so each image is an item within the parent module. This brings greater control in the long run, however migrating images and data to this new format can make migration a little more involved.

The BC to Treepl CMS Migration App can be used to automate this process.

If manually transferring your galleries, see this very helpful method of extracting the BC data in a ready format for Treepl CMS posted in the Treepl CMS Forum:

BC Photo Galleries Export Helper

For more information about the Galleries/Sliders module see the documentation articles.

Gallery/Slider Group module

View full article

This module component fetches data relating to Gallery/Sliders.

{% component type: "module", source: "Gallery/Slider", layout: "List" %}

Parameters and Options

Parameter
Values
Required
Description
type
module (default)
module_of_member

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
Gallery/Slider (default)
The entity/alias name or ID that the data is to be sourced from.
layout
List (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

filterBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to filter by. If empty or not present, no filtering will be used.

Remove spaces from custom property names here.

filterValue
<your value>

Your specific value to filter by, eg: name, id, number, date, etc.
Liquid variables can be used here also. If present but no value set, no items will be returned.
sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Displays the available items in a random order.

If used in conjunction with sortBy, that sorting criteria will be applied to the randomly retrieved results. So, if retrieving all, or most, of the items they will not appear to be random since they will then be sorted back into a logical order. To overcome this, set the sortBy parameter to 'enabled' (or another unused property) as this will not provide any viable sorting criteria* and the items will not be sorted from their initial random order.
* Unless there are weighted items, which will always override the random option.

If this param's value is 'true' - pagination will not be shown.
limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no items are returned by the Component. The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

isSearchResult
false (default)
true

Allows search parameters in the URL to override the components output. Therefore, this parameter can be used to output module specific search results from a submitted search form.

Likewise, Tag, Category, and Archive components can be used in conjunction with this parameter for filtering the module's output.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

Any value other than true, (including an empty value), will disable the search functionality and the component will output its regular data.

searchScope
eg:
{'prop_ParentId':'1234', 'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2'], 'page':'2'}

Allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid) values without the use of a search form.

Added search parameters will override any corresponding parameters otherwise configured on the component. If no search parameters are present, searchScope will be ignored.

This value supports Liquid and can therefore be constructed with Liquid data/variables.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example has 2 sample items (Gallery/Sliders), but is otherwise the default structure you will get from this Component.

{
  "Params": {
    "source": "Gallery/Slider",
    "layout": "",
    "type": "module",
    "collectionvariable": "allGalleries"
  },
  "Pagination": {
    "CurrentPage": 1,
    "ItemsPerPage": 10,
    "NumberOfPages": 1,
    "TotalItemsCount": 2
  },
  "Parent": {
    "Id": 2140,
    "Name": "module (Gallery/Slider)",
    "Url": "/component-types/module-gallery-slider",
    "Url_List": [
      "/component-types/module-gallery-slider"
    ],
    "UrlSlug": "module-gallery-slider",
    "ParentId": 2127,
    "ParentId_List": [
      2127
    ],
    "ParentName": "Liquid Components",
    "ParentUrl": "/component-types",
    "TemplateName": "Docs Template",
    "Module_Alias": "DocumentationPost",
    "Module_ID": 1870,
    "Enabled": true,
    "ReleaseDate": "2018-09-04T23:00:00",
    "ExpiryDate": "2099-12-09T00:00:00",
    "SiteSearchKeywords": [],
    "Description": "<p>This module component fetches data relating to Gallery/Sliders.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n{% component source: \"Gallery/Slider\", layout: "", type: \"module\", collectionVariable: \"allGalleries\" %}\r\n<p>The below example has 2 sample <code>items</code> (Gallery/Sliders), but is otherwise the default structure you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{allGalleries}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>This data is accessible in two main ways:</p>\r\n\r\n<p>1. Using Liquid in the specified Layout via the <code>this</code> object.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>2. Directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"allGalleries\" to list all \"Gallery/Sliders\" across the site:</p>\r\n<p class=\"notice-note\">Here we suppress any Layout from rendering by setting <code>layout: \"\"</code> as an empty attribute.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the item names in a list, giving us:</em></p>\r\n\r\n<ul>\r\n    \r\n        <li>DEMO Custom Gallery</li>\r\n    \r\n        <li>DEMO Standard Gallery</li>\r\n    \r\n</ul>\r\n<br>\r\n<p><em>The code:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value <code>DEMO Standard Gallery</code></em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_counter\" %}\r\n</section>\r\n",
    "Weighting": 950,
    "DisableForSiteSearch": false,
    "CreatedByMemberId": "0",
    "ItemCategories": [],
    "ItemCategoryIdList": [],
    "ItemTags": [
      "Galleries/Sliders"
    ],
    "Author": 0,
    "Author_Name": "",
    "Author_Url": "",
    "Item_Rating": 0,
    "Active": true,
    "IgnoreUpdates": true,
    "UpdatesLog": "<ul><li>27-Oct-2020 | 5.6.0 | Added 'ignoreWeighting' parameter</li><li>'module_of_member' parameter details added.</li></ul>",
    "ExternalResources": null,
    "AdditionalRelatedArticle": 0,
    "AdditionalRelatedArticle2": 0,
    "Authors": "2418",
    "ShowPageForSearchEngine": true,
    "MetaTitle": "",
    "SEOTitle": "",
    "MetaDescription": "",
    "CanonicalLink": "",
    "SocialMetaTags": "",
    "SeoPriority": 0.0,
    "EnableAMP": false,
    "AMPContent": "",
    "OpenGraphProperties": {
      "title": null,
      "type": null,
      "url": null,
      "locale": null,
      "image": null
    },
    "ExternalId": 0,
    "Params": {
      "source": "Documentation Post",
      "layout": "Body Detail",
      "filterby": "id",
      "filtervalue": "2140",
      "limit": "1",
      "type": "snippet",
      "alias": "section_output",
      "data": "\r\n{% component type: \"module\", source: \"Gallery/Slider\", layout: \"List\" %}\r\n",
      "lang": "liquid",
      "name": "SECTION Output",
      "content": "<section id=\"secOutput\">\n    <h2>Liquid Output</h2>",
      "enabled": true,
      "required": "true",
      "values": "List <em>(default)</em><br>&lt;Your Layout name&gt;"
    }
  },
  "Items": [
    {
      "Id": 2296,
      "Name": "DEMO Custom Gallery",
      "Url": "/demo-custom-gallery",
      "Url_List": [
        "/demo-custom-gallery"
      ],
      "UrlSlug": "demo-custom-gallery",
      "ParentId": 1540,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "GallerySlider",
      "Module_ID": 1540,
      "Enabled": true,
      "ReleaseDate": "2018-12-15T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2295,
      "Name": "DEMO Standard Gallery",
      "Url": "/demo-standard-gallery",
      "Url_List": [
        "/demo-standard-gallery"
      ],
      "UrlSlug": "demo-standard-gallery",
      "ParentId": 1540,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "GallerySlider",
      "Module_ID": 1540,
      "Enabled": true,
      "ReleaseDate": "2018-12-15T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>Gallery description...</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    }
  ]
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible in two main ways:

1. Using Liquid in the specified Layout via the this object.

{{this['name']}}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "allGalleries" to list all "Gallery/Sliders" across the site:

Here we suppress any Layout from rendering by setting layout: "" as an empty attribute.

{% component type: "module", source: "Gallery/Slider", layout: "", collectionVariable: "allGalleries" %}

Looping through the collection to render all the item names in a list, giving us:

  • DEMO Custom Gallery
  • DEMO Standard Gallery

The code:

<ul>
    {% for i in allGalleries.items %}
        <li>{{i['name']}}</li>
    {% endfor %}
</ul>

Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value DEMO Standard Gallery

{{allGalleries.items[1]['name']}}

Counter

Along with the data output above, there is also a special liquid tag available {{counter}} which increments for each item. This tag is only available within Layouts when object: "item" is used in the Component tag.

Gallery/Slider Item module

View full article

This module component fetches data relating to Slide items.

{% component type: "module", source: "Slide", layout: "List" %}

Parameters and Options

Parameter
Values
Required
Description
type
module (default)
module_of_member

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
Slide (default)
The entity/alias name or ID that the data is to be sourced from.
layout
List (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

filterBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to filter by. If empty or not present, no filtering will be used.

Remove spaces from custom property names here.

filterValue
<your value>

Your specific value to filter by, eg: name, id, number, date, etc.
Liquid variables can be used here also. If present but no value set, no items will be returned.
sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Displays the available items in a random order.

If used in conjunction with sortBy, that sorting criteria will be applied to the randomly retrieved results. So, if retrieving all, or most, of the items they will not appear to be random since they will then be sorted back into a logical order. To overcome this, set the sortBy parameter to 'enabled' (or another unused property) as this will not provide any viable sorting criteria* and the items will not be sorted from their initial random order.
* Unless there are weighted items, which will always override the random option.

If this param's value is 'true' - pagination will not be shown.
limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no items are returned by the Component. The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

isSearchResult
false (default)
true

Allows search parameters in the URL to override the components output. Therefore, this parameter can be used to output module specific search results from a submitted search form.

Likewise, Tag, Category, and Archive components can be used in conjunction with this parameter for filtering the module's output.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

Any value other than true, (including an empty value), will disable the search functionality and the component will output its regular data.

searchScope
eg:
{'prop_ParentId':'1234', 'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2'], 'page':'2'}

Allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid) values without the use of a search form.

Added search parameters will override any corresponding parameters otherwise configured on the component. If no search parameters are present, searchScope will be ignored.

This value supports Liquid and can therefore be constructed with Liquid data/variables.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example has 3 sample items but is otherwise the default structure you will get from this Component.

{
  "Params": {
    "source": "Slide",
    "layout": "",
    "type": "module",
    "collectionvariable": "allSlides"
  },
  "Pagination": {
    "CurrentPage": 1,
    "ItemsPerPage": 10,
    "NumberOfPages": 1,
    "TotalItemsCount": 3
  },
  "Parent": {
    "Id": 2143,
    "Name": "module (Slide)",
    "Url": "/component-types/module-slide",
    "Url_List": [
      "/component-types/module-slide"
    ],
    "UrlSlug": "module-slide",
    "ParentId": 2127,
    "ParentId_List": [
      2127
    ],
    "ParentName": "Liquid Components",
    "ParentUrl": "/component-types",
    "TemplateName": "Docs Template",
    "Module_Alias": "DocumentationPost",
    "Module_ID": 1870,
    "Enabled": true,
    "ReleaseDate": "2018-09-04T23:00:00",
    "ExpiryDate": "2099-12-09T00:00:00",
    "SiteSearchKeywords": [],
    "Description": "<p>This module component fetches data relating to Slide items.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n{% component source: \"Slide\", layout: "", type: \"module\", collectionVariable: \"allSlides\" %}\r\n<p>The below example has 3 sample <code>items</code> but is otherwise the default structure you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{allSlides}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>This data is accessible in two main ways:</p>\r\n\r\n<p>1. Using Liquid in the specified Layout via the <code>this</code> object.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>2. Directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"allSlides\" to list all \"Slide items\" across the site:</p>\r\n<p class=\"notice-note\">Here we suppress any Layout from rendering by setting <code>layout: \"\"</code> as an empty attribute.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the item names in a list, giving us:</em></p>\r\n\r\n<ul>\r\n    \r\n        <li>Custom Slide One</li>\r\n    \r\n        <li>Slide One</li>\r\n    \r\n        <li>Slide Two</li>\r\n    \r\n</ul>\r\n<br>\r\n<p><em>The code:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value <code>Slide One</code></em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n</section>\r\n\r\n<section id=\"secListFiltered\">\r\n    <h3>List Slides from a specific Gallery</h3>\r\n    <p>If you have more than one Gallery on your site the above examples will list Slides from all Gallery as one single collection. However, you may also want to list all Slides from only the Gallery they belong to (their \"parent\" Gallery).</p>\r\n    <p>To do this we add the <code>filterBy</code> and <code>filterValue</code> attributes to the Component tag using the Galleryies ID to get the relevant items.</p>\r\n    <p class=\"notice-tip\">You can use the Component Manager to correctly configure the Component tag and ID value. Alternatively, to obtain the Galleries ID manually from the admin, go to a Galleries list view (where you can see all of the Slide items) and note the number in the browser address bar shown after the <code>parentID=</code> parameter.</p>\r\n</section>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_counter\" %}\r\n</section>\r\n",
    "Weighting": 949,
    "DisableForSiteSearch": false,
    "CreatedByMemberId": "0",
    "ItemCategories": [],
    "ItemCategoryIdList": [],
    "ItemTags": [
      "Galleries/Sliders"
    ],
    "Author": 0,
    "Author_Name": "",
    "Author_Url": "",
    "Item_Rating": 0,
    "Active": true,
    "IgnoreUpdates": true,
    "UpdatesLog": "<ul><li>27-Oct-2020 | 5.6.0 | Added 'ignoreWeighting' parameter</li><li>'module_of_member' parameter details added.</li></ul>",
    "ExternalResources": null,
    "AdditionalRelatedArticle": 0,
    "AdditionalRelatedArticle2": 0,
    "Authors": "2418",
    "ShowPageForSearchEngine": true,
    "MetaTitle": "",
    "SEOTitle": "",
    "MetaDescription": "",
    "CanonicalLink": "",
    "SocialMetaTags": "",
    "SeoPriority": 0.0,
    "EnableAMP": false,
    "AMPContent": "",
    "OpenGraphProperties": {
      "title": null,
      "type": null,
      "url": null,
      "locale": null,
      "image": null
    },
    "ExternalId": 0,
    "Params": {
      "source": "Documentation Post",
      "layout": "Body Detail",
      "filterby": "id",
      "filtervalue": "2143",
      "limit": "1",
      "type": "snippet",
      "alias": "section_output",
      "data": "\r\n{% component type: \"module\", source: \"Slide\", layout: \"List\" %}\r\n",
      "lang": "liquid",
      "name": "SECTION Output",
      "content": "<section id=\"secOutput\">\n    <h2>Liquid Output</h2>",
      "enabled": true,
      "required": "true",
      "values": "List <em>(default)</em><br>&lt;Your Layout name&gt;"
    }
  },
  "Items": [
    {
      "Id": 2302,
      "Name": "Custom Slide One",
      "Url": "/demo-custom-gallery/custom-slide-one",
      "Url_List": [
        "/demo-custom-gallery/custom-slide-one"
      ],
      "UrlSlug": "custom-slide-one",
      "ParentId": 2296,
      "ParentId_List": [
        2296
      ],
      "ParentName": "DEMO Custom Gallery",
      "ParentUrl": "/demo-custom-gallery",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "Slide",
      "Module_ID": 1774,
      "Enabled": true,
      "ReleaseDate": "2018-12-15T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>Custom slide one description...</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ImageSrc": "/images/community-img-01.jpg",
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2306,
      "Name": "Slide One",
      "Url": "/demo-standard-gallery/slide-one",
      "Url_List": [
        "/demo-standard-gallery/slide-one"
      ],
      "UrlSlug": "slide-one",
      "ParentId": 2295,
      "ParentId_List": [
        2295
      ],
      "ParentName": "DEMO Standard Gallery",
      "ParentUrl": "/demo-standard-gallery",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "Slide",
      "Module_ID": 1774,
      "Enabled": true,
      "ReleaseDate": "2018-12-15T18:00:00",
      "ExpiryDate": "2099-12-11T07:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>Slide one description...</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ImageSrc": "/images/community-img-01.jpg",
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2307,
      "Name": "Slide Two",
      "Url": "/demo-standard-gallery/slide-two",
      "Url_List": [
        "/demo-standard-gallery/slide-two"
      ],
      "UrlSlug": "slide-two",
      "ParentId": 2295,
      "ParentId_List": [
        2295
      ],
      "ParentName": "DEMO Standard Gallery",
      "ParentUrl": "/demo-standard-gallery",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "Slide",
      "Module_ID": 1774,
      "Enabled": true,
      "ReleaseDate": "2018-12-15T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>Slide two description...</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ImageSrc": "/images/community-img-01.jpg",
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    }
  ]
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible in two main ways:

1. Using Liquid in the specified Layout via the this object.

{{this['name']}}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "allSlides" to list all "Slide items" across the site:

Here we suppress any Layout from rendering by setting layout: "" as an empty attribute.

{% component type: "module", source: "Slide", layout: "", collectionVariable: "allSlides" %}

Looping through the collection to render all the item names in a list, giving us:

  • Custom Slide One
  • Slide One
  • Slide Two

The code:

<ul>
    {% for i in allSlides.items %}
        <li>{{i['name']}}</li>
    {% endfor %}
</ul>

Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value Slide One

{{allSlides.items[1]['name']}}

List Slides from a specific Gallery

If you have more than one Gallery on your site the above examples will list Slides from all Gallery as one single collection. However, you may also want to list all Slides from only the Gallery they belong to (their "parent" Gallery).

To do this we add the filterBy and filterValue attributes to the Component tag using the Galleryies ID to get the relevant items.

You can use the Component Manager to correctly configure the Component tag and ID value. Alternatively, to obtain the Galleries ID manually from the admin, go to a Galleries list view (where you can see all of the Slide items) and note the number in the browser address bar shown after the parentID= parameter.

Counter

Along with the data output above, there is also a special liquid tag available {{counter}} which increments for each item. This tag is only available within Layouts when object: "item" is used in the Component tag.

News

Paritymed Effortlow Timelow Docsmed Migration Toolactive

There is no “News” module specifically in Treepl CMS, however using the Blog would likely be a more than suitable alternative (see migrating Blogs section above).

The BC to Treepl CMS Migration App can be used to automate this process and a separate Blog module will be created for News items.

If migrating manually, since BC doesn't provide export functionality for extracting the BC News data, you could likely use a similar approach to the Blog Export Helper above.

You can also upload your BC module layouts into your Treepl CMS instance via FTP into the ‘Content / ModuleLayouts / <Your Custom Module OR Blog>’ directory.

Media Downloads

Paritylow Effortmed Timemed Docslow Migration Toolactive

There is no direct “Media Downloads” module in Treepl CMS, however setting up a Custom Module along with the ‘Force Download Handler’ option would see very similar results with greater flexibility.
(see migrating WebApps section in a later step).

You can manually migrate Media Downloads or alternatively the BC to Treepl CMS Migration App can be used to automate this process.

For manual migrations, there are 2 main options:

1. Use the Advanced BC Export tool (in the BC to Treepl CMS migration App) to extract the media files and spreadsheet data:

Advanced BC Export

2. Use this helpful method of extracting the BC data in a ready format for Treepl CMS, from this Treepl CMS Forum post:

BC Media Downloads Export Helper

FAQs

Parityhigh Effortmed Timemed Docslow Migration Toolactive

FAQs in Treepl CMS work more like WebApps, so each FAQ is an item within the parent module (Question Group). This brings greater control in the long run, however migrating FAQs and data to this new format may make migration a little more involved.

You can manually migrate FAQs or alternatively the BC to Treepl CMS Migration App can be used to automate this process.

For manual migrations, you could likely use a similar approach to the Blog Export Helper above.

You can also upload your BC module layouts into your Treepl CMS instance via FTP into the ‘Content / ModuleLayouts / <FAQGroup> & <FAQQuestion>’ directories.

For more information about the FAQs module see the documentation articles.

FAQ Group module

View full article

This module component fetches data relating to FAQ Groups.

{% component type: "module", source: "FAQ Group", layout: "List" %}

Parameters and Options

Parameter
Values
Required
Description
type
module (default)
module_of_member

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
FAQ Group (default)
The entity/alias name or ID that the data is to be sourced from.
layout
List (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

filterBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to filter by. If empty or not present, no filtering will be used.

Remove spaces from custom property names here.

filterValue
<your value>

Your specific value to filter by, eg: name, id, number, date, etc.
Liquid variables can be used here also. If present but no value set, no items will be returned.
sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Displays the available items in a random order.

If used in conjunction with sortBy, that sorting criteria will be applied to the randomly retrieved results. So, if retrieving all, or most, of the items they will not appear to be random since they will then be sorted back into a logical order. To overcome this, set the sortBy parameter to 'enabled' (or another unused property) as this will not provide any viable sorting criteria* and the items will not be sorted from their initial random order.
* Unless there are weighted items, which will always override the random option.

If this param's value is 'true' - pagination will not be shown.
limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no items are returned by the Component. The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

isSearchResult
false (default)
true

Allows search parameters in the URL to override the components output. Therefore, this parameter can be used to output module specific search results from a submitted search form.

Likewise, Tag, Category, and Archive components can be used in conjunction with this parameter for filtering the module's output.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

Any value other than true, (including an empty value), will disable the search functionality and the component will output its regular data.

searchScope
eg:
{'prop_ParentId':'1234', 'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2'], 'page':'2'}

Allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid) values without the use of a search form.

Added search parameters will override any corresponding parameters otherwise configured on the component. If no search parameters are present, searchScope will be ignored.

This value supports Liquid and can therefore be constructed with Liquid data/variables.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example has 2 sample items (FAQ Groups), but is otherwise the default structure you will get from this Component.

{
  "Params": {
    "source": "FAQ Group",
    "layout": "",
    "type": "module",
    "collectionvariable": "allFAQGroups"
  },
  "Pagination": {
    "CurrentPage": 1,
    "ItemsPerPage": 10,
    "NumberOfPages": 1,
    "TotalItemsCount": 2
  },
  "Parent": {
    "Id": 2144,
    "Name": "module (FAQ Group)",
    "Url": "/component-types/module-faq-group",
    "Url_List": [
      "/component-types/module-faq-group"
    ],
    "UrlSlug": "module-faq-group",
    "ParentId": 2127,
    "ParentId_List": [
      2127
    ],
    "ParentName": "Liquid Components",
    "ParentUrl": "/component-types",
    "TemplateName": "Docs Template",
    "Module_Alias": "DocumentationPost",
    "Module_ID": 1870,
    "Enabled": true,
    "ReleaseDate": "2018-09-04T23:00:00",
    "ExpiryDate": "2099-12-09T00:00:00",
    "SiteSearchKeywords": [],
    "Description": "<p>This module component fetches data relating to FAQ Groups.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n{% component source: \"FAQ Group\", layout: "", type: \"module\", collectionVariable: \"allFAQGroups\" %}\r\n<p>The below example has 2 sample <code>items</code> (FAQ Groups), but is otherwise the default structure you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{allFAQGroups}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>This data is accessible in two main ways:</p>\r\n\r\n<p>1. Using Liquid in the specified Layout via the <code>this</code> object.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>2. Directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"allFAQGroups\" to list all \"FAQ Groups\" across the site:</p>\r\n<p class=\"notice-note\">Here we suppress any Layout from rendering by setting <code>layout: \"\"</code> as an empty attribute.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the item names in a list, giving us:</em></p>\r\n\r\n<ul>\r\n    \r\n        <li>DEMO Custom FAQ Group</li>\r\n    \r\n        <li>DEMO Standard FAQ Group</li>\r\n    \r\n</ul>\r\n<br>\r\n<p><em>The code:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value <code>DEMO Standard FAQ Group</code></em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_counter\" %}\r\n</section>\r\n",
    "Weighting": 940,
    "DisableForSiteSearch": false,
    "CreatedByMemberId": "0",
    "ItemCategories": [],
    "ItemCategoryIdList": [],
    "ItemTags": [
      "FAQs"
    ],
    "Author": 0,
    "Author_Name": "",
    "Author_Url": "",
    "Item_Rating": 0,
    "Active": true,
    "IgnoreUpdates": true,
    "UpdatesLog": "<ul><li>27-Oct-2020 | 5.6.0 | Added 'ignoreWeighting' parameter</li><li>'module_of_member' parameter details added.</li></ul>",
    "ExternalResources": null,
    "AdditionalRelatedArticle": 0,
    "AdditionalRelatedArticle2": 0,
    "Authors": "2418",
    "ShowPageForSearchEngine": true,
    "MetaTitle": "",
    "SEOTitle": "",
    "MetaDescription": "",
    "CanonicalLink": "",
    "SocialMetaTags": "",
    "SeoPriority": 0.0,
    "EnableAMP": false,
    "AMPContent": "",
    "OpenGraphProperties": {
      "title": null,
      "type": null,
      "url": null,
      "locale": null,
      "image": null
    },
    "ExternalId": 0,
    "Params": {
      "source": "Documentation Post",
      "layout": "Body Detail",
      "filterby": "id",
      "filtervalue": "2144",
      "limit": "1",
      "type": "snippet",
      "alias": "section_output",
      "data": "\r\n{% component type: \"module\", source: \"FAQ Group\", layout: \"List\" %}\r\n",
      "lang": "liquid",
      "name": "SECTION Output",
      "content": "<section id=\"secOutput\">\n    <h2>Liquid Output</h2>",
      "enabled": true,
      "required": "true",
      "values": "List <em>(default)</em><br>&lt;Your Layout name&gt;"
    }
  },
  "Items": [
    {
      "Id": 2303,
      "Name": "DEMO Custom FAQ Group",
      "Url": "/demo-custom-faq-group",
      "Url_List": [
        "/demo-custom-faq-group"
      ],
      "UrlSlug": "demo-custom-faq-group",
      "ParentId": 1782,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "FAQGroup",
      "Module_ID": 1782,
      "Enabled": true,
      "ReleaseDate": "2018-12-15T18:00:00",
      "ExpiryDate": "2099-12-11T07:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2275,
      "Name": "DEMO Standard FAQ Group",
      "Url": "/demo-standard-faq-group",
      "Url_List": [
        "/demo-standard-faq-group"
      ],
      "UrlSlug": "demo-standard-faq-group",
      "ParentId": 1782,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "FAQGroup",
      "Module_ID": 1782,
      "Enabled": true,
      "ReleaseDate": "2018-11-25T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    }
  ]
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible in two main ways:

1. Using Liquid in the specified Layout via the this object.

{{this['name']}}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "allFAQGroups" to list all "FAQ Groups" across the site:

Here we suppress any Layout from rendering by setting layout: "" as an empty attribute.

{% component type: "module", source: "FAQ Group", layout: "", collectionVariable: "allFAQGroups" %}

Looping through the collection to render all the item names in a list, giving us:

  • DEMO Custom FAQ Group
  • DEMO Standard FAQ Group

The code:

<ul>
    {% for i in allFAQGroups.items %}
        <li>{{i['name']}}</li>
    {% endfor %}
</ul>

Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value DEMO Standard FAQ Group

{{allFAQGroups.items[1]['name']}}

Counter

Along with the data output above, there is also a special liquid tag available {{counter}} which increments for each item. This tag is only available within Layouts when object: "item" is used in the Component tag.

FAQ Item module

View full article

This module component fetches data relating to FAQ Questions.

{% component type: "module", source: "FAQ Question", layout: "List" %}

Parameters and Options

Parameter
Values
Required
Description
type
module (default)
module_of_member

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
FAQ Question (default)
The entity/alias name or ID that the data is to be sourced from.
layout
List (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

filterBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to filter by. If empty or not present, no filtering will be used.

Remove spaces from custom property names here.

filterValue
<your value>

Your specific value to filter by, eg: name, id, number, date, etc.
Liquid variables can be used here also. If present but no value set, no items will be returned.
sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Displays the available items in a random order.

If used in conjunction with sortBy, that sorting criteria will be applied to the randomly retrieved results. So, if retrieving all, or most, of the items they will not appear to be random since they will then be sorted back into a logical order. To overcome this, set the sortBy parameter to 'enabled' (or another unused property) as this will not provide any viable sorting criteria* and the items will not be sorted from their initial random order.
* Unless there are weighted items, which will always override the random option.

If this param's value is 'true' - pagination will not be shown.
limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no items are returned by the Component. The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

isSearchResult
false (default)
true

Allows search parameters in the URL to override the components output. Therefore, this parameter can be used to output module specific search results from a submitted search form.

Likewise, Tag, Category, and Archive components can be used in conjunction with this parameter for filtering the module's output.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

Any value other than true, (including an empty value), will disable the search functionality and the component will output its regular data.

searchScope
eg:
{'prop_ParentId':'1234', 'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2'], 'page':'2'}

Allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid) values without the use of a search form.

Added search parameters will override any corresponding parameters otherwise configured on the component. If no search parameters are present, searchScope will be ignored.

This value supports Liquid and can therefore be constructed with Liquid data/variables.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example has 3 sample items but is otherwise the default structure you will get from this Component.

{
  "Params": {
    "source": "FAQ Question",
    "layout": "",
    "type": "module",
    "collectionvariable": "allQuestions"
  },
  "Pagination": {
    "CurrentPage": 1,
    "ItemsPerPage": 10,
    "NumberOfPages": 1,
    "TotalItemsCount": 3
  },
  "Parent": {
    "Id": 2145,
    "Name": "module (FAQ Question)",
    "Url": "/component-types/module-faq-question",
    "Url_List": [
      "/component-types/module-faq-question"
    ],
    "UrlSlug": "module-faq-question",
    "ParentId": 2127,
    "ParentId_List": [
      2127
    ],
    "ParentName": "Liquid Components",
    "ParentUrl": "/component-types",
    "TemplateName": "Docs Template",
    "Module_Alias": "DocumentationPost",
    "Module_ID": 1870,
    "Enabled": true,
    "ReleaseDate": "2018-09-04T23:00:00",
    "ExpiryDate": "2099-12-09T00:00:00",
    "SiteSearchKeywords": [],
    "Description": "<p>This module component fetches data relating to FAQ Questions.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n{% component source: \"FAQ Question\", layout: "", type: \"module\", collectionVariable: \"allQuestions\" %}\r\n<p>The below example has 3 sample <code>items</code> but is otherwise the default structure you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{allQuestions}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>This data is accessible in two main ways:</p>\r\n\r\n<p>1. Using Liquid in the specified Layout via the <code>this</code> object.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>2. Directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"allQuestions\" to list all \"FAQ Questions\" across the site:</p>\r\n<p class=\"notice-note\">Here we suppress any Layout from rendering by setting <code>layout: \"\"</code> as an empty attribute.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the item names in a list, giving us:</em></p>\r\n\r\n<ul>\r\n    \r\n        <li>First Custom Question</li>\r\n    \r\n        <li>HTML Question One</li>\r\n    \r\n        <li>HTML Question Two</li>\r\n    \r\n</ul>\r\n<br>\r\n<p><em>The code:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value <code>HTML Question One</code></em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n<section id=\"secListFiltered\">\r\n    <h3>List FAQ Questions from a specific Gallery</h3>\r\n<p>If you have more than one FAQ Group on your site the above examples will list FAQ Questions from all FAQ Groups as one single collection. However, you may also want to list all FAQ Questions from only the FAQ Group they belong to (their \"parent\" Gallery).</p>\r\n<p>To do this we add the <code>filterBy</code> and <code>filterValue</code> attributes to the Component tag using the Galleryies ID to get the relevant items.</p>\r\n<p class=\"notice-tip\">You can use the Component Manager to correctly configure the Component tag and ID value. Alternatively, to obtain the FAQ Groups  ID manually from the admin, go to a FAQ Groups  list view (where you can see all of the FAQ Questions) and note the number in the browser address bar shown after the <code>parentID=</code> parameter.</p>\r\n</section>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_counter\" %}\r\n</section>\r\n",
    "Weighting": 939,
    "DisableForSiteSearch": false,
    "CreatedByMemberId": "0",
    "ItemCategories": [],
    "ItemCategoryIdList": [],
    "ItemTags": [
      "FAQs"
    ],
    "Author": 0,
    "Author_Name": "",
    "Author_Url": "",
    "Item_Rating": 0,
    "Active": true,
    "IgnoreUpdates": true,
    "UpdatesLog": "<ul><li>27-Oct-2020 | 5.6.0 | Added 'ignoreWeighting' parameter</li><li>'module_of_member' parameter details added.</li></ul>",
    "ExternalResources": null,
    "AdditionalRelatedArticle": 0,
    "AdditionalRelatedArticle2": 0,
    "Authors": "2418",
    "ShowPageForSearchEngine": true,
    "MetaTitle": "",
    "SEOTitle": "",
    "MetaDescription": "",
    "CanonicalLink": "",
    "SocialMetaTags": "",
    "SeoPriority": 0.0,
    "EnableAMP": false,
    "AMPContent": "",
    "OpenGraphProperties": {
      "title": null,
      "type": null,
      "url": null,
      "locale": null,
      "image": null
    },
    "ExternalId": 0,
    "Params": {
      "source": "Documentation Post",
      "layout": "Body Detail",
      "filterby": "id",
      "filtervalue": "2145",
      "limit": "1",
      "type": "snippet",
      "alias": "section_output",
      "data": "\r\n{% component type: \"module\", source: \"FAQ Question\", layout: \"List\" %}\r\n",
      "lang": "liquid",
      "name": "SECTION Output",
      "content": "<section id=\"secOutput\">\n    <h2>Liquid Output</h2>",
      "enabled": true,
      "required": "true",
      "values": "List <em>(default)</em><br>&lt;Your Layout name&gt;"
    }
  },
  "Items": [
    {
      "Id": 2305,
      "Name": "First Custom Question",
      "Url": "/demo-custom-faq-group/first-custom-question",
      "Url_List": [
        "/demo-custom-faq-group/first-custom-question"
      ],
      "UrlSlug": "first-custom-question",
      "ParentId": 2303,
      "ParentId_List": [
        2303
      ],
      "ParentName": "DEMO Custom FAQ Group",
      "ParentUrl": "/demo-custom-faq-group",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "FAQQuestion",
      "Module_ID": 1789,
      "Enabled": true,
      "ReleaseDate": "2018-12-15T18:00:00",
      "ExpiryDate": "2099-12-11T07:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2276,
      "Name": "HTML Question One",
      "Url": "/demo-standard-faq-group/html-question-one",
      "Url_List": [
        "/demo-standard-faq-group/html-question-one"
      ],
      "UrlSlug": "html-question-one",
      "ParentId": 2275,
      "ParentId_List": [
        2275
      ],
      "ParentName": "DEMO Standard FAQ Group",
      "ParentUrl": "/demo-standard-faq-group",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "FAQQuestion",
      "Module_ID": 1789,
      "Enabled": true,
      "ReleaseDate": "2018-11-25T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>My first question with <em>HTML</em>...</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2304,
      "Name": "HTML Question Two",
      "Url": "/demo-standard-faq-group/html-question-two",
      "Url_List": [
        "/demo-standard-faq-group/html-question-two"
      ],
      "UrlSlug": "html-question-two",
      "ParentId": 2275,
      "ParentId_List": [
        2275
      ],
      "ParentName": "DEMO Standard FAQ Group",
      "ParentUrl": "/demo-standard-faq-group",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "FAQQuestion",
      "Module_ID": 1789,
      "Enabled": true,
      "ReleaseDate": "2018-11-25T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>My second question...</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    }
  ]
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible in two main ways:

1. Using Liquid in the specified Layout via the this object.

{{this['name']}}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "allQuestions" to list all "FAQ Questions" across the site:

Here we suppress any Layout from rendering by setting layout: "" as an empty attribute.

{% component type: "module", source: "FAQ Question", layout: "", collectionVariable: "allQuestions" %}

Looping through the collection to render all the item names in a list, giving us:

  • First Custom Question
  • HTML Question One
  • HTML Question Two

The code:

<ul>
    {% for i in allQuestions.items %}
        <li>{{i['name']}}</li>
    {% endfor %}
</ul>

Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value HTML Question One

{{allQuestions.items[1]['name']}}

List FAQ Questions from a specific Gallery

If you have more than one FAQ Group on your site the above examples will list FAQ Questions from all FAQ Groups as one single collection. However, you may also want to list all FAQ Questions from only the FAQ Group they belong to (their "parent" Gallery).

To do this we add the filterBy and filterValue attributes to the Component tag using the Galleryies ID to get the relevant items.

You can use the Component Manager to correctly configure the Component tag and ID value. Alternatively, to obtain the FAQ Groups ID manually from the admin, go to a FAQ Groups list view (where you can see all of the FAQ Questions) and note the number in the browser address bar shown after the parentID= parameter.

Counter

Along with the data output above, there is also a special liquid tag available {{counter}} which increments for each item. This tag is only available within Layouts when object: "item" is used in the Component tag.

Ad Rotators

Paritymed Effortmed Timemed Docsmed Migration Toolactive

The Banner module in Treepl CMS was built to replace the BC Ad Rotators and is set up much like the other modules in Treepl CMS and is therefore flexible for you to configure the layouts and behaviour as needed.

The BC to Treepl CMS Migration App can be used to automate this process.

If migrating manually, since BC doesn't provide export functionality for extracting the BC Ad Rotator data, you could likely use a similar approach to the Blog Export Helper above.

For more information about the Banners module see the documentation articles.

Banner Documentation

View full article

Banners give you an easy way to display random banner ads, perhaps a random quote or really any other content required.

Quick Start

Searching Ultimate Migration Guide (Step by Step) Items

Searching within Ultimate Migration Guide (Step by Step) can be achieved with a search form and the module’s component tag configured with the isSearchResult parameter.

Simple keyword based searches can be set up as well as more advanced search forms with specific system and custom fields searchable along with range searches for date and price/number fields.

You can configure a Ultimate Migration Guide (Step by Step) search with two parts; the search form and the module’s component tag. More on these parts below:

Component Tag with ‘isSearchResult’

To render the search results to the page and/or a collection, you need to configure the module’s component tag with the isSearchResult parameter set to true (see the Ultimate Migration Guide (Step by Step) component documentation for technical details).

{% component type: "module", source: "Banner", layout: "List", isSearchResult: "true" %}

This will allow the component to reference search parameters in the resulting URL.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

You may want to separate the search form from the component tag if you want a dedicated search results page, or where you have a search input in the header or footer of all pages as so searches could be made from any page.

This method also alleviates a side-effect of the isSearchResult configured component whereby it will output all indexed items by default if no search query has been specified (ie: when a user first navigates to a search page).

If you do want one single search page, with both search form and component and don’t want to initially list all results, another solution to this is to wrap the component tag in a Liquid condition which looks for the presence of the prop_KeyWords parameter in the URL, like so:

{% if request.request_url.params.prop_KeyWords %}
    {% component type: "module", source: "Banner", layout: "List", isSearchResult: "true" %}
{% endif %}

Basic Search Form

A basic keyword based search form for Ultimate Migration Guide (Step by Step) would be constructed like the following:

<form>
    <input type="hidden" name="prop_ModuleId" value="1234">
    <label>Keywords</label>
    <input type="text" name="prop_KeyWords" maxlength="255" value="{{request.request_url.params.prop_KeyWords}}">
    <input type="submit" value="Search">
</form>

This form element includes a prop_KeyWords text input, prop_ModuleId hidden input, a submit button and no form action attribute.

The prop_ModuleId hidden input tells the search which module to search (replace ‘1234’ with the ID of your module).

The prop_KeyWords text input allows multiple keywords to be entered for searching.

The search logic combines multiple keywords with an AND operator, so items will be returned only if they include ALL keywords entered.

Currently, searching does not support any manual logic operators to be used in the keyword input field (such as; AND, OR, NOT...)

When the form is submitted, prop_ModuleId and prop_KeyWords, along with their values, will be passed as URL parameters for the isSearchResult configured component tag to interpret.

By default, the search form has no action attribute, so it will redirect to the current page with the URL parameter appended to the current page URL.

You can, instead, separate the search form from the ‘site_search’ component, having the module component on a separate page and sending the search query to that page instead of the current page.

To do this, you’d add the other page URL slug to the form element. So if the other page was “/search-results”, you’d adjust the form to include an action attribute as such:

<form action="/search-results">

Advanced Search Form

Building further on the basic form structure above, you can add Ultimate Migration Guide (Step by Step) specific fields to search their contents, either individually or combined with other fields and/or keyword queries.

The search logic combines all field queries with an AND operator, so items will be returned only if they include ALL the queries entered.

The fields that can be search upon include:

  • Name
  • URL (Slug)
  • SKU Code
  • Release Date
  • Expiry Date
  • Site Search Keywords
  • Description
  • Any ‘Default Properties’ (eg: Categories, Tags, Author...)
  • Any ‘Custom Properties’
  • Module specific ‘System Properties’ (Price, Product Dimensions, Unit Type, Capacity...)

To add these fields to your search form, create an appropriate input with the name attribute configured like prop_PropertyName.

So, if you were adding a search field for a custom property called “Vehicle Colour”, the form input might look like this:

<input type="text" name="prop_VehicleColour">

Follow this same format for most other properties. Although you may like to change the input type to suit the type of data required.

For example, if our above “Vehicle Colour” property was actually a dropdown field with predefined colour values, you may choose to create a <select> element instead, like so:

<select name="prop_VehicleColour">
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
    <option value="Green">Green</option>
</select>

After the search form has been submitted, you might also like to keep the search queries filled in the search form fields, for better usability. So to do this you can pull the query parameters out of the URL and into the input values, like so:

<input type="text" name="prop_VehicleColour" value="{{request.request_url.params.prop_VehicleColour}}">

Search Within Number Ranges

For property types such as dates, prices and numbers, you can search with a to-from/min-max range by adding _Min or _Max to the property name.

So let’s say you want to search for items within a certain date range, based on their release/expiry dates.

<input type="datetime-local" name="prop_ReleaseDate_Min">
<input type="datetime-local" name="prop_ExpiryDate_Max">

And to populate these fields with the searched values:

<input type="datetime-local" name="prop_ReleaseDate_Min" value="{{request.request_url.params.prop_ReleaseDate_Min | date: "%Y-%m-%dT%H:%M"}}">
<input type="datetime-local" name="prop_ExpiryDate_Max" value="{{request.request_url.params.prop_ExpiryDate_Max | date: "%Y-%m-%dT%H:%M"}}">

Searching for a minimum release date will return all items with a release date newer (or the same as) the query date. And likewise searching for a maximum expiry date will return all items with an expiry date older (or the same as) the query date.

Programmatically Search (without a form)

There may be times when you require the search results for a module based on constructed data, other than that of a user’s input into a search form.

You can achieve this with the use of the searchScope parameter on the module’s component tag (see the Ultimate Migration Guide (Step by Step) component documentation for technical details).

This parameter allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid constructed) values without the use of a search form.

The search queries are similar to that used in the above form based search method, but use JSON syntax for their construction.

Below is an example of a constructed searchScope configured component tag, with min/max release date search, keywords and multiple tags query:

{% component type: "module", source: "Banner", layout: "List", searchScope: "{'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2']}" %}

The search logic combines all field queries with an AND operator, so items will be returned only if they include ALL the queries entered.

Banner Group module

View full article

This module component fetches data relating to Banner Groups.

{% component type: "module", source: "Banner Group", layout: "List" %}

Parameters and Options

Parameter
Values
Required
Description
type
module (default)
module_of_member

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
Banner Group (default)
The entity/alias name or ID that the data is to be sourced from.
layout
List (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

filterBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to filter by. If empty or not present, no filtering will be used.

Remove spaces from custom property names here.

filterValue
<your value>

Your specific value to filter by, eg: name, id, number, date, etc.
Liquid variables can be used here also. If present but no value set, no items will be returned.
sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Displays the available items in a random order.

If used in conjunction with sortBy, that sorting criteria will be applied to the randomly retrieved results. So, if retrieving all, or most, of the items they will not appear to be random since they will then be sorted back into a logical order. To overcome this, set the sortBy parameter to 'enabled' (or another unused property) as this will not provide any viable sorting criteria* and the items will not be sorted from their initial random order.
* Unless there are weighted items, which will always override the random option.

If this param's value is 'true' - pagination will not be shown.
limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no items are returned by the Component. The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

isSearchResult
false (default)
true

Allows search parameters in the URL to override the components output. Therefore, this parameter can be used to output module specific search results from a submitted search form.

Likewise, Tag, Category, and Archive components can be used in conjunction with this parameter for filtering the module's output.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

Any value other than true, (including an empty value), will disable the search functionality and the component will output its regular data.

searchScope
eg:
{'prop_ParentId':'1234', 'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2'], 'page':'2'}

Allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid) values without the use of a search form.

Added search parameters will override any corresponding parameters otherwise configured on the component. If no search parameters are present, searchScope will be ignored.

This value supports Liquid and can therefore be constructed with Liquid data/variables.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example has 2 sample items (Banner Groups), but is otherwise the default structure you will get from this Component.

{
  "Params": {
    "source": "Banner Group",
    "layout": "",
    "type": "module",
    "collectionvariable": "allBanners"
  },
  "Pagination": {
    "CurrentPage": 1,
    "ItemsPerPage": 10,
    "NumberOfPages": 1,
    "TotalItemsCount": 2
  },
  "Parent": {
    "Id": 2146,
    "Name": "module (Banner Group)",
    "Url": "/component-types/module-banner-group",
    "Url_List": [
      "/component-types/module-banner-group"
    ],
    "UrlSlug": "module-banner-group",
    "ParentId": 2127,
    "ParentId_List": [
      2127
    ],
    "ParentName": "Liquid Components",
    "ParentUrl": "/component-types",
    "TemplateName": "Docs Template",
    "Module_Alias": "DocumentationPost",
    "Module_ID": 1870,
    "Enabled": true,
    "ReleaseDate": "2018-09-04T23:00:00",
    "ExpiryDate": "2099-12-09T00:00:00",
    "SiteSearchKeywords": [],
    "Description": "<p>This module component fetches data relating to Banner Groups.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n{% component source: \"Banner Group\", layout: "", type: \"module\", collectionVariable: \"allBanners\" %}\r\n<p>The below example has 2 sample <code>items</code> (Banner Groups), but is otherwise the default structure you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{allBanners}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>This data is accessible in two main ways:</p>\r\n\r\n<p>1. Using Liquid in the specified Layout via the <code>this</code> object.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>2. Directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"allBanners\" to list all \"Banner Groups\" across the site:</p>\r\n<p class=\"notice-note\">Here we suppress any Layout from rendering by setting <code>layout: \"\"</code> as an empty attribute.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the item names in a list, giving us:</em></p>\r\n\r\n<ul>\r\n    \r\n        <li>DEMO Custom Banner</li>\r\n    \r\n        <li>DEMO Standard Banner</li>\r\n    \r\n</ul>\r\n<br>\r\n<p><em>The code:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value <code>DEMO Standard Banner</code></em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_counter\" %}\r\n</section>\r\n",
    "Weighting": 960,
    "DisableForSiteSearch": false,
    "CreatedByMemberId": "0",
    "ItemCategories": [],
    "ItemCategoryIdList": [],
    "ItemTags": [
      "Banners"
    ],
    "Author": 0,
    "Author_Name": "",
    "Author_Url": "",
    "Item_Rating": 0,
    "Active": true,
    "IgnoreUpdates": true,
    "UpdatesLog": "<ul><li>27-Oct-2020 | 5.6.0 | Added 'ignoreWeighting' parameter</li><li>'module_of_member' parameter details added.</li></ul>",
    "ExternalResources": null,
    "AdditionalRelatedArticle": 0,
    "AdditionalRelatedArticle2": 0,
    "Authors": "2418",
    "ShowPageForSearchEngine": true,
    "MetaTitle": "",
    "SEOTitle": "",
    "MetaDescription": "",
    "CanonicalLink": "",
    "SocialMetaTags": "",
    "SeoPriority": 0.0,
    "EnableAMP": false,
    "AMPContent": "",
    "OpenGraphProperties": {
      "title": null,
      "type": null,
      "url": null,
      "locale": null,
      "image": null
    },
    "ExternalId": 0,
    "Params": {
      "source": "Documentation Post",
      "layout": "Body Detail",
      "filterby": "id",
      "filtervalue": "2146",
      "limit": "1",
      "type": "snippet",
      "alias": "section_output",
      "data": "\r\n{% component type: \"module\", source: \"Banner Group\", layout: \"List\" %}\r\n",
      "lang": "liquid",
      "name": "SECTION Output",
      "content": "<section id=\"secOutput\">\n    <h2>Liquid Output</h2>",
      "enabled": true,
      "required": "true",
      "values": "List <em>(default)</em><br>&lt;Your Layout name&gt;"
    }
  },
  "Items": [
    {
      "Id": 2293,
      "Name": "DEMO Custom Banner",
      "Url": "/demo-custom-banner",
      "Url_List": [
        "/demo-custom-banner"
      ],
      "UrlSlug": "demo-custom-banner",
      "ParentId": 1546,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "BannerGroup",
      "Module_ID": 1546,
      "Enabled": true,
      "ReleaseDate": "2018-12-14T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>Custom Banner Description...</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2277,
      "Name": "DEMO Standard Banner",
      "Url": "/demo-standard-banner",
      "Url_List": [
        "/demo-standard-banner"
      ],
      "UrlSlug": "demo-standard-banner",
      "ParentId": 1546,
      "ParentId_List": [
        -1
      ],
      "ParentName": "",
      "ParentUrl": "",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "BannerGroup",
      "Module_ID": 1546,
      "Enabled": true,
      "ReleaseDate": "2018-11-25T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "SiteSearchKeywords": [],
      "Description": "<p>Description text...</p>",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    }
  ]
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is accessible in two main ways:

1. Using Liquid in the specified Layout via the this object.

{{this['name']}}

2. Directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "allBanners" to list all "Banner Groups" across the site:

Here we suppress any Layout from rendering by setting layout: "" as an empty attribute.

{% component type: "module", source: "Banner Group", layout: "", collectionVariable: "allBanners" %}

Looping through the collection to render all the item names in a list, giving us:

  • DEMO Custom Banner
  • DEMO Standard Banner

The code:

<ul>
    {% for i in allBanners.items %}
        <li>{{i['name']}}</li>
    {% endfor %}
</ul>

Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value DEMO Standard Banner

{{allBanners.items[1]['name']}}

Counter

Along with the data output above, there is also a special liquid tag available {{counter}} which increments for each item. This tag is only available within Layouts when object: "item" is used in the Component tag.

Banner Item module

View full article

This module component fetches data relating to Banner items.

{% component type: "module", source: "Banner", layout: "List" %}

Parameters and Options

Parameter
Values
Required
Description
type
module (default)
module_of_member

This is the name of the entity that needs to be used for the component retrieving function.

module is the standard retrieving function to retrieve all items.

module_of_member retrieves only those items 'Added by' the currently logged in user (identified by the CreatedByMemberId property in the module items Liquid data).

The 'Added by' System Property will only be available where the modules settings have 'Allow Add New Items' turned on under the 'Site User Permissions'.

source
Banner (default)
The entity/alias name or ID that the data is to be sourced from.
layout
List (default)
<Your Layout name>

The layout name you want to use for rendering the component. The layout name is referenced from the available Layouts of the source specified.

While this parameter is required to render your Layout markup, if the parameter is blank, has an incorrectly referenced Layout, or is removed altogether then the component will still output the modules item data to a Liquid collection which can be accessed via the collectionVariable parameter.

filterBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to filter by. If empty or not present, no filtering will be used.

Remove spaces from custom property names here.

filterValue
<your value>

Your specific value to filter by, eg: name, id, number, date, etc.
Liquid variables can be used here also. If present but no value set, no items will be returned.
sortBy
id
parentid
name
weighting
url
urlslug
releasedate
expirydate
LastUpdatedDate
Author
ItemCategories
ItemTags
<CustomPropertyName>
...and any other top level properties available for the module

The name of the property to sort by. If empty or not present, alpha/numeric sorting will be used.

Remove spaces from custom property names here.

sortOrder
ASC (default)
DESC

ASC sorts the items in ascending order while DESC sorts in descending order (based on alpha/numeric or date sorting).
If empty or not present, alpha/numeric sorting will be used.
ignoreWeighting
false (default)
true

Enables/disables sorting items first by their weighting values. When false items will sort by their weighting values first, followed by any sortBy properties (or the default alpha/numeric sorting if sortBy is empty or not present). If true item weightings will be ignored and sorting will only be applied via sortBy or default sorting.
random
false (default)
true

Displays the available items in a random order.

If used in conjunction with sortBy, that sorting criteria will be applied to the randomly retrieved results. So, if retrieving all, or most, of the items they will not appear to be random since they will then be sorted back into a logical order. To overcome this, set the sortBy parameter to 'enabled' (or another unused property) as this will not provide any viable sorting criteria* and the items will not be sorted from their initial random order.
* Unless there are weighted items, which will always override the random option.

If this param's value is 'true' - pagination will not be shown.
limit
10 (default)
<number>

The maximum number of items returned. If displayPagination is enabled this determines the maximum number of items per page.
enablePagination
true (default)
false

Enables/disables pagination for the component.

This is useful for avoiding pagniation affects for a specific component when multiple components of the same module are output on the same page and do use pagination.

displayPagination
false (default)
true

Displays pagination if there are more items available than the limit set.
emptyMessage
<Your custom message>

Custom content that is rendered if no items are returned by the Component. The default is no content.
Liquid variables are supported here, although Liquid logic tags and HTML are not.

If using Liquid variables with filters added, be sure to change any double quotes to single quotes. For eg:
emptyMessage: “{{ myVariable | prepend: 'Error: ' }}”

To use HTML in your empty message, first capture it using a Liquid capture, then insert the capture variable into the emptyMessage parameter.

object
item (default)
collection

Determines the method for Liquid rendering.
item returns each item iteratively, one after another, for output (generally, output to a container element with no need for looping through the data).
collection returns all items as one collection for output (your container element and looping logic would be handled in the Components Layout).
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

isSearchResult
false (default)
true

Allows search parameters in the URL to override the components output. Therefore, this parameter can be used to output module specific search results from a submitted search form.

Likewise, Tag, Category, and Archive components can be used in conjunction with this parameter for filtering the module's output.

URL search parameters will override any corresponding parameters in the component. If no search parameters are present in the URL, isSearchResult will be ignored.

Any value other than true, (including an empty value), will disable the search functionality and the component will output its regular data.

searchScope
eg:
{'prop_ParentId':'1234', 'prop_ReleaseDate_Min':'2018-07-01', 'prop_ReleaseDate_Max':'2018-07-31', 'prop_KeyWords':'Your Keywords', 'prop_ItemTags':['tag1','tag2'], 'page':'2'}

Allows a search on the module without search parameters needed in the URL. Instead, search parameters are added to the value of this parameter. Therefore, this parameter can be used to output module specific search results from hard-coded (or Liquid) values without the use of a search form.

Added search parameters will override any corresponding parameters otherwise configured on the component. If no search parameters are present, searchScope will be ignored.

This value supports Liquid and can therefore be constructed with Liquid data/variables.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Also, see here for a tutorial on using Custom Paramters.

Liquid Output

The below example has 2 sample items but is otherwise the default structure you will get from this Component.

{
  "Params": {
    "source": "Banner",
    "layout": "",
    "type": "module",
    "collectionvariable": "allBanners"
  },
  "Pagination": {
    "CurrentPage": 1,
    "ItemsPerPage": 10,
    "NumberOfPages": 1,
    "TotalItemsCount": 2
  },
  "Parent": {
    "Id": 2147,
    "Name": "module (Banner)",
    "Url": "/component-types/module-banner",
    "Url_List": [
      "/component-types/module-banner"
    ],
    "UrlSlug": "module-banner",
    "ParentId": 2127,
    "ParentId_List": [
      2127
    ],
    "ParentName": "Liquid Components",
    "ParentUrl": "/component-types",
    "TemplateName": "Docs Template",
    "Module_Alias": "DocumentationPost",
    "Module_ID": 1870,
    "Enabled": true,
    "ReleaseDate": "2018-09-04T23:00:00",
    "ExpiryDate": "2099-12-09T00:00:00",
    "SiteSearchKeywords": [],
    "Description": "<p>This module component fetches data relating to Banner items.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n{% component source: \"Banner\", layout: "", type: \"module\", collectionVariable: \"allBanners\" %}\r\n<p>The below example has 2 sample <code>items</code> but is otherwise the default structure you will get from this Component.</p>\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{allBanners}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>This data is accessible in two main ways:</p>\r\n\r\n<p>1. Using Liquid in the specified Layout via the <code>this</code> object.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p>2. Directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"allBanners\" to list all \"Banner items\" across the site:</p>\r\n<p class=\"notice-note\">Here we suppress any Layout from rendering by setting <code>layout: \"\"</code> as an empty attribute.</p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Looping through the collection to render all the item names in a list, giving us:</em></p>\r\n\r\n<ul>\r\n    \r\n        <li>DEMO HTML banner item</li>\r\n    \r\n        <li>Sample Banner Item</li>\r\n    \r\n</ul>\r\n<br>\r\n<p><em>The code:</em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the second item (zero based index), which in our example would render the value <code>Sample Banner Item</code></em></p>\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n<section id=\"secListFiltered\">\r\n    <h3>List Banners items from a specific Banner Group</h3>\r\n<p>If you have more than one Banner Group on your site the above examples will list Banners from all Banner Groups as one single collection. However, you may also want to list all Banner items from only the Banner Group they belong to (their \"parent\" Banner Group).</p>\r\n<p>To do this we add the <code>filterBy</code> and <code>filterValue</code> attributes to the Component tag using the Banner Group's ID to get the relevant items.</p>\r\n<p class=\"notice-tip\">You can use the Component Manager to correctly configure the Component tag and ID value. Alternatively, to obtain the Banner Group's ID manually from the admin, go to a Banner's list view (where you can see all of the Banner items) and note the number in the browser address bar shown after the <code>parentID=</code> parameter.</p>\r\n</section>\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_counter\" %}\r\n</section>\r\n",
    "Weighting": 959,
    "DisableForSiteSearch": false,
    "CreatedByMemberId": "0",
    "ItemCategories": [],
    "ItemCategoryIdList": [],
    "ItemTags": [
      "Banners"
    ],
    "Author": 0,
    "Author_Name": "",
    "Author_Url": "",
    "Item_Rating": 0,
    "Active": true,
    "IgnoreUpdates": true,
    "UpdatesLog": "<ul><li>27-Oct-2020 | 5.6.0 | Added 'ignoreWeighting' parameter</li><li>'module_of_member' parameter details added.</li></ul>",
    "ExternalResources": null,
    "AdditionalRelatedArticle": 0,
    "AdditionalRelatedArticle2": 0,
    "Authors": "2418",
    "ShowPageForSearchEngine": true,
    "MetaTitle": "",
    "SEOTitle": "",
    "MetaDescription": "",
    "CanonicalLink": "",
    "SocialMetaTags": "",
    "SeoPriority": 0.0,
    "EnableAMP": false,
    "AMPContent": "",
    "OpenGraphProperties": {
      "title": null,
      "type": null,
      "url": null,
      "locale": null,
      "image": null
    },
    "ExternalId": 0,
    "Params": {
      "source": "Documentation Post",
      "layout": "Body Detail",
      "filterby": "id",
      "filtervalue": "2147",
      "limit": "1",
      "type": "snippet",
      "alias": "section_output",
      "data": "\r\n{% component type: \"module\", source: \"Banner\", layout: \"List\" %}\r\n",
      "lang": "liquid",
      "name": "SECTION Output",
      "content": "<section id=\"secOutput\">\n    <h2>Liquid Output</h2>",
      "enabled": true,
      "required": "true",
      "values": "List <em>(default)</em><br>&lt;Your Layout name&gt;"
    }
  },
  "Items": [
    {
      "Id": 2278,
      "Name": "DEMO HTML banner item",
      "Url": "/demo-standard-banner/demo-html-banner-item",
      "Url_List": [
        "/demo-standard-banner/demo-html-banner-item"
      ],
      "UrlSlug": "demo-html-banner-item",
      "ParentId": 2277,
      "ParentId_List": [
        2277
      ],
      "ParentName": "DEMO Standard Banner",
      "ParentUrl": "/demo-standard-banner",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "Banner",
      "Module_ID": 1552,
      "Enabled": true,
      "ReleaseDate": "2018-11-25T18:00:00",
      "ExpiryDate": "2099-12-11T07:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    },
    {
      "Id": 2294,
      "Name": "Sample Banner Item",
      "Url": "/demo-custom-banner/sample-banner-item",
      "Url_List": [
        "/demo-custom-banner/sample-banner-item"
      ],
      "UrlSlug": "sample-banner-item",
      "ParentId": 2293,
      "ParentId_List": [
        2293
      ],
      "ParentName": "DEMO Custom Banner",
      "ParentUrl": "/demo-custom-banner",
      "TemplateName": "DEMO Companion Site",
      "Module_Alias": "Banner",
      "Module_ID": 1552,
      "Enabled": true,
      "ReleaseDate": "2018-12-15T18:00:00",
      "ExpiryDate": "2099-12-11T07:00:00",
      "SiteSearchKeywords": [],
      "Description": "",
      "Weighting": 0,
      "DisableForSiteSearch": false,
      "CreatedByMemberId": "0",
      "ItemCategories": [],
      "ItemCategoryIdList": [],
      "ItemTags": [],
      "Author": 0,
      "Author_Name": "",
      "Author_Url": "",
      "Item_Rating": 0,
      "ShowPageForSearchEngine": false,
      "MetaTitle": "",
      "SEOTitle": "",
      "MetaDescription": "",
      "CanonicalLink": "",
      "SocialMetaTags": "",
      "SeoPriority": 0.0,
      "EnableAMP": false,
      "AMPContent": "",
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "ExternalId": 0,
      "Params": {}
    }
  ]
}