Hiding colors in the Rich Text Editor - xmpie-users/uStore-js GitHub Wiki

If needed you can remove (hide) colors in the Rich Text Editor to prevent customers from selecting non-approved colors.

Alt

This is simple to achieve by adding a JavaScript snippet to the storefront.

  1. Identify the name of the product, and update the variable in the script below.
  2. Identify the ID of the IFrame that contains the rich text editor, and update the variable in the script below. (To do this, browse to the customization step of the product in the storefront. Right click on the Rich Text Editor and select "inspect". Click the Elements tab in the browser tools. Scroll upwards until you see the <iframe> tag that contains the RTE. Get the ID from the <iframe> tag.)
  3. Edit the IndexOfColorsToHide variable to enter the index of the colors you want to hide.
  4. Copy/paste the edited script to the Add JavaScript to Storefront area of your store.
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", () => {
    setTimeout(function() {
    var NameOfProduct = "Special Offer Poster";
    var IdOfRteIframe = "ctl00_cphMainContent_ucDialCustomization_Duc18937_uEditRTF_IFrame";
    var IndexOfColorsToHide = [3,4]; //cyan and magenta
      if (
        $(location).attr('href').indexOf('Customization') > -1           //we're on the customization page
        && $('#ctl00_containerPageProductName').text() == NameOfProduct  //we're editing the right product
        && $('#' + IdOfRteIframe).contents()[0] != undefined             //RTE is loaded
      ){
        for (var i=0; i<IndexOfColorsToHide.length; i++) {
          $('#' + IdOfRteIframe).contents().find(".color-button")[IndexOfColorsToHide[i]].style.display = "none";
          console.log('color ' + IndexOfColorsToHide[i] + ' was hidden');
        }
      }
    }, 2000);
  });
</script>

For information on how to add JavaScript to your store: How to add JavaScript to a storefront.

⚠️ **GitHub.com Fallback** ⚠️