Northpass Templates

Use this to customize the User Experience of your school

In this repository we give you the access to base templates, which should be the starting point for your customizations. All templates are in the /templates directory. You can edit them but you can't add your own.

Liquid

At Northpass we use Liquid as a template language. Liquid was created by Shopify and is used in production by dozens of companies around the world. We use it to load dynamic content on the school website. In individual templates you can use variables that download data directly from the Northpass platform. Thanks to this you have the opportunity to create a completely unique User Experience in your school.

We encourage you to read the Liquid documentation to learn more about the syntax and possible use cases.

Root and partial templates

The templates available in our application are divided into two types:

root templates
partial templates

Root template occurs only once for pages in the application for which we enable customizations, e.g. my_content, course_index or course_details.

Partial templates are smaller fragments that can be included in root templates, their name always begins with the prefix _.

Thanks to this division we are able for instance to customize a footer once and use it in all other templates.

This is the example of the root template and its partial templates:

course_index
    ├── _head
    ├── _header
    ├── _footer
    ├── _catalog_search_form
    ├── _course

⚠️ Important ⚠️

Once you edit your templates we won’t support automatic updates with additional features that Northpass makes to the base templates. You will need to merge the changes into your templates directory. Additionally, we will not be able to support the look and feel of your website.

Quick start

1. Clone the repository

git clone https://github.com/SchoolKeep/schoolkeep-templates.git

2. Install text editor

If you don't have any text editor installed, you should now choose one. Below is a list of a few that are very popular and you can certainly trust them.

VSCode	Atom	Sublime

3. Modify base templates

Open the directory with the cloned repository in the text editor of your choice and you can get started! 🚀🚀🚀

4. Upload modified templates to the Northpass application

After you make changes to selected base templates, you should upload them to the application. Go to the Design tab in the administrator view and then to School Website Styling.

Click the Upload Templates button and add the templates you have chosen, then confirm the changes with the Save button.

Templates

Path	Available Templates
`/` (available when Website and Catalog is active)	homepage _footer _head _header
Screenshot

⬆️

Path	Available Templates
`/learners/sign_in`	login
Screenshot

❗️ Important note ❗️ The login page uses an HTML form to submit the learner's credentials. Please make sure you're not overwriting its internals:

the action and method attributes on the <form> tag
form_authenticity_token method inside the <form> tag
the name attribute on the <input> tags

⬆️

Path	Available Templates
`/my_dashboard`	my_content _course _filters _footer _head _header _learning_path _learning_path_filters _my_content_header _my_paths
Screenshot

⬆️

Path	Available Templates
`/learning_paths`	learning_paths_index _footer _head _header _learning_path
Screenshot

⬆️

Path	Available Templates
`/learning_paths/:id` (available when Search + Discovery is active)	learning_path_details _footer _head _header
Screenshot

⬆️

Path	Available Templates
`/learning_paths/:id/cover`	custom_javascript_v3 learning_path_cover
Screenshot

⬆️

Path	Available Templates
`/courses/:id/cover` `/learning_paths/:lp_id/courses/:c_id/cover`	course_cover custom_javascript_v3 (when on Learning Experience V3) custom_javascript_v2 (when on Learning Experience V2)
Screenshot

⬆️

Path	Available Templates
`Learning Experience V3`	custom_javascript_v3
Screenshot

⬆️

Path	Available Templates
`Learning Experience V2`	custom_javascript_v2
Screenshot

⬆️

Path	Available Templates
`/account/edit`	_footer _head _header
Screenshot

⬆️

Path	Available Templates
`/training_events` (available when Instructor-Led Training is active)	discover_events _footer _head _header _training_session _training_event
Screenshot

⬆️

Path	Available Templates
`/training_sessions/:id` (available when Instructor-Led Training is active)	training_session_show _footer _head _header
Screenshot

⬆️

Path	Available Templates
`/search` (available when Search + Discovery is active)	_filters _footer _head _header _search_form
Screenshot

⬆️

Path	Available Templates
`/catalog` (available when Website and Catalog is active)	course_index _footer _head _header _catalog_search_form _course
Screenshot

⬆️

Path	Available Templates
`/catalog_search` (available when Search + Discovery is active)	_footer _head _header _catalog_search_form _catalog_filters
Screenshot

⬆️

Path	Available Templates
`/catalog/:id/:slug` (available when Website and Catalog is active)	course_details _footer _head _header _catalog_search_form
Screenshot

⬆️

Path	Available Templates
`/500`	server_error _footer _head _header
Screenshot

⬆️

Variables

Variables are one of the most useful functionalities when customizing the look of your school. Northpass provides a number of different variables in the available templates so that you can modify your school's appearance in a dynamic way.

Global

The following variables are exposed globally and can be used in all the templates:

By template

Below is a table with available variables broken down into individual templates. Unfortunately at the moment not all variables are available from any template so keep these restrictions in mind.

Template	Variables
learning_path_cover learning_path_details	learning_path
course_index	courses
course_cover course_details	course
homepage	homepage
_search_form _catalog_search_form	search_result
training_session_show	training_session
_training_session	session
_training_event	training_event

Definitions

Arrays

Some of the available variables in the templates are Arrays, so the following methods are available for them:

any?
each
empty?
size

⬆️ 🔼

`color_palette`

Methods:

button_color
button_font_color
button_hover_color
header_color
header_font_color
header_font_hover_color
learning_header_color
learning_header_font_color
learning_header_font_hover_color
learning_link_button_color
learning_progress_bar_color

⬆️ 🔼

`current_person`

Methods:

avatar_url
created_at
email
enrolled_in_course?

Example:

⚠️ It takes course from the current context ⚠️

{% for course in my_content.courses %}
    {% if current_person.enrolled_in_course? %} // course variable is implicitly used here
    {% endif %}
{% endfor %}

enrolled_in_learning_path?

Example:

⚠️ It takes learning path from the current context ⚠️

{% for learning_path in my_content.learning_paths %}
    {% if current_person.enrolled_in_learning_path? %} // learning_path variable is implicitly used here
    {% endif %}
{% endfor %}

filterable_catalog_categories
filterable_categories
filterable_learning_path_categories
first_name
groups
id
last_name
my_content_label
name
signed_in?
sso_uid
upcoming_registered_events
updated_at

⬆️ 🔼

`current_school`

Methods:

account_creation_enabled?
apps
created_at
disable_social_share?
filterable_categories
filtering_enabled?
has_custom_styles?
id
learning_paths_enabled?
logo_navigation_url
logo_url
my_content_label
name
public
request_access_enabled?
request_access_label
request_access_link
search_enabled?
show_powered_by_school_keep?
sso_enabled?
updated_at
uuid

⬆️ 🔼

`custom_templates`

Methods:

any?
each

⬆️ 🔼

`custom_template`

Available when using each method on custom_templates.

Methods:

created_at
fingerprint
name
updated_at

⬆️ 🔼

`my_content`

Methods:

courses
empty_learning_paths
headline
learning_paths?
learning_paths_headline
learning_paths_subheadline
learning_paths
subheadline

⬆️ 🔼

`routes`

Methods:

color_scheme_path
custom_styles_path
log_in_path
log_out_path
my_content_path
my_profile_path
school_website_catalog_path
school_website_catalog_search_path
school_website_search_path
schoolkeep_v3_styles_url
sign_up_path

⬆️ 🔼

`courses`

Methods:

any?
each

⬆️ 🔼

`course`

Available also when using each method on courses.

Methods:

about_label
buy_label
course_attempts_path
course_category_names
cover_path
created_at
details_path
discover_events_path
enrollment_url
featured_image_url
formatted_price
forum_path
full_description
go_to_label
has_forum?
has_outline
id
instructor_names
instructors_title
instructors
learner_can_retake?
list_image_url
name
new_order_path
outline_label
outline_path
payment_required?
progress_bar
progress_text
progress_title
progress
promo_video_embed
published_sections
register_for_events
retake_course
ribbon
short_description
show_events?
social_links
start_or_continue
superscirpt
updated_at
view_label

⬆️ 🔼

`footer_navigations`

Methods:

any?
each

⬆️ 🔼

`header_navigations`

Methods:

any?
each

⬆️ 🔼

`website_navigation`

Available when using each method on header_navigations or footer_navigations.

Methods:

created_at
external?
name
path
updated_at

⬆️ 🔼

`website_footer`

Methods:

created_at
school_customer_service_email
show_customer_service_email?
show_navigation_links?
show_social_media_links?
social_media_links
updated_at

⬆️ 🔼

`learning_paths`

Methods:

any?
each

⬆️ 🔼

`learning_path`

Available also when using each method on learning_paths

Methods:

about_label
cover_path
created_at
current_person_learning_path_item
description
details_path
enrollment_url
featured_image_url
first_uncompleted_cover_path
go_to_label
has_instructors?
has_progress?
id
instructor_names
instructors_title
instructors
items
learning_path_category_names
list_image_url
name
outline_label
progress_bar
progress_text
updated_at
view_label

⬆️ 🔼

`instructor`

Available when using each method on learning_path .instructors.

Methods:

bio
created_at
image_url
name
title
updated_at

⬆️ 🔼

`person_learning_path_item`

Available when using each method on learning_path .items.

Methods:

completed?
cover_path
created_at
locked?
name
optional?
progress_icon
training_event
type_icon
updated_at

⬆️ 🔼

`section`

Available when using each method on course .published_sections.

Methods:

activities
created_at
id
name
published_at
updated_at
will_be_published?

⬆️ 🔼

`activity`

Available when using each method on section .activities.

Methods:

completed?
created_at
id
list_class
locked?
milestone?
path
title
updated_at

⬆️ 🔼

`search_result`

Methods:

count

⬆️ 🔼

`homepage`

Methods:

artwork_url
created_at
featured_courses_headline
featured_courses_subheadline
headline
published_featured_courses
subheadline
updated_at

⬆️ 🔼

`training_events`

The list of training events. The object is type of Array and these methods can be used with it.

Each of them has access to methods from training_event.

⬆️ 🔼

`training_event`

Methods:

created_at
id - unique identifier of training event
sessions - list of training sessions. Each of them has access to methods from training_session.
title
type - one of: In person, Online
updated_at

⬆️ 🔼

`training_session`

Methods:

created_at
description
event_type_title
id
instructor_assigned?
instructor_image_url
instructor_name
instructor_title
location
other_sessions_count
other_sessions
register_url
registration_actions
self_url
session_day
session_month
session_name
session_time
session_url
starts_at
title
training_session
unregister_url
updated_at

⬆️ 🔼

`discover_events`

Methods:

filter_options
filter

⬆️ 🔼

FAQ ❓❓❓

1. What pages don't have templates?

Any page not listed in Templates part.

2. What objects are available (example: _course.html.liquid) on each page? What do they do?

We have a list of variables available to every template here. Additionally in the same section we have templates that have more variables you can access. Please note that most of the templates starting with _ are called partials (they are used inside another template) and have exactly the same variables as their root template.

3. How can we upload templates programmatically?

There is an api endpoint:

POST api.northpass.com/v1/custom_templates
data: {
        custom_template: {
          name: name,
          body: body,
          engine: "liquid"
        }
      }

4. What is the "homepage" template?

Homepage template is used on the / (no path, plain domain) url when Website & Catalog app is active.

5. How do I get all learner's courses?

Probably the only way now is to use my_content.courses in the my_content template.

6. Can I retrieve a specific course?

Only way would be to iterate over courses and then using some logic to use only specific course.

{% for course in my_content.courses %}
   {% if course.name == "Course 1" %}
     // do something with specific course
	 {% endif %}
{% endfor %}

7. What are all the custom_javascript files?

custom_javascript_v[LX version] is used dependent on the current account LX version. Other custom_javascript files are remains of old code and are unused.

8. Is there a universal template we can use that isn't _footer.html.liquid?

Looking at Templates there're also _head and _header templates but _footer is the last one rendered in HTML which is the best place for javascript workarounds.

About

https://app.schoolkeep-staging.com/docs/templating

Languages

Language:Liquid 100.0%

Northpass Templates

Use this to customize the User Experience of your school

Table of Contents

⚠️ Important ⚠️

Arrays

color_palette

current_person

current_school

custom_templates

custom_template

my_content

routes

courses

course

footer_navigations

header_navigations

website_navigation

website_footer

learning_paths

learning_path

instructor

person_learning_path_item

section

activity

search_result

homepage

training_events

training_event

training_session

discover_events

FAQ ❓❓❓

About

Languages

`color_palette`

`current_person`

`current_school`

`custom_templates`

`custom_template`

`my_content`

`routes`

`courses`

`course`

`footer_navigations`

`header_navigations`

`website_navigation`

`website_footer`

`learning_paths`

`learning_path`

`instructor`

`person_learning_path_item`

`section`

`activity`

`search_result`

`homepage`

`training_events`

`training_event`

`training_session`

`discover_events`