{"id":9684,"date":"2022-03-04T12:12:25","date_gmt":"2022-03-04T11:12:25","guid":{"rendered":"https:\/\/www.pickware.com\/?page_id=9684"},"modified":"2025-12-05T13:09:06","modified_gmt":"2025-12-05T12:09:06","slug":"newsletter","status":"publish","type":"page","link":"https:\/\/www.pickware.com\/de\/newsletter","title":{"rendered":"Newsletter"},"content":{"rendered":"\n<div class=\"layout-space layout-space--content-page-level-2\"><\/div>\n\n\n\n<div class=\"hero-image-size-500 \">\n        <div class=\"l-container\">\n        <div class=\"l-grid\">\n            <div class=\"l-grid__content\">\n                <div class=\"hero-image-size-500__eyebrow\">Newsletter<\/div>\n                <h1 class=\"hero-image-size-500__heading\">Bleibe immer auf dem Laufenden<\/h1>\n                <div class=\"hero-image-size-500__copy\"><p>Melde dich zum Pickware Newsletter an und erfahre Neuigkeiten als Erster.<\/p>\n<\/div>\n                                    <div class=\"hero-image-size-500__list-heading\"><\/div>\n                    <ul class=\"hero-image-size-500__list\">\n                                                    <li>\n                                <div>News &#038; Releases<\/div>\n                            <\/li>\n                                                    <li>\n                                <div>Kundenstories &#038; Interviews<\/div>\n                            <\/li>\n                                                    <li>\n                                <div>Wissen rund um Lager, Versand, Kasse &#038; E-Commerce<\/div>\n                            <\/li>\n                                                    <li>\n                                <div>Events &#038; Webinare<\/div>\n                            <\/li>\n                                            <\/ul>\n                                            <\/div>\n            <div class=\"l-grid__image\">\n                <img decoding=\"async\" class=\"hero-image-size-500__illustration hero-image-size-500__illustration--text-length-normal\" src=\"https:\/\/www.pickware.com\/app\/uploads\/2025\/12\/web-newsletter-hero@2x.png\" alt=\"web-newsletter-hero@2x\" \/>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<div class=\"layout-space layout-space--content-page-level-2\"><\/div>\n\n\n\n<div class=\"layout-space layout-space--content-page-level-2\"><\/div>\n\n\n<script id=\"c-text-field\" type=\"text\/html\">\n    <div class=\"c-text-field\">\n        <input :value=\"value\" @input=\"$emit('input', $event.target.value)\" class=\"c-text-field__input\" :class=\"{'is-invalid': error || !isValid}\" placeholder=\" \" :type=\"type\" :disabled=\"disabled\" \/>\n        <label class=\"c-text-field__label\">{{ label }}<\/label>\n        <p v-if=\"error || !isValid\" class=\"c-text-field__error\">{{ errorMsg }}<\/p>\n    <\/div>\n<\/script>\n\n<script type=\"text\/javascript\">\n    Vue.component(\"c-text-field\", {\n        template: \"#c-text-field\",\n        props: {\n            value: {\n                type: String,\n                default: \"\"\n            },\n            type: {\n                type: String,\n                default: \"text\"\n            },\n            label: {\n                type: String,\n                default: \"\"\n            },\n            errorMsg: {\n                type: String,\n                default: \"\"\n            },\n            disabled: {\n                type: Boolean,\n                default: true\n            },\n            error: {\n                type: Boolean,\n                default: false\n            }\n        },\n        data() {\n            return {\n                isValid: true,\n            };\n        },\n        methods: {\n            validate() {\n                this.isValid = !!this.value &&\n                    (this.type !== \"email\" || this.isValidEmail(this.value));\n                return this.isValid;\n            },\n            isValidEmail(email) {\n                return \/^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$\/.test(\n                    String(email).toLowerCase()\n                );\n            },\n        },\n    });\n<\/script>\n<script id=\"c-checkbox\" type=\"text\/html\">\n    <div class=\"c-checkbox\" @click.stop=\"if (!disabled) { $emit('input', !value) }\">\n        <input class=\"c-checkbox__input\" :class=\"{\n                'c-checkbox__input--inverse': inverse,\n                'c-checkbox__input--highlight': highlight,\n                'is-invalid': !isValid,\n                'u-hover': hoverLabel\n            }\" :value=\"value\" :checked=\"value\" type=\"checkbox\" :disabled=\"disabled\" \/>\n        <div class=\"c-checkbox__label\" @mouseenter=\"hoverLabel = true\" @mouseleave=\"hoverLabel = false\">\n            <div v-if=\"labelHeading\" class=\"c-checkbox__label-heading\">\n                {{ labelHeading }}\n            <\/div>\n            <div v-html=\"label\"><\/div>\n        <\/div>\n    <\/div>\n<\/script>\n\n<script type=\"text\/javascript\">\n    Vue.component(\"c-checkbox\", {\n        template: \"#c-checkbox\",\n        props: {\n            value: {\n                type: Boolean,\n                default: false\n            },\n            labelHeading: {\n                type: String,\n                default: null\n            },\n            label: {\n                type: String,\n                default: \"\"\n            },\n            disabled: {\n                type: Boolean,\n                default: false\n            },\n            inverse: {\n                type: Boolean,\n                default: false\n            },\n            highlight: {\n                type: Boolean,\n                default: false\n            },\n        },\n\n        data() {\n            return {\n                isValid: true,\n                hoverLabel: false\n            }\n        },\n\n        methods: {\n            validate() {\n                this.isValid = this.value;\n\n                return this.isValid;\n            }\n        },\n    });\n<\/script>\n<script id=\"c-button\" type=\"text\/html\">\n    <button class=\"c-button\" :class=\"[\n            { 'c-button--disabled': disabled },\n            { 'c-button--inverse': inverse },\n            `c-button--order-${order}`\n        ]\" :type=\"type\" :disabled=\"disabled\" @click=\"$emit('click')\">\n        {{ text }}\n    <\/button>\n<\/script>\n\n<script type=\"text\/javascript\">\n    Vue.component(\"c-button\", {\n        template: \"#c-button\",\n        props: {\n            text: {\n                type: String,\n                default: \"\"\n            },\n            disabled: {\n                type: Boolean,\n                default: false\n            },\n            type: {\n                type: String,\n                default: \"submit\"\n            },\n            order: {\n                type: String,\n                default: \"500\"\n            },\n            inverse: {\n                type: Boolean,\n                default: false\n            },\n        },\n    });\n<\/script>\n<script id=\"c-overlay\" type=\"text\/html\">\n    <div class=\"c-overlay\" @click=\"$emit('close')\">\n        <div class=\"c-overlay__content\">\n            <div class=\"c-overlay__close-button\" @click=\"$emit('close')\"><\/div>\n            <slot><\/slot>\n        <\/div>\n    <\/div>\n<\/script>\n\n<script type=\"text\/javascript\">\n    Vue.component(\"c-overlay\", {\n        template: \"#c-overlay\",\n        mounted() {\n            disallowPageScroll();\n        },\n        destroyed() {\n            allowPageScroll();\n        },\n    });\n<\/script>\n\n<div id=\"teaser-newsletter\" class=\"teaser-newsletter teaser-newsletter--order-500\" data-language=\"language-de\">\n    <div class=\"l-container\">\n        <div class=\"l-grid\">\n            <div class=\"l-grid__background\"><\/div>\n            <div class=\"l-grid__content\">\n                <div>\n                    <div class=\"teaser-newsletter__eyebrow\"><\/div>\n                    <div class=\"teaser-newsletter__heading\">Jetzt anmelden!<\/div>\n                <\/div>\n                <div class=\"teaser-newsletter__copy\"><p>Wir versorgen dich monatlich mit den wichtigsten Neuigkeiten rund um Pickware.<\/p>\n<\/div>\n                                <form @submit.prevent=\"subscribe()\" class=\"teaser-newsletter__form\" novalidate>\n                    <c-text-field ref=\"inputEmail\" class=\"teaser-newsletter__input-email\" v-model=\"email\" type=\"email\" label=\"E-Mail\" error-msg=\"Bitte gib deine E-Mail-Adresse an\" :disabled=\"loading\"><\/c-text-field>\n                    <c-checkbox ref=\"checkbox\" class=\"teaser-newsletter__checkbox\" v-model=\"isCheckboxChecked\" label=\"&lt;p&gt;Ich habe die &lt;a href=&quot;https:\/\/www.pickware.com\/de\/datenschutz&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Datenschutz\u00aderkl\u00e4rung&lt;\/a&gt; gelesen, willige ein und m\u00f6chte den Newsletter erhalten.&lt;\/p&gt;\n\" :highlight=\"false\" :disabled=\"loading\"><\/c-checkbox>\n                    <div class=\"teaser-newsletter__error\" v-if=\"error\">Etwas ist schiefgelaufen, bitte versuche es sp\u00e4ter nochmal<\/div>\n                    <c-button text=\"Abonnieren\" :disabled=\"loading\" class=\"teaser-newsletter__button\" order=\"500\" :inverse=\"false\" \/>\n                <\/form>\n            <\/div>\n            <div class=\"l-grid__image\">\n                <div class=\"teaser-newsletter__illustration-and-button\">\n                    <img decoding=\"async\" class=\"teaser-newsletter__illustration\" src=\"https:\/\/www.pickware.com\/app\/uploads\/2023\/05\/230531_highlight_newsletter@2x.png\" alt=\"230531_highlight_newsletter@2x\" \/>\n                                            <div class=\"teaser-newsletter__preview-button-wrapper\">\n                            <a class=\"teaser-newsletter__preview-button \" href=\"https:\/\/www.pickware.com\/de\/newsletter\/preview\" target=\"_blank\">Beispiel anzeigen<\/a>\n                        <\/div>\n                                    <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <c-overlay v-if=\"showSuccessOverlay\" @close=\"showSuccessOverlay = false\">\n        <div class=\"l-container\" onclick=\"event.stopPropagation()\">\n            <div class=\"success-overlay\">\n                <div class=\"success-overlay__text\">\n                    <div class=\"success-overlay__eyebrow\"><\/div>\n                    <div class=\"success-overlay__heading\">Fast fertig!<\/div>\n                    <div class=\"success-overlay__copy\"> Wir haben dir soeben eine E-Mail gesendet. Bitte best\u00e4tige mit Klick auf den darin enthaltenen Link deine Newsletteranmeldung.<\/div>\n                <\/div>\n                <div class=\"success-overlay__image\">\n                    <img decoding=\"async\" class=\"success-overlay__illustration\" src=\"https:\/\/www.pickware.com\/app\/uploads\/2021\/06\/email-confirmation.svg\" alt=\"email-confirmation\" \/>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/c-overlay>\n<\/div>\n\n<script>\n    jQuery(function($) {\n        var teaserNewsletterFormId = '#teaser-newsletter';\n        if ($(teaserNewsletterFormId).length === 0) return;\n\n        new Vue({\n            el: teaserNewsletterFormId,\n\n            data: {\n                loading: false,\n                isCheckboxChecked: false,\n                email: \"\",\n                error: null,\n                showSuccessOverlay: false,\n                language: null,\n                pageTitle: document.title,\n                pageUrl: window.location.href.split('?')[0],\n                legalConsentText: 'Ich habe die Datenschutz\u00aderkl\u00e4rung gelesen, willige ein und m\u00f6chte den Newsletter erhalten.'\n            },\n\n            mounted: function() {\n                this.language = $(this.$el).data('language').replace('language-', '');\n            },\n\n            methods: {\n                subscribe() {\n                    if (\n                        this.$refs.checkbox.validate() &\n                        this.$refs.inputEmail.validate()\n                    ) {\n                        this.error = null\n                        this.success = null\n                        this.loading = true\n                        var hubspotClientId = document.cookie.match(\/(^|;)\\s*hubspotutk\\s*=\\s*([^;]+)\/) ? document.cookie.match(\/(^|;)\\s*hubspotutk\\s*=\\s*([^;]+)\/)[2] : null;\n\n                        $.ajax({\n                            type: \"POST\",\n                            url: \"\/wp-json\/api\/newsletter\",\n                            data: JSON.stringify({\n                                email: this.email,\n                                language: this.language,\n                                pageTitle: this.pageTitle,\n                                pageUrl: this.pageUrl,\n                                legalConsentText: this.legalConsentText,\n                                hubspotClientId: hubspotClientId,\n                            }),\n                            contentType: \"application\/json; charset=utf-8\",\n                            dataType: \"json\",\n                            success: function(data) {\n                                if (!data.success) {\n                                    this.error = true\n\n                                    return\n                                }\n                                this.email = ''\n                                this.isCheckboxChecked = false\n                                this.showSuccessOverlay = true\n                                if (window.dataLayer) {\n                                    window.dataLayer.push({\n                                        'event': 'newsletter-signup-confirmed'\n                                    })\n                                }\n                            }.bind(this),\n                            error: function() {\n                                this.error = true\n                            }.bind(this),\n                            complete: function() {\n                                this.loading = false;\n                            }.bind(this)\n                        });\n                    }\n                },\n            },\n        });\n    });\n<\/script>\n\n\n\n<div class=\"layout-space layout-space--article-page-level-1\"><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","footnotes":""},"class_list":["post-9684","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.pickware.com\/de\/wp-json\/wp\/v2\/pages\/9684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pickware.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pickware.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pickware.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pickware.com\/de\/wp-json\/wp\/v2\/comments?post=9684"}],"version-history":[{"count":67,"href":"https:\/\/www.pickware.com\/de\/wp-json\/wp\/v2\/pages\/9684\/revisions"}],"predecessor-version":[{"id":46158,"href":"https:\/\/www.pickware.com\/de\/wp-json\/wp\/v2\/pages\/9684\/revisions\/46158"}],"wp:attachment":[{"href":"https:\/\/www.pickware.com\/de\/wp-json\/wp\/v2\/media?parent=9684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}