cancel
Showing results for 
Search instead for 
Did you mean: 
robbyorbie
Community Member

Delete "FREE" upper left corner icon on courses (within Catalog)

Is there a way to eliminate the "FREE" upper left corner icon that populates on courses with no fee (within Catalog)?

12 Replies
jsowalsk
Community Advocate
Community Advocate

Unfortunately, not I would suggest submitting a feature request for this and tag catalogenhancements for it to be recognized.

greg_lawrence
Community Participant

Hi Rob 

I would put the bit of jQuery below into the Customise Javascript Field in the catalog where you want the free tag not to be visible on your catalog listings. For example, if you want it to apply all of the free courses, put the script in the route (main) catalog custom javascript field.

$(".jqFlag,.product-flag-free ").css({"display": "none",});

It should do the trick.

Greg 

You may have issues with Catalog parsing the code. If so, just convert the JS  to CSS and put the CCS code in the CSS field above. (see below).

.jqFlag, .product-flag-free { display: none; }

Cheers

Greg 

jsowalsk
Community Advocate
Community Advocate

Hi  @greg_lawrence ‌, Were you able to find a way to not totally remove the "FREE" tag but instead change the words where the "FREE" tag is? We are trying to think of ways to:

1. Remove the free tag -- which we have the solution

2. Change the word on the "FREE" tag but figure out how many characters are available is it only four? Also, to figure out words as identifiers such as DEPT meaning the department is paying for it.

Jessica

greg_lawrence
Community Participant

Hi Jessica

Try this:

$('.product-flag-free').text('Dept');

Its a text string swap in jQuery that still applies the same colour and other stylings to the new text.

317739_free-test.PNG

I also put some text in the element to see how it got displayed (see above).  You could change the flag colouring to match different texts perhaps?

Cheers

Greg  

Thanks!

jsowalsk
Community Advocate
Community Advocate

We will test it out and let you know.

jmsmit49
Community Participant

 @greglawrence ‌ Have you discovered a way to do this for a single course or sub-account only? So not applying the script in the main catalog. 

For example, I add Javascript at the sub-account level to change the wording in the gray box (attached) for a single course.  319379_Screenshot 2019-08-01 11.18.26.png

greg_lawrence
Community Participant

Hi Jaclyn

This could be done in Jquery by finding the unique href for a Catalog's Listing's product link on the relevant sub-catalog page, then finding the element that provides the flag background color and changing its css attribution to the color you want. Something like what is shown below. You would have to repeat this search and replace code for a few elements on both the sub catalog and course listing pages.

Also, there is a risk is that if the product link url changes, then these snippets of code will not work.

Cheers

Greg 


$('.product-link a[href="course1"]').find('.jqFlag').css({"border-top": "#0073ac",});