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.

Leave a Reply

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

Post comment