How to efficiently inject the same code for 1/2 the pages on my site

Hi everyone. I could use some help from the hive mind on how to do what I'm trying to do... efficiently.

• Webpage is going to be about 30-40 pages
• Using Will-Myers Nav Replacement Javascript plugin so that 50% of the pages will have Navbar "A" while the other 50% will have Navbar "B"
• Navbars "A" and "B" are being code injected into each page right now

As you can imagine, that last bullet point isn't very sustainable in the long term. If we want to change the navbar, I really don't want to have to go into the code for 20+ sites to change it. It's a recipe for a human-made mistake disaster.

Is there a way for me to inject a reference to a centrally-controlled <div> block so I can make a change in one place and cascade to the affected pages?

Thanks for your help everyone!

1 hour ago, Amadaeus said:

Hi everyone. I could use some help from the hive mind on how to do what I'm trying to do... efficiently.

• Webpage is going to be about 30-40 pages
• Using Will-Myers Nav Replacement Javascript plugin so that 50% of the pages will have Navbar "A" while the other 50% will have Navbar "B"
• Navbars "A" and "B" are being code injected into each page right now

As you can imagine, that last bullet point isn't very sustainable in the long term. If we want to change the navbar, I really don't want to have to go into the code for 20+ sites to change it. It's a recipe for a human-made mistake disaster.

Is there a way for me to inject a reference to a centrally-controlled <div> block so I can make a change in one place and cascade to the affected pages?

Thanks for your help everyone!

Each page/section has it own unique id, we can use this technique to identify page element placement, could you share your site url?

It's hard to envision exactly what you have going without being able to see sites/pages in action.

What you might be able to do is take the div and put that into a file on your computer. Then upload that one file to one site using the link page file upload trick. Then with Javascript, read that file in and place that onto your sites where needed.

Then from there all you need to do is update your div file on your computer and re-upload it when you need to make changes.

Not sure if that flow would work but the main take away is to get that div into a place where it can be read and placed by Javascript.

Thanks for the info so far. @creedon: Is there a guide to use javascript to read the file and place the code on the site?

Okay. I'm trying to use javascript import and it doens't seem to want to work.

In the code header:

<span id="new-site-title">
  
<script>
import {str} from '/s/navbar.js';
  
document.getElementById("new-site-title").innerHTML = str;
  
</script>

In a .js file 

let str = `
<div data-wm-plugin="new-nav" style="height:0px;opacity:0;visibility:hidden">
<div class="new-site-title" id="new-site-title" href="/new-home">New Site Title</div>
  <div href="/new-home">LINK A</div>
  <div href="/new-home">LINK B</div>
  <div href="/new-home">LINK C</div>  
</div>`;

export { str };

What I'm trying to do is to insert the entire string in $str into the header, or anywhere in the page really because the code will run from anywhere on the page

This is not a solution but more of an example of what I was thinking of.

You'd have a file nav.html uploaded somewhere.

Then with jQuery do something like the following.

var url = '/s/nav.html'

$.get ( url, function ( data ) {

  const $nav = $( data );
  
  console.log ( $nav );
  
  } );