- #Shopify language switcher code how to
- #Shopify language switcher code update
- #Shopify language switcher code code
Let’s cover what we do each time there is a change on the select element.
#Shopify language switcher code update
With the options created, we then add an event listener to the select element and use this listener to update things on the change event. Next we create the drop-down options inside an immediately invoked function (note the double brackets at the end).Įach option is appended to the select element we specified in the options (the id was mbPOCControlsLangDrop in our example).
Var listOfLanguages = Object.keys(mLstrings) This is initially set to the string passed in for chosenLang. We also set the language in use in the globally accessible mlrLangInUse variable. We do this by looking at the first object in the mLstrings and use the Object.keys() method to create an array from the keys in the object. Then we create an Array of the possible languages. Next we var the HTML element in case we want to update the lang attribute. Best explanation I came across of de-structuring was at We are going to invoke this function with a number of options like this. We are going to have a main function called mlr. OK, that’s all you need to do in the HTML, everything else will be JavaScript. Then at any place you would like to swap some text in a node, add the attribute data-mlr-text. You can provide whatever id you like for the select. The internal option elements are going to be populated by JavaScript. A comment or tweet will be appreciated.įirst of all, we will make our language selector with a standard select element. This option allows you to link Weglot to your own language switcher or to your native menu.Īs you can see in the documentation below, the Weglot Anchors are just links to add to your language switcher in order to manage the translation.įor instance, you create a "Languages" item menu with "English" and "Spanish" as sub-menus.Įnglish will have the link "#Weglot-en" and Spanish will have the link "#Weglot-es".If any seasoned JS devs can point any obvious ways to improve this, I am all ears. Use the arrow on the top left of the console.Right-click on the element you want to place the language switcher into.Then, you will just have to replace the target element (".header-nav") with the CSS selector of the parent element where you want the language switcher to be placed.įor instance, if you want to add it to your menu
#Shopify language switcher code code
Your Weglot.initialize code will be findable into your Shopify admin > Online Store > Themes > Action > Edit Code > weglot_switchers.liquid
#Shopify language switcher code how to
Shopify - How to change the position of the language switcher (documentation with a video) See in the documentation below, how to move the language switcher thanks to the Switchers.options to add to your Weglot.initialize code. You can paste the code below into your Theme.liquid file (or into another liquid file), at the place you want the language switcher to be displayed. Resolutions provided by Weglot (NONE WORKED FOR ME) Under my Theme.liquid file it starts working. Can someone please help to share the right CSS code so that once I put the I tried all the resolutions but nothing has worked for me. I have contacted the Weglot support and got the following resolutions. Unfortunately, nothing has worked for me.
After installing it, under the settings page I have tried all the options to twick the CSS in order to bring the Weglot on the Storefront at the top right page. Recently I have installed the Weglot Language translation App into my Shopify eCommerce store.
0 kommentar(er)
