Northpass Templates

Use this to customize the User Experience of your school

## Table of Contents - [How Northpass templates work](#how-northpass-templates-work) - [General information](#general-information) - [Liquid](#liquid) - [Root and partial templates](#root-and-partial-templates) - [Important](#warning-important-warning) - [Quick start](#quick-start) - [Templates](#templates) - [/](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#homepage-path) - [/learners/sign_in](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#login) - [/my_dashboard](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#my-dashboard) - [/learning_paths](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#learning-paths) - [/learning_paths/:id](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#learning-paths-id) - [/learning_paths/:id/cover](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#learning-paths-id-cover) - [/courses/:id/cover](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#course-id-cover) - [/learning_paths/:lp_id/courses/:c_id/cover](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#learning_paths-lpid-courses-cid-cover) - [Learning Experience V3](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#learning-experience-v3) - [Learning Experience V2](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#learning-experience-v2) - [/account/edit](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#account-edit) - [/training_events](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#training-events) - [/training_sessions/:id](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#training-session-id) - [/search](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#search) - [/catalog](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#catalog) - [/catalog_search](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#catalog-search) - [/catalog/:id/:slug](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#catalog-id-slug) - [/500](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#server-error) - [Variables](#variables) - [Global](#global) - [By template](#by-template) - [Definitions](#definitions) - [FAQ](#faq-questionquestionquestion) ## [How Northpass templates work](#table-of-contents) ### [General information](#table-of-contents) 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](#table-of-contents) At Northpass we use Liquid as a template language. [Liquid](https://shopify.github.io/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](https://shopify.github.io/liquid/) to learn more about the syntax and possible use cases. ### [Root and partial templates](#table-of-contents) 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 ``` ### :warning: [Important](#table-of-contents) :warning: 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](#table-of-contents) **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 :-------------------------:|:-------------------------:|:-------------------------: ![](img/vscode.png) | ![](img/atom.png) | ![](img/sublime.png) **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. ![](img/school_website_styling.png) ## [Templates](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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 `

` tag - `form_authenticity_token` method inside the `` tag - the `name` attribute on the `` tags [:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

Path	Available Templates
`Learning Experience V3`	custom_javascript_v3
Screenshot

[:arrow_up:](#table-of-contents)

Path	Available Templates
`Learning Experience V2`	custom_javascript_v2
Screenshot

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents)

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

[:arrow_up:](#table-of-contents) ## [Variables](#table-of-contents) 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](#table-of-contents) The following variables are exposed globally and can be used in all the templates: * color_palette * discover_events * footer_navigations * header_navigations * homepage * learning_paths * my_content * training_events * website_footer ### [By template](#table-of-contents) 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](#table-of-contents) #### Arrays Some of the available variables in the templates are **Arrays**, so the following methods are available for them: * `any?` * `each` * `empty?` * `size` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `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` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `current_person` **Methods:** * `avatar_url` * `created_at` * `email` * `enrolled_in_course?` **Example:** :warning: It takes course from the current context :warning: ``` {% 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:** :warning: It takes learning path from the current context :warning: ``` {% 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` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `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` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `custom_templates` **Methods:** * `any?` * `each` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `custom_template` Available when using `each` method on [custom_templates](#custom_templates). **Methods:** * `created_at` * `fingerprint` * `name` * `updated_at` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `my_content` **Methods:** * `courses` * `empty_learning_paths` * `headline` * `learning_paths?` * `learning_paths_headline` * `learning_paths_subheadline` * `learning_paths` * `subheadline` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `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` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `courses` **Methods:** * `any?` * `each` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `course` Available also when using `each` method on [courses](#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` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `footer_navigations` **Methods:** * `any?` * `each` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `header_navigations` **Methods:** * `any?` * `each` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `website_navigation` Available when using `each` method on [header_navigations](#header_navigations) or [footer_navigations](#footer_navigations). **Methods:** * `created_at` * `external?` * `name` * `path` * `updated_at` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `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` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `learning_paths` **Methods:** * `any?` * `each` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `learning_path` Available also when using `each` method on [learning_paths](#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` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `instructor` Available when using `each` method on [learning_path](#learning_path) `.instructors`. **Methods:** * `bio` * `created_at` * `image_url` * `name` * `title` * `updated_at` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `person_learning_path_item` Available when using `each` method on [learning_path](#learning_path) `.items`. **Methods:** * `completed?` * `cover_path` * `created_at` * `locked?` * `name` * `optional?` * `progress_icon` * `training_event` * `type_icon` * `updated_at` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `section` Available when using `each` method on [course](#course) `.published_sections`. **Methods:** * `activities` * `created_at` * `id` * `name` * `published_at` * `updated_at` * `will_be_published?` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `activity` Available when using `each` method on [section](#section) `.activities`. **Methods:** * `completed?` * `created_at` * `id` * `list_class` * `locked?` * `milestone?` * `path` * `title` * `updated_at` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `search_result` **Methods:** * `count` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `homepage` **Methods:** * `artwork_url` * `created_at` * `featured_courses_headline` * `featured_courses_subheadline` * `headline` * `published_featured_courses` * `subheadline` * `updated_at` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `training_events` The list of training events. The object is type of Array and [these methods](#arrays) can be used with it. Each of them has access to methods from [training_event](#training_event). [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `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](#training_session). * `title` * `type` - one of: `In person`, `Online` * `updated_at` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `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` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) #### `discover_events` **Methods:** * `filter_options` * `filter` [:arrow_up:](#table-of-contents) [:arrow_up_small:](#by-template) ## [FAQ](#table-of-contents) :question::question::question: **1. What pages don't have templates?** Any page not listed in [Templates](#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](#by-template). Additionally [in the same section](#by-template) 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](https://github.com/SchoolKeep/schoolkeep-templates/tree/master#homepage-path) 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](https://github.com/SchoolKeep/schoolkeep-templates/blob/master/templates/my_content.html.liquid). **6. Can I retrieve a specific course?** Only way would be to iterate over [courses](#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](#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.