Creating a Custom Course Catalog

Over time we learned that clients occasionally wanted to create multiple courses catalog pages on their LMS to group different courses together on their own, and with that be able to either market these more efficiently or improve the student experience when looking to purchase new courses. As such, we have build functionality that allows you to do exactly this. In other words, it allows you to create a Course Catalog that only shows the products that match your settings.

By default, we have one Course Catalog which is hosted at /course-catalog/ on the front-end website of your LMS. This Course Catalog is showing all the Products that you are creating on the platform, regardless of their category or availability (be sure to read more about the relation of Products and Courses here if you did not know that it is actually Products that are shown in the Course Catalog, not Courses). It is then possible for prospective students to use the category filter above the catalog to sift through them all accordingly.

But it is also possible to already pre-filter a course catalog, limiting the Products shown to the user. As such, you can for example only show Products mapped to a certain category, hide or show specific Products using their Product ID, or even change the default sorting mechanism. This can be done as followed:

  1. If you are looking to use a the Product category to filter, make sure that you have linked the Products that you want to show to a category. This can be done on the Edit Product page below the featured image (see the General Details section here).
  2. Navigate to Site Pages -> Pages in the Sidebar of your Admin Dashboard.
  3. Locate the Page you want the catalog to show on and select Edit (or Create a New page clicking the + New Page button in the right top). If you are looking to edit the existing Course Catalog page you can navigate to that page instead, and skip step 4 as well (it might be called Product Listing in the Pages tab of your platform).
  4. In the Page Builder, add the following code where you want the pre-filtered Course Catalog to show (see below). You can add code by clicking the + icon in the left top of the builder and selecting </> Code. For more guidance on adding content to a Page, check out Creating Site Pages.
    <div class="product-listing"><div class="noneditable bg-light d-flex align-items-center justify-content-center display-in-builder"><h1 class="text-center">## Product Listing Block ##</h1></div><product-listing-card categories="" ids="" layout="" sort_order="" dir="" exclude_ids=""></product-listing-card></div>
    	
  5. As you can see in the code above, there are a couple of parameters that allow you to pre-filter this catalog: categories="", ids="", layout="", sort_order="", dir="", exclude_ids="".
  6. Each attribute has its own functionality. Adding the name of product categories in the categories attribute will show only those Products mapped to those categories (for example categories="Finance,Health" will only show Finance and Health products). 
  7. Filling the ids attribute with Product Ids will only show those specific Products (these IDs can be found on your Products page under eCommerce). 
  8. The exclude_ids attribute will allow you to hide specific Products instead (e.g. exclude_ids="4,12" will show the entire catalog except the Products with ID #4 and #12). 
  9. And it is even possible to change the default order in which the Products get shown by using the sort_order and dir attributes. sort_order can be done by "title", "dateCreated", and "dateUpdated" and we can choose the direction of the sort with dir="asc" or dir="desc" representing ascending/descending. An example of all these different attributes
  10. Save the Page and confirm all is working by navigating to the page on the front-end marketing website of the LMS (you can find the url of the page you just created/edited below its Title field on the Edit Page).