Zásilkovna v SimpleShopu od 2025

autor: Kristýna Jarošová | 11. 8. 2025 | Weby a platformy, Nástroje a tipy

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

Kristýna Jarošová.

Webařka, která vám pomůže s webem i s online podnikáním.