Zásilkovna v SimpleShopu od 2025

Jak přidat možnost „vybrat pobočku Zásilkovny“ přímo ve formulář SimpleShopu

Jak na to od roku 2025, kdy Packeta/Zásilkovna vydala nový Widget

Stačí upravit závěr původního kódu.

Video s návodem (připraveno pro původní kód – logika se neliší, jen je ke konci kód trochu jiný. Na této stránce ho najdete již ve správném znění.)

Jak to tedy vypadá

Máme na výběr ze tří způsobů, jak formulář uchopit.

Možnost A – Potřebuji, aby se výběr pobočky Zásilkovny zobrazoval pouze u jednoho konkrétního produktu ve formuláři (odesílám jej výhradně přes Zásilkovnu).
Možnost B – Formulář slouží pro všechny produkty, ale zákazník si může zvolit mezi Zásilkovnou a jiným způsobem dopravy.
Možnost C – Zásilkovna je dostupná vždy, takže není nutné, aby se pole pro výběr pobočky skrývalo či zobrazovalo podle zvolené dopravy. (Tato varianta byla doplněna až po natočení videa.)

Důležité upozornění: Toto řešení neodesílá údaje přímo do systému Zásilkovny. Nejedná se o oficiální propojení se SimpleShopem, takže při vytvoření objednávky v SimpleShopu se automaticky nevytvoří štítek v Zásilkovně. Doufejme, že se to do budoucna změní.

Možnost A

Zásilkovna v SimpleShopu jako jedna z možností dopravy

Možnost B

Obecný postup

Do formuláře přidám povinné pole „Vybrat pobočku“ (typ pole: jednořádkový text).
V kódu stránky si zjistím označení tohoto pole. Hledám ho v samostatné stránce s prodejním formulářem SimpleShopu – má podobnou adresu jako např. https://form.simpleshop.cz/XgYNq/buy/. Odkaz najdu v detailu produktu v SimpleShopu.
Pomocí funkce „Prozkoumat“ v prohlížeči vyhledám v kódu ta speciální písmenka, která jsou uzavřená mezi značkami ::totoKopírujuTaDivnáPísmenka:: (viz video v čase 1:50).
Tato písmenka doplním do připraveného kódu.
Do kódu vložím také svůj API klíč ze Zásilkovny – ten získám, pokud mám podnikatelský účet u Zásilkovny (více na https://www.zasilkovna.cz/jak-to-funguje).
Celý kód vložím v SimpleShopu do daného produktu pod záložku Ostatní → JS, CSS a jiné kódy.
Vytvořím varianty produktu a zjistím, na kterém místě v pořadí je varianta s dopravou přes Zásilkovnu. Pořadí se v kódu počítá od nuly – první má číslo 0, druhá 1, třetí 2 atd.
V šestém řádku kódu ověřím nebo případně upravím správné číslo pořadí, například: var zasilkovnaValue = ‚1‘

Kód pro Možnost A – Zásilkovna jen u jednoho konkrétního produktu

<script type="text/javascript">
    /* CONFIG PROPERTIES BEGIN */
    var inputName = 'payment[-::tadyTaDivnaPísmenka::value]';
    var hiddenFieldName = 'payment[-::TadyTakyTaDivnáPísmenka::name]';
    var transportSelectorName = 'payment[items::0::key_radio]';
    var zasilkovnaValue = '1';
    /* CONFIG PROPERTIES END */

    var zasilkovnaInput = document.querySelector("input[name='" + inputName + "']");
    var zasilkovnaHidden = document.querySelector("input[name='" + hiddenFieldName + "']");

    var zasilkovnaParent = zasilkovnaInput.parentNode.parentNode;

    var selectZasilkovnaButton = document.createElement('button');
    selectZasilkovnaButton.textContent = 'Vybrat pobočku';
    selectZasilkovnaButton.setAttribute('class', 'packeta-selector-open');
    selectZasilkovnaButton.setAttribute('type', 'button');

    zasilkovnaInput.parentNode.insertBefore(selectZasilkovnaButton, zasilkovnaInput);
    zasilkovnaInput.setAttribute('class', 'packeta-selector-branch-name');
    zasilkovnaHidden.setAttribute('class', 'packeta-selector-branch-id');

    zasilkovnaInput.setAttribute('readonly', 'readonly');
    zasilkovnaInput.parentNode.style.display = 'flex';

    console.log(document.querySelector("input[name='" + transportSelectorName + "']").value);
    var showHideZasilkovna = function(value) {
        var state = value === zasilkovnaValue ? 'block' : 'none';
        zasilkovnaParent.style.display = state;

        zasilkovnaInput.value = state === 'block' ? '' : 'N/A';
    }

    var transportSelectors = document.querySelectorAll("input[name='" + transportSelectorName + "']");
    var zasilkovnaSelected = false;
    for (var i = 0; i < transportSelectors.length; i++) {
        transportSelectors[i].addEventListener('change', function() {
            showHideZasilkovna(this.value);
        });
        if ((transportSelectors[i].value === zasilkovnaValue) && !transportSelectors[i].checked) {
            zasilkovnaParent.style.display = 'none';
        }
    }
</script>

<script>
    var packetaSelectorOpen = '.packeta-selector-open';
    var packetaSelectorBranchName = '.packeta-selector-branch-name';
    var packetaSelectorBranchId = '.packeta-selector-branch-id';
    var packetaCountry = 'cz';
    var packetaWidgetLanguage = 'cs';

    var packetaPrimaryButtonColor = '#39b54a';
    var packetaBackgroundColor = '#ffffff';
    var packetaFontColor = '#555555';
    var packetaFontFamily = 'Arial';
</script>

<script src=“https://widget.packeta.com/www/js/library.js“></script>

<script>
// Tvůj Packeta API klíč:
const packetaApiKey = 'TadyKopírujeteAPIklíčZásilkovny';

const packetaOptions = {
language: ‚cs‘,
view: ‚modal‘,
vendors: [{ country: ‚cz‘ }],

valueFormat: ‚“Packeta“,id,carrierId,carrierPickupPointId,name,city,street‘
};

// Otevření widgetu po kliku na tvoje tlačítko
document.querySelectorAll(‚.packeta-selector-open‘).forEach(btn => {
btn.addEventListener(‚click‘, (e) => {
e.preventDefault();
Packeta.Widget.pick(packetaApiKey, (point) => {
const nameEl = document.querySelector(‚.packeta-selector-branch-name‘);
const idEl = document.querySelector(‚.packeta-selector-branch-id‘);

if (point) {
nameEl.value = point.formatedValue || [point.name, point.street, point.city].filter(Boolean).join(‚, ‚);
// ID pobočky – v různých režimech může přijít jiný klíč:
idEl.value = point.id || point.carrierPickupPointId || “;
} else {
nameEl.value = “;
idEl.value = “;
}
}, packetaOptions);
});
});
</script>

Kód pro Možnost B – Zásilkovna jako jedna z možností

Tady je potřeba si vyhrát s nastavením 0 a 1 podle toho, která varianta doplňkového prodeje je práve zásilkovna.

<script type="text/javascript">
    /* CONFIG PROPERTIES BEGIN */
    var inputName = 'payment[-::tadyTaDivnaPísmenka::value]';
    var hiddenFieldName = 'payment[-::TadyTakyTaDivnáPísmenka::name]';
    var transportSelectorName = 'payment[items::1::key_radio]';
    var zasilkovnaValue = '0';
    /* CONFIG PROPERTIES END */

    var zasilkovnaInput = document.querySelector("input[name='" + inputName + "']");
    var zasilkovnaHidden = document.querySelector("input[name='" + hiddenFieldName + "']");

    var zasilkovnaParent = zasilkovnaInput.parentNode.parentNode;

    var selectZasilkovnaButton = document.createElement('button');
    selectZasilkovnaButton.textContent = 'Vybrat pobočku';
    selectZasilkovnaButton.setAttribute('class', 'packeta-selector-open');
    selectZasilkovnaButton.setAttribute('type', 'button');

    zasilkovnaInput.parentNode.insertBefore(selectZasilkovnaButton, zasilkovnaInput);
    zasilkovnaInput.setAttribute('class', 'packeta-selector-branch-name');
    zasilkovnaHidden.setAttribute('class', 'packeta-selector-branch-id');

    zasilkovnaInput.setAttribute('readonly', 'readonly');
    zasilkovnaInput.parentNode.style.display = 'flex';

    console.log(document.querySelector("input[name='" + transportSelectorName + "']").value);
    var showHideZasilkovna = function(value) {
        var state = value === zasilkovnaValue ? 'block' : 'none';
        zasilkovnaParent.style.display = state;

        zasilkovnaInput.value = state === 'block' ? '' : 'N/A';
    }

    var transportSelectors = document.querySelectorAll("input[name='" + transportSelectorName + "']");
    var zasilkovnaSelected = false;
    for (var i = 0; i < transportSelectors.length; i++) {
        transportSelectors[i].addEventListener('change', function() {
            showHideZasilkovna(this.value);
        });
        if ((transportSelectors[i].value === zasilkovnaValue) && !transportSelectors[i].checked) {
            zasilkovnaParent.style.display = 'none';
        }
    }
</script>

<script>
    var packetaSelectorOpen = '.packeta-selector-open';
    var packetaSelectorBranchName = '.packeta-selector-branch-name';
    var packetaSelectorBranchId = '.packeta-selector-branch-id';
    var packetaCountry = 'cz';
    var packetaWidgetLanguage = 'cs';

    var packetaPrimaryButtonColor = '#39b54a';
    var packetaBackgroundColor = '#ffffff';
    var packetaFontColor = '#555555';
    var packetaFontFamily = 'Arial';
</script>
<script src=“https://widget.packeta.com/www/js/library.js“></script>

<script>
// Tvůj Packeta API klíč:
const packetaApiKey = 'TadyKopírujeteAPIklíčZásilkovny';

const packetaOptions = {
language: ‚cs‘,
view: ‚modal‘,
vendors: [{ country: ‚cz‘ }],

valueFormat: ‚“Packeta“,id,carrierId,carrierPickupPointId,name,city,street‘
};

// Otevření widgetu po kliku na tvoje tlačítko
document.querySelectorAll(‚.packeta-selector-open‘).forEach(btn => {
btn.addEventListener(‚click‘, (e) => {
e.preventDefault();
Packeta.Widget.pick(packetaApiKey, (point) => {
const nameEl = document.querySelector(‚.packeta-selector-branch-name‘);
const idEl = document.querySelector(‚.packeta-selector-branch-id‘);

if (point) {
nameEl.value = point.formatedValue || [point.name, point.street, point.city].filter(Boolean).join(‚, ‚);
// ID pobočky – v různých režimech může přijít jiný klíč:
idEl.value = point.id || point.carrierPickupPointId || “;
} else {
nameEl.value = “;
idEl.value = “;
}
}, packetaOptions);
});
});
</script>

Kód pro Možnost C – Zásilkovna za všech okolností

Pokud potřebujete mít políčko na Vybrání pobočky za všech okolností (ať už je ve formuláři jenom jeden produkt, nebo více ale všechny se posílají a vždy jen Zásilkovnou, platí pro vás kód níže. A stačí do něj vyplnit „TaDivnáPísmenka“ a API Zásilkovny.

<script type="text/javascript">
    /* CONFIG PROPERTIES BEGIN */
    var inputName = 'payment[-::tadyTaDivnaPísmenka::value]';
    var hiddenFieldName = 'payment[-::tadyTaDivnaPísmenka::name]';

    /* CONFIG PROPERTIES END */

    var zasilkovnaInput = document.querySelector("input[name='" + inputName + "']");
    var zasilkovnaHidden = document.querySelector("input[name='" + hiddenFieldName + "']");

    var zasilkovnaParent = zasilkovnaInput.parentNode.parentNode;

    var selectZasilkovnaButton = document.createElement('button');
    selectZasilkovnaButton.textContent = 'Vybrat pobočku';
    selectZasilkovnaButton.setAttribute('class', 'packeta-selector-open');
    selectZasilkovnaButton.setAttribute('type', 'button');

    zasilkovnaInput.parentNode.insertBefore(selectZasilkovnaButton, zasilkovnaInput);
    zasilkovnaInput.setAttribute('class', 'packeta-selector-branch-name');
    zasilkovnaHidden.setAttribute('class', 'packeta-selector-branch-id');

    zasilkovnaInput.setAttribute('readonly', 'readonly');
    zasilkovnaInput.parentNode.style.display = 'flex';

    console.log(document.querySelector("input[name='" + transportSelectorName + "']").value);
    var showHideZasilkovna = function(value) {
        var state = value === zasilkovnaValue ? 'block' : 'none';
        zasilkovnaParent.style.display = state;

        zasilkovnaInput.value = state === 'block' ? '' : 'N/A';
    }

    var transportSelectors = document.querySelectorAll("input[name='" + transportSelectorName + "']");
    var zasilkovnaSelected = false;
    for (var i = 0; i < transportSelectors.length; i++) {
        transportSelectors[i].addEventListener('change', function() {
            showHideZasilkovna(this.value);
        });
        if ((transportSelectors[i].value === zasilkovnaValue) && !transportSelectors[i].checked) {
            zasilkovnaParent.style.display = 'none';
        }
    }
</script>

<script>
    var packetaSelectorOpen = '.packeta-selector-open';
    var packetaSelectorBranchName = '.packeta-selector-branch-name';
    var packetaSelectorBranchId = '.packeta-selector-branch-id';
    var packetaCountry = 'cz';
    var packetaWidgetLanguage = 'cs';

    var packetaPrimaryButtonColor = '#39b54a';
    var packetaBackgroundColor = '#ffffff';
    var packetaFontColor = '#555555';
    var packetaFontFamily = 'Arial';
</script>

<script src=“https://widget.packeta.com/www/js/library.js“></script>

<script>
// Tvůj Packeta API klíč:
const packetaApiKey = 'TadyKopírujeteAPIklíčZásilkovny';

const packetaOptions = {
language: ‚cs‘,
view: ‚modal‘,
vendors: [{ country: ‚cz‘ }],

valueFormat: ‚“Packeta“,id,carrierId,carrierPickupPointId,name,city,street‘
};

// Otevření widgetu po kliku na tvoje tlačítko
document.querySelectorAll(‚.packeta-selector-open‘).forEach(btn => {
btn.addEventListener(‚click‘, (e) => {
e.preventDefault();
Packeta.Widget.pick(packetaApiKey, (point) => {
const nameEl = document.querySelector(‚.packeta-selector-branch-name‘);
const idEl = document.querySelector(‚.packeta-selector-branch-id‘);

if (point) {
nameEl.value = point.formatedValue || [point.name, point.street, point.city].filter(Boolean).join(‚, ‚);
// ID pobočky – v různých režimech může přijít jiný klíč:
idEl.value = point.id || point.carrierPickupPointId || “;
} else {
nameEl.value = “;
idEl.value = “;
}
}, packetaOptions);
});
});
</script>

A která část je nová?

<script src=“https://widget.packeta.com/www/js/library.js“></script>

<script>
// Tvůj Packeta API klíč:
const packetaApiKey = 'TadyKopírujeteAPIklíčZásilkovny';

const packetaOptions = {
language: ‚cs‘,
view: ‚modal‘,
vendors: [{ country: ‚cz‘ }],

valueFormat: ‚“Packeta“,id,carrierId,carrierPickupPointId,name,city,street‘
};

// Otevření widgetu po kliku na tvoje tlačítko
document.querySelectorAll(‚.packeta-selector-open‘).forEach(btn => {
btn.addEventListener(‚click‘, (e) => {
e.preventDefault();
Packeta.Widget.pick(packetaApiKey, (point) => {
const nameEl = document.querySelector(‚.packeta-selector-branch-name‘);
const idEl = document.querySelector(‚.packeta-selector-branch-id‘);

if (point) {
nameEl.value = point.formatedValue || [point.name, point.street, point.city].filter(Boolean).join(‚, ‚);
// ID pobočky – v různých režimech může přijít jiný klíč:
idEl.value = point.id || point.carrierPickupPointId || “;
} else {
nameEl.value = “;
idEl.value = “;
}
}, packetaOptions);
});
});
</script>

A nahrazuje tuto:

Vycházím z https://github.com/MiliusCZ/simpleshop-zasilkovna následně jsem kód upravila pro jednotlivé varianty a pro verzi novou verzi widgetu (2025). Snad se mi povedlo implementaci Zásilkovny lépe vysvětlit

Tipy a triky z webařiny a online podnikání

pro vás píše
Kristýna Jarošová

Proč textu věnovat pozornost?

Zhuštěné CV autorky:

– 20 let webařiny
– přes 7 let marketingu
– schopnost vysvětlit odborné věcí lidem mimo obor

Spolupráce na dálku

Potřebujete pošťouchnout, nebo přímo pomoct?

V online světě je snadné se ztratit. Tolik možností, nástrojů a cest… A přitom klíč k úspěchu často spočívá v jednoduchosti, správné struktuře a chytrém propojení.
Právě s tím vám mohu pomoci.

Další informace →

Nechcete zmeškat žádnou novinku?

Rozhodně!

Další články

Jak vybrat platformu pro váš web: WordPress, Wix, Webnode nebo Shoptet?

Dělám weby pro klientky už poměrně dlouho a za tu dobu jsem pracovala s různými platformami – od WordPressu (s Divi, Elementorem nebo Kadence), přes Wix a Webnode, až po Shoptet. Každá z nich má své přednosti a žádná není univerzálně nejlepší. Když začínám spolupráci...

číst více

Google hází vidle do nastavení SEO

Dneska přidám něco, co vás možná taky trápí – skvělým zdrojem informací byla SEOexpertkaAlexandra Staňková. Meta popisky (meta description). Možná jste už nad nimi strávili hodiny… a pak zjistíte, že Google si stejně text upraví. Podle pozorování Saši ve více...

číst více

7 nejčastějších chyb na podnikatelských webech (které jsem odhalila při posledním auditu)

Minulý týden jsem dělala po delší době zase dělala audit webu – a musím říct, že to byla jízda! 💻Pod rukama mi prošel web pulpamen.cz, který provozují dvě ženy s láskou k jídlu a vaření. A právě na něm se krásně ukázalo, jaké chyby se objevují na většině...

číst více

Podnikatelký tip – 10 nejčastějších témat vašich zákazníků

📌 Podnikatelský tip, který nezabere víc než 10 minut – a může ti přinést nové nápady, klientky i prodeje: 🗣️ Zapiš si 10 nejčastějších témat, která ti klientky (nebo sledující) opakují. Tohle jednoduché cvičení ti pomůže vytěžit ze své praxe poklady, které máš doslova...

číst více

Tip č.2 – Vysvětluj, ukazuj

🌟 Nečekej, že si klientky představí totéž, co ty. „UKAZUJ, VYSVĚTLUJ“ 🌟 Ahoj podnikatelky! Dnes mám pro vás konkrétní návod, jak zjednodušit komunikaci a vyhnout se nedorozuměním. Představte si, že nabízíte online kurz face jógy – jak nejčastěji popisujete výsledek?...

číst více

Dej si web do pucu – letní webová výzva

Chodíš pořád kolem horké kaše? Víš, že by se na tvém webu mělo máknout, ale stále to odkládáš? Teď je ten pravý čas. Nejen, že budeš mít víc času. A navíc pokud půjdeš do letní výzvy, povedu tě krok po kroku s jasným návodem, jak na to. A kdybys náhodou měla...

číst více

« Starší příspěvky

✨ PS: Tvořím facebookovou komunitu kolem online podnikání v Česku – přidejte se!

Online podnikatelky CZ/SK (Facebook)

Zásilkovna v SimpleShopu od 2025

Jak přidat možnost „vybrat pobočku Zásilkovny“ přímo ve formulář SimpleShopu

Jak na to od roku 2025, kdy Packeta/Zásilkovna vydala nový Widget

Jak to tedy vypadá

Možnost A

Možnost B

Obecný postup

Kód pro Možnost A – Zásilkovna jen u jednoho konkrétního produktu

Kód pro Možnost B – Zásilkovna jako jedna z možností

Kód pro Možnost C – Zásilkovna za všech okolností

Tipy a triky z webařiny a online podnikání

Spolupráce na dálku

Potřebujete pošťouchnout, nebo přímo pomoct?

Nechcete zmeškat žádnou novinku?

Další články

Jak vybrat platformu pro váš web: WordPress, Wix, Webnode nebo Shoptet?

Google hází vidle do nastavení SEO

7 nejčastějších chyb na podnikatelských webech (které jsem odhalila při posledním auditu)

Podnikatelký tip – 10 nejčastějších témat vašich zákazníků

Tip č.2 – Vysvětluj, ukazuj

Dej si web do pucu – letní webová výzva

✨ PS: Tvořím facebookovou komunitu kolem online podnikání v Česku – přidejte se!

+420 724 968 788

kristyna@vasewebarka.cz

Instagram

Celá ČR