You can customize content in site page wrappers for specific locales and insert a locale selector to enable constituents and visitors to change to their preferred locale.
You can enter localized content in the locale tabs on the:
-
Meta Tags page for the page Header content that defines the:
-
Site Title that displays after the page name in the web browser title bar when the page is displayed or in search results
-
META Keywords that return pages associated with this page wrapper in results from search engines
-
META Description that is used with all pages associated with this page wrapper
-
Additional HTML Tags for the HEAD Element, such as link or SCRIPT elements for JavaScript, tags for the responsive layout options, and other behaviors for the pages associated with this page wrapper
-
-
Body Tag Attributes page that defines the:
-
Margin space between the edge of the browser and the pages
-
Background color or image displayed in the page wrapper
-
OnLoad Action to perform when pages associated with this wrapper display
-
OnUnLoad Action to perform when pages associated with this wrapper closes
-
Additional attributes for the BODY tag in name="value" pairs
-
HTML Body page that specifies the words and placeholders for the text and links in the page wrapper
-
Printable Version page that defines the elements to display on the page when constituents send it to a printer
-
To enable constituents and visitors to view page content in a preferred locale selected on the site, you can provide links to switch to specific locales or insert a locale switcher somewhere in the header area of the page wrapper Body. You can use the S73 tag to help you construct the switcher. For information or assistance, contact your Client Success Manager.
If the site supports two locales in addition to the site default, you can add a pair of links to the appropriate versions of the page wrapper. For example, on the en_CA version of the page on a Canadian site with en_CA as their site default, you can insert the:
-
<a class="localeSwitch" href="[S73:fr_CA]]">français</a> link on the en_CA version of the page wrapper to enable page viewers to switch to the French Canadian language and locale conventions
And then use the
-
<a class="localeSwitch" href="[[S73:en_CA]]">English</a> link on the fr_CA version to enable the page viewers to switch back to the English language and locale convention page.
For sites that support several different locales, the following can be added to create a locale drop-down that page viewers can use to select their preferred locale:
<div class="localeChooser">
<select class="localeSelect">
<option id="locale_en_US" value="[[S73:en_US]]"[[?xxen_USx::x[[S80:locale]]x:: selected="selected"::]]>English (US) (en_US)</option>
<option id="locale_en_GB" value="[[S73:en_GB]]"[[?xen_GBx::x[[S80:locale]]x:: selected="selected"::]]>English (GB) (en_GB)</option>
<option id="locale_en_AU" value="[[S73:en_AU]]"[[?xen_AUx::x[[S80:locale]]x:: selected="selected"::]]>English (AU) (en_AU)</option>
<option id="locale_en_CA" value="[[S73:en_CA]]"[[?xen_CAx::x[[S80:locale]]x:: selected="selected"::]]>English (CA) (en_CA)</option>
<option id="locale_fr_CA" value="[[S73:fr_CA]]"[[?xfr_CAx::x[[S80:locale]]x:: selected="selected"::]]>français (CA) (fr_CA)</option>
<option id="locale_es_US" value="[[S73:es_US]]"[[?xes_USx::x[[S80:locale]]x:: selected="selected"::]]>español (US) (es_US)</option>
</select>
<span class="localeFlag"><img src="resources/images/country_flags/flag_us.gif"></span>
</div>
<script type="text/javascript">
Y.use("jquery-noconflict", function(Y) {
// Locale switcher
function setFlag(locale) {
var countryCode = locale.substring(locale.length-2).toLowerCase();
jQuery('.localeFlag').html('<img src="resources/images/country_flags/flag_' + countryCode + '.gif">');
}
setFlag("[[?xx::x[[S80:locale]]x::en_US::[[S80:locale]]]]");
jQuery('.localeSelect option#locale_[[?xx::x[[S80:locale]]x::en_US::[[S80:locale]]]]').attr('selected', 'selected');
// On locale change, go to generated link
jQuery('.localeSelect').change(function() {
window.location = jQuery('.localeSelect option:selected').val();
});
});
</script>