How to Build a Bilingual Website

Overview

In this article, we are going to show you how to create a simple but powerful functionality to support both English and Spanish content using Marketpath CMS.

The main concept here is to create a partial template that holds the language information for a specific page template. So, wherever we include this partial, we will be able to determine the selected value of the language field and then serve the content accordingly.

Create a Partial Template

First, we will create the partial template. I will name this ‘_language_selector’ but you can name it whatever you want if you feel you need a more descriptive name.

On this template we will add the following custom fields:

Include Partial Template

After you create your ‘_language_selector’ partial template it is up to you to decide where you want to place it. You can include this partial either on a page template (e.g. if you want to limit the content translation to that single page or set of pages) or on the ‘_header’ partial template to make it globally available.

In this case, we will put it in our ‘_header’ partial template.

<!DOCTYPE html>
<html>
  <head> 
    ...
    {%- include "/_language_selector" -%}
  </head>
  <body>  
    <nav>
      <ul>...</ul>
    </nav>

Set Up Language Toggle Button

We need to add the language toggler button (link) on our navigation bar like in the screenshot below:

To do this, add the code as necessary to your nav element, header element, etc. An example is shown below.

<nav>
  {% if entity.language.is_valid %} <!-- only show if a language is selected -->
     <div class="language-selector">
       {%- if entity.language.value == "english" -%}
         <a class="nav-link" href="{{ entity.spanish_version.value  }}">Spanish</a>
       {%- elsif  entity.language.value == "spanish" -%}
         <a class="nav-link" href="{{ entity.english_version.value }}">English</a>
       {%- endif -%}
      </div>
  {% endif %}
  <ul class="main-nav">...</ul>
</nav>

This is all the code we need. Now, when you edit a page using a template that includes the _language_selector template, you'll be able to select a language from the Language drop-down and it will allow you to pick the translated version of that page.

When we do this, the language selector link will show up on the page and it will allow us to toggle between the two different versions, English and Spanish.

Navigation & Other Elements

This is a quick and easy way to show bilingual content for two languages with Marketpath CMS. But for a full bilingual experience across the entire site (e.g. showing the right language on the navigation menus, CTA's, footer, etc) you would create two versions of each site-wide element and then go through your code to conditionally select the proper language content based on the value stored on the entity.language field (just like we did with the language toggler link).

{%- menu var mainMenu = "Navigation Menu" -%} <!-- defaults to English -->

{%- if entity.language.is_valid and entity.language.value == "spanish" -%}
        {%- menu assign mainMenu = "Navigation Menu: Spanish" -%}
{%- endif -%}

In a future post, we will explain how to extend this functionality to automatically show the translated version of a page based on the browser’s language settings.

We will see you in the next post.