{"id":298,"date":"2025-09-05T02:52:19","date_gmt":"2025-09-05T00:52:19","guid":{"rendered":"https:\/\/sklep.tompolkepno.pl\/?page_id=298"},"modified":"2025-11-12T02:50:38","modified_gmt":"2025-11-12T01:50:38","slug":"porownaj-materace","status":"publish","type":"page","link":"https:\/\/materac.online\/index.php\/porownaj-materace\/","title":{"rendered":"Por\u00f3wnaj materace!"},"content":{"rendered":"  <div class=\"gallery-container\" id=\"kreator-materacy\" style=\"position:relative\">\n    <!-- Pasek 1: wyszukiwarka + tagi -->\n    <div class=\"gallery-controls\" id=\"mc-bar-1\" style=\"position:sticky;top:10px;z-index:5\">\n      <div style=\"display:flex;gap:.75rem;flex:1 1 360px;min-width:280px\">\n        <input id=\"mc-search\" type=\"search\" placeholder=\"Szukaj (np. visco, kokos, masuj\u0105cy, kids)\"\n               style=\"flex:1;padding:12px 16px;border:2px solid #cce5ff;border-radius:12px;background:#f0f8ff;font-weight:600;color:#1e5799;\">\n        <button id=\"mc-clear\" class=\"filter-btn\" type=\"button\">\u2715 Wyczy\u015b\u0107<\/button>\n      <\/div>\n      <div class=\"gallery-filters\" id=\"mc-tags\" style=\"flex:2 1 500px;min-width:280px;\"><\/div>\n    <\/div>\n\n    <!-- Pasek 2: kroki kreatora -->\n    <div class=\"gallery-controls\" id=\"mc-bar-2\">\n      <div class=\"gallery-filters\" style=\"flex-wrap:wrap\">\n        <select id=\"mc-size\"   class=\"sort-select\"><option value=\"\">Rozmiar \u25a6<\/option><\/select>\n        <select id=\"mc-height\" class=\"sort-select\"><option value=\"\">Grubo\u015b\u0107 (cm)<\/option><\/select>\n        <select id=\"mc-firm\"   class=\"sort-select\"><option value=\"\">Twardo\u015b\u0107<\/option><\/select>\n        <select id=\"mc-tech\"   class=\"sort-select\"><option value=\"\">Technologia<\/option><\/select>\n        <select id=\"mc-cover\"  class=\"sort-select\"><option value=\"\">Pokrowiec<\/option><\/select>\n\n        <label class=\"filter-btn\"><input type=\"checkbox\" id=\"mc-coconut\"  style=\"margin-right:.5rem\">mata kokosowa<\/label>\n        <label class=\"filter-btn\"><input type=\"checkbox\" id=\"mc-visco\"    style=\"margin-right:.5rem\">pianka visco<\/label>\n        <label class=\"filter-btn\"><input type=\"checkbox\" id=\"mc-massage\"  style=\"margin-right:.5rem\">profil \u201emasuj\u0105cy\u201d<\/label>\n        <label class=\"filter-btn\"><input type=\"checkbox\" id=\"mc-kids\"     style=\"margin-right:.5rem\">dla dzieci<\/label>\n        <label class=\"filter-btn\"><input type=\"checkbox\" id=\"mc-anti\"     style=\"margin-right:.5rem\">antyalergiczny<\/label>\n\n        <button id=\"mc-submit\" class=\"filter-btn active\" type=\"button\">\u27a4 Poka\u017c dopasowania<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Pasek 3: status + sort -->\n    <div class=\"gallery-controls\" id=\"mc-bar-3\" style=\"gap:1rem\">\n      <div style=\"color:#555\">Wyniki: <strong id=\"mc-count\">0<\/strong><\/div>\n      <div id=\"mc-hint\" style=\"font-size:.95rem;color:#555;flex:1\">Uzupe\u0142nij parametry (Rozmiar, Grubo\u015b\u0107, Twardo\u015b\u0107, Technologia), potem kliknij \u201ePoka\u017c dopasowania\u201d.<\/div>\n      <div class=\"sort-container\">\n        <span class=\"sort-label\">Sortuj:<\/span>\n        <select id=\"mc-sort\" class=\"sort-select\">\n          <option value=\"relevance\">Dopasowanie<\/option>\n          <option value=\"price-asc\">Cena: rosn\u0105co<\/option>\n          <option value=\"price-desc\">Cena: malej\u0105co<\/option>\n          <option value=\"name-asc\">Nazwa A-Z<\/option>\n          <option value=\"name-desc\">Nazwa Z-A<\/option>\n        <\/select>\n      <\/div>\n    <\/div>\n\n    <!-- Strza\u0142ki przewijania -->\n    <button id=\"mc-prev\" class=\"page-btn\"   title=\"Wstecz\"  style=\"position:absolute;left:-10px;top:50%;transform:translateY(-50%);z-index:4\">\u2039<\/button>\n    <button id=\"mc-next\" class=\"page-btn\"   title=\"Dalej\"   style=\"position:absolute;right:-10px;top:50%;transform:translateY(-50%);z-index:4\">\u203a<\/button>\n\n    <!-- Wyniki: poziomy tor -->\n    <div id=\"mc-results\" style=\"display:flex;gap:1.25rem;overflow-x:auto;padding:0.5rem 0;scroll-snap-type:x mandatory;\"><\/div>\n  <\/div>\n\n  <style>\n    #mc-results .product-card { min-width:320px; scroll-snap-align:start; }\n    #mc-results .skeleton {\n      background: #fff; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,100,.08);\n      min-width:320px; height:420px; position:relative;\n    }\n    #mc-results .skeleton::after{\n      content:\"\"; position:absolute; inset:0;\n      background: linear-gradient(90deg, rgba(200,220,255,0), rgba(200,220,255,.45), rgba(200,220,255,0));\n      animation: mcShine 1.4s infinite;\n    }\n    @keyframes mcShine { from{ transform: translateX(-100%);} to{ transform: translateX(100%);} }\n  <\/style>\n\n  <script>\n  (function() {\n    const $  = s => document.querySelector(s);\n    const $$ = s => Array.from(document.querySelectorAll(s));\n    const results = $('#mc-results');\n\n    const filled = () =>\n      $('#mc-size').value && $('#mc-height').value && $('#mc-firm').value && $('#mc-tech').value;\n\n    \/\/ Strza\u0142ki przewijania\n    const scrollBy = amt => results.scrollBy({left: amt, behavior:'smooth'});\n    $('#mc-prev').onclick = () => scrollBy(-600);\n    $('#mc-next').onclick = () => scrollBy( 600);\n\n    \/\/ Szkielety\n    function showSkeletons(n=6){\n      results.innerHTML = '';\n      for(let i=0;i<n;i++){\n        const s = document.createElement('div'); s.className='skeleton';\n        results.appendChild(s);\n      }\n    }\n\n    \/\/ Wczytaj TAGI WordPress (post_tag)\n    fetch('https:\/\/materac.online\/wp-json\/wp\/v2\/tags?per_page=50&#038;_fields=name,slug,count&#038;orderby=count&#038;order=desc')\n      .then(r=>r.json()).then(tags=>{\n        const cont = $('#mc-tags');\n        (tags||[]).slice(0,14).forEach(t=>{\n          const b = document.createElement('button');\n          b.className = 'filter-btn'; b.dataset.slug = t.slug; b.textContent = '#'+t.name;\n          b.onclick = ()=> b.classList.toggle('active');\n          cont.appendChild(b);\n        });\n      });\n\n    \/\/ Wczytaj dost\u0119pne zakresy z back-endu (tylko to, co faktycznie masz w ofercie)\n    fetch('https:\/\/materac.online\/wp-json\/mattress\/v1\/facets')\n      .then(r=>r.json()).then(f=>{\n        fillSelect('#mc-size',   f.sizes);\n        fillSelect('#mc-height', f.heights);\n        fillSelect('#mc-firm',   f.firms);\n        fillSelect('#mc-tech',   f.techs);\n        fillSelect('#mc-cover',  f.covers);\n      });\n\n    function fillSelect(sel, arr){\n      const el = $(sel); if(!el || !Array.isArray(arr)) return;\n      arr.forEach(v=>{\n        const o = document.createElement('option'); o.value=v; o.textContent=v;\n        el.appendChild(o);\n      });\n    }\n\n    \/\/ Wyczy\u015b\u0107\n    $('#mc-clear').onclick = ()=>{\n      $('#mc-search').value='';\n      $$('#mc-tags .filter-btn.active').forEach(b=>b.classList.remove('active'));\n    };\n\n    \/\/ Submit\n    $('#mc-submit').onclick = run;\n    $('#mc-sort').onchange = run;\n    $('#mc-search').onkeydown = (e)=>{ if(e.key==='Enter') run(); };\n\n    function run(){\n      if(!filled()){\n        $('#mc-hint').textContent='Uzupe\u0142nij parametry: Rozmiar, Grubo\u015b\u0107, Twardo\u015b\u0107, Technologia.';\n        return;\n      }\n      $('#mc-hint').textContent='Szukam dopasowa\u0144\u2026';\n      showSkeletons(6);\n\n      const tags = $$('#mc-tags .filter-btn.active').map(b=>b.dataset.slug);\n      const payload = {\n        s: $('#mc-search').value.trim(),\n        size: $('#mc-size').value,\n        height: $('#mc-height').value,\n        firm: $('#mc-firm').value,\n        tech: $('#mc-tech').value,\n        coconut: $('#mc-coconut').checked ? 1 : 0,\n        visco:   $('#mc-visco').checked   ? 1 : 0,\n        massage: $('#mc-massage').checked ? 1 : 0,\n        kids:    $('#mc-kids').checked    ? 1 : 0,\n        anti:    $('#mc-anti').checked    ? 1 : 0,\n        cover: $('#mc-cover').value,\n        tags: tags,\n        sort: $('#mc-sort').value\n      };\n\n      fetch('https:\/\/materac.online\/wp-json\/mattress\/v1\/find', {\n        method:'POST', headers:{'Content-Type':'application\/json'}, body: JSON.stringify(payload)\n      }).then(r=>r.json()).then(data=>{\n        renderItems(data.items||[]);\n        $('#mc-count').textContent = (data.items||[]).length;\n        $('#mc-hint').textContent  = (data.items||[]).length ? '' : 'Brak dopasowa\u0144 \u2013 zmie\u0144 ustawienia lub wyczy\u015b\u0107.';\n      }).catch(()=>{\n        results.innerHTML=''; $('#mc-hint').textContent='B\u0142\u0105d wyszukiwania.';\n      });\n    }\n\n    function renderItems(items){\n      results.innerHTML='';\n      items.forEach(p=>{\n        const card = document.createElement('div');\n        card.className = 'product-card';\n        card.style.minWidth = '320px';\n        card.innerHTML = `\n          ${p.on_sale?'<div class=\"product-badge\">Promocja<\/div>':''}\n          <div class=\"product-image\">${p.image?`<img decoding=\"async\" src=\"${p.image}\" alt=\"${p.title}\" style=\"max-height:100%;max-width:100%\">`:'<span>\u25a6<\/span>'}<\/div>\n          <div class=\"product-info\">\n            <span class=\"product-category\">${p.category||''}<\/span>\n            <h3 class=\"product-title\">${p.title}<\/h3>\n            <p class=\"product-desc\">${p.excerpt||''}<\/p>\n            <div class=\"product-price\">${p.price_html||''}<\/div>\n            <div class=\"product-actions\">\n              <form class=\"mc-cart\" action=\"${p.add_to_cart_url}\" method=\"post\">\n                <button class=\"add-to-cart\" type=\"submit\"><i class=\"fas fa-shopping-cart\"><\/i> Do koszyka<\/button>\n                <input type=\"hidden\" name=\"add-to-cart\" value=\"${p.id}\">\n              <\/form>\n              <button class=\"wishlist\"><i class=\"far fa-heart\"><\/i><\/button>\n            <\/div>\n          <\/div>`;\n        results.appendChild(card);\n      });\n\n      \/\/ AJAX \"Do koszyka\" (bez prze\u0142adowania)\n      $$('.mc-cart').forEach(form=>{\n        form.addEventListener('submit', function(e){\n          e.preventDefault();\n          const btn = this.querySelector('.add-to-cart');\n          const orig = btn.innerHTML;\n          btn.innerHTML='<i class=\"fas fa-check\"><\/i> Dodano!'; btn.style.background='linear-gradient(90deg,#4CAF50,#2E7D32)';\n          fetch(this.action, {method:'GET', credentials:'same-origin'}).finally(()=>{\n            setTimeout(()=>{ btn.innerHTML=orig; btn.style.background='linear-gradient(90deg,#2989d8,#1e5799)'; }, 1300);\n          });\n        });\n      });\n\n      \/\/ Wishlist animacja\n      $$('.wishlist').forEach(button=>{\n        button.onclick = function(){\n          if (this.innerHTML.includes('fas')) {\n            this.innerHTML = '<i class=\"far fa-heart\"><\/i>';\n            this.style.background = '#f0f8ff'; this.style.color = '#2989d8'; this.style.border = '1px solid #2989d8';\n          } else {\n            this.innerHTML = '<i class=\"fas fa-heart\"><\/i>';\n            this.style.background = '#ff4d89'; this.style.color = '#fff'; this.style.border = '1px solid #ff4d89';\n          }\n        };\n      });\n    }\n  })();\n  <\/script>\n  \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/   porownywarka-template.php","meta":{"footnotes":""},"class_list":["post-298","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/materac.online\/index.php\/wp-json\/wp\/v2\/pages\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/materac.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/materac.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/materac.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/materac.online\/index.php\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":2,"href":"https:\/\/materac.online\/index.php\/wp-json\/wp\/v2\/pages\/298\/revisions"}],"predecessor-version":[{"id":565,"href":"https:\/\/materac.online\/index.php\/wp-json\/wp\/v2\/pages\/298\/revisions\/565"}],"wp:attachment":[{"href":"https:\/\/materac.online\/index.php\/wp-json\/wp\/v2\/media?parent=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}