Drupal 8-developing localized web pages and blocks

Here I am explaining about how we will create localized web pages. Any organization have operations in multiple  locations  which provides  services to specific  regions. So how we will show services to particular region on top when users accessing from their locations.

In previous post I have explained how we will create country sites or local sites. Now in this article I will explain how we will create blocks and pages specific to countries or regions.

In order to achieve this we need to do some configuration at CMS level  and some code changes .

Here we are assuming you have configured  a multi country website  using country path module as mention in this article

As explained in previous article, your country sites can be loaded in using below urls

www.domain.com/us/en

www.domain.com/in/en

So here we are going to explain how we are loading  a news block in home page , block will contain news specific to that country site.

Here we are going to achieve  this using below steps.

1. Create vocabulary of countries
2. Create a vocabulary terms of  news with region code
3. Views with term id as context filer
4. Prepare context filter terms in preprocess function
5. Load view block
6. Store country code in cookie
7. Create Country language switcher

1.Create vocabulary of countries

Here we are going to create a vocabulary under taxonomy  where we will list out all countries,

Go to structure -> taxonomy and create  Vocabulary   named country

Then add terms in this taxonomy. Here we are going to add terms as country two letter code and description as country name.

Keep all taxonomy id’s of terms added under  country.  Here name ,description and taxonomy id are using for future uses across the site.

Taxonomy id ,you will get from term edit URL, for example URL end with term/49 , here 49 is the taxonomy ID.

Next we are going to create a taxonomy for news.

2.Create a taxonomy/vocabulary of  news with region code

Now we are going to create a taxonomy named news type . this taxonomy will have terms  that identifies which region this news belongs to.  we name these terms with corresponding country code. Create news type vocabulary  as below.

Now here we are going to create terms for specific countries. Below term I added for  country India.

Same way you can add a news type term for US location buy putting US country code  in term name.

Here please not down these term id’s that we need to use as context filter. You will get term id from term edit URL.

Here in my website I have a content type called Front Page News.

Add this news type taxonomy as one of the field in Front Page News content type.

3.Views with term id as context filer

Now we are going to create a view block at backend which loads front page news  based on context filter as news type term id.

We are going to create a view for Front Page News content type

Now add context filter as your news category.

Now we can pass news category term id and load news for specific  term. Here context filter is term id of each country.

4. Prepare context filter terms in preprocess function

Here we need to keep all term id in an array. We can also keep this in Settings.php file.

Here we are keeping  news type terms id’s in an variable.

We can place below code in page_preprocess function.  Here we are mapping country code with news type term  id.

$variables['front_news_tid'] = array('in' => 44,'us' => 47, 'uk'=>32);
$variables['front_news_block_tid'] = $variables['front_news_tid']["$country_code"];

We will use ‘front_news_block_tid’  in twig file to filter the view block.

Here $ country_code is the current country code of web site. We will get country code using code mentioned in this post.  You can use below code in page_preprocess functions


//get country path anywhere in the site
$loader = \Drupal::service('domain.negotiator');
$current_domain = $loader->getActiveDomain();
$domain_suffix = $current_domain->getThirdPartySetting('country_path', 'domain_path');
$variables['$country_code'] = $domain_suffix;


5.Load view block

Next we are going to load this block in twig file. You can place below code where you want to load news based on country. Below code will load based on term id assigned to  front_news_block_tid

{{ drupal_view(' front_page_news', ‘front_page_block’, front_news_block_tid) }}


6.Store country code in browser cookie

You can also store country code so that you can use this country code to localized functionalities in java script codes also. Also when ever user opens website,  get country code from  cookie if cookie is not expire. If cookie expired set new country code in cookie.

So using cookie , you can provide localized experience throughout  browser session.

Below provided php code that can be used check cookie exist

function getCookies(){
if(isset($_COOKIE['rem_CountryCode'])) {
return json_decode($_COOKIE['rem_CountryCode']);
}
}

After getting value of  cookie  rem_CountryCode , set it as country code value.

So we can set the value in variables array. If rem_CountryCode cookie is not present  execute code mentioned in 4^th step and store country in cookie rem_CountryCode

7.Create Country  switcher

You can also use country vocabulary to create country language switcher . load country Vocabulary terms in a drop down  box so that users can switch between country sites.

Conclusion

Here I explained some steps and configuration that we can make to achieve localized pages and blocks in a Drupal 8 website. You can also create multi lingual website with these approach. You have to handle language switch based on country selected. I hope this article will help you to achieve localized experience to your users.

Read How to set up country sites