{"id":5767,"date":"2024-10-31T23:09:28","date_gmt":"2024-10-31T21:09:28","guid":{"rendered":"https:\/\/nkz.studio\/?p=5767"},"modified":"2024-11-12T22:11:44","modified_gmt":"2024-11-12T20:11:44","slug":"propojeni-elementor-formulare-se-zasilkovnou","status":"publish","type":"post","link":"https:\/\/nkz.studio\/en\/blog\/propojeni-elementor-formulare-se-zasilkovnou\/","title":{"rendered":"Linking Elementor forms to Z\u00e1silkovna"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5767\" class=\"elementor elementor-5767\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b85a30 e-flex e-con-boxed e-con e-parent\" data-id=\"5b85a30\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f816435 elementor-widget elementor-widget-text-editor\" data-id=\"f816435\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Pokud chcete ve sv\u00e9m formul\u00e1\u0159i v Elementoru nab\u00eddnout u\u017eivateli v\u00fdb\u011br z pobo\u010dek Z\u00e1silkovny, m\u016f\u017eete to prov\u00e9st pomoc\u00ed jejich API. D\u016fle\u017eit\u00e9 je, \u017ee se mus\u00edte v Z\u00e1silkovn\u011b zaregistrovat, abyste m\u011bli vlastn\u00ed API kl\u00ed\u010d.\u00a0<\/p><p>Postupoval jsem podle n\u00e1vodu na\u00a0<span style=\"text-decoration: underline;\"><a href=\"https:\/\/github.com\/MiliusCZ\/simpleshop-zasilkovna\" target=\"_blank\" rel=\"nofollow noopener\">propojen\u00ed p\u0159es Simpleshop<\/a><\/span> a\u00a0<span style=\"text-decoration: underline;\"><a href=\"https:\/\/docs.packetery.com\/\" target=\"_blank\" rel=\"nofollow noopener\">dokumentace Z\u00e1silkovny<\/a><\/span>.<\/p><p>Jak na to? Nejprve vytvo\u0159te t\u0159i pole: Prvn\u00ed bude radio buttons pro v\u00fdb\u011br mo\u017enosti dopravy a pojmenujte jej s ID <code>doprava<\/code>. N\u00e1zev pole a\u00a0hodnota se\u00a0odd\u011bluj\u00ed znakem\u00a0<code>|<\/code>, proto mo\u017enost Z\u00e1silkovna pojmenujte jako \u201eZ\u00e1silkovnou po\u00a0\u010cR|zasilkovna\u201c (viz screenshot).<\/p><p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-5776\" src=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/10\/Snimek-obrazovky-2024-10-31-v-21.56.33.jpg\" alt=\"\" width=\"246\" height=\"288\" title=\"\" srcset=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/10\/Snimek-obrazovky-2024-10-31-v-21.56.33.jpg 534w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/10\/Snimek-obrazovky-2024-10-31-v-21.56.33-256x300.jpg 256w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/10\/Snimek-obrazovky-2024-10-31-v-21.56.33-10x12.jpg 10w\" sizes=\"(max-width: 246px) 100vw, 246px\" \/><\/p><p>Druh\u00e9 pole bude textov\u00e9 s\u00a0ID\u00a0<code>zasilkovna_address<\/code>\u00a0bez n\u00e1zvu pole \u2013 bude slou\u017eit pro adresu. T\u0159et\u00ed bude skryt\u00e9 pole s\u00a0ID\u00a0<code>zasilkovna_id<\/code>\u00a0\u2013 to bude slou\u017eit pro ulo\u017een\u00ed p\u0159esn\u00e9ho ID pobo\u010dky.<\/p><p>Pot\u00e9 vlo\u017ete n\u00e1sleduj\u00edc\u00ed k\u00f3d p\u0159es HTML element.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f178164 e-flex e-con-boxed e-con e-parent\" data-id=\"f178164\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46b1b9e elementor-widget__width-initial elementor-widget elementor-widget-code-highlight\" data-id=\"46b1b9e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><style>\n    .packeta-selector-open {\n        background-color: black;\n        color: white;\n        padding: 10px 20px;\n        border: none;\n        cursor: pointer;\n        margin-top: 10px;\n        margin: 10px; \/* Margin kolem tla\u010d\u00edtka *\/\n    }\n\n    .packeta-hidden {\n        display: none; \/* Skryt\u00ed pol\u00ed pro u\u017eivatele *\/\n    }\n\n    .selected-pickup-point {\n        margin: 10px; \/* Margin kolem textu o vybran\u00e9 pobo\u010dce *\/\n        font-size: 16px;\n        color: #333;\n    }\n<\/style>\n\n<script type=\"text\/javascript\">\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const inputName = 'form_fields[zasilkovna_address]'; \/\/ Pole pro adresu pobo\u010dky Z\u00e1silkovny\n        const hiddenFieldName = 'form_fields[zasilkovna_id]'; \/\/ Skryt\u00e9 pole pro ID pobo\u010dky\n        const transportSelectorName = 'form_fields[doprava]'; \/\/ N\u00e1zev pole pro v\u00fdb\u011br dopravy\n        const zasilkovnaOptionValue = 'zasilkovna'; \/\/ Hodnota mo\u017enosti \"Z\u00e1silkovnou po \u010cR\"\n\n        \/\/ Vyhled\u00e1n\u00ed pol\u00ed ve formul\u00e1\u0159i\n        const zasilkovnaInput = document.querySelector(`input[name=\"${inputName}\"]`);\n        const zasilkovnaHidden = document.querySelector(`input[name=\"${hiddenFieldName}\"]`);\n        const transportSelectors = document.querySelectorAll(`input[name=\"${transportSelectorName}\"]`);\n        \n        if (zasilkovnaInput && zasilkovnaHidden && transportSelectors.length > 0) {\n            \/\/ Skryt\u00ed pole pro adresu pro u\u017eivatele (ale nech\u00e1me viditeln\u00e9 pro syst\u00e9m)\n            zasilkovnaInput.classList.add('packeta-hidden');\n\n            \/\/ P\u0159id\u00e1n\u00ed tla\u010d\u00edtka pro v\u00fdb\u011br pobo\u010dky\n            const selectZasilkovnaButton = document.createElement('button');\n            selectZasilkovnaButton.textContent = 'Vybrat pobo\u010dku';\n            selectZasilkovnaButton.setAttribute('class', 'packeta-selector-open');\n            selectZasilkovnaButton.setAttribute('type', 'button');\n            selectZasilkovnaButton.style.display = 'none'; \/\/ Skryt\u00ed tla\u010d\u00edtka na za\u010d\u00e1tku\n\n            \/\/ P\u0159id\u00e1n\u00ed elementu pro zobrazen\u00ed vybran\u00e9 pobo\u010dky\n            const selectedPickupPointDiv = document.createElement('div');\n            selectedPickupPointDiv.setAttribute('class', 'selected-pickup-point');\n            selectedPickupPointDiv.textContent = '\u017d\u00e1dn\u00e1 pobo\u010dka vybr\u00e1na';\n            selectedPickupPointDiv.style.display = 'none'; \/\/ Skryt\u00ed divu s pobo\u010dkou na za\u010d\u00e1tku\n\n            zasilkovnaInput.parentNode.insertBefore(selectZasilkovnaButton, zasilkovnaInput);\n            zasilkovnaInput.parentNode.insertBefore(selectedPickupPointDiv, zasilkovnaInput);\n\n            \/\/ Zobrazen\u00ed tla\u010d\u00edtka a divu s pobo\u010dkou p\u0159i v\u00fdb\u011bru \"Z\u00e1silkovnou po \u010cR\"\n            transportSelectors.forEach(function(selector) {\n                selector.addEventListener('change', function() {\n                    if (selector.value === zasilkovnaOptionValue && selector.checked) {\n                        selectZasilkovnaButton.style.display = 'block';\n                        selectedPickupPointDiv.style.display = 'block';\n                    } else {\n                        selectZasilkovnaButton.style.display = 'none';\n                        selectedPickupPointDiv.style.display = 'none';\n                        zasilkovnaInput.value = '';\n                        zasilkovnaHidden.value = '';\n                        selectedPickupPointDiv.textContent = '\u017d\u00e1dn\u00e1 pobo\u010dka vybr\u00e1na';\n                    }\n                });\n            });\n\n            \/\/ Otev\u0159en\u00ed widgetu po kliknut\u00ed na tla\u010d\u00edtko\n            selectZasilkovnaButton.addEventListener('click', function() {\n                Packeta.Widget.pick('9d1af6fe525aeef7291f4896a986ec1b', function(point) {\n                    if (point) {\n                        \/\/ Ulo\u017een\u00ed kompletn\u00ed adresy do viditeln\u00e9ho pole pro syst\u00e9m a tak\u00e9 ID do skryt\u00e9ho pole\n                        zasilkovnaInput.value = `${point.name}, ${point.street}, ${point.zip} ${point.city}`;\n                        zasilkovnaHidden.value = point.id;\n\n                        \/\/ Zobrazen\u00ed n\u00e1zvu vybran\u00e9 pobo\u010dky pro u\u017eivatele\n                        selectedPickupPointDiv.textContent = `Vybran\u00e1 pobo\u010dka: ${point.name}, ${point.street}, ${point.zip} ${point.city}`;\n\n                        \/\/ Znovu zp\u0159\u00edstupn\u011bn\u00ed tla\u010d\u00edtka pro p\u0159\u00edpadn\u00fd opakovan\u00fd v\u00fdb\u011br\n                        selectZasilkovnaButton.textContent = 'Zm\u011bnit pobo\u010dku';\n                        selectZasilkovnaButton.disabled = false;\n                    }\n                }, {\n                    country: 'cz',\n                    language: 'cs',\n                    primaryColor: '#39b54a',\n                    backgroundColor: '#ffffff',\n                    buttonTextColor: '#555555',\n                    fontFamily: 'Manrope',\n                });\n                \n                \/\/ Do\u010dasn\u00e9 zablokov\u00e1n\u00ed tla\u010d\u00edtka, dokud nen\u00ed v\u00fdb\u011br dokon\u010den\n                selectZasilkovnaButton.disabled = true;\n            });\n        } else {\n            console.error(\"Pole Z\u00e1silkovna nebo doprava nebylo nalezeno. Zkontrolujte n\u00e1zvy pol\u00ed.\");\n        }\n    });\n<\/script>\n\n<script src=\"https:\/\/widget.packeta.com\/v6\/www\/js\/library.js\" data-api-key=\"XXXXXXXXXX\"><\/script> \/* zde vlo\u017ete V\u00e1\u0161 API kl\u00ed\u010d !!!\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87fdde1 elementor-widget elementor-widget-text-editor\" data-id=\"87fdde1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>A je to \u2013 nyn\u00ed, kdy\u017e u\u017eivatel zvol\u00ed dopravu p\u0159es Z\u00e1silkovnu, otev\u0159e se pop-up okno s v\u00fdb\u011brem pobo\u010dky. Pot\u00e9 v\u00e1m p\u0159ijde na e-mail informace o pobo\u010dce, kterou si u\u017eivatel vybral.<\/p><p>Nezapome\u0148te, \u017ee tento k\u00f3d umo\u017e\u0148uje pouze v\u00fdb\u011br pobo\u010dky \u2013 z\u00e1silku v Z\u00e1silkovn\u011b je st\u00e1le nutn\u00e9 vytvo\u0159it ru\u010dn\u011b.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7a7ce1 elementor-widget elementor-widget-image-gallery\" data-id=\"d7a7ce1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image-gallery.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-gallery\">\n\t\t\t<div id='gallery-1' class='gallery galleryid-5767 gallery-columns-3 gallery-size-full'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"d7a7ce1\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NjA1MiwidXJsIjoiaHR0cHM6XC9cL25rei5zdHVkaW9cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjRcLzExXC96YXNpbGtvdm5hLWVsZW1lbnRvcjEuanBnIiwic2xpZGVzaG93IjoiZDdhN2NlMSJ9\" href=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor1.jpg\"><img decoding=\"async\" width=\"1012\" height=\"816\" src=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor1.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor1.jpg 1012w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor1-300x242.jpg 300w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor1-768x619.jpg 768w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor1-15x12.jpg 15w\" sizes=\"(max-width: 1012px) 100vw, 1012px\" title=\"\"><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"d7a7ce1\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NjA0OSwidXJsIjoiaHR0cHM6XC9cL25rei5zdHVkaW9cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjRcLzExXC96YXNpbGtvdm5hLWVsZW1lbnRvcjIuanBnIiwic2xpZGVzaG93IjoiZDdhN2NlMSJ9\" href=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor2.jpg\"><img decoding=\"async\" width=\"1920\" height=\"946\" src=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor2.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor2.jpg 1920w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor2-300x148.jpg 300w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor2-1024x505.jpg 1024w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor2-768x378.jpg 768w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor2-1536x757.jpg 1536w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor2-18x9.jpg 18w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" title=\"\"><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"d7a7ce1\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NjA1MCwidXJsIjoiaHR0cHM6XC9cL25rei5zdHVkaW9cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjRcLzExXC96YXNpbGtvdm5hLWVsZW1lbnRvcjMuanBnIiwic2xpZGVzaG93IjoiZDdhN2NlMSJ9\" href=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor3.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1078\" height=\"960\" src=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor3.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor3.jpg 1078w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor3-300x267.jpg 300w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor3-1024x912.jpg 1024w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor3-768x684.jpg 768w, https:\/\/nkz.studio\/wp-content\/uploads\/2024\/11\/zasilkovna-elementor3-13x12.jpg 13w\" sizes=\"(max-width: 1078px) 100vw, 1078px\" title=\"\"><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pokud chcete ve sv\u00e9m formul\u00e1\u0159i v Elementoru nab\u00eddnout u\u017eivateli v\u00fdb\u011br z pobo\u010dek Z\u00e1silkovny, m\u016f\u017eete to prov\u00e9st pomoc\u00ed jejich API. D\u016fle\u017eit\u00e9 je, \u017ee se mus\u00edte v Z\u00e1silkovn\u011b zaregistrovat, abyste m\u011bli vlastn\u00ed API kl\u00ed\u010d.\u00a0 Postupoval jsem podle n\u00e1vodu na\u00a0propojen\u00ed p\u0159es Simpleshop a\u00a0dokumentace Z\u00e1silkovny. Jak na to? Nejprve vytvo\u0159te t\u0159i pole: Prvn\u00ed bude radio buttons pro v\u00fdb\u011br mo\u017enosti [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5772,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"iawp_total_views":191,"footnotes":""},"categories":[13],"tags":[16],"class_list":["post-5767","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-weby-tipy-triky"],"_links":{"self":[{"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/posts\/5767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/comments?post=5767"}],"version-history":[{"count":22,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/posts\/5767\/revisions"}],"predecessor-version":[{"id":6992,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/posts\/5767\/revisions\/6992"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/media\/5772"}],"wp:attachment":[{"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/media?parent=5767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/categories?post=5767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nkz.studio\/en\/wp-json\/wp\/v2\/tags?post=5767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}