{"id":114,"date":"2026-05-17T09:07:11","date_gmt":"2026-05-17T07:07:11","guid":{"rendered":"https:\/\/www.wachauer-marillenbauer.at\/staging\/?page_id=114"},"modified":"2026-05-17T16:08:30","modified_gmt":"2026-05-17T14:08:30","slug":"produkte2","status":"publish","type":"page","link":"https:\/\/www.wachauer-marillenbauer.at\/staging\/?page_id=114","title":{"rendered":"Produkte"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"114\" class=\"elementor elementor-114\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-11a7c1a e-flex e-con-boxed e-con e-parent\" data-id=\"11a7c1a\" 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-7522ef8 elementor-widget elementor-widget-html\" data-id=\"7522ef8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  :root {\r\n    --primary-color: #2c3e50;\r\n    --accent-color: #27ae60;\r\n    --accent-hover: #219653;\r\n    --bg-color: #f8f9fa;\r\n    --card-bg: #ffffff;\r\n    --text-main: #333333;\r\n    --text-muted: #666666;\r\n    --border-radius: 12px;\r\n    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);\r\n    --shadow-md: 0 8px 15px rgba(0, 0, 0, 0.1);\r\n    --transition: all 0.3s ease;\r\n  }\r\n\r\n  #wc-shop-wrapper {\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    color: var(--text-main);\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    gap: 20px;\r\n    position: relative;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    padding: 20px;\r\n  }\r\n\r\n  #wc-shop-wrapper * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* Product Grid *\/\r\n  .wc-product-grid {\r\n    flex: 1;\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n    gap: 24px;\r\n    align-content: start;\r\n  }\r\n\r\n  .wc-product-card {\r\n    background: var(--card-bg);\r\n    border-radius: var(--border-radius);\r\n    padding: 16px;\r\n    box-shadow: var(--shadow-sm);\r\n    transition: var(--transition);\r\n    display: flex;\r\n    flex-direction: column;\r\n    height: 100%;\r\n  }\r\n\r\n  .wc-product-card:hover {\r\n    box-shadow: var(--shadow-md);\r\n    transform: translateY(-5px);\r\n  }\r\n\r\n  .wc-product-image-wrapper {\r\n    width: 100%;\r\n    aspect-ratio: 1 \/ 1;\r\n    overflow: hidden;\r\n    border-radius: 8px;\r\n    margin-bottom: 16px;\r\n    background: #f1f1f1;\r\n  }\r\n\r\n  .wc-product-image-wrapper img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    transition: var(--transition);\r\n  }\r\n\r\n  .wc-product-card:hover .wc-product-image-wrapper img {\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  .wc-product-title {\r\n    font-size: 1.1rem;\r\n    font-weight: 600;\r\n    margin: 0 0 8px 0;\r\n    color: var(--primary-color);\r\n  }\r\n\r\n  .wc-product-desc {\r\n    font-size: 0.9rem;\r\n    color: var(--text-muted);\r\n    margin: 0 0 16px 0;\r\n    flex-grow: 1;\r\n  }\r\n\r\n  .wc-product-price {\r\n    font-size: 1.2rem;\r\n    font-weight: 700;\r\n    color: var(--primary-color);\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .wc-product-actions {\r\n    display: flex;\r\n    gap: 10px;\r\n    align-items: center;\r\n  }\r\n\r\n  .wc-qty-input {\r\n    width: 60px;\r\n    padding: 8px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 6px;\r\n    text-align: center;\r\n    font-size: 1rem;\r\n  }\r\n\r\n  .wc-add-btn {\r\n    flex: 1;\r\n    background: var(--accent-color);\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 15px;\r\n    border-radius: 6px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: var(--transition);\r\n  }\r\n\r\n  .wc-add-btn:hover {\r\n    background: var(--accent-hover);\r\n  }\r\n\r\n  \/* Side Cart *\/\r\n  .wc-side-cart-overlay {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0,0,0,0.5);\r\n    z-index: 9998;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: var(--transition);\r\n  }\r\n  .wc-side-cart-overlay.active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n\r\n  .wc-side-cart {\r\n    position: fixed;\r\n    top: 0;\r\n    right: -400px;\r\n    width: 100%;\r\n    max-width: 400px;\r\n    height: 100vh;\r\n    background: var(--card-bg);\r\n    box-shadow: -5px 0 15px rgba(0,0,0,0.1);\r\n    z-index: 9999;\r\n    display: flex;\r\n    flex-direction: column;\r\n    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);\r\n  }\r\n\r\n  .wc-side-cart.active {\r\n    right: 0;\r\n  }\r\n\r\n  .wc-cart-header {\r\n    padding: 20px;\r\n    border-bottom: 1px solid #eee;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n  }\r\n\r\n  .wc-cart-header h3 {\r\n    margin: 0;\r\n    font-size: 1.2rem;\r\n    color: var(--primary-color);\r\n  }\r\n\r\n  .wc-close-cart {\r\n    background: none;\r\n    border: none;\r\n    font-size: 1.5rem;\r\n    cursor: pointer;\r\n    color: var(--text-muted);\r\n  }\r\n\r\n  .wc-cart-items {\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: 20px;\r\n  }\r\n\r\n  .wc-cart-item {\r\n    display: flex;\r\n    gap: 15px;\r\n    margin-bottom: 20px;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid #f1f1f1;\r\n  }\r\n\r\n  .wc-cart-item-img {\r\n    width: 70px;\r\n    height: 70px;\r\n    border-radius: 8px;\r\n    object-fit: cover;\r\n  }\r\n\r\n  .wc-cart-item-details {\r\n    flex: 1;\r\n  }\r\n\r\n  .wc-cart-item-title {\r\n    font-weight: 600;\r\n    font-size: 0.95rem;\r\n    margin: 0 0 5px 0;\r\n  }\r\n\r\n  .wc-cart-item-price {\r\n    color: var(--text-muted);\r\n    font-size: 0.9rem;\r\n    margin: 0 0 8px 0;\r\n  }\r\n\r\n  .wc-cart-item-actions {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n  }\r\n\r\n  .wc-cart-item-qty {\r\n    font-size: 0.9rem;\r\n    background: #f8f9fa;\r\n    padding: 2px 8px;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .wc-remove-item {\r\n    color: #e74c3c;\r\n    background: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    font-size: 0.85rem;\r\n    padding: 0;\r\n  }\r\n\r\n  .wc-cart-footer {\r\n    padding: 20px;\r\n    border-top: 1px solid #eee;\r\n    background: #fafafa;\r\n  }\r\n\r\n  .wc-cart-total {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    font-size: 1.2rem;\r\n    font-weight: 700;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .wc-checkout-btn {\r\n    display: block;\r\n    width: 100%;\r\n    text-align: center;\r\n    background: var(--primary-color);\r\n    color: white;\r\n    padding: 15px;\r\n    border-radius: 8px;\r\n    text-decoration: none;\r\n    font-weight: 600;\r\n    transition: var(--transition);\r\n  }\r\n\r\n  .wc-checkout-btn:hover {\r\n    background: #1a252f;\r\n  }\r\n  \r\n  .wc-empty-cart {\r\n    text-align: center;\r\n    color: var(--text-muted);\r\n    margin-top: 50px;\r\n  }\r\n\r\n  .wc-loading {\r\n    text-align: center;\r\n    padding: 50px;\r\n    grid-column: 1 \/ -1;\r\n    font-size: 1.2rem;\r\n    color: var(--text-muted);\r\n  }\r\n\r\n  \/* Floating Cart Button *\/\r\n  .wc-floating-cart-btn {\r\n    position: fixed;\r\n    bottom: 30px;\r\n    right: 30px;\r\n    background: var(--primary-color);\r\n    color: white;\r\n    border: none;\r\n    border-radius: 50px;\r\n    padding: 15px 25px;\r\n    font-size: 1.2rem;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n    box-shadow: var(--shadow-md);\r\n    z-index: 9997;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    transition: var(--transition);\r\n  }\r\n\r\n  .wc-floating-cart-btn:hover {\r\n    transform: scale(1.05);\r\n    background: #1a252f;\r\n  }\r\n\r\n  .wc-floating-cart-badge {\r\n    background: var(--accent-color);\r\n    color: white;\r\n    border-radius: 50%;\r\n    padding: 2px 8px;\r\n    font-size: 0.9rem;\r\n    min-width: 24px;\r\n    text-align: center;\r\n  }\r\n\r\n  \/* Responsive Grid *\/\r\n  @media (min-width: 1024px) {\r\n    .wc-product-grid {\r\n      grid-template-columns: repeat(3, 1fr);\r\n    }\r\n  }\r\n  @media (max-width: 768px) {\r\n    .wc-product-grid {\r\n      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"wc-shop-wrapper\">\r\n  <!-- Products Grid -->\r\n  <div class=\"wc-product-grid\" id=\"wc-product-grid\">\r\n    <div class=\"wc-loading\">Produkte werden geladen...<\/div>\r\n  <\/div>\r\n\r\n  <!-- Side Cart Overlay -->\r\n  <div class=\"wc-side-cart-overlay\" id=\"wc-side-cart-overlay\"><\/div>\r\n\r\n  <!-- Side Cart -->\r\n  <div class=\"wc-side-cart\" id=\"wc-side-cart\">\r\n    <div class=\"wc-cart-header\">\r\n      <h3>Dein Warenkorb<\/h3>\r\n      <button class=\"wc-close-cart\" id=\"wc-close-cart\">&times;<\/button>\r\n    <\/div>\r\n    <div class=\"wc-cart-items\" id=\"wc-cart-items\">\r\n      <!-- Items inject here -->\r\n    <\/div>\r\n    <div class=\"wc-cart-footer\">\r\n      <div class=\"wc-cart-total\">\r\n        <span>Summe:<\/span>\r\n        <span id=\"wc-cart-total-price\">0,00 \u20ac<\/span>\r\n      <\/div>\r\n      <a href=\"?page_id=96\" class=\"wc-checkout-btn\">Zur Kassa<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Floating Cart Button -->\r\n  <button id=\"wc-floating-cart-btn\" class=\"wc-floating-cart-btn\">\r\n    \ud83d\uded2 Warenkorb <span id=\"wc-floating-cart-badge\" class=\"wc-floating-cart-badge\">0<\/span>\r\n  <\/button>\r\n<\/div>\r\n\r\n<script>\r\n  (function() {\r\n    \/\/ Produkte hier h\u00e4ndisch eintragen\r\n    let products = [\r\n      { \r\n        id: 1, \r\n        name: \"Wachauer Marillen\", \r\n        short_description: \"Frisch gepfl\u00fcckte Marillen aus der Wachau. Perfekt f\u00fcr Marmelade.\", \r\n        price: \"1200\", \/\/ Preis in Cent (1200 = 12,00 \u20ac)\r\n        img: \"https:\/\/via.placeholder.com\/400x400?text=Marillen\", \r\n        isFrischobst: true \r\n      },\r\n      { \r\n        id: 2, \r\n        name: \"Marillenmarmelade\", \r\n        short_description: \"Hausgemachte Marmelade nach Omas Rezept.\", \r\n        price: \"650\", \r\n        img: \"https:\/\/via.placeholder.com\/400x400?text=Marmelade\", \r\n        isFrischobst: false \r\n      },\r\n      { \r\n        id: 3, \r\n        name: \"Marillennektar\", \r\n        short_description: \"100% Fruchtgehalt, ohne Zuckerzusatz.\", \r\n        price: \"490\", \r\n        img: \"https:\/\/via.placeholder.com\/400x400?text=Nektar\", \r\n        isFrischobst: false \r\n      }\r\n    ];\r\n    let cart = JSON.parse(localStorage.getItem('custom_shop_cart')) || [];\r\n\r\n    const gridEl = document.getElementById('wc-product-grid');\r\n    const cartEl = document.getElementById('wc-side-cart');\r\n    const overlayEl = document.getElementById('wc-side-cart-overlay');\r\n    const cartItemsEl = document.getElementById('wc-cart-items');\r\n    const cartTotalEl = document.getElementById('wc-cart-total-price');\r\n    const closeCartBtn = document.getElementById('wc-close-cart');\r\n    const floatingCartBtn = document.getElementById('wc-floating-cart-btn');\r\n    const floatingCartBadge = document.getElementById('wc-floating-cart-badge');\r\n\r\n    \/\/ Toggle Cart\r\n    function toggleCart(show) {\r\n      if (show) {\r\n        cartEl.classList.add('active');\r\n        overlayEl.classList.add('active');\r\n      } else {\r\n        cartEl.classList.remove('active');\r\n        overlayEl.classList.remove('active');\r\n      }\r\n    }\r\n\r\n    closeCartBtn.addEventListener('click', () => toggleCart(false));\r\n    overlayEl.addEventListener('click', () => toggleCart(false));\r\n    floatingCartBtn.addEventListener('click', () => toggleCart(true));\r\n\r\n    \/\/ Format Price\r\n    function formatPrice(priceValue) {\r\n      return (parseInt(priceValue) \/ 100).toLocaleString('de-AT', { style: 'currency', currency: 'EUR' });\r\n    }\r\n\r\n    \/\/ Render Products\r\n    function renderProducts() {\r\n      gridEl.innerHTML = '';\r\n      products.forEach(p => {\r\n        const price = p.price;\r\n        const imgUrl = p.img;\r\n        const desc = p.short_description || '';\r\n        const isFrischobst = p.isFrischobst;\r\n        \r\n        const card = document.createElement('div');\r\n        card.className = 'wc-product-card';\r\n        card.innerHTML = `\r\n          <div class=\"wc-product-image-wrapper\">\r\n            <img decoding=\"async\" src=\"${imgUrl}\" alt=\"${p.name}\" loading=\"lazy\">\r\n          <\/div>\r\n          <h3 class=\"wc-product-title\">${p.name}<\/h3>\r\n          <div class=\"wc-product-desc\">${desc}<\/div>\r\n          <div class=\"wc-product-price\">${formatPrice(price)}<\/div>\r\n          <div class=\"wc-product-actions\">\r\n            <input type=\"number\" min=\"1\" value=\"1\" class=\"wc-qty-input\" id=\"qty-${p.id}\">\r\n            <button class=\"wc-add-btn\" data-id=\"${p.id}\" data-name=\"${p.name}\" data-price=\"${price}\" data-img=\"${imgUrl}\" data-frischobst=\"${isFrischobst}\">In den Warenkorb<\/button>\r\n          <\/div>\r\n        `;\r\n        gridEl.appendChild(card);\r\n      });\r\n\r\n      \/\/ Bind Add to Cart Buttons\r\n      document.querySelectorAll('.wc-add-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n          const id = e.target.getAttribute('data-id');\r\n          const name = e.target.getAttribute('data-name');\r\n          const price = e.target.getAttribute('data-price');\r\n          const img = e.target.getAttribute('data-img');\r\n          const frischobst = e.target.getAttribute('data-frischobst') === 'true';\r\n          const qty = parseInt(document.getElementById(`qty-${id}`).value);\r\n          addToCart(id, name, price, img, qty, frischobst);\r\n        });\r\n      });\r\n    }\r\n\r\n    \/\/ Add to Cart\r\n    function addToCart(id, name, price, img, qty, frischobst) {\r\n      const existing = cart.find(item => item.id == id);\r\n      if (existing) {\r\n        existing.qty += qty;\r\n      } else {\r\n        cart.push({ id, name, price, img, qty, frischobst });\r\n      }\r\n      saveCart();\r\n      renderCart();\r\n      toggleCart(true);\r\n    }\r\n\r\n    \/\/ Remove from Cart\r\n    window.removeFromCart = function(id) {\r\n      cart = cart.filter(item => item.id != id);\r\n      saveCart();\r\n      renderCart();\r\n    }\r\n\r\n    \/\/ Save and Render Cart\r\n    function saveCart() {\r\n      localStorage.setItem('custom_shop_cart', JSON.stringify(cart));\r\n    }\r\n\r\n    function renderCart() {\r\n      cartItemsEl.innerHTML = '';\r\n      let total = 0;\r\n      let totalItems = 0;\r\n\r\n      if (cart.length === 0) {\r\n        cartItemsEl.innerHTML = '<div class=\"wc-empty-cart\">Dein Warenkorb ist leer.<\/div>';\r\n        cartTotalEl.innerText = '0,00 \u20ac';\r\n        floatingCartBadge.innerText = '0';\r\n        return;\r\n      }\r\n\r\n      cart.forEach(item => {\r\n        const itemTotal = item.qty * parseInt(item.price);\r\n        total += itemTotal;\r\n        totalItems += item.qty;\r\n\r\n        cartItemsEl.innerHTML += `\r\n          <div class=\"wc-cart-item\">\r\n            <img decoding=\"async\" src=\"${item.img}\" class=\"wc-cart-item-img\" alt=\"${item.name}\">\r\n            <div class=\"wc-cart-item-details\">\r\n              <h4 class=\"wc-cart-item-title\">${item.name}<\/h4>\r\n              <p class=\"wc-cart-item-price\">${formatPrice(item.price)} x ${item.qty}<\/p>\r\n              <div class=\"wc-cart-item-actions\">\r\n                <span class=\"wc-cart-item-qty\">Gesamt: ${formatPrice(itemTotal)}<\/span>\r\n                <button class=\"wc-remove-item\" onclick=\"removeFromCart('${item.id}')\">L\u00f6schen<\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        `;\r\n      });\r\n\r\n      cartTotalEl.innerText = formatPrice(total);\r\n      floatingCartBadge.innerText = totalItems;\r\n    }\r\n\r\n    \/\/ Init\r\n    renderProducts();\r\n    renderCart();\r\n  })();\r\n<\/script>\r\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":"<p>Produkte werden geladen&#8230; Dein Warenkorb &times; Summe: 0,00 \u20ac Zur Kassa \ud83d\uded2 Warenkorb 0<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-114","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.wachauer-marillenbauer.at\/staging\/index.php?rest_route=\/wp\/v2\/pages\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wachauer-marillenbauer.at\/staging\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.wachauer-marillenbauer.at\/staging\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.wachauer-marillenbauer.at\/staging\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wachauer-marillenbauer.at\/staging\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=114"}],"version-history":[{"count":20,"href":"https:\/\/www.wachauer-marillenbauer.at\/staging\/index.php?rest_route=\/wp\/v2\/pages\/114\/revisions"}],"predecessor-version":[{"id":223,"href":"https:\/\/www.wachauer-marillenbauer.at\/staging\/index.php?rest_route=\/wp\/v2\/pages\/114\/revisions\/223"}],"wp:attachment":[{"href":"https:\/\/www.wachauer-marillenbauer.at\/staging\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}