Create a "Block/Menu" and place it on pages where the search filter is enabled.
For example, in the item "Enter characters upon detection of which to display Block/Menu:" specify:
/en/shop/
/en/pers_shop/
Example of translating lines, as well as the "Apply" button.
<script>
(function() {
const $dict = {
"Color": "Color",
"Blue": "Blue",
"Green": "Green",
"Black": "Black"
};
/*
Example translations:
RU: "Color": "Color", "Blue": "Blue", "Green": "Green", "Black": "Black"
UA: "Color": "Color", "Blue": "Blue", "Green": "Green", "Black": "Black"
PL: "Color": "Kolor", "Blue": "Niebieski", "Green": "Zielony", "Black": "Czarny"
*/
const applyTranslations = () => {
Object.entries($dict).forEach(([txtorig, txtnew]) => {
const selectors = [
`#shop_catalog_product_types_id_ajax .product_types_valuebox_checkbox span`,
`#shop_catalog_product_types_id_ajax .shop_catalog_product_types_block_title`,
`.shop_catalog_product_properties_block .shop_catalog_product_types_block_title`,
`.shop_catalog_product_properties_block .product_types_valuebox_checkbox`
];
selectors.forEach(selector => {
document.querySelectorAll(selector).forEach(el => {
if (el.textContent.includes(txtorig)) {
el.innerHTML = txtnew;
}
});
});
});
};
applyTranslations();
const target = document.getElementById(`shop_catalog_product_types_id_ajax`);
if (target) {
const observer = new MutationObserver(() => {
observer.disconnect();
applyTranslations();
observer.observe(target, { childList: true, subtree: true });
});
observer.observe(target, { childList: true, subtree: true });
}
setTimeout(() => {
const smartSearchInput = document.querySelector(`.hotengine-smart_search_submit_button input`);
if (smartSearchInput) smartSearchInput.value = "Apply";
const searchInpButton = document.querySelector(`#searchinp_smart_search .button`);
if (searchInpButton) searchInpButton.value = "Apply";
}, 100);
})();
</script>
Example of translation with word overwriting:
<script>
(function() {
const $dict = {
"Colour": "Farbe",
"Blue": "Blau",
"Green": "Grün",
"Black": "Schwarz"
};
/*
Example translations:
RU: "Colour": "Color", "Blue": "Blue", "Green": "Green", "Black": "Black"
UA: "Colour": "Color", "Blue": "Blue", "Green": "Green", "Black": "Black"
PL: "Colour": "Kolor", "Blue": "Niebieski", "Green": "Zielony", "Black": "Czarny"
*/
const applyTranslations = (container) => {
Object.entries($dict).forEach(([txtorig, txtnew]) => {
const regex = new RegExp(txtorig, "g");
if (container.innerHTML.includes(txtorig)) {
container.innerHTML = container.innerHTML.replace(regex, txtnew);
}
});
};
const target = document.getElementById(`shop_catalog_product_types_id_ajax`);
if (target) {
applyTranslations(target);
const observer = new MutationObserver(() => {
observer.disconnect();
applyTranslations(target);
observer.observe(target, { childList: true, subtree: true });
});
observer.observe(target, { childList: true, subtree: true });
}
setTimeout(() => {
const smartSearchInput = document.querySelector(`.hotengine-smart_search_submit_button input`);
if (smartSearchInput) smartSearchInput.value = "Apply";
const searchInpButton = document.querySelector(`#searchinp_smart_search .button`);
if (searchInpButton) searchInpButton.value = "Apply";
}, 100);
})();
</script>
Similarly, you can add other languages and new words by placing the code on the corresponding language versions of the site.