Зміна картинок та інших блоків залежно від обраної мови
Нажаль, EComposer не надає можливості змінювати картинки залежно від обраної мови. Але це можна реалізувати за допомогою JS та CSS.
Примітка
Цей спосіб також можна використовувати поза EComposer
Реалізація через JS+CSS
Примітка
Цей спосіб реалізації має мінус - він відпрацьовує з затримкою, оскільки JS код відпрацьовує лише після повного завантаження сторінки, тому краще використовувати реалізацію через CSS
1. Зробити дубляж картинки/блоку на відповідних мовах
2. В Attributes > CSS Classes до кожної картинки/блоку клас custom-image [en/es/de/fr]-custom-image (з квадратних дужок вибрати мову до якої відноситься картинка/блок)
3. Натиснути Publish, перейти в Custom JS/CSS натиснути на поле Custom CSS
4. Додати наступний код:
div.ecom-block.custom-image{
display: none;
}
5. Натиснути Save
6. Натиснути на поле Custom JS
7. Додати наступний код:
document.addEventListener("DOMContentLoaded", function() {
if (document.documentElement.lang === 'en') {
var style = document.createElement('style');
style.innerHTML = '.en-custom-image { display: block !important; }';
document.head.appendChild(style);
}
if (document.documentElement.lang === 'es') {
var style = document.createElement('style');
style.innerHTML = '.es-custom-image { display: block !important; }';
document.head.appendChild(style);
}
if (document.documentElement.lang === 'de') {
var style = document.createElement('style');
style.innerHTML = '.de-custom-image { display: block !important; }';
document.head.appendChild(style);
}
});
8. Натиснути Save
9. Натиснути Save & Publish
Реалізація через CSS
1. Зробити дубляж картинки/блоку на відповідних мовах
2. В Attributes > CSS Classes до кожної картинки/блоку клас custom-image [en/es/de/fr]-custom-image (з квадратних дужок вибрати мову до якої відноситься картинка/блок)
3. Натиснути Publish, перейти в Custom JS/CSS натиснути на поле Custom CSS
4. Додати наступний код:
.custom-image{
display: none;
}
html:lang(en) {
.en-custom-image {
display: block !important;
}
}
html:lang(es) {
.es-custom-image {
display: block !important;
}
}
html:lang(de) {
.de-custom-image {
display: block !important;
}
}