Multilanguage, language selection menu
Example:
RU
EN
The code below creates a button for switching to alternative languages, and if an alternative language version is specified to the page, it will be used.
1) Paste the Css code into the Design Editor, in the CSS tab.
2) Add JavaScript to the block / menu displayed on all pages.
3) Paste the code of the drop-down list of languages in the block / menu in which you want to place it, for example, in the header of the site.
4) Remove the unnecessary language from the block (class hotengine-shop-select-language-val)
Language selection menu code ↓
<span class="hotengine-shop-select-language-box"> <span class="hotengine-shop-select-language"></span> <span class="hotengine-shop-select-language-values"> <span class="hotengine-shop-select-language-val" data-language="ru">RU</span> <span class="hotengine-shop-select-language-val" data-language="en">EN</span> <span class="hotengine-shop-select-language-val" data-language="ua">UA</span> <span class="hotengine-shop-select-language-val" data-language="de">DE</span> <span class="hotengine-shop-select-language-val" data-language="fr">FR</span> <span class="hotengine-shop-select-language-val" data-language="es">ES</span> <span class="hotengine-shop-select-language-val" data-language="kz">KZ</span> <span class="hotengine-shop-select-language-val" data-language="by">BY</span> </span> </span>
|
.hotengine-shop-select-language-box { display:inline-block; width:71px; height:30px; overflow:hidden; border:1px solid #D3D3D3; background:#fff; line-height:30px; position:relative; z-index:1000; } .hotengine-shop-select-language { display:inline-block; width:71px; text-align:center; } .hotengine-shop-select-language-values { display:inline-block; width:69px; vertical-align: top; position:absolute; background:rgba(255, 255, 255, 0.80); left:2px; } .hotengine-shop-select-language-box:hover{ overflow:visible;} .hotengine-shop-select-language-values:hover .hotengine-shop-select-language-val{ position:relative; } .hotengine-shop-select-language-val { width:39px; display:block; margin:0px; padding: 0px 17px; vertical-align:top; cursor:pointer; margin-left:-3px; text-align:center; } .hotengine-shop-select-language-val:hover {background:#e8e8e8;}
|
<script type="text/javascript"> <!-- $(document).ready(function(){ var $current_language = $("meta[http-equiv='content-language']").attr("content"); $(".hotengine-shop-select-language").html($current_language.toUpperCase()); $(".hotengine-shop-select-language-val[data-language='"+$(this).attr("data-language")+"']").remove(); $(".hotengine-shop-select-language-box .hotengine-shop-select-language-val").on("click", function(){ if($(this).attr("data-language") !== $current_language || typeof $current_language == typeof undefined){ var $url = $("link[rel='alternate'][hreflang='"+$(this).attr("data-language")+"']").attr("href"); if (typeof $url !== typeof undefined && $url !== false && $url !== "undefined" && $url.length > 0) { window.location.replace($url); } else { var $url = window.location.protocol +"//"+ window.location.host + "/"+$(this).attr("data-language")+"/"; window.location.replace($url); } }
}); }); //--> </script>
|