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>