Inherited a theme and cannot contact the original developer. In the site, there are toggles so that users can switch between English and Spanish versions of the content. The toggle JS is included in a theme file under assets and read as such:

$('.js-spanish-toggle').on('click', function() {
    $(this)
        .find('button')
        .toggleClass('active');
    $(this)
        .parents('.spanish-container')
        .toggleClass('is-spanish');
});

Is there a way I can alter that to create URL parameters that can be used to automatically specify the Spanish version should be active? It always defaults to English. So for example, on a job listing, I could have the English version retain the normal URL path /careers/job-listing-1, but to direct and have the toggle state on Spanish, I would use /careers/job-listing#espanol.

Inherited a theme and cannot contact the original developer. In the site, there are toggles so that users can switch between English and Spanish versions of the content. The toggle JS is included in a theme file under assets and read as such:

$('.js-spanish-toggle').on('click', function() {
    $(this)
        .find('button')
        .toggleClass('active');
    $(this)
        .parents('.spanish-container')
        .toggleClass('is-spanish');
});

Is there a way I can alter that to create URL parameters that can be used to automatically specify the Spanish version should be active? It always defaults to English. So for example, on a job listing, I could have the English version retain the normal URL path /careers/job-listing-1, but to direct and have the toggle state on Spanish, I would use /careers/job-listing#espanol.

• jquery
• parameter

• I had to address something similar a while ago for a microsite and ended up using CookieJS to set a quick little 'language preference' cookie for the user. Different actions on the site would toggle the preferred language and page loads would use the cookie to determine which language to display on a myriad of elements. – Tony Djukic Commented Jan 25, 2022 at 23:39

1 Answer 1

You need to process 2 scenarios:

1. When page is loaded with #espanol hash
2. When button is clicked

    //check for #espanol hash and toggle on page load
    spanishByHash();

    //process toggle on click event
    $('.js-spanish-toggle').on('click', function() {
        hashToggle();
        spanishToggle();        
    });
    
    function spanishToggle() {
         $('.js-spanish-toggle')
             .find('button')
             .toggleClass('active');
         $('.js-spanish-toggle')
             .parents('.spanish-container')
             .toggleClass('is-spanish');
    }

    function hashToggle(){  
        if($(location).prop('hash') === '#espanol'){
            $(location).prop('hash','');
        }else{
            $(location).prop('hash','#espanol');
        }   
    }
    
    function spanishByHash(){
        if($(location).prop('hash') === '#espanol'){
            spanishToggle();
        }       
    }