Template edits based on language
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?
-
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
Please sign in to leave a comment.
1 Comments