[Enhancement] CMS Old URL to New URL Replacer Script (for TinyMCE)

[Theo 16]

Hi

One of the major problems we've encountered with TB is the lack of Dynamic URLs... Yeah ouch 🤨
I've written a workaround for CMS pages (or TinyMCE content) and have decided to share it with the TB community.
Bonus: It includes nice 'native' growl notifications to let you know that it's run and what it's replaced.

Hope it helps and brings value.

• Problem background
  • As our site will have lots of CMS / Blog pages (in addition to a large store component), the pages will naturally contain a lot of links, images and links to PDFs etc.
  • The catch is that using the TB CMS Editor (TinyMCE) - all these links and images will essentially be Static URLs  (ouch again).
  • This becomes a major problem when the site is moved from Local -> Staging -> Live and if the domain is moved to another domain in the future again.
  • This creates a problem for both the front-end developer (hard coded links to Blog pages in the Menu and other locations) as well the Site Administrator (CMS / TinyMCE pages)
  • For the Developer, I've created a temporary workaround to enable the developer to reference "BaseURls" or {$content_dir} in the Menu's BO. It even replaces old URL references (however on presentation only)
  • Even though this workaround can appear to fix the 'broken images and links' problem on the front-end - it is merely on the 'presentation' layer and does not actually save the new URLs in the CMS content / database
  • If you're the Shop Administrator and open a CMS page, you'll still see broken images, links etc, and will need to update the broken ones manually (in order to do this properly)
  • So the 'developer's solution' is more a 'trick' than anything else...
  • It's still useful and recommended to use though, as it 'fixes' broken images on the front-end after the site has moved.
  • If you don't have it in place, then your links and images will be broken. However, for the changes to be actually saved in the database, you'll need to run the Script solution below.
  • In order to avoid broken links, images - I recommend you use both solutions. Developer Solution: Static to Dynamic URL Maker with Limited Smarty Tags (CMS, Top Menu, TB HTML Block)
• CMS Solution
  • What we needed was a solution specific to CMS pages or TinyMCE content - where a script detects 'old URLs' and replaces them auto-magically according to the 'new' domain URL that you've specified before-hand
  • This means no more manually updating URLs and Image SRCs when the site has moved domains! 😃
  • All you have to do is specify the Old URLs with the new Domain URL in the script once off and open the affected CMS pages in the Admin BO for the Script to run.
  • You can target many URLs at the same time. So if you already know what the URLs are going to be, it will save you a bit of time.
  • Whenever the CMS page (or TinyMCE) loads content - the Script will check the content and if it finds old URLs - it will let you know and will automatically replace them.
  • This fixes broken links, references to old Domain URLs and fixes broken images
  • If you're happy with the result, you can click on CMS Save. If not, just Cancel, adjust the script and try again.
  • After site move
    • You just need to remember to open the CMS page in BO Admin, and let the script do its work then re-save the content 

How to use / Instructions:

• Find your TinyMCE file
• If you're not using a custom theme that updates TinyMCE (like Panda), you should be able to find it in [site root]/js/admin/tinymce.inc.js
• If you're using a theme that updates TinyMCE (see if you can find the theme's tinymce.in.jc file)
• At the bottom of the page, add the Script as below
• Update the "Specify Old URLs that need to be replaced" section (usually old Localhost, Staging or Old Live URLs + allows for 3 more variations)
• Update the "Specify the new Current Live URL" section
• Save, Clear Cache, and open desired CMS page in BO Admin
• Script contains a switch to turn it off/on if required
• I've included a Test CMS page for testing purposes (adjust according to your needs)
• Note:
  • This script is currently designed to handle one editor panel for CMS pages, and will not work on Product CMS pages 
    or on other pages that have more than one editor panel block.

Old to New URL Replacer for CMS Content Script

$().ready(function () {
  OldtoNewURLReplacerForCMSContent();
});

/// OLD TO NEW URL REPLACER FOR CMS CONTENT ///
//  Version 1.3 Last updated: 07/11/19
//
// How to Use:
// Turn replacer on / off below (default is on)
// Specify the URLs that need to be replaced by the Current Live URL (normally Local, Staging, Old Live) 
// Three additional URL slots provided if required
// Set the Current Live URL
// Save and refresh CMS page
// Save CMS page for changes to be saved
// *** Note: ***
// This script is currently designed to handle one editor panel for CMS pages, and will not work on Product CMS pages
// or on other pages that have more than one editor panel block.

function OldtoNewURLReplacerForCMSContent() {

  /// Turn Replacer on / off
  var oldURLreplacer_onoff = "on";
  var checkifurlreplacerpresent = $("body").attr("urlreplacer-instance");

  if (oldURLreplacer_onoff == "on" && checkifurlreplacerpresent != 1) {
    // Just double checks that there's only one instance of the Replacer
    $("body").attr("urlreplacer-instance", "1");

    /// Specify the Old URLs that need to be replaced
    var setStaticURL_source_local = "http://oldaddress/siteaddress/";
    var setStaticURL_source_staging = "http://www.stagingaddress.com/";
    var setStaticURL_source_liveold = "http://www.liveaddress-old.com/";
    var setStaticURL_source_alternative1 = "testurlalt1";
    var setStaticURL_source_alternative2 = "testurlalt2";
    var setStaticURL_source_alternative3 = "testurlalt3";

    // Specify the new Current Live URL
    var setCurrentLiveURL = "http://localhost/development/local-dev-sites/thirtybeesplaynew-1.1.0/";
    // *** *** //

    // Example default testing values if required for testing
    // var setStaticURL_source_local = "http://oldaddress/siteaddress/";
    // var setStaticURL_source_staging = "http://www.stagingaddress.com/";
    // var setStaticURL_source_liveold = "http://www.liveaddress-old.com/";
    // var setStaticURL_source_alternative1 = "testurlalt1";
    // var setStaticURL_source_alternative2 = "testurlalt2";
    // var setStaticURL_source_alternative3 = "testurlalt3";


    /// REPLACER WORKER ///
    // Nothing to modify / set here 
    // Checks for the Sources and feeds results to the Notifier 
    // Variable to check if a Static URL was found and changed 
    var staticurlwaschanged = "yes/no";
    var urlchanged1name;
    var urlchanged2name;
    var urlchanged3name;
    var urlchanged4name;
    var urlchanged5name;
    var urlchanged6name;
    var checkforcontentval = $("#content_1").length;
    if (checkforcontentval < 1 ) {
      /// If CMS single source is not found, do nothing ///
      /// This script is designed to handle one editor panel for CMS pages, and will not work on product pages
      /// or on other pages that have more than one editor panel block.
    }
    else {
      var sourcefinder = $("#content_1").val()
        .replace(setStaticURL_source_local, function () {
          staticurlwaschanged = "yes";
          urlchanged1name = setStaticURL_source_local;
          return "found_setStaticURL_source_local";
        })
        .replace(setStaticURL_source_staging, function () {
          staticurlwaschanged = "yes";
          urlchanged2name = setStaticURL_source_staging;
          return "found_setStaticURL_source_staging";
        })
        .replace(setStaticURL_source_liveold, function () {
          staticurlwaschanged = "yes";
          urlchanged3name = setStaticURL_source_liveold;
          return "found_setCurrentLiveURL";
        })
        .replace(setStaticURL_source_alternative1, function () {
          staticurlwaschanged = "yes";
          urlchanged4name = setStaticURL_source_alternative1;
          return "setStaticURL_source_alternative1";
        })
        .replace(setStaticURL_source_alternative2, function () {
          staticurlwaschanged = "yes";
          urlchanged5name = setStaticURL_source_alternative2;
          return "setStaticURL_source_alternative2";
        })
        .replace(setStaticURL_source_alternative3, function () {
          staticurlwaschanged = "yes";
          urlchanged6name = setStaticURL_source_alternative3;
          return "setStaticURL_source_alternative3";
        });
      /// Set Notification Text
      var staticurltitle = "<b>Old URL Replacer Actioned</b>";
      var staticurlintromessage = "<b>Ensures that the correct URLs are used for the correct environment for links, images, etc. Replaces old URLs with correct URL as specified</b>";
      var staticurlcompletedmessageline1 = "<li>The URL update will only take effect on <b>CMS save</b>. If you'd like to make changes to the URLs that are changed, or if you'd like to disable this feature, go to and edit the following file <b>js/admin/tinymce.inc.js</b> or your template's TinyMCE override</li>";
      var staticurlcompletedmessageline2 = "<li>Updates to images and links may in some cases only reflect after <b>Save -> Reload</b></li>";

      /// Notifier ///
      if (staticurlwaschanged == "yes") {
        setTimeout(function () {
          $.growl.notice({ title: staticurltitle, message: staticurlintromessage, location: "tr", size: "large", style: "notice", duration: 20000 });
        }, 1000);

        setTimeout(function () {
          var urlfound1 = "";
          var urlfound2 = "";
          var urlfound3 = "";
          var urlfound4 = "";
          var urlfound5 = "";
          var urlfound6 = "";
          if (urlchanged1name != null) {
            urlfound1 = "<li>" + urlchanged1name + "</li>";
          }
          if (urlchanged2name != null) {
            urlfound2 = "<li>" + urlchanged2name + "</li>";
          }
          if (urlchanged3name != null) {
            urlfound3 = "<li>" + urlchanged3name + "</li>";
          }
          if (urlchanged4name != null) {
            urlfound4 = "<li>" + urlchanged4name + "</li>";
          }
          if (urlchanged5name != null) {
            urlfound5 = "<li>" + urlchanged5name + "</li>";
          }
          if (urlchanged6name != null) {
            urlfound6 = "<li>" + urlchanged6name + "</li>";
          }
          $.growl({ title: "", message: "<b>The following Old URLs were found:</b> <ul>" + urlfound1 + urlfound2 + urlfound3 + urlfound4 + urlfound5 + urlfound6 + "</ul> and have been replaced with <b>" + setCurrentLiveURL + "</b>", location: "tr", size: "large", style: "notice", duration: 20000 });
        }, 1400);
        setTimeout(function () {
          $.growl.error({ title: "Notice", message: "<ul>" + staticurlcompletedmessageline1 + staticurlcompletedmessageline2 + "</ul>", location: "tr", size: "large", duration: 30000 });
        }, 2000);
      }
      else { };
      /// Finds TinyMCE content 
      var TinyMCEcontentval = $("#content_1");
      /// Actual Replacer ///
      var replaceTinyMCEcontentvalsplit = $(TinyMCEcontentval).val()
        .split("" + setStaticURL_source_local + "").join(setCurrentLiveURL)
        .split("" + setStaticURL_source_staging + "").join(setCurrentLiveURL)
        .split("" + setStaticURL_source_liveold + "").join(setCurrentLiveURL)
        .split("" + setStaticURL_source_alternative1 + "").join(setCurrentLiveURL)
        .split("" + setStaticURL_source_alternative2 + "").join(setCurrentLiveURL)
        .split("" + setStaticURL_source_alternative3 + "").join(setCurrentLiveURL);

      // Updates TinyMCE Content with 'Static URLs replaced' content
      $(TinyMCEcontentval).val(replaceTinyMCEcontentvalsplit);
    }
  }
  else { }
}
/// *** *** ///

CMS Content Tester

<h2>Old URL to new URL Replacer for CMS Content</h2>
<br/>
<b>Static URL Locations to be updated:</b>
<br/>
<br/>
<b>Local: </b> http://oldaddress/siteaddress/contact-us
<br/>
<b>Staging: </b> http://www.stagingaddress.com/
<br/>
<b>Live old/prev: </b> http://www.liveaddress-old.com/

<br/><br/>

<b>URL Alt 1: </b> testurlalt1
<br/>
<b>URL Alt 2: </b> testurlalt2
<br/>
<b>URL Alt 3: </b> testurlalt3
<br/><br>
<b>Hardcoded link</b>
<a href="http://oldaddress/siteaddress/blog/test-blog-page">Link to test blog page</a>
<br/><br/>
<b>Hardcoded path to image:</b>
<br/><br/>
<img src="http://oldaddress/siteaddress/img/logo.jpg" alt="Hardcoded image path test" title="Hardcoded image path test" />

CMS Edit: Broken links, old URL references, broken image

CMS Front-end page: Broken links, old URL references, broken image

CMS With Old URL to New URL Replacer Script Active and working - images and broken links fixed - with Bonus 'native' growl notifications 😉 

CMS Front-end page: Broken links and images now fixed

Edited November 7 by Theo

[Theo 16]

Hi
Not sure if you guys have seen this?
Think forum posts were busy when I posted this, so it could've been missed.
Anyways - it's here if you need it...

[datakick 881]

It's very nice extension.

I'm not sure how many merchants here have staging servers, though. So probably it's not that much interesting for most of them.