Making Custom Content Pages

How to customize your Enlight platform

Colin Davie avatar
Written by Colin Davie
Updated over a week ago

This document outlines the liquid tools and features available for Front-End Developers making custom content pages. 

For advanced editing of the customisable pages: 

  1. In the side bar, click Pages

  2. Click Edit on the page you want

  3. Click Advanced Editor

This enables you to create pixel perfect web pages in HTML. 

Here are some of the features in the Advanced Editing Window and some commands available: 

There is no default stylesheet loaded before the content in your CSS panel is loaded. This gives you full control of the styling and content on your website. 

Every course has it's own HTML page.  This is automatically created when a course is created or edited or the page is visited from the front end.

For variables and dynamically inserted student information, you can use any of the Liquid commands - the full information on these can be found here: https://help.shopify.com/en/themes/liquid

Start Page and End Page References:

As each piece of page, snippet or global javascript or CSS content is rendered onto the page, it is wrapped in a comment for easy identification in the backend system.

The comment is start- and end- followed by the page slug, followed by -global if it is a global snippet and -snippet if it is just a normal snippet.

For example, a Javascript global snippet with the slug hover-fade-in would be wrapped in comments like this:

<script>
/* over-fade-in-global-snippet-start */
... content ...
/* over-fade-in-global-snippet-end */
</script>

While a standard snippet of CSS with the slug button-styling would be wrapped in:

<style>
/* button-styling-snippet-start */
... content ...
/* button-styling-snippet-end */
</style>

And a content page home would be wrapped as:

<!-- home-start -->
... content ...
<!-- home-end -->

These start and end comments allow you to find where content is when trying to debug a layout.

Liquid Methods:

These return a single value and are injected into the page where ever you place them in the content. 

{{ enquiry_email }} This will return the email address listed under Email address for enquiries within your organisation settings.

{{ support_email }} This will return the email address listed under Email address for support within your organisation settings.

{{ support_phone }}  This will return the phone number listed under Phone number for enquiries within your organisation settings.

{{ system_email }} Returns an email in the format of support@your-domain

{{ student_email }} Returns the email of the currently logged in student.

{{ student_id }} Returns the student ID as a UUID.

Collections:

These return a group of objects that you can then query.

purchasable_courses   Returns a collection of courses that have the Can students sign up and pay for this course online? checked.

advertised_courses   Returns a collection of purchasable_courses courses that also have the Can students see this course on the home page or under related courses? checkbox checked.

free_courses  Returns a collection of of purchasable_courses courses that have their price set to zero.

paid_courses  Returns a collection of of purchasable_courses courses that have their price set to anything that is not zeo.

published_articles Returns a collection of ALL the articles in the system that have been published.

article_categories Returns a collection of all the article categories in the system, that can then be used to go through the articles available in that collection by calling for article in category.articles do

Using a Collection

You use a collection like as follows:

{% for course in paid_courses %}
  <!-- Will render this HTML for every paid_course -->
  <h1>{{ course.name }}</h1>
  <a href="{{ course.sign_up_url }}">Sign Up Now!</a>
{% endfor %}

You can also ask for the first 3 courses by passing a limit command: 

{% for course in paid_courses limit: 3 %}
  <!-- Will render this for 3 paid_courses -->
  <h1>{{ course.name }}</h1>
  <a href="{{ course.sign_up_url }}">Sign Up Now!</a>
{% endfor %}

Filters:

{{ library_item_id | library_id }}
Renders the library item partial.

{{ course.id | enroll_button }}
Renders a simple enrollment button and form which you can style.

{{ course.id | promo_code }}
Renders a simple promo code button and form which you can then style.

{{ course = course_id | find_course }}
Returns a course object, which you can then call the following methods on: 

Buy Now Button:

You can add a buy now button to your site using Stripe Checkout. First go to your Stripe Payment settings and enable CLIENT-ONLY INTEGRATION and make sure the domain name of your enlight site is included in the list.

Then make a single purchase product within your Products tab of stripe, add a price and get the price ID.

Then to add the button on your page, you can insert the following:

{{ 'price_1IUliUBopgHamtau9PTcDGZl' | buy_button: 'Buy it Now', 'https://my-domain.com/success-page-url' }}

This will then show a button with the text "Buy it Now" that will redirect the shopper back to "https://my-domain.com/success-page-url" once the purchase is successful.

You can also setup in Stripe the ability to send you an email whenever someone purchases an item so you can keep track of this.

Once you have created a course, you can also use:

{{ course.updated_at }}  
Time the course was last updated.

{{ course.name }}  
The course name as set on the course edit page. 

{{ course.summary }}  
The summary of the course as set on the course edit page.

{{ course.marketing_copy_html }}  
The marketing copy of the course as set on the course edit page.

{{ course.purchasable? }}  
Returns true or false if the course can be purchased.

{{ course.price_currency }}  
Currency of the course (always USD at this time).

{{ course.price_symbol }}  
The currency symbol, always $ at this time.

{{ course.price_dollars_and_cents }}  
Price written out like 99.34 .

{{ course.price_cents }}  
The price in cents, for example: 9934 .

{{ course.outcome }}  
The outcome as set in the course edit page.

{{ course.free_for_members }}  
Is this course free if you are a member of our platform? (true / false).

{{ course.free? }}  
Is this course offered for free?  (true / false).

{{ course.paid? }}  
Is this a course you have to pay for?  (true / false).

{{ course.instructor_name }}  
The full name of the instructor for this course, if set on the course edit page.

{{ course.instructor_given_name }}  
The given name of the instructor for this course, if set on the course edit page.

{{ course.instructor_family_name }}  
The family name of the instructor for this course, if set on the course edit page.

{{ course.instructor_email }}  
The email of the instructor for this course, if set on the course edit page.

{{ course.image_url }}  
The URL of the image assigned to the course as set on the course edit page.

{{ course.points }}  
How many points in total is this course worth?  Calculated by adding up all the points of every step. 

{{ course.id }}  
Unique ID of the course.

{{ course.sign_up_url }}  
The URL that you can give someone to sign up for the course and find out more data.

Did this answer your question?