Language And Currency¶
The <language-and-currency> webcomponent is used to handle the change of language and currency locally in the shop. This webcomponent is used in language_and_currency module and internally makes a use of h-modal webcomponent.
Usage requires adding two HTML elements (any type, e.g. text, image, icon) inside of it, each of them need to have a slot attribute, one with value languages and the second one with value currencies. Each of them represents content for a specific part of the webcomponent.
DOM events¶
This webcomponent listens to the following DOM events:
Example¶
Here is an example of language and currency element usage. We also used the language and currency styles for presentation purposes.
<language-and-currency>
<div class="language-and-currency__modal-opener">
<img src="/libraries/flags/pl_PL.png" alt="Flag" class="language-and-currency__flag" />
<div class="language-and-currency__label">polish / zł</div>
</div>
<div slot="languages">
<p class="font_size-s">Languages</p>
<div class="radio-box-group">
<div class="radio-box radio-box-group__radio-box">
<input
type="radio"
id="language-radio-box-1"
name="language-and-currency-language"
value="/pl/index"
class="radio-box__input"
checked
>
<label class="radio-box__label" for="language-radio-box-1">
<img
src="/libraries/flags/pl_PL.png"
alt="Flag"
class="language-and-currency__flag"
>
Polish / Poland
</label>
</div>
<div class="radio-box radio-box-group__radio-box">
<input
type="radio"
id="language-radio-box-2"
name="language-and-currency-language"
value="/en_US/index"
class="radio-box__input"
>
<label class="radio-box__label" for="language-radio-box-2">
<img
src="/libraries/flags/en_US.png"
alt="Flag"
class="language-and-currency__flag"
>
English / United States
</label>
</div>
</div>
</div>
<div slot="currencies">
<p class="font_size-s">Currencies</p>
<div class="radio-box-group">
<div class="radio-box radio-box-group__radio-box">
<input
type="radio"
id="currency-radio-box-1"
name="language-and-currency-currency"
value="PLN"
class="radio-box__input"
checked
>
<label class="radio-box__label" for="currency-radio-box-1">
PLN - Polish Zloty (zł)
</label>
</div>
<div class="radio-box radio-box-group__radio-box">
<input
type="radio"
id="currency-radio-box-2"
name="language-and-currency-currency"
value="USD"
class="radio-box__input"
>
<label class="radio-box__label" for="currency-radio-box-2">
USD - US Dollar ($)
</label>
</div>
</div>
</div>
</language-and-currency>
Children of the webcomponent¶
We mentioned the slots with specific names above. In each of those slots it is necessary to render a group of radio elements with name attribute that has a value of either language-and-currency-language or language-and-currency-currency depending on the slot it belongs to. This way the webcomponent will always know which language or currency to change.