How do I configure "smart" language-switch buttons in an included HTML header?

Is this site just all manual and no CMS / Headless CMS driven at all?

from my point of view, I would say that the 'English' toggle button is not useful on the English page, and similarly the 'Spanish' button is not necessary on the Spanish page.

Therefore, and since you only have two languages available, only one button can be used.

so if in your page that is going to be included (the header page) you add on one hand the tag representing the button, and on the other hand the Javascript ... that should do the job.

(no need to add the script independently, as the header is common to each page, so you might as well avoid a request)

so the code to add to your header would look like this

<button id="swap_btn"></button>
<script>

    var destination = '';
    var defaultpage_serveur = 'index'
    window.onload = init()

    function init() {
        var page_location = window.location.href;
        var page_filename = page_location.substring(page_location.lastIndexOf('/') + 1);
        var page = page_filename.split('.')[0].split('-');
        var language = '';
        if (page[1] != 'es') {
            destination = ((page[0] == '') ? defaultpage_serveur : page[0]) + '-es.html';
            language = "Spanish"
        } else {
            destination = page[0] + '.html'
            language = "Original"
        }
        var swap_btn = document.getElementById('swap_btn');
        swap_btn.onclick = swap_btn_action
        swap_btn.innerText = language
    }

    function swap_btn_action() {
        window.location.href = destination
    }


</script>

Nutshell: Does a button in an included header know what page it is on?

 

Background: I am in the process of completely re-coding some bilingual websites that were generated using Netobjects Fusion.

===========

Short Answer: No.  HTML alone doesn't DO much of anything except provide structure for content. 

NetObject Fusion:  Ugh! You have my deepest sympathies.  Throw everything out and use WordPress with the WP Multi-Lingual Plugin (WPML).

https://wpml.org/

I beta tested and wrote tutorials for NOF users so I say this with more than casual experience using it.  What NOF did to botch up code was unforgivable but understandable given that it was never a code editor.  It was a Code Generator supported in large part by optional add-ons or 3rd party widgets  -- the same ilk as GoLive and Muse, all of which are dead now.  Nothing generated by NOF is worth salvaging except the basic, unstyled text content which you should strip and paste into WordPress.

Good luck with your project!

An alternative but much the same:

2 anchor tags for the English & Spanish flag icons:

<a href="" class="english">English Flag</a>
<a href="" class="spanish">Spanish Flag</a>

Assuming your page naming convention is:

aboutus.html (English)

aboutus_es.html (Spanish)

contact.html (English)

contact_es.html (Spanish)

The javascript -

<script>
// assign language anchor tags to variables
const english = document.querySelector('.english');
const spanish = document.querySelector('.spanish');
// get current url
const url = window.location.href;
//get pageName from url string
const pageName = url.substring(url.lastIndexOf('/')+1);
// remove .html from page name
const currentPage = pageName.split('.');
// remove _es from page name
const destinationPage = currentPage[0].replace("_es", "");

english.setAttribute('href', destinationPage + '.html');
spanish.setAttribute('href', destinationPage + '_es.html');

</script>

EDITED

IF you are using a .php include file then all your other pages will be .php files rather than .html files

IF that is the case then change the .html in the last 2 lines of the javascript block of code to .php as below:

english.setAttribute('href', destinationPage + '.php');
spanish.setAttribute('href', destinationPage + '_es.php');

well without seeing your tree and the full web site structure, it's complex to help you in a precise way.

also, without knowing your javascript knowledge, it's not easy too to approach a modern structure of code... (if you want to learn, I keep it basic)...

so to keep it basic, I will say to rename too your spanish home page, from (home-es.html to index-es.html)

then as I don't know if you use or not PHP, I dind't use any PHP and stuck with vanilla JavaScript... that will drive to a complex deal with the URL location... butr we will see it in detail, step by step, just below...

let say that you have in each page a HTML button for swapping language... no label, just and ID, I will let you add the appropriate CSS

<button id="swap_btn"></button>

now you can add to each page of your web site, a Javascript that will handle the init process, and the action process

so first we need two variables accessibles from all outside function, and from everywhere in the page...

1. destination for handling the page destination
2. and defaultpage_serveur for the page root name (in our case as I said above 'index')

so add them to the Javascript file

var destination = '';
var defaultpage_serveur = 'index'

now the init function will execute when the page will load

first we get the url location of this page and extract the filename i.e something.html or something-es.html

it's important to understand that if the URL point to the folder root... the system wont return index.html but an empty string... so it's important for the init function tu anticpate this behavior... we will see it later on

we then remove the .html extension and get the nude page name ... i.e something, or something-es

we could then extract the root of the page (I mean without the probable -es in case it exists...) i.e something in both case

and if we don't find it (I mean an empty string)... that mean that we are on a native page...

in that case, we have to check if the -es is not found... and so check if we are on a page URL or a folder root URL

we then add the -es.html to the end of the appropriate destination

we also set the listener to the button (action)

and finally we can also set the appropriate button label using the innerText property

now we can read the code

function init(){
    var page_location = window.location.href;
    var page_filename = page_location.substring(page_location.lastIndexOf('/')+1);
    var page = page_filename.split('.');
    var pageroot = page[0].split('-');
    var language = '';
    if (pageroot[1] != 'es') {
        if (pageroot[0] == '') {
            destination = defaultpage_serveur + '-es.html'
        } else {
            destination = pageroot[0] + '-es.html'
        }
        language = "Spanish"
    } else {
        destination = pageroot[0] + '.html'
        language = "Original"
    }
    var swap_btn_btn = document.getElementById('swap_btn');
    swap_btn_btn.onclick = swap_btn_action
    swap_btn_btn.innerText = language
}

now it's time to add the callback added to the button listener

function swap_btn_action(){
    window.location.href = destination
}

now load everything and give it a test... if you need any further help please, don't hesitate...

but as I said, it's not a compact modern JavaScript, but I think that it is most clear, and easy to understand the logic behind...