Jump to content

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

Recommended Posts

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!

Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

Edited by Amadaeus
Link to comment

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 );
  
  } );

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.