Мобильная версия
HTML:
class="lang-switcher"
id="lang-switcher-{{ block.id }}"
data-block-id="{{ block.id }}"
{% if style_attributes != blank %}style="{{ style_attributes }}"{% endif %}
{{ block.shopify_attributes }}
>
{{ localization.country.name }}
{{ localization.language.endonym_name }}
{{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }}
class="content"
id="lang-switcher-sheet-{{ block.id }}"
role="dialog"
aria-modal="true"
aria-labelledby="lang-switcher-title-{{ block.id }}"
tabindex="-1"
{% if popup_style_attributes != blank %}style="{{ popup_style_attributes }}"{% endif %}
>
{{ modal_title }}
{% form 'localization', class: 'lang-switcher__form', return_to: request.path %}
{% for country in localization.available_countries %}
{% assign country_flag_code = country.iso_code | downcase %}
{% assign initial_locale = country.default_locale | default: country.primary_locale | default: localization.language.iso_code %}
{% assign option_language = localization.available_languages | where: 'iso_code', initial_locale | first %}
{% assign option_language_name = option_language.endonym_name | default: option_language.name | default: initial_locale %}
{% assign search_terms = country.name | append: ' ' | append: country.iso_code | append: ' ' | append: option_language_name | append: ' ' | append: country.currency.iso_code %}
width="24"
height="16"
alt=""
loading="lazy"
decoding="async"
>
{{ country.name }}
{{ option_language_name }}
{{ country.currency.iso_code }} {{ country.currency.symbol }}
{% endfor %}
{% endform %}
CSS:
@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');
#lang-switcher-{{ block.id }} {
position: relative;
display: inline-block;
font-family: "Poppins", sans-serif;
}
#lang-switcher-{{ block.id }} .lang-switcher__button {
display: flex !important;
align-items: center;
gap: var(--lang-switcher-button-gap, 12px);
padding: var(--lang-switcher-padding-block, 12px) var(--lang-switcher-padding-inline, 16px) !important;
cursor: pointer;
min-height: auto;
white-space: nowrap;
width: var(--lang-switcher-width, auto);
border-radius: var(--lang-switcher-border-radius, var(--style-border-radius-buttons-primary, 8px));
font-family: var(--font-paragraph--family, "Poppins", sans-serif);
font-size: var(--lang-switcher-language-font-size, var(--font-paragraph--size, 1rem));
transition: filter 0.2s ease;
}
#lang-switcher-{{ block.id }} .button-secondary {
border-color: var(--lang-switcher-button-border, rgba(var(--color-foreground-rgb, 34, 34, 34), 0.2));
}
#lang-switcher-{{ block.id }} .lang-switcher__button--custom {
background-color: var(--lang-switcher-button-bg, var(--color-primary-button-background, #4A98F7));
color: var(--lang-switcher-button-text, var(--color-primary-button-text, #fff));
border: var(--lang-switcher-button-border-width, 1px) solid var(--lang-switcher-button-border, transparent);
}
#lang-switcher-{{ block.id }} .lang-switcher__icon {
margin-left: var(--padding-xs, 4px);
transition: transform 0.2s ease;
}
#lang-switcher-{{ block.id }} .lang-switcher__button:hover,
#lang-switcher-{{ block.id }} .lang-switcher__button:focus-visible {
filter: brightness(0.96);
}
@media (hover: none) {
#lang-switcher-{{ block.id }} .lang-switcher__button:hover,
#lang-switcher-{{ block.id }} .lang-switcher__button.button:hover,
#lang-switcher-{{ block.id }} .lang-switcher__button.button-secondary:hover,
#lang-switcher-{{ block.id }} .lang-switcher__button--custom:hover {
background-color: inherit;
color: inherit;
filter: none;
opacity: 1;
transform: none;
}
}
#lang-switcher-{{ block.id }} .lang-switcher__flag {
display: flex;
align-items: center;
justify-content: center;
width: var(--lang-switcher-flag-width, 24px);
height: 16px;
flex-shrink: 0;
}
#lang-switcher-{{ block.id }} .lang-switcher__flag img {
display: block;
width: 24px;
height: 16px;
border-radius: 2px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
#lang-switcher-{{ block.id }} .lang-switcher__info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--lang-switcher-info-gap, 2px);
text-align: left;
}
#lang-switcher-{{ block.id }} .lang-switcher__country {
font-size: var(--lang-switcher-language-font-size, var(--font-paragraph--size, 1rem));
font-weight: var(--lang-switcher-language-font-weight, 600);
line-height: 1.2;
}
#lang-switcher-{{ block.id }} .lang-switcher__language {
font-size: var(--lang-switcher-language-font-size, var(--font-paragraph--size, 1rem));
font-weight: var(--lang-switcher-language-font-weight, 500);
line-height: 1.2;
opacity: 0.85;
text-transform: var(--lang-switcher-text-transform, none);
}
#lang-switcher-{{ block.id }} .lang-switcher__currency {
font-size: var(--lang-switcher-currency-font-size, calc(var(--font-paragraph--size, 1rem) * 0.85));
font-weight: var(--lang-switcher-currency-font-weight, 400);
opacity: 0.7;
line-height: 1.2;
text-transform: var(--lang-switcher-text-transform, none);
}
#lang-switcher-{{ block.id }} .lang-switcher__details {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
font-size: var(--lang-switcher-currency-font-size, calc(var(--font-paragraph--size, 1rem) * 0.85));
color: rgba(var(--color-foreground-rgb, 34, 34, 34), 0.7);
}
#lang-switcher-{{ block.id }}.lang-switcher--open .lang-switcher__icon {
transform: rotate(180deg);
}
#lang-switcher-{{ block.id }} .bottom-sheet {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-end;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s linear;
z-index: 2147483000;
}
#lang-switcher-{{ block.id }} .bottom-sheet.show {
opacity: 1;
pointer-events: auto;
}
#lang-switcher-{{ block.id }} .sheet-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background: #000;
z-index: -1;
}
#lang-switcher-{{ block.id }} .content {
--lang-switcher-horizontal-padding: 30px;
width: 100%;
position: relative;
background: var(--color-background, #fff);
max-height: 85vh;
height: 70vh;
max-width: 1150px;
padding: 25px var(--lang-switcher-horizontal-padding, 30px) 30px;
transform: translateY(100%);
border-radius: 12px 12px 0 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
outline: none;
}
#lang-switcher-{{ block.id }} .bottom-sheet.show .content {
transform: translateY(0%);
}
#lang-switcher-{{ block.id }} .bottom-sheet.dragging .content {
transition: none;
}
#lang-switcher-{{ block.id }} .bottom-sheet.fullscreen .content {
border-radius: 0;
}
#lang-switcher-{{ block.id }} .header {
position: relative;
display: flex;
flex-direction: column;
width: calc(100% + (var(--lang-switcher-horizontal-padding, 30px) * 2));
margin: 0 calc(-1 * var(--lang-switcher-horizontal-padding, 30px)) 16px;
padding: 0 var(--lang-switcher-horizontal-padding, 30px) 16px;
}
#lang-switcher-{{ block.id }} .header::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--lang-switcher-option-border, #e0e0e0);
}
#lang-switcher-{{ block.id }} .drag-icon {
cursor: grab;
user-select: none;
padding: 15px;
margin-top: -15px;
width: 100%;
display: flex;
justify-content: center;
touch-action: none;
}
#lang-switcher-{{ block.id }} .drag-icon span {
height: 4px;
width: 40px;
display: block;
background: #C7D0E1;
border-radius: 50px;
}
#lang-switcher-{{ block.id }} .header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
#lang-switcher-{{ block.id }} .lang-switcher__title {
margin: 0;
font-size: var(--font-h4--size, 1.8rem);
font-weight: 600;
font-family: var(--font-h4--family, "Poppins", sans-serif);
}
#lang-switcher-{{ block.id }} .sheet-close {
background: transparent;
border: none;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
transition: opacity 0.2s ease;
}
#lang-switcher-{{ block.id }} .sheet-close__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(29, 29, 31, 0.08);
}
#lang-switcher-{{ block.id }} .sheet-close:hover {
opacity: 0.7;
}
#lang-switcher-{{ block.id }} .body {
height: 100%;
overflow-y: auto;
padding: 0 0 24px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
#lang-switcher-{{ block.id }} .body::-webkit-scrollbar {
width: 0;
height: 0;
}
#lang-switcher-{{ block.id }} .lang-switcher__search {
position: relative;
margin-bottom: 18px;
}
#lang-switcher-{{ block.id }} .lang-switcher__search-input {
width: 100%;
padding: var(--padding-sm, 10px) var(--padding-md, 12px);
padding-right: 40px;
border-radius: var(--lang-switcher-option-radius, var(--style-border-radius-buttons-primary, 8px));
border: 1px solid var(--lang-switcher-option-border, #e0e0e0);
background: rgba(var(--color-background-rgb, 255, 255, 255), 0.95);
color: var(--lang-switcher-option-color, inherit);
font-family: var(--font-paragraph--family, "Poppins", sans-serif);
font-size: max(16px, var(--lang-switcher-language-font-size, var(--font-paragraph--size, 1rem)));
line-height: 1.2;
-webkit-text-size-adjust: 100%;
}
#lang-switcher-{{ block.id }} .lang-switcher__search-input:focus {
outline: 2px solid rgba(var(--color-foreground-rgb, 34, 34, 34), 0.2);
outline-offset: 2px;
}
#lang-switcher-{{ block.id }} .lang-switcher__search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(var(--color-foreground-rgb, 34, 34, 34), 0.5);
transition: color 0.2s ease, opacity 0.2s ease;
border-radius: 4px;
}
#lang-switcher-{{ block.id }} .lang-switcher__search-clear:hover {
color: rgba(var(--color-foreground-rgb, 34, 34, 34), 0.8);
background: rgba(var(--color-foreground-rgb, 34, 34, 34), 0.05);
}
#lang-switcher-{{ block.id }} .lang-switcher__search-clear:active {
opacity: 0.6;
}
#lang-switcher-{{ block.id }} .lang-switcher__search-clear[hidden] {
display: none;
}
#lang-switcher-{{ block.id }} .lang-switcher__options {
display: flex;
flex-direction: column;
gap: var(--padding-xs, 10px);
}
#lang-switcher-{{ block.id }} .lang-switcher__option {
display: flex;
align-items: center;
gap: var(--padding-md, 12px);
padding: var(--padding-md, 12px) var(--padding-lg, 16px);
background: transparent;
border: 1px solid var(--lang-switcher-option-border, #e0e0e0);
border-radius: var(--lang-switcher-option-radius, var(--style-border-radius-buttons-primary, 8px));
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
text-align: left;
width: 100%;
color: var(--lang-switcher-option-color, inherit);
}
#lang-switcher-{{ block.id }} .lang-switcher__option:hover {
background: var(--lang-switcher-hover-bg, rgba(var(--color-foreground-rgb, 34, 34, 34), 0.05));
border-color: var(--lang-switcher-hover-border, var(--lang-switcher-option-border, #e0e0e0));
color: var(--lang-switcher-hover-color, var(--lang-switcher-option-color, inherit));
}
#lang-switcher-{{ block.id }} .lang-switcher__option--active {
background: var(--lang-switcher-selected-bg, var(--color-primary-button-background, #4A98F7));
border-color: var(--lang-switcher-option-border, #e0e0e0);
color: var(--lang-switcher-selected-color, var(--color-primary-button-text, #fff));
}
#lang-switcher-{{ block.id }} .lang-switcher__option--active:hover {
background: var(--lang-switcher-hover-bg, var(--lang-switcher-selected-bg, var(--color-primary-button-background, #4A98F7)));
color: var(--lang-switcher-hover-color, var(--lang-switcher-selected-color, var(--color-primary-button-text, #fff)));
}
#lang-switcher-{{ block.id }} .lang-switcher__option-flag {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
flex-shrink: 0;
position: relative;
}
#lang-switcher-{{ block.id }} .lang-switcher__option-flag img {
display: block;
width: 28px;
height: 18px;
border-radius: 3px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
#lang-switcher-{{ block.id }} .lang-switcher__option-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1;
min-width: 0;
}
#lang-switcher-{{ block.id }} .lang-switcher__option-name {
font-size: var(--lang-switcher-language-font-size, var(--font-paragraph--size, 1rem));
font-family: var(--font-paragraph--family, "Poppins", sans-serif);
line-height: 1.2;
font-weight: var(--lang-switcher-language-font-weight, 500);
}
#lang-switcher-{{ block.id }} .lang-switcher__option-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: var(--lang-switcher-currency-font-size, calc(var(--font-paragraph--size, 1rem) * 0.85));
color: rgba(var(--color-foreground-rgb, 34, 34, 34), 0.7);
}
#lang-switcher-{{ block.id }} .lang-switcher__option-language {
font-weight: var(--lang-switcher-language-font-weight, 500);
}
#lang-switcher-{{ block.id }} .lang-switcher__option-currency {
white-space: nowrap;
}
#lang-switcher-{{ block.id }} .lang-switcher__option-check {
width: 1.4rem;
height: 1.4rem;
opacity: 0;
transition: opacity 0.2s ease;
}
#lang-switcher-{{ block.id }} .lang-switcher__option--active .lang-switcher__option-check {
opacity: 1;
}
#lang-switcher-{{ block.id }} .lang-switcher__option[hidden] {
display: none;
}
@media (max-width: 600px) {
#lang-switcher-{{ block.id }} .content {
--lang-switcher-horizontal-padding: 20px;
padding: 24px var(--lang-switcher-horizontal-padding, 20px) 28px;
}
#lang-switcher-{{ block.id }} .lang-switcher__title {
font-size: var(--font-h5--size, 1.6rem);
}
}
Подробнее здесь: https://stackoverflow.com/questions/797 ... ios-safari
