Lifehack úpravy pro prodejní formulář
Přejmenování textu platební metody Dobírka
Nahraďte text uvnitř uvozovek -> nový název platební metody dobírka -> novým názvem, třeba Doběrečné.
Kód pro "dlaždice":
<script>
window.onload = function() {
let element = document.querySelector('.f-collect-on-delivery');
if (element && element.textContent.includes("Dobírka")) {
element.textContent = element.textContent.replace("Dobírka", "nový název platební metody dobírka");
}
};
</script>
Skript se vkládá na stránku, ve které je prodejní formulář, u kterého chcete přejmenování Dobírky provést.
Kód pro "přepínače":
Ukázka změny názvu platební metody "Twisto" na "Cvičím ihned, platím za 30dní".
<script>
window.onload = function () {
let element = document.querySelector('.f-wire-later-twisto');
if (element && element.textContent.includes("Twisto")) {
let divElement = element.querySelector('div').querySelector('div')
divElement.textContent = divElement.textContent.replace("Twisto", "Cvičím ihned, platím za 30dní");
}
};
</script>
- Doplnění dlaždice Bankovní převod o další text
Výchozí text Bankovní převod se nahradí novým textem mezi posledními uvozovkami - "Bankovní převod s QR kódem". Pro zalomení řádku mezi "Bankovní převod" a "s QR kódem" je potřeba použít nezalomitelné mezery a jednotlivá slova ... s+QR+kódem ... oddělit speciálním znakem.
<script>
window.onload = function() {
let element = document.querySelector('.f-wire');
if (element && element.textContent.includes("Bankovní převod")) {
element.textContent = element.textContent.replace("Bankovní převod", "Bankovní převod s QR kódem");
}
};
</script>
Zvětšení písma chybových hlášek v prodejním formuláři
Kód se vkládá do stránky, ve které je prodejní formulář u kterého chcete provést změnu. Upravuje specificky pouze velikost červených textů chybových hlášek.
Hodnotu 1.5em můžete přepsat na jiné číslo, např. 2em nebo 1.2 em.
<style>
.f-text-red-600 {
font-size: 1.5em !important;
}
</style>
Změna textu chybové hlášky u nezaškrnutých obchodních podmínek
Text si lze libovolně přepsat na jiný. Script se vkládá na stránku, ve které je prodejní formulář, u kterého chceme docílit změny.
<script>
// Vytvoření instance MutationObserver
let observer = new MutationObserver((mutationsList, observer) => {
// Projděte všechny mutace, které byly zaznamenány
for(let mutation of mutationsList) {
// Pokud byla přidána nová uzlová hodnota (textContent)
if(mutation.type === 'childList') {
let spanElement = document.querySelector('.f-text-red-600.f-text-xs.f-mt-1 span');
// Zkontrolujte, zda existuje element <span> a zda obsahuje v jednoduchých uvozovkách definovaný text, který chceme přepsat
if(spanElement && spanElement.textContent.trim() === 'Musíte sa oboznámiť s obchodnými podmienkami.') {
//následující text v jednoduchých uvozovkách nahrazuje původní text
spanElement.textContent = 'Je potrebné oboznámiť sa s obchodnými podmienkami.';
// ukončení sledování mutací, jakmile je text aktualizován
observer.disconnect();
}
}
}
});
// Nastavení konfigurace observeru
let config = { childList: true, subtree: true };
// Spuštění observeru na celém dokumentu
observer.observe(document, config);
</script>
Přidání popisku produktu do prodejního formuláře
Nejprve je potřeba získat identifikátor produktu z prodejního formuláře.
Poté jej vložit do scriptu níže.
Dále je potřeba nechat si vygenerovat HTML kódy a nahradit hodnotu TEXT za tento kód.
A v poslední řadě vložit tento kód do stránky s formulářem.
Video návod:
<script>
(function () {
// Upravte třídu, která se nachází na elementu, kam chcete přidat popisek produktu
let element = document.querySelector('.fapi-product-XXX');
// Vložte text mezi '' místo hodnoty TEXT, a nahraďte je popiskem produktu, který se má zobrazit
let text = 'TEXT';
//Dále neupravujte
if (!element) {
console.log('Element not found!');
return;
}
let label = element.querySelector('label');
let additionalText = document.createElement('div');
additionalText.innerHTML = text;
label.appendChild(additionalText);
})();
</script>
- Změna názvů sekcí prodejního formuláře
V proměnné 'names' se nachází nové názvy sekcí, které si můžete upravit dle potřeby.
<script>
window.onload = function() {
//Zde změňte názvy sekcí
var names = {
items: 'Položky a ceny',
miniUpsell: 'Speciální nabídka',
basicData: 'Fakturační údaje',
customFields: 'Doplňující informace',
shippingMethods: 'Způsob doručení',
paymentMethods: 'Způsob platby',
result: 'Shrnutí objednávky',
};
var elements = [];
var form = document.getElementsByClassName('fapi-order-form')[0];
elements['items'] = form.getElementsByClassName('fapi-form-items')[0]?.firstChild.firstChild.firstChild.firstChild;
elements['miniUpsell'] = form.getElementsByClassName('order-bump')[0]?.firstChild.firstChild;
elements['basicData'] = form.getElementsByClassName('fapi-form-basic-data')[0]?.firstChild.firstChild.firstChild;
elements['customFields'] = form.getElementsByClassName('fapi-form-custom-fields')[0]?.firstChild.firstChild.firstChild;
elements['shippingMethods'] = form.getElementsByClassName('fapi-form-shipping-methods')[0]?.firstChild.firstChild.firstChild;
elements['shippingMethods'] = form.getElementsByClassName('fapi-form-shipping-methods')[0]?.firstChild.firstChild.firstChild;
elements['paymentMethods'] = form.getElementsByClassName('fapi-form-payment-methods')[0]?.firstChild.firstChild.firstChild;
elements['result'] = form.getElementsByClassName('fapi-form-result')[0]?.firstChild.firstChild.firstChild;
for (var key in elements) {
if (elements[key] !== undefined && names[key] !== undefined) {
elements[key].innerHTML = names[key];
}
}
};
</script>
- Skrytí možnosti nakupovat na firmu
<script>
window.onload = function() {
let elements = document.querySelectorAll('[name$="-show_full_form.name"]');
elements.forEach(function(element) {
element.parentElement.style.display = "none";
});
};
</script>
Skript se vkládá na stránku, ve které je prodejní formulář, u kterého chcete skrýt možnost nakoupit na firmu.
Zobrazit pouze platební metodu twisto a všechny ostatní skrýt
Funguje pro prodejní formulář s platebními metodami jako radio buttony.
<script>
window.onload = function () {
let elements = document.querySelectorAll('input[name="payment_type"]');
for (let i = 0; i < elements.length; i++) {
if (elements[i].parentNode.classList.contains('f-wire-later-twisto') || elements[i].parentNode.classList.contains('f-wire-part-twisto')) {
continue;
}
elements[i].parentNode.parentNode.style.display = "none";
}
};
</script>
Skrytí platebních metod (dlaždice)
Pomocí toho scriptu můžeme skrýt jakokouliv platební metodu z prodejního formuláře, v případě že jsou platební metody zobrazený jako dlaždice.
<script>
window.onload = function () {
let selectors = ['.f-wire-later-skippay', '.f-wire-platimpak', '.f-wire-part-skippay', '.f-wire-later-twisto', '.f-wire-twisto'];
for (let i = 0; i < selectors.length; i++) {
document.querySelectorAll(selectors[i]).forEach(function (element) {
element.parentNode.remove();
});
}
};
</script>
Popis:
'.f-wire-later-skippay' - je selector podle kterého se najde platební metoda a smaže se z formuláře
Selector najde tak že kliknete pravým tlačítkem na dlaždici, vyberete možnost prozkoumat/inspect.
A v kódu poté naleznete selector. Tento select doplňte do seznamu. Viz screenshot.
Předvybrání platební metody dobírka
Pokud chcete předvybrat platební metodu dobírkou, vložte k prodejnímu fomruláři tento script.
<script>
window.onload = function () {
let element = document.querySelector('.f-collect-on-delivery');
if (element) {
element.click();
}
};
</script>