If I chose a dropdown field and if I do not set a default value, ‘Select Value’ appears. It would be nice to have the separate settings for translation this text.
1 Like
Hi there, @Andi
Thanks for the idea! If it gets more votes, we’ll try to think about this option
As for now, you can use this script in the Custom JS field on the Settings tab of your widget’s settings:
const CUSTOM_SELECT_VALUE = 'Select Value';
const WIDGET_CLASS = 'elfsight-app-500a35e2-053a-436f-800b-ade1e5be0f26';
const LISTEN_TYPES = {
one: {
select: (selector, root) => root.querySelector(selector),
validate: (node) => !!node,
},
all: {
select: (selector, root) => root.querySelectorAll(selector),
validate: (node) => node?.length > 0,
},
};
function listenStep(args) {
args.node = args.select(args.selector, args.root);
if (!args.validate(args.node)) {
args.step++;
if (args.step < args.limit)
setTimeout(() => {
listenStep(args);
}, args.delay);
else args.reject();
} else {
args.resolve(args.node);
}
}
async function asyncListenFor(selector, type = 'one', customArgs = {}) {
const args = {
root: document,
node: undefined,
selector,
delay: 100,
limit: 50,
step: 0,
select: LISTEN_TYPES[type].select,
validate: LISTEN_TYPES[type].validate,
...customArgs,
};
if (type === 'one' || type === 'all') {
return new Promise((resolve, reject) => {
listenStep({ ...args, resolve, reject });
});
}
}
const createInput = (placeholder) => {
const input = document.createElement('input');
input.type = 'text';
input.placeholder = placeholder;
input.style.cssText = `
width: calc(98% - 24px) !important;
box-sizing: border-box !important;
padding: 10px 29px 10px 15px !important;
margin: 0px 12px !important;
border: 1px solid rgba(17, 17, 17, 0.6) !important;
border-radius: 4px !important;
position: fixed !important;
top: 10px !important;
left: 0 !important;
background: inherit !important;
z-index: 2 !important;
`;
return input;
};
asyncListenFor(`.${WIDGET_CLASS} [class*="form__Container-sc"]`).then(
(formContainer) => {
const dropdowns = formContainer.querySelectorAll(
'[class*="dropdown__Container-sc"]'
);
for (const dropdown of dropdowns) {
const select = dropdown.querySelector("[class*='dropdown__Select-sc']");
select.textContent = CUSTOM_SELECT_VALUE;
const mutationObserver = new MutationObserver(([{ addedNodes }]) => {
if (addedNodes.length) {
const container = addedNodes[0];
const dropdownContainer = container.querySelector(
'[class*="Dropdown__DropdownContainer-sc"]'
);
const firstValue = dropdownContainer.querySelector(
"[class*='DropdownItem__ItemContainer-sc']:first-child [class*='DropdownItem__Item-sc']"
);
firstValue.textContent = CUSTOM_SELECT_VALUE;
const withFilters = dropdownContainer.childNodes.length > 12;
if (withFilters) {
const filter = createInput('Search...');
dropdownContainer.prepend(filter);
dropdownContainer.style.position = 'relative';
dropdownContainer.style.paddingTop = '60px';
filter.addEventListener('input', (e) => {
const value = e.target.value.trim();
if (value) {
dropdownContainer.childNodes.forEach((node) => {
if (node.nodeName === 'INPUT') {
return;
}
const isTarget = node.textContent
.toLowerCase()
.includes(value.toLowerCase());
if (isTarget) {
node.style.display = 'flex';
} else {
node.style.display = 'none';
}
});
} else {
dropdownContainer.childNodes.forEach((node) => {
if (node.nodeName === 'INPUT') {
return;
}
return (node.style.display = 'flex');
});
}
});
}
}
});
mutationObserver.observe(dropdown, { childList: true });
}
}
);
Replace Select Value in the 1st line of the code with the needed text and you’ll be fine
2 posts were split to a new topic: Translate Select Value