Country Content

Questions or comments?

Purpose

A basic AjaxLoader wrapper that inserts AJAXed-in content based on a visitor's country as determined by https://freegeoip.net.

Working example

How to implement

  1. Create a file with country-specific content for each supported country (e.g., Canada and the United States) in each supported language (e.g., English and French). The file name must include the two letter code for the supported country (e.g., "ca" for Canada and "us" for the United States). The file names for each supported language must be identical except for the country code (e.g., country-content-us-en.html and country-content-ca-en.html).
    • *-us-en.html: 
      <section class="ajaxed-in">
	<h4>Hello United States</h4>
	<p>I'm the content that is shown when the user visits from the United States.</p>
</section>
    • *-ca-fr.html: 
      <section class="ajaxed-in">
	<h4>Bonjour Canada</h4>
	<p>Je suis le contenu qui est affiché lorsque l'utilisateur visite du Canada.</p>
</section>
  2. Add an element to the page that will be the container for the country-specific content.
  3. Add the data-ctrycnt attribute to the element in the previous step where the value is the URL of the country-specific files for the page with the country code replaced by {country}. 
    <div data-ctrycnt="ajax/country-content-{country}-en.html">
  4. Add fallback content to the element to cover the case where country-specific content for the user's country could not be found. 
    <div data-ctrycnt="ajax/country-content-{country}-en.html">
	<h4>Hello World</h4>
	<p>I'm the content that is shown when the country can't be resolved or the country that is returned does not have additional content.</p>
</div>

Configuration options

Option Description How to configure Values
data-ctrycnt Used to AJAX in country-specific content. Add data-ctrycnt="[url]" to the element that will hold the country-specific content, with [url] being the URL of the country-specific content to AJAX in with the language code replaced by {country}. 
<div data-ctrycnt="ajax/country-content-{country}-en.html">
None (default):
Country-specific content is not AJAXed in.
URL
URL for the country-specific content to AJAX in.

Events

Event Trigger What it does
wb-init.wb-calevt Triggered manually (e.g., $( "[data-ctrycnt]" ).trigger( "wb-init.wb-ctrycnt" );). Used to manually initialize the Country Content plugin. Note: The Country Content plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-ctrycnt (v4.0.5+) Triggered automatically after the country content has loaded. Used to identify where country content has loaded (target of the event) 
$( document ).on( "wb-ready.wb-ctrycnt", "[data-ctrycnt]", function( event ) {
});
$( "[data-ctrycnt]" ).on( "wb-ready.wb-calevt", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Country content plugin source code on GitHub

Date modified: