BC Catalog has no products replace text

Replace this catalogue has no products message with your own.

by thetrickster

HTML

<div>This catalog has no products.</div>
<div>This catalog has no sub-catalogs.</div>

CSS

.empty-message {
    display: block;
    background: lemonchiffon;
    color: #181818;
    text-shadow: 1px 1px 0px burlywood;
    margin: 1em 0;
    padding: 1em;
    -webkit-animation: fall-in 1s ease-in-out;
    -moz-animation: fall-in 1s ease-in-out;
    -o-animation: fall-in 1s ease-in-out;
    -ms-animation: fall-in 1s ease-in-out;
    animation: fall-in 1s ease-in-out;

}
.empty-message a {
    color: inherit;
    
}
@-webkit-keyframes fall-in
{
0% { opacity: 0.5; -webkit-transform: translateY(-2em); }
100% { opacity: 1.0; -webkit-transform: translateY(0); }
}
@moz-keyframes fall-in
{
0% { opacity: 0.5; -moz-transform: translateY(-2em); }
100% { opacity: 1.0; -moz-transform: translateY(0); }
}
@o-keyframes fall-in
{
0% { opacity: 0.5; -o-transform: translateY(-2em); }
100% { opacity: 1.0; -o-transform: translateY(0); }
}
@ms-keyframes fall-in
{
0% { opacity: 0.5; -ms-transform: translateY(-2em); }
100% { opacity: 1.0; -ms-transform: translateY(0); }
}
@keyframes fall-in
{
0% { opacity: 0.5; transform: translateY(-2em); }
100% { opacity: 1.0; transform: translateY(0); }
}

JavaScript

(function($){
    
    // If your BC site is not set to the English (US) culture,
    // the spelling of "catalog" could be "catalogue" for your case
    // If so, change "catalog" to "catalogue" in the code below
    
    // This function targets your "body" tag's HTML but you can 
    // target a more specific container by changing "body" 
    // to ".catalog" or "#content" to target a container on your
    // page that has this message so it's more specific
    
    $(document).ready(function() {
        var noProductsMessage = "Your no products message";
        // You can use HTML markup if you escape quotes with a backslash 
        // or if you use single quotes in HTML markup
        var noSubCatalogMessage = "<span class=\"empty-message\"><a href='#'>Your no subcatalogs message</a></span>";
       
       // Set our "body" elements HTML to
       $("body").html(
           // The HTML of your body that has some text replaced
           // with RegEx
           $("body").html()
           // Update "This catalog has no products." message
           .replace(/this catalog has no products\./gi, noProductsMessage)

           // Update "This catalog has no sub-catalogs." message
           .replace(/this catalog has no sub-catalogs\./gi, noSubCatalogMessage)
       ); 
    });
})(jQuery);