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:
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:
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.
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
Thank you!