1

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.

1
  • 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. Jan 25 at 23:39

1 Answer 1

2

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();
        }       
    }
1
  • 1
    This did the trick. Thank you!
    – lushiris02
    Jan 26 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.