{"id":259,"date":"2025-12-01T23:36:47","date_gmt":"2025-12-01T23:36:47","guid":{"rendered":"https:\/\/dimosa.eu\/?page_id=259"},"modified":"2025-12-11T18:51:31","modified_gmt":"2025-12-11T17:51:31","slug":"shop-dimosa","status":"publish","type":"page","link":"https:\/\/dimosa.eu\/it\/shop-dimosa\/","title":{"rendered":"Shop"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"259\" class=\"elementor elementor-259\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"e-con-top elementor-element elementor-element-3545413 e-flex e-con-boxed e-con e-parent\" data-id=\"3545413\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-1939db9 e-con-full e-flex e-con e-child\" data-id=\"1939db9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc3e56c elementor-widget elementor-widget-heading\" data-id=\"fc3e56c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Entdecke die Welt <br> von DIMOSA<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9046b6e u-last-p-margin elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"9046b6e\" 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>Entdecke handgefertigte Moosbilder, dekorative Moosgef\u00e4\u00dfe und loses Moos in vielen Farben. Ob fertiges Design f\u00fcr dein Zuhause oder Material f\u00fcr dein n\u00e4chstes Kreativprojekt \u2013 finde deinen Favoriten aus unserem Atelier in S\u00fcdtirol.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bc542d elementor-widget elementor-widget-spacer\" data-id=\"1bc542d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be65c76 elementor-widget elementor-widget-shortcode\" data-id=\"be65c76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<div id=\"custom-shop\" class=\"custom-shop-wrapper\">\n\n    <!-- CATEGORY BAR -->\n    <div id=\"shop-categories\" class=\"shop-cat-scroll\">\n        <button class=\"cat-filter active\" data-cat=\"all\">Alle<\/button>\n        <button class=\"cat-filter\" data-cat=\"kraenze-wanddeko\">Kr\u00e4nze &amp; Wanddeko<\/button><button class=\"cat-filter\" data-cat=\"oohhmore\">Oohh &amp; More<\/button><button class=\"cat-filter\" data-cat=\"moosbild\">Moosbild<\/button><button class=\"cat-filter\" data-cat=\"moos-lose\">Moos Lose<\/button>    <\/div>\n\n    <!-- Smartphone-Kategorieauswahl -->\n    <div class=\"shop-cat-mobile\">\n        <select id=\"shop-category-mobile\" aria-label=\"Produktkategorie ausw\u00e4hlen\"><\/select>\n        <svg class=\"shop-cat-arrow\" aria-hidden=\"true\" focusable=\"false\"\n             xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"36\"\n             viewBox=\"0 0 49.414 90.707\" fill=\"none\">\n            <g transform=\"translate(49.414 0) rotate(90)\" stroke=\"currentColor\" stroke-width=\"2\">\n                <line x1=\"0\" y1=\"24.707\" x2=\"90\" y2=\"24.707\" \/>\n                <line x1=\"66\" y1=\"0.707\" x2=\"90\" y2=\"24.707\" \/>\n                <line x1=\"66\" y1=\"48.707\" x2=\"90\" y2=\"24.707\" \/>\n            <\/g>\n        <\/svg>\n    <\/div>\n\n    <!-- PRODUCT GRID -->\n    <div id=\"shop-products\" class=\"shop-grid\"><\/div>\n\n    <!-- LOAD MORE -->\n    <div class=\"load-more-wrap\">\n        <button id=\"load-more\" data-page=\"1\">Mehr laden<\/button>\n    <\/div>\n\n<\/div>\n\n\n<!-- =============================================\n     CSS (Pixel Perfect)\n============================================== -->\n<style>\n#custom-shop * {\n    font-family: \"Montserrat\", sans-serif;\n}\n\n.shop-cat-scroll {\n    display: flex;\n    gap: 47px;\n    overflow-x: auto;\n    padding: 19px 0 19px 0;\n    scrollbar-width: thin;\n    border-bottom: 1px solid #242424;\n  border-top: 1px solid #242424;\n}\n\n.cat-filter {\n  padding: 10px 22px;\n  font-size: 20px;\n  white-space: nowrap;\n  transition: 0.2s;\n  font-weight: 500;\n    text-transform: uppercase;\n  color: #2C2C2C;\n}\n\n.cat-filter.active {\n    font-weight: bold;\n}\n\n\/* Smartphone-Dropdown *\/\n#custom-shop .shop-cat-mobile { display: none; }\n@media (max-width: 767px) {\n    #custom-shop #shop-categories { display: none; }\n    #custom-shop .shop-cat-mobile {\n        display: block;\n        position: relative;\n        border-top: 1px solid #242424;\n        border-bottom: 1px solid #242424;\n    }\n    #custom-shop #shop-category-mobile {\n        display: block;\n        appearance: none;\n        -webkit-appearance: none;\n        width: 100%;\n        max-width: 100%;\n        min-height: 70px;\n        margin: 0;\n        padding: 19px 48px;\n        border: 0;\n        border-radius: 0;\n        background: transparent;\n        box-shadow: none;\n        color: #2C2C2C;\n        font-family: \"Montserrat\", sans-serif;\n        font-size: 20px;\n        font-weight: 500;\n        line-height: 1.5;\n        text-transform: uppercase;\n        text-align: center;\n        text-align-last: center;\n        cursor: pointer;\n    }\n    #custom-shop #shop-category-mobile:focus,\n    #custom-shop #shop-category-mobile:active {\n        border: 0;\n        box-shadow: none;\n        outline: none;\n        -webkit-tap-highlight-color: transparent;\n    }\n    #custom-shop #shop-category-mobile:focus-visible {\n        outline: 2px solid #2C2C2C;\n        outline-offset: -4px;\n    }\n    #custom-shop .shop-cat-arrow {\n        position: absolute;\n        right: 24px;\n        top: 50%;\n        width: 20px;\n        height: 36px;\n        color: #2C2C2C;\n        transform: translateY(-50%);\n        pointer-events: none;\n    }\n}\n\n\/* Auf Touchger\u00e4ten keinen Fokusrahmen beim Antippen anzeigen. *\/\n@media (max-width: 767px) and (hover: none) {\n    #custom-shop #shop-category-mobile:focus-visible {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n\/* GRID *\/\n.shop-grid {\n    display: grid;\n}\n\n\/* Responsive columns *\/\n@media (min-width: 1025px) {\n    .shop-grid {\n        grid-template-columns: repeat(3, 1fr);\n    }\n}\n@media (min-width: 768px) and (max-width: 1024px) {\n    .shop-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n@media (max-width: 767px) {\n    .shop-grid {\n        grid-template-columns: repeat(1, 1fr);\n    }\n}\n\n\/* PRODUCT CARD *\/\n.shop-product-card {\n    padding: 72px 45px 40px 45px;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    position: relative;\n    align-items: center;\n  text-align: center;\n}\n\n\/* BEST SELLER BADGE *\/\n.best-seller-badge {\n  position: absolute;\n  top: 23px;\n  left: 20px;\n  color: #2C2C2C;\n  font-size: 20px;\n  font-weight: 300;\n  text-transform: uppercase;\n}\n\n\/* IMAGE *\/\n.shop-product-card .image-wrap img {\n  width: 100%;\n  height: 350px;\n  object-fit: cover;\n  object-position: bottom;\n  mix-blend-mode: multiply;\n}\n\n\/* CONTENT AREA (flex-grow) *\/\n.card-content-area {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n\/* TITLE *\/\n.shop-product-card .title {\n  margin-top: 18px;\n  font-size: 20px;\n  font-weight: 600;\n  color: #2C2C2C;\n  text-transform: uppercase;\n}\n\n\/* SHORT DESCRIPTION *\/\n.short-desc {\n  margin: 15px auto;\n  font-size: 20px;\n  flex-grow: 1;\n  max-width: 321px;\n  font-weight: 300;\n  line-height: 1.3em;\n}\n\n\/* PRICE *\/\n.price {\n  font-size: 20px;\n  margin-bottom: 52px;\n  font-weight: 300;\n  margin-top: 13px;\n}\n\n\/* GRAMS *\/\n.gram-wrap {\n  display: flex;\n  gap: 7px;\n  margin-bottom: 6px;\n  width: 100%;\n}\n\n.gram-option {\n  padding: 13px 14px;\n  background: #2C2C2C;\n  color: #fff;\n  cursor: pointer;\n  font-size: 19px;\n  transition: 0.2s;\n  width: 100%;\n  font-weight: 300;\n}\n\n.gram-option.active {\n    background: #73AA17;\n}\n\n\/* BUTTON AREA (fixed bottom) *\/\n.card-bottom-area {\n    margin-top: auto;\n    width: 100%;\n}\n\n.add-button {\n  padding: 13px 14px;\n  background: #2C2C2C;\n  color: #fff !important;\n  cursor: pointer;\n  font-size: 19px;\n  transition: 0.2s;\n  width: 100%;\n  font-weight: 300;\n    display: block;\n}\n\n\/* LOAD MORE *\/\n.load-more-wrap {\n  text-align: center;\n  margin-top: 174px;\n}\n\n#load-more {\n  padding: 15px 14px;\n  border: 1px solid #707070;\n  color: #2C2C2C !important;\n  cursor: pointer;\n  font-size: 19px;\n  transition: 0.2s;\n  width: 335px;\n  font-weight: 300;\n  display: block;\n  margin: 0 auto;\n}\n<\/style>\n\n\n<!-- =============================================\n     JAVASCRIPT (AJAX + Filters + Price Update)\n============================================== -->\n<script>\njQuery(function($){\n\n    let selectedCategories = [];\n    let loading = false;\n    let pendingCategoryReset = false;\n    const $mobileCategory = $('#shop-category-mobile');\n    const $categoryButtons = $('#shop-categories .cat-filter');\n\n    $categoryButtons.each(function () {\n        $mobileCategory.append(new Option($(this).text().trim(), this.dataset.cat));\n    });\n\n    $mobileCategory.on('change', function () {\n        \/\/ Eine Kategorie pro Smartphone-Auswahl; bestehende Filterlogik nutzen.\n        $categoryButtons.removeClass('active');\n        $categoryButtons.filter((index, button) => button.dataset.cat === this.value)\n            .trigger('click');\n    });\n\n    function loadProducts(reset = false){\n        if (loading) {\n            if (reset) pendingCategoryReset = true;\n            return;\n        }\n        loading = true;\n\n        let page = reset ? 1 : parseInt($('#load-more').attr('data-page'));\n\n        $.ajax({\n            url: customshop_ajax.url,\n            type: 'POST',\n            data: {\n                action: 'load_shop_products',\n                page: page,\n                categories: selectedCategories\n            },\n            success: function(response){\n                let $html = $('<div>').html(response);\n\n                if (reset) {\n                    $('#shop-products').html(response);\n                    $('#load-more').attr('data-page', 1);\n                } else {\n                    \/\/ Bereits sichtbare Produkt-IDs nicht nochmals einf\u00fcgen.\n                    const seenProductIds = new Set(\n                        $('#shop-products .shop-product-card').map(function () {\n                            return this.getAttribute('data-product-id');\n                        }).get()\n                    );\n                    $html.find('.shop-product-card').each(function () {\n                        const productId = this.getAttribute('data-product-id');\n                        if (!productId || seenProductIds.has(productId)) return;\n                        seenProductIds.add(productId);\n                        $('#shop-products').append(this);\n                    });\n                }\n\n                if ($html.find('.no-products').length > 0 || $.trim(response) === \"\") {\n                    $('#load-more').hide();\n                } else {\n                    $('#load-more').show();\n                    $('#load-more').attr('data-page', page + 1);\n                }\n\n            },\n            complete: function () {\n                loading = false;\n                if (pendingCategoryReset) {\n                    pendingCategoryReset = false;\n                    loadProducts(true);\n                }\n            }\n        });\n    }\n\n    loadProducts(true);\n\n    \/* ============================================================\n       CATEGORY FILTER LOGIC WITH ALLE BEHAVIOR\n       ============================================================ *\/\n    $(document).on('click', '.cat-filter', function(){\n\n        let cat = $(this).data('cat');\n        $mobileCategory.val(String(cat));\n\n        \/\/ When clicking ALLE\n        if (cat === 'all') {\n\n            \/\/ Activate ALLE and deactivate all other filters\n            $('.cat-filter').removeClass('active');\n            $(this).addClass('active');\n\n            \/\/ Reset selectedCategories (empty array = show all)\n            selectedCategories = [];\n\n            loadProducts(true);\n            return;\n        }\n\n        \/\/ You clicked a normal category \u2192 deactivate ALLE\n        $('.cat-filter[data-cat=\"all\"]').removeClass('active');\n\n        \/\/ Toggle active state of the clicked category\n        $(this).toggleClass('active');\n\n        \/\/ Rebuild selected categories list\n        selectedCategories = $('.cat-filter.active')\n            .not('[data-cat=\"all\"]')\n            .map(function(){ return $(this).data('cat'); })\n            .get();\n\n        \/\/ If no category selected \u2192 reactivate ALLE\n        if (selectedCategories.length === 0) {\n            $('.cat-filter[data-cat=\"all\"]').addClass('active');\n        }\n\n        \/\/ Beim Wechsel von Desktop auf Smartphone eine eindeutige Auswahl zeigen.\n        if (selectedCategories.length > 1) {\n            if (!$mobileCategory.find('option[value=\"__multiple\"]').length) {\n                $mobileCategory.append(new Option('Mehrere Kategorien', '__multiple'));\n                $mobileCategory.find('option[value=\"__multiple\"]').prop('disabled', true);\n            }\n            $mobileCategory.val('__multiple');\n        } else {\n            $mobileCategory.val(selectedCategories.length ? String(selectedCategories[0]) : 'all');\n        }\n        loadProducts(true);\n    });\n\n    \/* ============================================================\n       LOAD MORE\n       ============================================================ *\/\n    $('#load-more').on('click', function(){\n        loadProducts(false);\n    });\n\n    \/* ============================================================\n       GRAM PRICE UPDATE\n       ============================================================ *\/\n    $(document).on('click', '.gram-option', function(){\n\n        let gramPrice = Number($(this).data('price'));\n        let card = $(this).closest('.shop-product-card');\n        let basePrice = Number(card.find('.price').data('base'));\n\n        let finalPrice = gramPrice;\n        \n        function formatEuro(num) {\n        return num.toFixed(2)\n                  .replace('.', ',')\n                  .replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, '.');\n        }\n\n        card.find('.gram-option').removeClass('active');\n        $(this).addClass('active');\n\n        card.find('.price').text(\"\u20ac \" + formatEuro(finalPrice));\n    });\n\n});\n<\/script>\n\n\n<\/div>\n\t\t\t\t\t\t<\/div>\n\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":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-259","page","type-page","status-publish","hentry"],"aioseo_notices":[],"acf":[],"_links":{"self":[{"href":"https:\/\/dimosa.eu\/it\/wp-json\/wp\/v2\/pages\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dimosa.eu\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dimosa.eu\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dimosa.eu\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dimosa.eu\/it\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":19,"href":"https:\/\/dimosa.eu\/it\/wp-json\/wp\/v2\/pages\/259\/revisions"}],"predecessor-version":[{"id":1197,"href":"https:\/\/dimosa.eu\/it\/wp-json\/wp\/v2\/pages\/259\/revisions\/1197"}],"wp:attachment":[{"href":"https:\/\/dimosa.eu\/it\/wp-json\/wp\/v2\/media?parent=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}