If you want to offer the user a choice of branches in your Elementor form, you can do this using their API. The important thing is that you need to register with the delivery service to have your own API key.
I followed the instructions on connection via Simpleshop a Documentation of the Zásilkovna.
How do you do that? First, create three fields: The first one will be radio buttons to select the transport option and name it with the ID transport. The field name and value are separated by a character |, so name the Mailroom option as "Mailroom by CR|mailroom" (see screenshot).
The second field will be a text field with ID shipping_address without field name - will be used for address. The third will be a hidden field with ID shipping_id - this will be used to store the exact branch ID.
Then insert the following code via HTML element.
<style>
.packeta-selector-open {
background-color: black;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-top: 10px;
margin: 10px; /* Margin kolem tlačítka */
}
.packeta-hidden {
display: none; /* Skrytí polí pro uživatele */
}
.selected-pickup-point {
margin: 10px; /* Margin kolem textu o vybrané pobočce */
font-size: 16px;
color: #333;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const inputName = 'form_fields[zasilkovna_address]'; // Pole pro adresu pobočky Zásilkovny
const hiddenFieldName = 'form_fields[zasilkovna_id]'; // Skryté pole pro ID pobočky
const transportSelectorName = 'form_fields[doprava]'; // Název pole pro výběr dopravy
const zasilkovnaOptionValue = 'zasilkovna'; // Hodnota možnosti "Zásilkovnou po ČR"
// Vyhledání polí ve formuláři
const zasilkovnaInput = document.querySelector(`input[name="${inputName}"]`);
const zasilkovnaHidden = document.querySelector(`input[name="${hiddenFieldName}"]`);
const transportSelectors = document.querySelectorAll(`input[name="${transportSelectorName}"]`);
if (zasilkovnaInput && zasilkovnaHidden && transportSelectors.length > 0) {
// Skrytí pole pro adresu pro uživatele (ale necháme viditelné pro systém)
zasilkovnaInput.classList.add('packeta-hidden');
// Přidání tlačítka pro výběr pobočky
const selectZasilkovnaButton = document.createElement('button');
selectZasilkovnaButton.textContent = 'Vybrat pobočku';
selectZasilkovnaButton.setAttribute('class', 'packeta-selector-open');
selectZasilkovnaButton.setAttribute('type', 'button');
selectZasilkovnaButton.style.display = 'none'; // Skrytí tlačítka na začátku
// Přidání elementu pro zobrazení vybrané pobočky
const selectedPickupPointDiv = document.createElement('div');
selectedPickupPointDiv.setAttribute('class', 'selected-pickup-point');
selectedPickupPointDiv.textContent = 'Žádná pobočka vybrána';
selectedPickupPointDiv.style.display = 'none'; // Skrytí divu s pobočkou na začátku
zasilkovnaInput.parentNode.insertBefore(selectZasilkovnaButton, zasilkovnaInput);
zasilkovnaInput.parentNode.insertBefore(selectedPickupPointDiv, zasilkovnaInput);
// Zobrazení tlačítka a divu s pobočkou při výběru "Zásilkovnou po ČR"
transportSelectors.forEach(function(selector) {
selector.addEventListener('change', function() {
if (selector.value === zasilkovnaOptionValue && selector.checked) {
selectZasilkovnaButton.style.display = 'block';
selectedPickupPointDiv.style.display = 'block';
} else {
selectZasilkovnaButton.style.display = 'none';
selectedPickupPointDiv.style.display = 'none';
zasilkovnaInput.value = '';
zasilkovnaHidden.value = '';
selectedPickupPointDiv.textContent = 'Žádná pobočka vybrána';
}
});
});
// Otevření widgetu po kliknutí na tlačítko
selectZasilkovnaButton.addEventListener('click', function() {
Packeta.Widget.pick('9d1af6fe525aeef7291f4896a986ec1b', function(point) {
if (point) {
// Uložení kompletní adresy do viditelného pole pro systém a také ID do skrytého pole
zasilkovnaInput.value = `${point.name}, ${point.street}, ${point.zip} ${point.city}`;
zasilkovnaHidden.value = point.id;
// Zobrazení názvu vybrané pobočky pro uživatele
selectedPickupPointDiv.textContent = `Vybraná pobočka: ${point.name}, ${point.street}, ${point.zip} ${point.city}`;
// Znovu zpřístupnění tlačítka pro případný opakovaný výběr
selectZasilkovnaButton.textContent = 'Změnit pobočku';
selectZasilkovnaButton.disabled = false;
}
}, {
country: 'cz',
language: 'cs',
primaryColor: '#39b54a',
backgroundColor: '#ffffff',
buttonTextColor: '#555555',
fontFamily: 'Manrope',
});
// Dočasné zablokování tlačítka, dokud není výběr dokončen
selectZasilkovnaButton.disabled = true;
});
} else {
console.error("Pole Zásilkovna nebo doprava nebylo nalezeno. Zkontrolujte názvy polí.");
}
});
</script>
<script src="https://widget.packeta.com/v6/www/js/library.js" data-api-key="XXXXXXXXXX"></script> /* zde vložte Váš API klíč !!!
That's it - now, when the user selects shipping via Zásilkovna, a pop-up window opens with the branch selection. You will then receive an email with information about the branch the user has selected.
Please note that this code only allows you to select a branch - you still need to create the parcel manually in the parcel office.
