Průvodce AI nástroji pro e-shopaře (4. díl): úpravy e-shopu (téměř) bez programátora

Příklad vygenerovaného kódu:

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Pouze na stránkách objednávky
    if (!/\/objednavka\//.test(window.location.pathname)) {
        return;
    }

    // Najdeme první telefonní pole ve formuláři
    var phoneInput = document.querySelector('form input[type="tel"]');
    if (!phoneInput) {
        return;
    }

    // Najdeme obal kolem pole (form-group) – tam přidáme text
    var container = phoneInput.closest('.form-group') || phoneInput.parentNode;
    if (!container || container.querySelector('.js-phone-note')) {
        return; // už tam je, nepřidávat dvakrát
    }

    var note = document.createElement('p');
    note.className = 'js-phone-note';
    note.textContent = 'Telefon předáme kurýrovi, aby vás mohl kontaktovat.';
    note.style.fontSize = '12px';
    note.style.marginTop = '4px';
    note.style.color = '#777';

    container.appendChild(note);
});
</script>

AI nástroj vám také řekne, kam vygenerovaný kód – tzv. snippet – vložit. V našem případě (e-shop na Shoptetu) zkopírujeme snippet do sekce „HTML kódy“ v editoru vzhledu.

Příklad vygenerovaného kódu:

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Pouze na stránkách objednávky
    if (!/\/objednavka\//.test(window.location.pathname)) {
        return;
    }

    // Najdeme první telefonní pole ve formuláři
    var phoneInput = document.querySelector('form input[type="tel"]');
    if (!phoneInput) {
        return;
    }

    // Najdeme obal kolem pole (form-group) – tam přidáme text
    var container = phoneInput.closest('.form-group') || phoneInput.parentNode;
    if (!container || container.querySelector('.js-phone-note')) {
        return; // už tam je, nepřidávat dvakrát
    }

    var note = document.createElement('p');
    note.className = 'js-phone-note';
    note.textContent = 'Telefon předáme kurýrovi, aby vás mohl kontaktovat.';
    note.style.fontSize = '12px';
    note.style.marginTop = '4px';
    note.style.color = '#777';

    container.appendChild(note);
});
</script>

Doplněný popisek po použití vygenerovaného kódu

Oba snippety můžete jednoduše zkombinovat a mít tak košík bez odkazů na kategorie a s vysvětlením u políčka pro telefon:

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Vložíme CSS pro skrytí vyhledávání a menu v průběhu objednávky
    var style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = `
        /* Skrýt vyhledávání a menu ve všech krocích košíku / objednávky */
        body.ordering-process .search,
        body.ordering-process #formSearchForm,
        body.ordering-process .search-form,
        body.ordering-process .search-input {
            display: none !important;
        }

        body.ordering-process #navigation,
        body.ordering-process #navigation .navigation-in,
        body.ordering-process #navigation .menu-level-1 {
            display: none !important;
        }

        body.ordering-process .menu-helper {
            display: none !important;
        }
    `;
    document.head.appendChild(style);

    // Zbytek platí pouze na stránkách objednávky /objednavka/
    if (!/\/objednavka\//.test(window.location.pathname)) {
        return;
    }

    // Najdeme první telefonní pole ve formuláři
    var phoneInput = document.querySelector('form input[type="tel"]');
    if (!phoneInput) {
        return;
    }

    // Najdeme obal kolem pole (form-group) – tam přidáme text
    var container = phoneInput.closest('.form-group') || phoneInput.parentNode;
    if (!container || container.querySelector('.js-phone-note')) {
        return; // už tam je, nepřidávat dvakrát
    }

    var note = document.createElement('p');
    note.className = 'js-phone-note';
    note.textContent = 'Telefon předáme kurýrovi, aby vás mohl kontaktovat.';
    note.style.fontSize = '12px';
    note.style.marginTop = '4px';
    note.style.color = '#777';

    container.appendChild(note);
});
</script>

Příklad vygenerovaného kódu:

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Najít krátký popis - má třídu "p-short-description"
    var shortDesc = document.querySelector('.p-short-description');
    
    // Najít div s cenou - "p-final-price-wrapper"
    var priceWrapper = document.querySelector('.p-final-price-wrapper');
    
    console.log('Krátký popis:', shortDesc);
    console.log('Cenový wrapper:', priceWrapper);
    
    // Pokud existují oba elementy, přesunout popisek PŘED cenu
    if (shortDesc && priceWrapper) {
        // Vložit popisek před cenový wrapper (tedy nad cenu)
        priceWrapper.parentNode.insertBefore(shortDesc, priceWrapper);
        
        // Přidat trochu odsazení
        shortDesc.style.marginBottom = '20px';
        
        console.log('✓ Popisek přesunut nad cenu!');
    } else {
        console.log('✗ Nepodařilo se najít elementy');
    }
});
</script>

<style>
/* Zajistit správné odsazení */
.p-short-description {
    margin-bottom: 20px !important;
    line-height: 1.6;
}

.p-info-wrapper {
    display: flex;
    flex-direction: column;
}
</style>

Produktová stránka po úpravách. Aplikace Claude zároveň doporučila vložit kód do sekce „Zápatí“, nikoliv „Záhlaví“.

Jak do toho zapadá Foxentry?

Foxentry je příkladem komplexního rozšíření, na které AI generování nestačí. V reálném čase validuje zadávané údaje v košíku a při detekci chyby uživatele okamžitě upozorní.

Našeptávání adresy podle polohy, kontrola existence e-mailů a telefonních čísel či ověřování firemních údajů vyžadují vedle kódu napojení na ověřené databáze a zkušenost s chováním reálných uživatelů.

Díky tomu Foxentry:

• výrazně zrychluje průchod košíkem,
• snižuje vratkovost o desítky procent,
• zvyšuje kvalitu leadů.

Co si z článku odnést?

1. Umělá inteligence vám pomůže s menšími úpravami e-shopu – od změn textů a vzhledu v košíku až po jednoduché skripty ve formulářích. Díky tomu zvládnete řadu zásahů sami a rychleji ověříte, co funguje.
2. Základ úspěchu je kvalitní zadání: jasně popíšete cíl úpravy, uvedete platformu (např. Shoptet) a přiložíte screenshot i zdrojový kód dané stránky. AI pak pracuje s konkrétním kontextem, takže má šanci vygenerovat použitelný snippet na první pokus.
3. Kód od AI vždy otestujte na reálném průchodu objednávkou od vložení zboží do košíku po odeslání. Pokud úprava nefunguje, upřesněte problém, přidejte screen po změně a nechte si poradit jiný postup nebo zkuste jiný AI nástroj.
4. AI generování kódu má své limity – na napojení platební brány, skladových systémů nebo hlubší zásahy do databáze stále potřebujete vývojáře. Stejně tak se vyplatí, když vám zkušený programátor výsledné úpravy průběžně kontroluje.
5. Foxentry je příkladem řešení, kde samotné generování kódu nestačí: kombinuje validaci údajů, našeptávání adres a firemních informací i práci s reálnými daty. Díky tomu zrychluje průchod košíkem, snižuje vratkovost a pomáhá vám sbírat kvalitnější leady.