{"id":3298,"date":"2023-09-29T16:22:25","date_gmt":"2023-09-29T14:22:25","guid":{"rendered":"https:\/\/www.stex-gmbh.com\/?page_id=3298"},"modified":"2023-10-02T14:56:28","modified_gmt":"2023-10-02T12:56:28","slug":"preisrechner-widget","status":"publish","type":"page","link":"https:\/\/www.stex-gmbh.com\/de\/preisrechner-widget\/","title":{"rendered":"Preisrechner-Widget"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3298\" class=\"elementor elementor-3298\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-90e2572 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"90e2572\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5a82b8cb\" data-id=\"5a82b8cb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-42d2f28b elementor-widget elementor-widget-text-editor\" data-id=\"42d2f28b\" 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><\/p>\n<p><link rel=\"stylesheet\" href=\"\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css\">\n<script src=\"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js\"><\/script>\n<link rel='stylesheet' id='elementor-icons-fa-regular-css' href='https:\/\/www.stex-gmbh.com\/wp-content\/plugins\/elementor\/assets\/lib\/font-awesome\/css\/regular.min.css?ver=5.15.3' media='all' \/>\n<link rel='stylesheet' id='elementor-icons-fa-solid-css' href='https:\/\/www.stex-gmbh.com\/wp-content\/plugins\/elementor\/assets\/lib\/font-awesome\/css\/solid.min.css?ver=5.15.3' media='all' \/>\n\n<style>\n\n.qcpc-style.outer {\n    display: flex;\n    justify-content: center;\n}\n.qcpc-style .inner {\n    padding: 2.5rem;\n    border-radius: 1.7rem;\n    background-color: #fff;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);\n    -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);\n    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);\n}\n\n.qcpc-style .qcpc-title {\n    color: #000;\n    text-align: center;\n}\n\n.qcpc-style .subtitle-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 2rem;\n}\n.qcpc-style .subtitle-wrapper .stroke {\n    height: 3px;\n    flex-grow: 1;\n    background-color: #e6e6e6;\n}\n.qcpc-style .subtitle-wrapper .subtitle-text {\n    margin: 0 1rem 2px;\n}\n\n.qcpc-style .stops-wrapper, .qcpc-style .pr_stops-ex {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n\n.qcpc-style .pr_stops_box {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n.qcpc-style .pr_stop {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.qcpc-style .pr_stop .stop-inputs {\n    display: flex;\n    gap: 1rem;\n}\n\n.qcpc-style .pr_stop .stop-inputs select, .qcpc-style .pr_stop .stop-inputs input {\n    height: 40px;\n}\n.qcpc-style .pr_stop .stop-inputs select, .qcpc-style .pr_stop .stop-inputs input, .qcpc-style  .pr_when-date-btn {\n    border: solid 1px #999;\n    border-radius: 0.5rem;\n}\n.qcpc-style .pr_stop .stop-inputs input {\n    padding: 0 1rem;\n}\n\n.qcpc-style .add-stops-wrapper {\n    display: flex;\n    justify-content: end;\n    margin-top: 1rem;\n}\n.qcpc-style .pr_stop-ex-add {\n    color: #fff;\n    background-color: var( --e-global-color-secondary );\n    border: none;\n    border-radius: 1.5rem;\n}\n.qcpc-style .remove-btn {\n    border-radius: 0.5rem;\n}\n\n.qcpc-style .submit-wrapper {\n    display: flex;\n    margin-top: 2rem;\n}\n.qcpc-style .pr_submit {\n    border: none;\n    border-radius: 1.5rem;\n    background-color: var( --e-global-color-primary );\n    color: #fff;\n    font-size: 1.5rem;\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n@media (max-width: 576px) {\n    .qcpc-style .pr_stop .stop-inputs {\n        flex-direction: column;\n    }\n}\n@media (max-width: 390px) {\n    .qcpc-style .inner {\n        padding: 1rem;\n    }\n}\n\n\/* TRANSPARENT MODE *\/\n.qcpc-style.transparent .qcpc-title, .qcpc-style.transparent .subtitle-wrapper {\n    display: none;\n}\n\n.qcpc-style.transparent .inner {\n    padding:\t0;\n    border: none;\n    background-color: transparent;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    -webkit-box-shadow: none;\n    -moz-box-shadow: none;\n    box-shadow: none;\n}\n\n.qcpc-style.transparent .remove-btn {\n    background: #fff;\n}\n\n.qcpc-style.transparent .remove-btn:hover {\n    color: #fff;\n    background-color: #c36;\n}\n\n<\/style>\n\n<div class=\"quick-call-price-calculator-wrapper qcpc-style  outer\">\n    <div class=\"inner\">\n        <h2 class=\"qcpc-title\">Jetzt Preis f\u00fcr Transport berechnen<\/h2>\n        <div class=\"subtitle-wrapper\">\n            <div class=\"stroke\"><\/div>\n            <div class=\"subtitle-text\">W\u00e4hlen Sie Ihre Daten aus<\/div>\n            <div class=\"stroke\"><\/div>\n        <\/div>\n        \n        <form id=\"pr_1\" class=\"pr_form\" method=\"GET\" action=\"https:\/\/www.stex-gmbh.com\/de\/expressversand-kosten-preisrechner\/\" target=\"_blank\" style=\"visibility: hidden;\">\n    \n            <div class=\"stops-wrapper\">\n                <div id=\"pr_1_st_box\" class=\"pr_stops_box\">\n                    <div id=\"pr_1_st_pickup\" class=\"pr_stop pr_stop-pickup\"><\/div>\n                    <div id=\"pr_1_st_ex\" class=\"pr_stops-ex\"><\/div>\n                    <div id=\"pr_1_st_delivery\" class=\"pr_stop pr_stop-delivery\"><\/div>\n                <\/div>\n            <\/div>\n    \n            <div class=\"add-stops-wrapper\">\n                <input id=\"pr_1_st_add\" class=\"pr_stop-ex-add\" type=\"button\" value=\"+&nbsp;&nbsp;Zwischenziel hinzuf\u00fcgen\"\/>\n            <\/div>\n            \n            <div class=\"pr_when\">\n                <label for=\"pr_1_when_i\">Datum<\/label>\n                <input id=\"pr_1_when_i\" class=\"pr_when-date-btn\" type=\"text\" name=\"pickup_date\" min=\"11.04.2026\" placeholder=\"TT.mm.jjjj\" autocomplete=\"off\" required \/>\n                <!-- <div class=\"today_tomorrow\">\n                    <input id=\"pr_1_when_today\" class=\"pr_when-btn\" type=\"button\" value=\"Heute\"\/>\n                    <input id=\"pr_1_when_tomorrow\" class=\"pr_when-btn\" type=\"button\" value=\"Morgen\"\/>\n                    <input id=\"pr_1_when_day_after_tomorrow\" class=\"pr_when-btn\" type=\"button\" value=\"\u00dcbermorgen\"\/>\n                <\/div> -->\n                <\/div>\n            <div class=\"submit-wrapper\">\n                <button id=\"pr_1_btn\" class=\"pr_submit\" type=\"submit\">\n                    <span>Zum Preisrechner<\/span>\n                    <i aria-hidden=\"true\" class=\"fas fa-arrow-alt-circle-right\"><\/i>\n                <\/button>\n            <\/div>\n            <!--  -->\n        <\/form>\n    <\/div>\n<\/div>\n<script>\n(function()\n{\n    const StopType = {\n        extra: 0,\n        primaryPickup: 1,\n        primaryDelivery: 2,\n    };\n\n    let language = 'de';\n    let formMain = jQuery('#pr_1');\n    let inpWhen = jQuery('#pr_1_when_i');\n    let btnToday = jQuery('#pr_1_when_today');\n    let btnTomorrow = jQuery('#pr_1_when_tomorrow');\n    let btnDayAfterTomorrow = jQuery('#pr_1_when_day_after_tomorrow');\n    let btnSubmit = jQuery('#pr_1_btn');\n    let formStops = jQuery('#pr_1_st_box');\n    let formExtra = jQuery('#pr_1_st_ex');\n    let btnExtra = jQuery('#pr_1_st_add');\n    let transparentMode = '';\n    \/\/console.log(transparentMode == false);\n\n    let cc = document.createElement('select');\n    let lb = document.createElement('label');\n    let extraStops = [];\n    \n    let btnRm = document.createElement('button');\n    \/\/ btnRm.type = 'button';\n    btnRm.title = 'Zwischenziel l\u00f6schen';\n    btnRm.classList.add('remove-btn');\n    let trashIcon = document.createElement('i');\n    trashIcon.classList.add(\"far\");\n    trashIcon.classList.add(\"fa-trash-alt\");\n    trashIcon.ariaHidden = \"false\";\n    btnRm.append(trashIcon);\n\n    \/\/ lb.style.display = 'block';\n\n    function assignNames(stop, prefix, heading)\n    {\n        stop.children[0].textContent = heading; \/\/ label\n        \/\/ stop.children[1].name = prefix + '-cc';\n        \/\/ stop.children[3].name = prefix + '-pc';\n        \/\/ stop.children[1].children[1].id = prefix + '-pc'; \/\/ input with autocomplete\n        \/\/ stop.children[3].id = prefix + '-pc';\n    }\n\n    function adjustExtraStopIds(extraStop, index)\n    {\n        extraStop.children[2].id = 'stop_' + index + '_postalcity_id'; \/\/ hidden input\n    }\n\n    function removeExtraStop(needle)\n    {\n        let output = [];\n        let n = 0;\n        for (let i = 0; i < extraStops.length; ++i)\n        {\n            let st = extraStops[i];\n\n            if (st == needle)\n            {\n                continue;\n            }\n\n            assignNames(st, 'x' + n++, 'Zwischenziel ' + n);\n            adjustExtraStopIds(st, n);\n            output.push(st);\n        }\n\n        extraStops = output;\n        jQuery(needle).remove();\n    }\n\n    function insertStop(type)\n    {\n        let st;\n        if(type === StopType.primaryDelivery || type === StopType.primaryPickup) {\n            st = (type === StopType.primaryDelivery) ? document.getElementById('pr_1_st_delivery') : document.getElementById('pr_1_st_pickup');\n        } else {\n            st = document.createElement('div');\n            st.classList.add('pr_stop');\n        }\n        let lab = lb.cloneNode();\n        st.appendChild(lab);\n\n        let st_flex = document.createElement('div');\n        st_flex.classList.add('stop-inputs');\n        st.appendChild(st_flex);\n\n        let icc = cc.cloneNode(true);\n        icc.value = '5';\n        st_flex.appendChild(icc);\n\n        let ipc = document.createElement('input');\n        ipc.placeholder ='PLZ oder Ort';\n        ipc.required = true;\n        st_flex.appendChild(ipc);\n\n        if (type === StopType.extra) {\n            ipc.id = 'stop-input-' + (extraStops.length + 1);\n        }\n\n        jQuery(ipc).autocomplete(\n        {\n            source: function(request, response)\n            {\n                let rq = {\n                    q: request.term,\n                };\n                \n                jQuery.getJSON('https:\/\/www.stex-gmbh.com\/unicalc\/api\/frontend\/countries\/' + icc.value + '\/postalcodes', rq, function(completions)\n                {\n                    let postalcities = completions.map(c => c.postalcity);\n                    response(postalcities);\n                }).fail(function(err)\n                {\n                    response([]);\n                });\n            },\n            messages:\n            {\n                results: function(resultsCount) {},\n                noResults: '',\n            },\n            select: function (event, ui) {\n                let postalcityId;\n                jQuery.getJSON('https:\/\/www.stex-gmbh.com\/unicalc\/api\/frontend\/countries\/' + icc.value + '\/postalcodes', {q: ui.item.value}, function(postalcity)\n                {\n                    switch (type)\n                    {\n                        case StopType.primaryPickup:\n                            jQuery('#from_postalcity_id')[0].value = postalcity[0].id;\n                            break;\n\n                        case StopType.primaryDelivery:\n                            jQuery('#to_postalcity_id')[0].value = postalcity[0].id;\n                            break;\n                        \n                        case StopType.extra:\n                            let id = ipc.id.split('stop-input-')[1];\n                            jQuery('#stop_' + id + '_postalcity_id')[0].value = postalcity[0].id;\n                            break;\n                    }\n                }).fail(function(err)\n                {\n                    \n                });\n            }\n        });\n\n        let label, namePrefix, typeClass;\n\n        switch (type)\n        {\n            case StopType.extra:\n                let btn = btnRm.cloneNode(true);\n                \/\/ btnRm.type = 'button';\n                \/\/ btnRm.value = '<i aria-hidden=\"true\" class=\"far fa-trash-alt\"><\/i>';\n                \/\/ btnRm.title = 'Zwischenziel l\u00f6schen';\n                \/\/ btnRm.classList.add('remove-btn')\n                jQuery(btn).click(function()\n                {\n                    removeExtraStop(st);\n                });\n                st_flex.appendChild(btn);\n                \n                namePrefix = 'x' + extraStops.length;\n                extraStops.push(st);\n                typeClass = 'pr_stop-ex';\n                label = 'Zwischenziel ' + extraStops.length;\n\n                formExtra.append(st);\n                \n                let stopPcId = document.createElement('input');\n                stopPcId.type = 'hidden';\n                \/\/ stopPcId.name = 'stop_' + extraStops.length + '_postalcity_id';\n                stopPcId.id = 'stop_' + extraStops.length + '_postalcity_id';\n                stopPcId.value = 0;\n                st.appendChild(stopPcId);\n                break;\n\n            case StopType.primaryPickup:\n                let pickupPcId = document.createElement('input');\n                pickupPcId.type = 'hidden';\n                pickupPcId.name = 'from_postalcity_id';\n                pickupPcId.id = 'from_postalcity_id';\n                pickupPcId.value = 0;\n                st.appendChild(pickupPcId);\n                \n                namePrefix = 'pickup';\n                label = 'Abholort';\n                typeClass = 'pr_stop-pickup';\n                break;\n\n            case StopType.primaryDelivery:\n                let deliveryPcId = document.createElement('input');\n                deliveryPcId.type = 'hidden';\n                deliveryPcId.name = 'to_postalcity_id';\n                deliveryPcId.id = 'to_postalcity_id';\n                deliveryPcId.value = 0;\n                st.appendChild(deliveryPcId);\n\n                namePrefix = 'delivery';\n                label = 'Zustellort';\n                typeClass = 'pr_stop-delivery';\n                break;\n        }\n\n        st.classList.add(typeClass);\n        assignNames(st, namePrefix, label);\n    }\n\n    function initializeDatepicker(lang = 'de') {\n        switch (lang) {\n            case 'de':\n                jQuery.datepicker.regional['de'] = {\n                    closeText: \"Schlie\u00dfen\",\n                    prevText: \"&#x3C;\",\n                    nextText: \"&#x3E;\",\n                    currentText: \"Heute\",\n                    monthNames: [ \"Januar\", \"Februar\", \"M\u00e4rz\", \"April\", \"Mai\", \"Juni\",\n                    \"Juli\", \"August\", \"September\", \"Oktober\", \"November\", \"Dezember\" ],\n                    monthNamesShort: [ \"Jan\", \"Feb\", \"M\u00e4r\", \"Apr\", \"Mai\", \"Jun\",\n                    \"Jul\", \"Aug\", \"Sep\", \"Okt\", \"Nov\", \"Dez\" ],\n                    dayNames: [ \"Sonntag\", \"Montag\", \"Dienstag\", \"Mittwoch\", \"Donnerstag\", \"Freitag\", \"Samstag\" ],\n                    dayNamesShort: [ \"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\" ],\n                    dayNamesMin: [ \"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\" ],\n                    weekHeader: \"KW\",\n                    dateFormat: \"dd.mm.yy\",\n                    firstDay: 1,\n                    isRTL: false,\n                    showMonthAfterYear: false,\n                    yearSuffix: \"\",\n                };\n                break;\n        }\n    }\n\n    function addStopsPostalcityIdsToForm() {\n        stopsString = \"\";\n        let count = 0;\n        extraStops.forEach(function(stop, i) {\n            index = i+1;\n            if(count > 0) \n                stopsString += \",\";\n            stopsString += jQuery('#stop_' + index + '_postalcity_id')[0].value;\n\n            count++;\n        });\n        jQuery('#stops_ids')[0].value = stopsString;\n    }\n\n    {\n        jQuery.getJSON('https:\/\/www.stex-gmbh.com\/unicalc\/api\/frontend\/countries', function(result)\n        {\n            let countries = result;\n\n            for (let i = 0; i < countries.length; ++i)\n            {\n                let c = countries[i];\n                let o = document.createElement('option');\n                let translation = c.translations.find(t => t.language_code.toUpperCase() == language.toUpperCase());\n                o.value = c.id;\n                o.textContent = translation.name;\n                cc.appendChild(o);\n            }\n            insertStop(StopType.primaryDelivery);\n            insertStop(StopType.primaryPickup);\n            let extraStopPcIds = document.createElement('input');\n            extraStopPcIds.type = 'hidden';\n            extraStopPcIds.name = 'stops';\n            extraStopPcIds.id = 'stops_ids';\n            extraStopPcIds.value = 0;\n            formExtra.append(extraStopPcIds);\n        });\n\n        btnSubmit.css('visibility', 'visible');\n\n        initializeDatepicker();\n\n        jQuery.datepicker.setDefaults(jQuery.datepicker.regional['de']);\n\n        btnExtra.click(function()\n        {\n            insertStop(StopType.extra);\n        });\n\n        btnToday.click(function()\n        {\n            inpWhen.datepicker('setDate', new Date());\n        });\n\n        btnTomorrow.click(function()\n        {\n            inpWhen.datepicker('setDate', '+1d');\n        });\n        \n        btnDayAfterTomorrow.click(function()\n        {\n            inpWhen.datepicker('setDate', '+2d');\n        });\n\n        btnSubmit.click(function()\n        {\n            addStopsPostalcityIdsToForm();\n        });\n\n        let minDatepickerDate = new Date();\n        minDatepickerDate.setDate(minDatepickerDate.getDate());\n        inpWhen.datepicker({\n            dateFormat: 'dd.mm.yy',\n            firstDay: 1,\n            minDate: minDatepickerDate,\n        });\n        formMain.css('visibility', 'visible');\n    }\n})();\n<\/script><\/p><p><br><\/p><p><link rel=\"stylesheet\" href=\"\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css\">\n<script src=\"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js\"><\/script>\n<link rel='stylesheet' id='elementor-icons-fa-regular-css' href='https:\/\/www.stex-gmbh.com\/wp-content\/plugins\/elementor\/assets\/lib\/font-awesome\/css\/regular.min.css?ver=5.15.3' media='all' \/>\n<link rel='stylesheet' id='elementor-icons-fa-solid-css' href='https:\/\/www.stex-gmbh.com\/wp-content\/plugins\/elementor\/assets\/lib\/font-awesome\/css\/solid.min.css?ver=5.15.3' media='all' \/>\n\n<style>\n\n.qcpc-style.outer {\n    display: flex;\n    justify-content: center;\n}\n.qcpc-style .inner {\n    padding: 2.5rem;\n    border-radius: 1.7rem;\n    background-color: #fff;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);\n    -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);\n    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);\n}\n\n.qcpc-style .qcpc-title {\n    color: #000;\n    text-align: center;\n}\n\n.qcpc-style .subtitle-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 2rem;\n}\n.qcpc-style .subtitle-wrapper .stroke {\n    height: 3px;\n    flex-grow: 1;\n    background-color: #e6e6e6;\n}\n.qcpc-style .subtitle-wrapper .subtitle-text {\n    margin: 0 1rem 2px;\n}\n\n.qcpc-style .stops-wrapper, .qcpc-style .pr_stops-ex {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n\n.qcpc-style .pr_stops_box {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n.qcpc-style .pr_stop {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.qcpc-style .pr_stop .stop-inputs {\n    display: flex;\n    gap: 1rem;\n}\n\n.qcpc-style .pr_stop .stop-inputs select, .qcpc-style .pr_stop .stop-inputs input {\n    height: 40px;\n}\n.qcpc-style .pr_stop .stop-inputs select, .qcpc-style .pr_stop .stop-inputs input, .qcpc-style  .pr_when-date-btn {\n    border: solid 1px #999;\n    border-radius: 0.5rem;\n}\n.qcpc-style .pr_stop .stop-inputs input {\n    padding: 0 1rem;\n}\n\n.qcpc-style .add-stops-wrapper {\n    display: flex;\n    justify-content: end;\n    margin-top: 1rem;\n}\n.qcpc-style .pr_stop-ex-add {\n    color: #fff;\n    background-color: var( --e-global-color-secondary );\n    border: none;\n    border-radius: 1.5rem;\n}\n.qcpc-style .remove-btn {\n    border-radius: 0.5rem;\n}\n\n.qcpc-style .submit-wrapper {\n    display: flex;\n    margin-top: 2rem;\n}\n.qcpc-style .pr_submit {\n    border: none;\n    border-radius: 1.5rem;\n    background-color: var( --e-global-color-primary );\n    color: #fff;\n    font-size: 1.5rem;\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n@media (max-width: 576px) {\n    .qcpc-style .pr_stop .stop-inputs {\n        flex-direction: column;\n    }\n}\n@media (max-width: 390px) {\n    .qcpc-style .inner {\n        padding: 1rem;\n    }\n}\n\n\/* TRANSPARENT MODE *\/\n.qcpc-style.transparent .qcpc-title, .qcpc-style.transparent .subtitle-wrapper {\n    display: none;\n}\n\n.qcpc-style.transparent .inner {\n    padding:\t0;\n    border: none;\n    background-color: transparent;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    -webkit-box-shadow: none;\n    -moz-box-shadow: none;\n    box-shadow: none;\n}\n\n.qcpc-style.transparent .remove-btn {\n    background: #fff;\n}\n\n.qcpc-style.transparent .remove-btn:hover {\n    color: #fff;\n    background-color: #c36;\n}\n\n<\/style>\n\n<div class=\"quick-call-price-calculator-wrapper qcpc-style transparent outer\">\n    <div class=\"inner\">\n        <h2 class=\"qcpc-title\">Jetzt Preis f\u00fcr Transport berechnen<\/h2>\n        <div class=\"subtitle-wrapper\">\n            <div class=\"stroke\"><\/div>\n            <div class=\"subtitle-text\">W\u00e4hlen Sie Ihre Daten aus<\/div>\n            <div class=\"stroke\"><\/div>\n        <\/div>\n        \n        <form id=\"pr_2\" class=\"pr_form\" method=\"GET\" action=\"https:\/\/www.stex-gmbh.com\/de\/expressversand-kosten-preisrechner\/\" target=\"_blank\" style=\"visibility: hidden;\">\n    \n            <div class=\"stops-wrapper\">\n                <div id=\"pr_2_st_box\" class=\"pr_stops_box\">\n                    <div id=\"pr_2_st_pickup\" class=\"pr_stop pr_stop-pickup\"><\/div>\n                    <div id=\"pr_2_st_ex\" class=\"pr_stops-ex\"><\/div>\n                    <div id=\"pr_2_st_delivery\" class=\"pr_stop pr_stop-delivery\"><\/div>\n                <\/div>\n            <\/div>\n    \n            <div class=\"add-stops-wrapper\">\n                <input id=\"pr_2_st_add\" class=\"pr_stop-ex-add\" type=\"button\" value=\"+&nbsp;&nbsp;Zwischenziel hinzuf\u00fcgen\"\/>\n            <\/div>\n            \n            <div class=\"pr_when\">\n                <label for=\"pr_2_when_i\">Datum<\/label>\n                <input id=\"pr_2_when_i\" class=\"pr_when-date-btn\" type=\"text\" name=\"pickup_date\" min=\"11.04.2026\" placeholder=\"TT.mm.jjjj\" autocomplete=\"off\" required \/>\n                <!-- <div class=\"today_tomorrow\">\n                    <input id=\"pr_2_when_today\" class=\"pr_when-btn\" type=\"button\" value=\"Heute\"\/>\n                    <input id=\"pr_2_when_tomorrow\" class=\"pr_when-btn\" type=\"button\" value=\"Morgen\"\/>\n                    <input id=\"pr_2_when_day_after_tomorrow\" class=\"pr_when-btn\" type=\"button\" value=\"\u00dcbermorgen\"\/>\n                <\/div> -->\n                <\/div>\n            <div class=\"submit-wrapper\">\n                <button id=\"pr_2_btn\" class=\"pr_submit\" type=\"submit\">\n                    <span>Zum Preisrechner<\/span>\n                    <i aria-hidden=\"true\" class=\"fas fa-arrow-alt-circle-right\"><\/i>\n                <\/button>\n            <\/div>\n            <!--  -->\n        <\/form>\n    <\/div>\n<\/div>\n<script>\n(function()\n{\n    const StopType = {\n        extra: 0,\n        primaryPickup: 1,\n        primaryDelivery: 2,\n    };\n\n    let language = 'de';\n    let formMain = jQuery('#pr_2');\n    let inpWhen = jQuery('#pr_2_when_i');\n    let btnToday = jQuery('#pr_2_when_today');\n    let btnTomorrow = jQuery('#pr_2_when_tomorrow');\n    let btnDayAfterTomorrow = jQuery('#pr_2_when_day_after_tomorrow');\n    let btnSubmit = jQuery('#pr_2_btn');\n    let formStops = jQuery('#pr_2_st_box');\n    let formExtra = jQuery('#pr_2_st_ex');\n    let btnExtra = jQuery('#pr_2_st_add');\n    let transparentMode = '1';\n    \/\/console.log(transparentMode == false);\n\n    let cc = document.createElement('select');\n    let lb = document.createElement('label');\n    let extraStops = [];\n    \n    let btnRm = document.createElement('button');\n    \/\/ btnRm.type = 'button';\n    btnRm.title = 'Zwischenziel l\u00f6schen';\n    btnRm.classList.add('remove-btn');\n    let trashIcon = document.createElement('i');\n    trashIcon.classList.add(\"far\");\n    trashIcon.classList.add(\"fa-trash-alt\");\n    trashIcon.ariaHidden = \"false\";\n    btnRm.append(trashIcon);\n\n    \/\/ lb.style.display = 'block';\n\n    function assignNames(stop, prefix, heading)\n    {\n        stop.children[0].textContent = heading; \/\/ label\n        \/\/ stop.children[1].name = prefix + '-cc';\n        \/\/ stop.children[3].name = prefix + '-pc';\n        \/\/ stop.children[1].children[1].id = prefix + '-pc'; \/\/ input with autocomplete\n        \/\/ stop.children[3].id = prefix + '-pc';\n    }\n\n    function adjustExtraStopIds(extraStop, index)\n    {\n        extraStop.children[2].id = 'stop_' + index + '_postalcity_id'; \/\/ hidden input\n    }\n\n    function removeExtraStop(needle)\n    {\n        let output = [];\n        let n = 0;\n        for (let i = 0; i < extraStops.length; ++i)\n        {\n            let st = extraStops[i];\n\n            if (st == needle)\n            {\n                continue;\n            }\n\n            assignNames(st, 'x' + n++, 'Zwischenziel ' + n);\n            adjustExtraStopIds(st, n);\n            output.push(st);\n        }\n\n        extraStops = output;\n        jQuery(needle).remove();\n    }\n\n    function insertStop(type)\n    {\n        let st;\n        if(type === StopType.primaryDelivery || type === StopType.primaryPickup) {\n            st = (type === StopType.primaryDelivery) ? document.getElementById('pr_2_st_delivery') : document.getElementById('pr_2_st_pickup');\n        } else {\n            st = document.createElement('div');\n            st.classList.add('pr_stop');\n        }\n        let lab = lb.cloneNode();\n        st.appendChild(lab);\n\n        let st_flex = document.createElement('div');\n        st_flex.classList.add('stop-inputs');\n        st.appendChild(st_flex);\n\n        let icc = cc.cloneNode(true);\n        icc.value = '5';\n        st_flex.appendChild(icc);\n\n        let ipc = document.createElement('input');\n        ipc.placeholder ='PLZ oder Ort';\n        ipc.required = true;\n        st_flex.appendChild(ipc);\n\n        if (type === StopType.extra) {\n            ipc.id = 'stop-input-' + (extraStops.length + 1);\n        }\n\n        jQuery(ipc).autocomplete(\n        {\n            source: function(request, response)\n            {\n                let rq = {\n                    q: request.term,\n                };\n                \n                jQuery.getJSON('https:\/\/www.stex-gmbh.com\/unicalc\/api\/frontend\/countries\/' + icc.value + '\/postalcodes', rq, function(completions)\n                {\n                    let postalcities = completions.map(c => c.postalcity);\n                    response(postalcities);\n                }).fail(function(err)\n                {\n                    response([]);\n                });\n            },\n            messages:\n            {\n                results: function(resultsCount) {},\n                noResults: '',\n            },\n            select: function (event, ui) {\n                let postalcityId;\n                jQuery.getJSON('https:\/\/www.stex-gmbh.com\/unicalc\/api\/frontend\/countries\/' + icc.value + '\/postalcodes', {q: ui.item.value}, function(postalcity)\n                {\n                    switch (type)\n                    {\n                        case StopType.primaryPickup:\n                            jQuery('#from_postalcity_id')[0].value = postalcity[0].id;\n                            break;\n\n                        case StopType.primaryDelivery:\n                            jQuery('#to_postalcity_id')[0].value = postalcity[0].id;\n                            break;\n                        \n                        case StopType.extra:\n                            let id = ipc.id.split('stop-input-')[1];\n                            jQuery('#stop_' + id + '_postalcity_id')[0].value = postalcity[0].id;\n                            break;\n                    }\n                }).fail(function(err)\n                {\n                    \n                });\n            }\n        });\n\n        let label, namePrefix, typeClass;\n\n        switch (type)\n        {\n            case StopType.extra:\n                let btn = btnRm.cloneNode(true);\n                \/\/ btnRm.type = 'button';\n                \/\/ btnRm.value = '<i aria-hidden=\"true\" class=\"far fa-trash-alt\"><\/i>';\n                \/\/ btnRm.title = 'Zwischenziel l\u00f6schen';\n                \/\/ btnRm.classList.add('remove-btn')\n                jQuery(btn).click(function()\n                {\n                    removeExtraStop(st);\n                });\n                st_flex.appendChild(btn);\n                \n                namePrefix = 'x' + extraStops.length;\n                extraStops.push(st);\n                typeClass = 'pr_stop-ex';\n                label = 'Zwischenziel ' + extraStops.length;\n\n                formExtra.append(st);\n                \n                let stopPcId = document.createElement('input');\n                stopPcId.type = 'hidden';\n                \/\/ stopPcId.name = 'stop_' + extraStops.length + '_postalcity_id';\n                stopPcId.id = 'stop_' + extraStops.length + '_postalcity_id';\n                stopPcId.value = 0;\n                st.appendChild(stopPcId);\n                break;\n\n            case StopType.primaryPickup:\n                let pickupPcId = document.createElement('input');\n                pickupPcId.type = 'hidden';\n                pickupPcId.name = 'from_postalcity_id';\n                pickupPcId.id = 'from_postalcity_id';\n                pickupPcId.value = 0;\n                st.appendChild(pickupPcId);\n                \n                namePrefix = 'pickup';\n                label = 'Abholort';\n                typeClass = 'pr_stop-pickup';\n                break;\n\n            case StopType.primaryDelivery:\n                let deliveryPcId = document.createElement('input');\n                deliveryPcId.type = 'hidden';\n                deliveryPcId.name = 'to_postalcity_id';\n                deliveryPcId.id = 'to_postalcity_id';\n                deliveryPcId.value = 0;\n                st.appendChild(deliveryPcId);\n\n                namePrefix = 'delivery';\n                label = 'Zustellort';\n                typeClass = 'pr_stop-delivery';\n                break;\n        }\n\n        st.classList.add(typeClass);\n        assignNames(st, namePrefix, label);\n    }\n\n    function initializeDatepicker(lang = 'de') {\n        switch (lang) {\n            case 'de':\n                jQuery.datepicker.regional['de'] = {\n                    closeText: \"Schlie\u00dfen\",\n                    prevText: \"&#x3C;\",\n                    nextText: \"&#x3E;\",\n                    currentText: \"Heute\",\n                    monthNames: [ \"Januar\", \"Februar\", \"M\u00e4rz\", \"April\", \"Mai\", \"Juni\",\n                    \"Juli\", \"August\", \"September\", \"Oktober\", \"November\", \"Dezember\" ],\n                    monthNamesShort: [ \"Jan\", \"Feb\", \"M\u00e4r\", \"Apr\", \"Mai\", \"Jun\",\n                    \"Jul\", \"Aug\", \"Sep\", \"Okt\", \"Nov\", \"Dez\" ],\n                    dayNames: [ \"Sonntag\", \"Montag\", \"Dienstag\", \"Mittwoch\", \"Donnerstag\", \"Freitag\", \"Samstag\" ],\n                    dayNamesShort: [ \"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\" ],\n                    dayNamesMin: [ \"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\" ],\n                    weekHeader: \"KW\",\n                    dateFormat: \"dd.mm.yy\",\n                    firstDay: 1,\n                    isRTL: false,\n                    showMonthAfterYear: false,\n                    yearSuffix: \"\",\n                };\n                break;\n        }\n    }\n\n    function addStopsPostalcityIdsToForm() {\n        stopsString = \"\";\n        let count = 0;\n        extraStops.forEach(function(stop, i) {\n            index = i+1;\n            if(count > 0) \n                stopsString += \",\";\n            stopsString += jQuery('#stop_' + index + '_postalcity_id')[0].value;\n\n            count++;\n        });\n        jQuery('#stops_ids')[0].value = stopsString;\n    }\n\n    {\n        jQuery.getJSON('https:\/\/www.stex-gmbh.com\/unicalc\/api\/frontend\/countries', function(result)\n        {\n            let countries = result;\n\n            for (let i = 0; i < countries.length; ++i)\n            {\n                let c = countries[i];\n                let o = document.createElement('option');\n                let translation = c.translations.find(t => t.language_code.toUpperCase() == language.toUpperCase());\n                o.value = c.id;\n                o.textContent = translation.name;\n                cc.appendChild(o);\n            }\n            insertStop(StopType.primaryDelivery);\n            insertStop(StopType.primaryPickup);\n            let extraStopPcIds = document.createElement('input');\n            extraStopPcIds.type = 'hidden';\n            extraStopPcIds.name = 'stops';\n            extraStopPcIds.id = 'stops_ids';\n            extraStopPcIds.value = 0;\n            formExtra.append(extraStopPcIds);\n        });\n\n        btnSubmit.css('visibility', 'visible');\n\n        initializeDatepicker();\n\n        jQuery.datepicker.setDefaults(jQuery.datepicker.regional['de']);\n\n        btnExtra.click(function()\n        {\n            insertStop(StopType.extra);\n        });\n\n        btnToday.click(function()\n        {\n            inpWhen.datepicker('setDate', new Date());\n        });\n\n        btnTomorrow.click(function()\n        {\n            inpWhen.datepicker('setDate', '+1d');\n        });\n        \n        btnDayAfterTomorrow.click(function()\n        {\n            inpWhen.datepicker('setDate', '+2d');\n        });\n\n        btnSubmit.click(function()\n        {\n            addStopsPostalcityIdsToForm();\n        });\n\n        let minDatepickerDate = new Date();\n        minDatepickerDate.setDate(minDatepickerDate.getDate());\n        inpWhen.datepicker({\n            dateFormat: 'dd.mm.yy',\n            firstDay: 1,\n            minDate: minDatepickerDate,\n        });\n        formMain.css('visibility', 'visible');\n    }\n})();\n<\/script><br><\/p>\n<p><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1663,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-3298","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.stex-gmbh.com\/de\/wp-json\/wp\/v2\/pages\/3298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stex-gmbh.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.stex-gmbh.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.stex-gmbh.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stex-gmbh.com\/de\/wp-json\/wp\/v2\/comments?post=3298"}],"version-history":[{"count":0,"href":"https:\/\/www.stex-gmbh.com\/de\/wp-json\/wp\/v2\/pages\/3298\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stex-gmbh.com\/de\/wp-json\/wp\/v2\/media\/1663"}],"wp:attachment":[{"href":"https:\/\/www.stex-gmbh.com\/de\/wp-json\/wp\/v2\/media?parent=3298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stex-gmbh.com\/de\/wp-json\/wp\/v2\/categories?post=3298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stex-gmbh.com\/de\/wp-json\/wp\/v2\/tags?post=3298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}