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>
Změna textu a ceny položky pro “Balíček č. 1”
Pomocí následujícího kódu můžete přejmenovat název a cenu konkrétní položky v prodejním formuláři. Text v uvozovkách můžete libovolně upravit.
<script>
window.onload = function () {
// Najde element s názvem balíčku
const packageTitle = document.querySelector('.fapi-form-item-group-0 .fapi-form-basic-block-title');
console.log(packageTitle); // Debug, zobrazí element v konzoli
if (packageTitle) {
// Změna textu názvu balíčku
packageTitle.textContent = "Balíček č. 1 - Speciální nabídka";
}
}
</script>
Popis:
- Třída fapi-form-item-group-0: Identifikuje skupinu položek v prodejním formuláři.
- Třída fapi-form-basic-block-title: Označuje konkrétní element obsahující název balíčku.
- textContent: Používá se ke změně obsahu textu daného elementu.
Použití:
- Vložte tento skript na stránku, kde je prodejní formulář.
- Ujistěte se, že správně zacílené třídy odpovídají elementům v HTML formuláře.
- Ověřte zda se text automaticky upraví.
Nebo vložte script do políčka Trakovací kód (HTML).
POZOR! Trakovací kód se nespouští v administraci FAPI, ověření kódu uděláte na stránce kde máte vložný prodejní formulář nebo na čisté stránce prodejního formuláře.
Změna textu "Název firmy" na vlastní
Pro změnu textu Název firmy můžete použít tento script:
<script>
const companyLabels = document.querySelectorAll('label[for$="-company"]');
companyLabels.forEach(label => {
if (label) {
label.textContent = "Company / University";
}
});
</script>
Použití:
- Vložte tento skript na stránku, kde je prodejní formulář.
- Ujistěte se, že správně zacílené třídy odpovídají elementům v HTML formuláře.
- Ověřte zda se text automaticky upraví.
Nebo vložte script do políčka Trakovací kód (HTML).
POZOR! Trakovací kód se nespouští v administraci FAPI, ověření kódu uděláte na stránce kde máte vložný prodejní formulář nebo na čisté stránce prodejního formuláře.