Customizing Courses Plus pages with Javascript

In order to add custom JS code on course pages let's start with creating a snippet in your theme.

We recommend using the latest version of your theme.

Choose Snippets folder and add a new snippet:

In a new snippet, let's create a condition that will only launch the JS code only on course pages. This will help to make sure that this snippet won't affect performance of any other pages.

This code will launch when the page is fully rendered. Here is the full code:

<script>
    if (window.location.pathname.includes('/apps/my/courses/'))
    {
      coursesMain();

      async function coursesMain()
      {
        await coursesUntil(() => document.querySelector('#apCB'));


      };
    }

    function coursesUntil(condition) {
      return new Promise((resolve) => {
        const interval = setInterval(() => {
          if (condition()) {
            clearInterval(interval);
            resolve();
          }
        });
      });
    }
</script>

You can add your custom code as shown on this screenshot:

When creating your custom code, you may use the following events:

onQuizRendered - quiz has been rendered

onLessonRendered - lesson has been rendered

onOpenLessonRendered - lesson of the open course has been rendered

onCoursesQuizPassed - quiz has been successfully completed

onCoursesRendered - My Courses (main) page has been rendered

The code that processes event will look like this:

window.addEventListener("onLessonRendered",function()
{
    // your custom code goes here
})

You can add it to your snippet like this:

Once the draft for your custom code is ready, include the snippet in your theme.liquid file by adding {% render 'courses_script' %} in <head>:

If you have any additional question, please use the chat on this page to communicate with our support team.

Updated on: 04/06/2024

Was this article helpful?

Thank you!