Template edits based on language | Community
Skip to main content

Template edits based on language

  • September 3, 2021
  • 1 reply
  • 0 views
A

I am trying to add something to one of our templates and I want to only have it show up when users are on the English version of our website.

I tried implementing the code below but keep getting errors:

{% if website.selected_language.code == 'en-US' %}
.......
{% end if %}

Is this Liquid wrong or is there another way I have to be referencing the English site?

      1 reply

      Ifra
      • Ifra
      • September 4, 2021

      Hi @Anthony Hopkins, 

      Check the language with the if condition and hide the div and container you want.

      See how I did:

      1). I added a div on home_page.hbs with some special content.

      2). Add a class-name in main parent wrapper of that added parent div - div-main-wrapper.

      3). Now, it would be hidden on all languages and shown only on English language.

      4). Copy and paste it into script.js file at the bottom area.

      $(document).ready(function(){
      var htmllang = document.documentElement.lang;

      // div-main-wrapper - my parent wrapper class which is hidden on all languages
      $('.div-main-wrapper').hide();   

      // when my HC language would be English, the parent wrapper would be show
      if (htmllang === "en-US"){

      // show any div and container
      $('.div-main-wrapper').show();

      }
      });

       

       

      // Hiding div-main-wrapper - my parent wrapper class which is hidden on all languages
      $('.div-main-wrapper').hide();

      // Checking the language, if my HC language would be English the parent wrapper would be shown
      if (htmllang === "en-US"){

      $('.div-main-wrapper').show();

      }

       

      5). Remove the class-name div-main-wrapper and add your div class-name which you want to show and hide.

      Your div class would be different therefore you can replace that with the class name -  div-main-wrapper

       

      6). Don't forget to add jQuery CDN on document_head.hbs file.

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

       

      If any query do let me know :)

      Team

       

      Terms & ConditionsCookie settingsAccessibility statement