Snižte množství nevyzvednutých dobírek: POP-UP okno do košíku

Těm, kteří nebojujou s nevyzvednutýma dobírkama, upřímně gratuluju. A pro ty ostatní... nezoufejte, nejste v tom sami. Nejeden e-shopař hledá co nejlepší řešení na chorobné nevyzvedávače. Tady je jedno z nich. Pop-up okno v košíku sice není samospásné, podle zkušeností z praxe ale dokáže snížit počet nevyzvednutých dobírek o 10–50 %.

💡 Náhled pop-up okna s upozorněním, které se zobrazí v košíku hned při kliknutí na platbu na dobírku.

O čem to je a pro koho se to hodí?

Cílem je zákazníka při výběru dobírky v košíku důrazně a přitom slušně upozornit na to, že převzetí zásilky je závazné a v případě nepřevzetí po něm může být požadována úhrada nákladů na odeslání a vrácení balíku tam i zpět.

Jak kód funguje v praxi?

Skript na vašem e-shopu hlídá způsob platby, který zákazník vybere v košíku. V momentě, kdy zákazník klikne na platbu na dobírku, skript zachytí tuto událost a zobrazí pop-up okno. Pokud zákazník klikne na tlačítko „Beru na vědomí“, okno se zavře a zákazník může pokračovat dál na cestě košíkem. Při výběru jakéhokoliv jiného typu platby (převodem, kartou, hotově...) se okno vůbec nezobrazí. Je jedno, jak máte platbu na dobírku pojmenovanou.

Skript je nastaven tak, že se pop-up okno zobrazí při každém výběru platby na dobírku. Pokud tedy například zákazník vybere platbu na dobírku (= vyskočí okno), pak změní volbu na platbu převodem a pak znovu klikne na platbu na dobírku, pop-up okno se mu zobrazí znovu.

<!-- Pop-up okno při výběru platby na dobírku -->

<style>
    #cod-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 99999;
    }

    #cod-modal {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        width: 90%;
        max-width: 550px;
        padding: 35px;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        font-family: inherit;
    }

    #cod-modal h3 {
        margin: 0 0 20px;
        font-size: 24px;
        color: #222;
    }

    #cod-modal p {
        margin: 0 0 15px;
        line-height: 1.7;
        color: #444;
        font-size: 16px;
    }

    #cod-modal button {
        background: #ea8b9e;
        color: #fff;
        border: none;
        padding: 14px 28px;
        cursor: pointer;
        font-size: 15px;
        text-transform: uppercase;
        border-radius: 4px;
    }

    #cod-modal button:hover {
        opacity: 0.9;
    }
</style>

<div id="cod-modal-overlay">
    <div id="cod-modal">
        <h3>Upozornění k dobírkám</h3>

        <p>
            Volbou platby na dobírku potvrzujete, že objednanou zásilku
            <strong>převezmete</strong>. V opačném případě můžeme
            <strong>požadovat úhradu nákladů</strong> na odeslání i vrácení zásilky.
        </p>

        <p>
            Toto pravidlo nám pomáhá zachovat možnost platby na dobírku
            i do budoucna. Děkujeme za pochopení.
        </p>

        <button id="cod-confirm">
            Beru na vědomí
        </button>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        let selectedRadio = null;
        let allowSelection = false;

        const overlay = document.getElementById('cod-modal-overlay');
        const confirmBtn = document.getElementById('cod-confirm');

        document.addEventListener('click', function (e) {
            const cell = e.target.closest('td.shipping-single-name');

            if (!cell) return;

            const radio = cell.querySelector(
                'input[data-payment-type="cashOnDelivery"]'
            );

            if (!radio) return;

            if (allowSelection) {
                allowSelection = false;
                return;
            }

            e.preventDefault();
            e.stopPropagation();

            selectedRadio = radio;
            overlay.style.display = 'block';
        });

        confirmBtn.addEventListener('click', function () {
            overlay.style.display = 'none';

            if (selectedRadio) {
                allowSelection = true;
                selectedRadio.click();
            }
        });

        overlay.addEventListener('click', function (e) {
            if (e.target === overlay) {
                overlay.style.display = 'none';
            }
        });
    });
</script>

Kam kód v Shoptetu vložit (krok za krokem)

• 1

  Přihlaste se do administrace Shoptetu

  Otevřete administraci vašeho e-shopu na Shoptetu.

• 2

  Otevřete editor HTML kódů

  V levém menu přejděte do sekce Vzhled a obsah → Editor → HTML kód.

• 3

  Vložte kód do Zápatí

  V editoru najdete 3 hlavní sekce, kam můžete kód vložit: Záhlaví, Zápatí a Dokončená objednávka. Tento kód vložte do sekce ‚‚Zápatí (před koncovým tagem BODY)‘‘. Posuvníkem sjeďte na úplný konec okna a na nový řádek vložte zkopírovaný kód (Ctrl + V). Nemažte a neupravujte nic, co už v editoru bylo.

• 4

  Uložte změny

  Klikněte na zelené tlačítko Uložit v pravém horním rohu. Hotovo! Kód je okamžitě aktivní.

• 5

  Zkontrolujte zobrazení na vašem e-shopu

  Přidejte si produkt do košíku na vašem e-shopu a při výběru platby zvolte dobírku. Pokud se pop-up okno zobrazí a poté úspěšně zavře, máte hotovo.Nezapomeňte otestovat i to, že při výběru jiných plateb se okno nezobrazí.

Co můžete v kódu snadno upravit?

• Barvu tlačítka: V kódu vyhledejte řádek background: #ea8b9e; a změňte kód barvy na vaši preferovanou – barvu musíte vkládat formou HEX kódu (např. #000000 pro černou barvu místo původní růžové #ea8b9e).
• Texty v pop-up oknu: Přímo v HTML kódu mezi tagy <p>...</p> nebo <h3>...</h3> můžete změnit znění podle vašich potřeb.
• Barvu pozadí okna: V kódu vyhledejte řádek f#cod-modal { background: #fff; a změňte kód barvy na vaši preferovanou.
• Velikost písma: V kódu vyhledejte řádek f#cod-modal h3 { font-size: 24px; pro změnu velikosti nadpisu nebo #cod-modal p { font-size: 16px; line-height: 1.7; color: #444; } pro změnu velikosti běžného textu. Velikost textu je udávána například jako 24px.
• Zaoblení a velikost: Můžete změnit hodnotu max-width: 550px; nebo border-radius: 8px;.

Jak nejjednodušeji kód přizpůsobit?

Vložte kód z této stránky do AI (postačí jakýkoliv chat, například ChatGPT) a napište, co chcete v kódu změnit – například že chcete růžovou barvu tlačítka, hranaté místo zaobleného okna apod.

Zároveň AI požádejte, aby vám poslala celý kompletní kód se zapracovanými úpravami. Je možné, že vám i přesto pošle pouze změněnou část kódu. V takovém případě požadavek zopakujte a výslovně uveďte, že potřebujete celý kompletní kód, který můžete vložit na stránku.