Customizing the text in Canvas Catalog enrollment buttons

Posted on by Tom Woodward

As usual, just knocking out the hit titles!

Canvas Catalog just doesn’t have much in terms of options. That’s been tricky for us. We do a number of odd things. We’re getting around this so far by using the ability to put custom javascript at the catalog or sub-catalog level. It’s not what I dream of, but it is possible.

The latest concern was that for some of our trip-based experiences, funds are paid in two stages. We want to make sure that people don’t think the first payment gets them all the way into the trip. So we want to change the text in the buttons that normally say “enroll now” into saying “program deposit” and the price.

Get the catalog course ID

You will need the catalog course ID so that it won’t apply to all courses in the catalog.

You can get the catalog course id in two ways.

Path A

  1. Go to the course listings in Catalog in the admin view
  2. Mouse over the desired course
  3. Look at the bottom of the browser at the URL and the ID will be part of the URL

This will feel familiar to people who get post IDs in WordPress in a similar fashion.

Path B

  1. Go to the listing page itself (where you’d enroll)
  2. Right click, Inspect element
  3. Find the section with the id “product-page”
  4. The data-course-id element will have the id

This will feel familiar to people who get post IDs in WordPress in a different fashion.<footnote>Yeah. I think I’m funny. You’re reading the footnotes so I feel better about my audience. </footnote>

Javascript

The javascript looks at the data attribute for the course ID we got above and then gets all the elements with the class .css-11xkk0o-baseButton__children<footnote>I hate generated classes.</footnote>. There are only two, but this would deal with however many existed.

//change button text for a deposit course with the ID 149833
const section = document.querySelector('#product-page');
const courseId = section.dataset.courseId;
if(courseId == 149833){
const depositText =  '$1500 Program Deposit';//new button text
const buttons = document.querySelectorAll('.css-11xkk0o-baseButton__children');//get all buttons

buttons.forEach((button) =&gt; {
 button.innerHTML = depositText;//set new text
});
}

Leave a Reply