Teachable Schools and {{ course.students }}

Purple Hippo Web Studio > Blog > Coding > Teachable Schools and {{ course.students }}

I use ‘liquid’ code a lot in my Teachable schools. I also use it a lot for clients who hire me to help them with their landing pages. It’s a strange template language but can be powerful when used properly. Teachable doesn’t give much away when they give away their variables on their support site. Some variables are still not readily available such as {{ course.students }}.

Getting Your Hands Dirty With Some Code

Consider the following mix of JavaScript and Liquid code.

<script>
var x = 0;
{% for course in courses %}
console.log(`{{ course.name }}:`, `{{ course.students }}`);
y = parseInt(`{{ course.students }}`);
x = x + y;
{% endfor %}
console.log(x);
</script>

Let’s do a little bit of multi-language lesson. We’ll break down each line so you can see what the code does.

Analysis of the Code

Line 1 is JavaScript (we know this because it starts with <script>). This line creates a variable x and assigns it the value 0. We’re going to use this variable to count the total number of students signed up for your courses.

Line 2 is Liquid code (we know this because it starts with {% and ends with %} ). This line of code creates a liquid variable called course and loops through all the items that are inside the collection called courses.

Lines 3 – 7 are JavaScript again.

Line 4 ‘prints’ to the console the values of the two liquid variables course.name and course.students. These two variables output what you’d expect, the name of the course and the number of students signed up to that course.

Line 5 assigns the integer value of the variable course.students to y.

Line 6 assigns to x the existing value of x and adds the value of y to it. This means that x will contain the running total of all the students signed up for each course.

Line 8 is the end of the loop from line 2.

Line 9 is our final piece of JavaScript which ‘prints’ to the console the value stored in x, which is our running total of the number of students signed up to all our courses.

How To Use {{ course.students }}

To view the console on your browser to see the values created by xalong with the output created by the {{ course.name }}and {{ course.students }}press CTRL + SHIFT + j on a PC or ⌥ + ⌘ + j on a Mac.

On its own this code doesn’t do much but, it opens up a few things that we can incorporate into our school pages.

On our school sales page [site -> pages -> homepage] create a new HTML/Liquid block. We can then write some HTML to hold the variable ‘x’ (which if you remember is the total number of students who have registered for a course). This number ‘x’ is not the total number of students signed up to your school. We can now create a simple looking header using the code below.

<script>
var x = 0;
{% for course in courses %}
    y = parseInt(`{{ course.students }}`);
    x = x + y;
{% endfor %}
</script>
<div class="container">
  <div class="row">
    <h2 class="center">There are <span id="number_students" style="color: red;"></span> students signed up for a course in this school.</h2>
  </div>
</div>

We also need a tiny snippet of jQuery (which is just JavaScript) after the above HTML.

<script>
    $('#number_students').text(x);
</script>

This will output to the browser the following view (replacing 2311 with whatever the number is for your school):

There are 2311 students signed up for a course in this school.

So you see, it’s pretty straightforward to start to use liquid code in your Teachable schools. You can see an example of this code in action on any of my Teachable courses.

3 thoughts on “Teachable Schools and {{ course.students }}

  1. Mike

    Hey there…I have a question for anyone who knows about the variables on Teachable and you seem to fit the bill! I have built a custom certificate using html and liquid however I can’t seem to find anything related to a course start date. I reached out to support but they were very tightlipped about their variables which doesn’t make any sense to me. I’m simply looking to include a course start date on the certificate. I’m already using {{course.report_card.certificate_issued_at | date: “%m – %d – %y” }} to show the completion date. Any idea about start date?

    • Tom

      Hi Mike,

      It’s always an experience working with Teachable liquid variables. My own enquiries into a complete list have also gone unanswered so I resort to playing around (like what you’ve probably tried). I found what I hope you’re looking for in the report_card variable – there’s probably more in that ‘drop’ but without access to the backend to view their ruby code that generates the liquid it’s impossible to tell unless we get lucky with a guess.

      Start Date: {{ course.report_card.enrolled_at | date: "%Y/%m/%d"}}
      Completed On: {{ course.report_card.completed_at | date: " %Y/%m/%d" }}

      Anyway, I hope this helps. Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *