Now that we have our 2nd language's home page we'll need to start implementing the toggler functionality. We'll do this before we add the rest of the 2nd language's pages and content to make sure the toggler is working properly and to ensure the main menu stays concise and specific to the language a visitor chooses.
To add the functionality we'll be using JavaScript code to target the specific language variable we added to the 2nd language's home page in Step 2 and later when we finalize the 2nd language's pages. By adding the JavaScript below you will be adding the functionality to show the appropriate toggle button for the default and 2nd languages as well as the correct main menu items depending on which language you are currently viewing.
Grab the JavaScript:
You will need to copy the following code and change a few variables before saving it to your own website's Global JavaScript area. As I've mentioned before each site is unique so a few options in the following code must be set manually before it will work correctly...
Add the JavaScript:
After you've copied the code from above you'll need to paste the content into your Wild Apricot admin's "Global javascript" section. To do so, just browse to the [Settings] > "Global javascript" section in your Wild Apricot admin and paste the content into the textarea. You'll need to make some changes to the code before saving so please proceed to the instructions below this image...
Customize the JavaScript:
Now that you've pasted the JavaScript code into the editor you'll need to find the 4 variables that need to be set manually for your own website. To make editing this code a little easier you can click + drag the editor window's expander located in the bottom right corner down to show more of the code in one viewable area.
We've added some comments in the code to help you find what needs to be customized and these variables are also outlined for you here:
var siteUrl = 'http://YOUR-DOMAIN-NAME.org';
var siteLanguage2slug = 'YOUR-CUSTOM-SLUG/~VARIABLE';
var siteLanguageDefault = 'DEFAULT LANGUAGE';
var siteLanguage2 = 'SECOND LANGUAGE';
You should not need to edit anything else in this script unless you need more language options or other custom functionality. Adding additional languages or functionality
is not included for the sake of keeping this tutorial as simple as possible. If you need additional languages or functionality please contact us for assistance.
After you've customized the JavaScript be sure to click on the "Save" button to save your changes.
That does it for Step 3. The "hard part" is now over ;)
Your 2nd language's home page should have now disappeared from the main menu if you managed to successfully implement the toggler JavaScript. Don't fret though as this is a good thing and is intentional.
Furthermore, you should now see the 2nd language's toggle button in your website's Header area. Since I used "spanish" for my custom 2nd language variables my button now automatically says "spanish", is clickable, and takes the visitor to the 2nd language's home page that we created...
And when on any pages with the custom language variable ~spanish in the URL the language toggler button will switch to the default language and home page link...
The language toggler buttons are styled with basic CSS code and are positioned to match the layout of our tutorial website so now that we know everything is working properly we should proceed to updating the design and positioning of these buttons for your own website's Header area.
Let's move on to
Step 4: Finalizing Your Site so we can tweak the buttons and add the remaining pages and content for our 2nd language.
