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 ↓

Code: html


  <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>

Code: CSS стиль

 

  .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;}

Code: JavaScript

 <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>

Updated the layout for the display of the 'Add to Cart' button.
Added mobile display of the table with products in the Admin Center
Added a function to display the values selected in the search filter at the top of the page.

Login