Assets

 Last Edited: Jul 02, 2019

We recommend that the first thing you do once you have created a new site is import your assets. This means that when you import your WebApps and WebApp Layouts later on, the images can easily be mapped.

Preparing Your Assets Folder:

Many sites have images and other assets stored in multiple file locations. Even if when building the site your developers stored all the files in a structured way, clients often don’t realise this, and upload new assets in other locations over time. We’ll need to tidy this up a bit before importing to the Siteglide Platform.

There are four folders automatically created for you on a new site: Images, Documents, CSS & JS. You can access each of these within File Manager. Therefore we want to match this when cleaning up our assets.

If you have a more complex bespoke project that absolutely requires files to be stored on the root, then get in touch and let us know. We’ll be happy to assist.

Uploading Your Assets

File Manager currently allows you to bulk upload up to around 100 files at a time. you can create folders and upload assets within each as you go.

If you have a very large number of assets to upload which makes the 100 file per-go to slow for you, get in touch and we can bulk upload images more quickly on your behalf.

Outputting your Assets

Assets are stored and accessed a bit differently on our platform compared to BC. We do this to receive various benefits, check out our doc on Assets to find out more.

Create A Site

 Last Edited: Jul 02, 2019

When you create a new site, there are a few key options that you'll need to consider, depending on the type of migration you are doing.

Like-For-Like

If you are doing a like-for-like migration you won't need Design System included in your site, as you will use the existing assets and content on your site.

Make sure "Design System" is unticked in the site creation modal.

Design System

If you are going to improve your site layouts to modernise them and make them more responsive, you'll want to include Design System when you create your site.

Make sure "Design System" is ticked in the site creation modal. This will automatically include bootstrap 4 in your templates. When you install Siteglide Modules, such as Slider, Menu and more, you will receive Design System Layouts with them.

Bespoke

If you are going to do a fully bespoke rebuild of your site, there are a couple of routes you can take.

You may want to include Design System in your site so you can easily make use of Bootstrap 4 and have access to the Design System Layouts.

You can also choose to start with a blank site, not include the Design System and build the site just using your own libraries.


For more information on how to create a site, see our Creating a new Site doc.

Forms

 Last Edited: Jul 02, 2019

To build a new Form, head over to Forms within CMS in the left-hand menu of your Admin and click the "Add New Form" button.

You should add in each of the fields to match your BC form along with your Workflow and Autoresponder email Layouts.

Creating a Form will automatically generate a default Layout, which you can edit in Code Editor.

You will find a default detail layout stored within layouts/forms/form name/ and you should create a custom layout for the Form here. Right click on the Form folder to do this.

Copying over Layouts

Copy the HTML content of your Form layout from your BC site, and paste it into your custom form Layout in Code Editor.

Now you'll need to match up the Form fields with the Siteglide versions. You can use the "Insert field" dropdown along the top of Code Editor to automatically output the liquid for each field.

Example BC Layout:

<form action="/FormProcessv2.aspx?WebFormID=10090&amp;OID=13344326&amp;OTYPE=1&amp;EID=0&amp;CID=0" enctype="multipart/form-data" onsubmit="return checkWholeForm64170(this)" method="post" name="catwebformform64170"> <div class="row"> <div class="medium-6 columns"> <input id="FirstName" name="FirstName" placeholder="First name" type="text"> <input id="LastName" name="LastName" placeholder="Last name" type="text"> <input id="HomePhone" name="HomePhone" placeholder="Phone number" type="text"> <input placeholder="Email address" name="EmailAddress" id="EmailAddress" type="text"> </div> <div class="medium-6 columns"> <textarea placeholder="Your Message" style="height: 190px;" id="CAT_Custom_869" name="CAT_Custom_869"></textarea> <input value="Submit" id="catwebformbutton" type="submit"> </div> <div class="columns medium-12 consent" style="text-align: center; margin-top: 3%;"> <p>By clicking submit, you consent to our <a style="color: #369;" href="/privacy-policy">privacy policy</a>.</p> </div> </div> <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script> <script type="text/javascript"> //&<![CDATA[ var submitcount64170 = 0; function checkWholeForm64170(theForm) { var why = ""; if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number"); if (theForm.CellPhone) why += isEmpty(theForm.CellPhone.value, "Cell Phone Number"); if (why != "") { alert(why); return false; } if (submitcount64170 == 0) { submitcount64170++; theForm.submit(); return false; } else { alert("Form submission is in progress."); return false; } } //]]&> </script> </form>

Example Siteglide Layout:

{% form -%} <div class="row"> <div class="medium-6 columns"> <div class="row mt-4"> <div class="col"> <label for="name">Name</label> <input class="form-control required" name="{{ form_builder.fields.properties.name.name }}" id="name" type="text"> </div> </div> <div class="row mt-4 input_text"> <div class="col"> <label for="form_field_1_1">Phone number</label> <input class="form-control required" name="{{ form_builder.fields.properties.form_field_1_1.name }}" type="text"> </div> </div> <div class="row mt-4"> <div class="col"> <label for="email">Email Address</label> <input class="form-control required" name="{{ form_builder.fields.properties.email.name }}" id="email" type="email"> </div> </div> </div> <div class="medium-6 columns"> <div class="row mt-4 textarea"> <div class="col"> <label for="form_field_1_3">Your Message</label> <textarea class="form-control required" name="{{ form_builder.fields.properties.form_field_1_3.name }}" rows="5" cols="30"></textarea> </div> </div> <div class="row mt-4"> <div class="col"> <button class="btn buttonAccent" onClick="formSubmit(this,'form_1')">Submit <i class="fas fa-spinner fa-spin no-spin"></i></button> </div> </div> </div> </div> <input class="form-control upload_dir" value="{{_upload_dir}}" type="hidden"> {% endform -%}

If you have any questions while migrating your Form Layouts, get in touch via our Intercom in the bottom right-hand corner of your Admin and we'll be happy to help.

Menus

 Last Edited: Jul 02, 2019

To build a new Menu, head over to Menu Builder within Modules in the left-hand menu of your Admin and click the "Add Menu" button.

You'll see two columns when building your Menu. On the left, you have a list of existing pages on your site. Click on one of these to add it to your Menu and you'll see it appears in the right-hand column. You can "drag and drop" items in the right-hand column to reorder and create-sub menu-items (we'll be improving the usability of this soon).

You can fully edit any items in your Menu by clicking on the link icon. From the edit modal, you can edit the Name and URL of the item as all as add custom classes and define a target type if required.

Menu builder does not yet display existing WebApp items, we'll add that soon! For now, you can add any page to your menu, and customise its name and URL to point to any webapp item you'd like. The same can be done for external links.

Copying over Layouts

BC used three Layouts for Menus: container.html, group.html and childitem.html.

Siteglide uses just two layouts: wrapper.liquid and item.liquid.

wrapper.liquid should contain your BC container.html and paste your group.html layout within this.

item.liquid should contain the code from your BC childitem.html Layout.

Check out our doc on Menu Builder for more information on customising Layouts.

Example of BC Layouts:

Container:

<div id="myMenu1">{tag_menugroup}</div>

Group:

<ul>{tag_menuchilditem}</ul>

Childitem:

<li {tag_menuitemidname_withid} {tag_menuitemcssclass_withclass}><a href="{tag_menuitemurl}">{tag_menuitemlabel}</a>{tag_menugroup}</li>

Example of Siteglide Layouts:

Wrapper:

<div id="myMenu1"><ul>{% include 'modules/siteglide_menu/get/get_items', item_layout: 'item' -%}</ul></div>

Item:

{% comment %} If this item has children, output the item, and then go get its children {% endcomment %} {% if this['is_parent'] -%} <li class="{{this['link_class']}}"> <a href="{{this['link_url']}}" target="{{this['link_target']}}">{{this['link_name']}}</a> {% comment %} Wrap children in <ul>, set the next level, and then get the children {% endcomment %} <ul class="dropdown"> {% assign _next_level = _level | plus: 1 -%} {% include 'modules/siteglide_menu/get/get_items', level: _next_level, parent_id: this['forced_id'], item_layout: 'item' -%} </ul> </li> {% comment %} Else just output the item by itself {% endcomment %} {% else -%} <li class="{{this['link_class']}}"> <a target="{{this['link_target']}}" href="{{this['link_url']}}">{{this['link_name']}}</a> </li> {% endif -%}

If you have any questions while migrating your Menu Layouts, get in touch via our Intercom in the bottom right-hand corner of your Admin and we'll be happy to help.

Overview

 Last Edited: Jul 02, 2019

When you start talking about migrating a site out of BC, it can sound like a lot of work, there are many factors to consider. We've been working hard to provide you with tools to make migrations faster to achieve.

You can import all of the following with the click of a button to Siteglide:

  • Full WebApp Import - all webapp structure and WebApp item database, including maintaining datasources & categories.

  • URL Redirects - Import a csv file

  • WebApp items - import csv files to populate your WebApps

One click import features we're working on:

  • Full Assets Folder - one click import a zip of all your assets

  • Pages - Including SEO fields

  • CRM - Contacts

How do you get your site data out of BC?

Like-For-Like

1. Export your BC site using BCExporter

2. Create a fresh site on Siteglide

3. Import your assets

4. Copy your page Templates

5. One click import your WebApps and Categories

6. Copy your page content

7. Copy your WebApp List & Detail Layouts

8. Build your menus

9. Create your Forms & copy layouts

10. Import your URL redirects

11. Put your site live

Design System

1. Buy BCExporter ZIP

2. Pick Layouts in Figma

3. Customise Design

4. Create Site in Portal

5. Install Required Modules

6. Bulk Upload Images*

7. 1 Click WebApp Import

8. 1 Click Category Import

9. Create Pages/Content

10. Customise Layouts

11. URL Redirect Import

12. Simple Go Live Process

Bespoke

1. Buy BCExporter ZIP

2. Create Site in Portal

3. Install Template/Grid

4. Bulk Upload Images*

5. 1 Click WebApp Import

6. 1 Click Category Import

7. Create Pages/Content

8. Create Custom Code

9. Create Layouts

10. URL Redirect Import

11. Simple Go Live Process

Pages

 Last Edited: Jul 02, 2019

To create a new page, click on "Pages" within CMS on the left-hand menu. From here, click "Add new page".

When moving your pages over from BC to Siteglide, you'll want to copy all of the content within the body tag, the template you set up in Siteglide earlier will automatically include the head, header and footer for you.

If you have manually included other scripts on your pages, we suggest you move these into the respective head and headers.

Here's an example video of copying your page content from BC to Siteglide and replacing WebApps liquid using Toolbox after you have imported your WebApps:

Site Go-Live

 Last Edited: Jul 02, 2019

Once you've finished migrating your site, you'll want to put it live!

Check out our Go-Live doc to find out what's involved.

Templates

 Last Edited: Jul 02, 2019

When setting up your page templates, it’s easiest to start with thing’s you’ll to want to include first.

Scripts

Use Code Snippets in Site Settings to create a file to store the scripts you’ll call in your page heads, you can call it something like “Head” or “Head scripts”. You’ll be able to include this in each of your templates, saving you writing it each time.

If you have previously written them manually in each template, you can, of course, continue to do this if you prefer.

Example Content:

<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="{{ 'js/slick.min.js' | asset_url }}"></script> <script src="{{ 'js/slick.js' | asset_url }}"></script> <script src="{{ 'js/scripts.js' | asset_url }}"></script> <script src="{{ 'js/foundation.min.js' | asset_url }}"></script> <script> {%- include 'code_snippet', id: '3', name: 'bc menu js' -%} {%- include 'code_snippet', id: '4', name: 'bc default menu js' -%} </script>

Header

Use Headers in Site Settings to create a file that contains the content of your page header. Usually, this includes a company logo and menu.

Footer

Use Footers in Site Settings to create a file that contains the content of your page footer. Usually, this contains some key information about the company and a basic menu.

Template

Use Templates in Site Settings to create a page template that wraps around your pages content. Usually, this contains a head, header and footer along with some basic HTML to wrap your inner page content.

<head> {%- include 'code_snippet', id: '1', name: 'css' -%} {%- include 'code_snippet', id: '2', name: 'js' -%} </head> <body> {%- include 'header', id: '1', name: 'Header' -%} {{ content_for_layout }} {%- include 'footer', id: '1', name: 'Footer' -%} </body>

When editing your Template, you can use Toolbox on the right-hand-side to easily output the liquid required for your Code Snippets, Header & Footer.

URL Redirects

 Last Edited: Jul 02, 2019

To import your URL redirects, head over to URL Redirects within CMS in the left-hand menu of your Admin and click "Import". Switch to the "Start Import" tab and click "Upload CSV" to upload your import file included in your BC Export.

WebApp Layouts

 Last Edited: Jul 02, 2019

Once you have imported or created your WebApps, you can access WebApp layouts using Code Editor, which is within Site Settings in the left-hand Menu.

You will find a default detail layout stored within layouts/webapps/webapp name/detail/ and you should create any custom detail layouts for the WebApp here. Right click on the detail folder to do this.

You will find a default list layout stored within layouts/webapps/webapp name/list/ and you should create any custom list layouts for the WebApp here. Right click on the list folder to do this.

Once you have saved custom Layouts in these folders, Toolbox will automatically find them and off you the option of selecting them when outputting WebApps on a page.

Copying over Layouts

Copy the content of a WebApp Layout from your BC site, create the layout within the correct detail or list folder and paste it in. Now all that's left to do is update the liquid to match the Siteglide fields. You can use the "Insert field" dropdown along the top of Code Editor to automatically output the liquid for each field.

Example BC Layout:

<div class="medium-6 columns end portfolioList"> <div class="ministry-box box-inner"> <div class="row"> <div class="medium-12 columns"> <a href="{tag_itemurl_withhost}"> <img src="{tag_list - image_value}"> </a> </div> <div class="medium-12 columns portfolioListText"> <h3>{tag_name}</h3> <span class="portfolioListDescription">{tag_list - description}</span> <p class="portfolioListButton"> <a href="{tag_itemurl_withhost}" class="button tiny">{tag_link text}</a> </p> </div> </div> </div> </div>

Example Siteglide Layout:

<div class="medium-6 columns end portfolioList"> <div class="ministry-box box-inner"> <div class="row"> <div class="medium-12 columns"> <a href="{{this['full_slug']}}"> <img src="{{this['List - Image'] | asset_url}}" alt="{{item.properties.name}}" /> </a> </div> <div class="medium-12 columns portfolioListText"> <h3>{{this['name']}}</h3> <span class="portfolioListDescription">{{this['List - Description']}}</span> <p class="portfolioListButton"> <a href="{{this['slug']}}" class="button tiny">{{this['Link Text']}}</a> </p> </div> </div> </div> </div>

If you have any questions, get in touch via our Intercom in the bottom right-hand corner of your Admin and we'll be happy to help.

WebApps

 Last Edited: Jul 02, 2019

Using BCExporter, you can import all of your WebApps, WebApp Items and categories at the click of a button. All categories and data sources will remain intact.

To initiate an import, click the “+ Create a WebApp” button within “WebApps” on the left-hand menu. Next, click on the “Import WebApp” tab and upload your zipped folder.

The import process works in the background. Once it’s complete, you’ll be notified by email. Typically this takes a few minutes, though larger imports may take longer.

WebApps without Categories

Your BC Export contains a folder called “webapps”, zip this folder up and import the zipped version.

WebApps with Categories

Your BC Export contains a file called “categories.json” move this into the “webapps” folder, zip this folder up and import the zipped version.

CSV Import/Export

It is possible that your image file paths won’t quite match up with the assets, as we’ve moved them all to be within “images/“ in File Manager when we imported the assets. If you need to edit them, you can do so in bulk by exporting all items of a WebApp, editing the file and re-importing your updated .csv file. File paths on our platform are also case sensitive.

To export items of a WebApp, click on the WebApp on the left-hand menu so that you can see the list of all items. Now click on the “Export” button above the list.

When editing your csv export, please do not reorder or rename any of the columns. Only update the item ID’s if you intend to create a duplicate item.

Once you’ve finished making your edits, export the file as a .csv file. To re-import it, head over to the WebApp once more and click the “Import” button above the list of items. From here, click into the “Start Import” tab and upload your file.