Code Snippet Explanation

This code snippet allows you to create static sections of course tiles on a Page using separators. Separators are shell Course objects used to trigger customizations on a Page and allow for easy Admin management of the Page tile sections. Once this snippet is installed, you'll be able to add separator courses to any page to create sections and control the separator text via the Course Title and Short Description fields.

Installation Instructions - Centered Sections

Navigate to the Code Snippets section of your domain Theme and paste the below code at the very bottom of the "Global Code Snippet". Once done, hit either Save button at the bottom. Click Path: Theming -> Click Specific Theme -> Scroll down and click "Global Code Snippet" -> Add to bottom. 

<!-- START Create Course Separators on Pages -->
<script>
var textAlignment = 'center' /* change value to 'left' for left aligned sections */

/* This section removes the text '[separator]' from the course title */
/* Used so admins can easily identify separator courses in the admin backend */
document.addEventListener('DOMContentLoaded', function() {
    var courseboxContainers = document.querySelectorAll('.coursebox-container');
    
    courseboxContainers.forEach(function(container) {
        var courseboxText = container.querySelector('.coursebox-text');
        var lowercaseText = courseboxText.textContent.toLowerCase();
        if (lowercaseText.indexOf('[separator]') !== -1) {
            /* check for both upper case and lower case versions in case of admin mistake */
            courseboxText.textContent = courseboxText.textContent.replace('[separator]', '');
            courseboxText.textContent = courseboxText.textContent.replace('[Separator]', '');
            container.style.textAlign = textAlignment;
        }
    });
});
</script>
<style>
/* Set font size for separator titles */
a.coursebox-container[data-tags*="separator"] .coursebox-text {
  font-size:30px !important;
}
/* Set font size for separator sub-titles */
a.coursebox-container[data-tags*="separator"] .coursebox-text-description {
  font-size:18px !important;
  margin: 10px 0 0 !important;
}
/* remove conflicting standard tile styles */
a.coursebox-container[data-tags*="separator"]:after {
  display: none !important;
}
/* remove all standard course tile styling, add 100% page width */  
a.coursebox-container[data-tags*="separator"] {
  padding: 20px !important;  
  width: 87% !important;
  min-height: unset !important;
  background-color: transparent !important;    
  box-shadow: none !important; 
  pointer-events: none !important;
  border: none !important;
}

/* Hide course price/CTA text, tile image. Hide separator courses from search */
a.coursebox-container[data-tags*="separator"] .storefront-price,
.search a.coursebox-container[data-tags*="separator"],
a.coursebox-container[data-tags*="separator"] .coursebox-image, a.coursebox-container[data-tags*="separator"] .coursebox-callout {
  display: none !important;
}
</style>
<!-- END Create Course Separators on Pages -->

2. Create a new Course and set the Course Title to use a naming convention of: [separator] Title Here. The '[separator]' text will be hidden in the learner view of the Page by the code snippet automatically. Set the Short Description to whatever you'd like to show under the separator Title or leave it blank. You can leave the image and the rest of the fields blank, but if you add an image it will also be hidden in the learner view.

Example:
Course Title: [separator] Quick Tips
Course Short Description: Below you will find our Quick Tips.

3. Create a second Course in the same way as step 2 but choose a different Title and Short Description. This code snippet looks best with 2 or more separators on a Page.

4. Publish these courses to the Page you want them to live and add the Tag ''separator" to each one. If the Tag doesn't exist yet, create it. *IMPORTANT*

5. Add these separator courses to a Skilljar Page object's 'Content and Order' section by moving them into the right column called "Selected Content". Order them in the order you want them to appear on the Page to the learner.

6. Move the real courses below their associated separator course and they will automatically appear below that separator until the next separator object is found. Below you will find an example of this configured in the correct way: