{"id":2245,"date":"2026-02-02T11:13:42","date_gmt":"2026-02-02T14:13:42","guid":{"rendered":"https:\/\/clientehostix.com.br\/dioxide\/?page_id=2245"},"modified":"2026-02-26T16:29:32","modified_gmt":"2026-02-26T19:29:32","slug":"loja-2","status":"publish","type":"page","link":"https:\/\/clientehostix.com.br\/dioxide\/loja-2\/","title":{"rendered":"Loja 2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2245\" class=\"elementor elementor-2245\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b1ee059 e-flex e-con-boxed e-con e-parent\" data-id=\"b1ee059\" 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-e1c12dd elementor-widget elementor-widget-heading\" data-id=\"e1c12dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Produtos<\/h2>\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<div class=\"elementor-element elementor-element-59b0b27 e-flex e-con-boxed e-con e-parent\" data-id=\"59b0b27\" 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-e4201ba elementor-widget elementor-widget-html\" data-id=\"e4201ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"custom-product-grid\" class=\"product-grid\"><\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const container = document.getElementById('custom-product-grid');\r\n    \r\n    const apiUrl = 'https:\/\/clientehostix.com.br\/dioxide\/wp-json\/wc\/store\/v1\/products';\r\n    const baseUrl = 'https:\/\/clientehostix.com.br\/dioxide';\r\n\r\n    async function fetchProducts() {\r\n        try {\r\n            const response = await fetch(apiUrl);\r\n            const products = await response.json();\r\n            renderProducts(products);\r\n        } catch (error) {\r\n            console.error('Erro ao buscar produtos:', error);\r\n            container.innerHTML = '<p>Erro ao carregar produtos.<\/p>';\r\n        }\r\n    }\r\n\r\n    function renderProducts(products) {\r\n        container.innerHTML = '';\r\n\r\n        \/\/ 1. LISTA VIP: A ordem exata que voc\u00ea pediu\r\n        const ordemDesejada = [\r\n            \"ARCTIC LAVA ROUPAS 1L\",\r\n            \"ARCTIC LAVA ROUPAS 3L\",\r\n            \"WTR 1L\",\r\n            \"WTR 5L\",\r\n            \"WTR 20L\"\r\n        ];\r\n\r\n        \/\/ 2. ORDENA\u00c7\u00c3O: Organiza os produtos da API para seguir a lista VIP\r\n        products.sort((a, b) => {\r\n            const nomeA = (a.name || '').trim().toUpperCase();\r\n            const nomeB = (b.name || '').trim().toUpperCase();\r\n            \r\n            let indexA = ordemDesejada.indexOf(nomeA);\r\n            let indexB = ordemDesejada.indexOf(nomeB);\r\n            \r\n            if (indexA === -1) indexA = 999;\r\n            if (indexB === -1) indexB = 999;\r\n            \r\n            return indexA - indexB;\r\n        });\r\n\r\n        \/\/ 3. DESENHA OS PRODUTOS\r\n        products.forEach(product => {\r\n\r\n            const minorUnit = 10 ** (product.prices?.currency_minor_unit ?? 2);\r\n            const toNumberPrice = (raw) => {\r\n                const n = parseFloat(raw);\r\n                return Number.isFinite(n) ? (n \/ minorUnit) : 0;\r\n            };\r\n\r\n            \/\/ Pre\u00e7os do Store API\r\n            const priceCurrent = toNumberPrice(product.prices?.price);          \/\/ pre\u00e7o atual (sale ou normal)\r\n            const priceRegular = toNumberPrice(product.prices?.regular_price); \/\/ pre\u00e7o cheio\r\n            const priceSale = toNumberPrice(product.prices?.sale_price);       \/\/ pre\u00e7o promocional (se existir)\r\n\r\n            const formatBRL = (value) => Number(value).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });\r\n\r\n            \/\/ ==================================================\r\n            \/\/ PIX (mant\u00e9m a matem\u00e1tica fixa atual)\r\n            \/\/ ==================================================\r\n            const descontoPixPerc = 5; \/\/ 5% de desconto fixo\r\n            let valorPix = priceCurrent - (priceCurrent * (descontoPixPerc \/ 100));\r\n            valorPix = Math.round(valorPix * 100) \/ 100;\r\n\r\n            const textoDescontoPix = descontoPixPerc > 0 \r\n                ? `<small class=\"pix-desconto\">com ${descontoPixPerc}% de desconto<\/small>` \r\n                : '';\r\n\r\n            \/\/ ==================================================\r\n            \/\/ PROMO: \"de X por Y\" quando estiver em promo\u00e7\u00e3o\r\n            \/\/ ==================================================\r\n            const isPromo = (\r\n                product.on_sale === true ||\r\n                (priceRegular > 0 && priceCurrent > 0 && priceCurrent < priceRegular) ||\r\n                (priceSale > 0 && priceRegular > 0 && priceSale < priceRegular)\r\n            );\r\n\r\n            \/\/ Pre\u00e7o \"de\" (regular)\r\n            const precoDe = (priceRegular > 0) ? priceRegular : priceCurrent;\r\n\r\n            \/\/ Pre\u00e7o \"por\" (atual)\r\n            const precoPor = (priceCurrent > 0) ? priceCurrent : ((priceSale > 0) ? priceSale : precoDe);\r\n\r\n            \/\/ HTML do pre\u00e7o (normal vs promo)\r\n            const fullPriceHtml = isPromo\r\n                ? `\r\n                    <div class=\"full-price full-price--promo\">\r\n                        <span class=\"price-from\">de ${formatBRL(precoDe)}<\/span>\r\n                        <span class=\"price-to-label\">por<\/span>\r\n                        <span class=\"price-to\">${formatBRL(precoPor)}<\/span>\r\n                    <\/div>\r\n                  `\r\n                : `\r\n                    <div class=\"full-price full-price--normal\">\r\n                        <span class=\"price-to\">${formatBRL(precoPor)}<\/span>\r\n                    <\/div>\r\n                  `;\r\n\r\n            \/\/ ==================================================\r\n            \/\/ LINKS PERSONALIZADOS PARA AS LANDING PAGES\r\n            \/\/ ==================================================\r\n            let customLink = (product.permalink || '').replace('\/produto\/', '\/');\r\n            customLink = customLink.replace('\/wtr-1l\/', '\/wtr\/');\r\n\r\n            const card = document.createElement('div');\r\n            card.className = 'custom-card';\r\n            card.innerHTML = `\r\n                <a href=\"${customLink}\" class=\"card-link-wrapper\">\r\n                    <div class=\"card-image-wrapper\">\r\n                        <img decoding=\"async\" src=\"${product.images[0]?.src || ''}\" alt=\"${product.name}\">\r\n                    <\/div>\r\n                <\/a>\r\n                \r\n                <div class=\"card-content\">\r\n                    <h3 class=\"card-title\">\r\n                        <a href=\"${customLink}\">${product.name}<\/a>\r\n                    <\/h3>\r\n                    \r\n                    <div class=\"card-pricing\">\r\n                        ${fullPriceHtml}\r\n\r\n                        <div class=\"pix-price\">\r\n                            <span class=\"icon-pix\">\u2756<\/span> <strong>${formatBRL(valorPix)} no Pix<\/strong><br>\r\n                            ${textoDescontoPix}\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"card-actions\">\r\n                        <input type=\"number\" class=\"qty-input\" id=\"qty-${product.id}\" value=\"1\" min=\"1\" step=\"1\">\r\n                        <button class=\"btn-comprar\" onclick=\"addToCart(${product.id}, this, '${baseUrl}')\">COMPRAR<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            `;\r\n            container.appendChild(card);\r\n        });\r\n    }\r\n\r\n    if (container) {\r\n        fetchProducts();\r\n    }\r\n});\r\n\r\nasync function addToCart(productId, buttonElement, baseUrl) {\r\n    const qtyInput = document.getElementById(`qty-${productId}`);\r\n    const quantity = qtyInput ? qtyInput.value : 1;\r\n\r\n    buttonElement.disabled = true;\r\n    buttonElement.style.opacity = '0.7';\r\n\r\n    try {\r\n        const formData = new FormData();\r\n        formData.append('product_id', productId);\r\n        formData.append('quantity', quantity);\r\n\r\n        const response = await fetch(`${baseUrl}\/?wc-ajax=add_to_cart`, {\r\n            method: 'POST',\r\n            body: formData\r\n        });\r\n\r\n        const data = await response.json();\r\n\r\n        if (data.error) {\r\n            alert('Erro ao adicionar ao carrinho.');\r\n        } else {\r\n            if (typeof jQuery !== 'undefined') {\r\n                jQuery(document.body).trigger('wc_fragment_refresh');\r\n                jQuery(document.body).trigger('added_to_cart', [data.fragments, data.cart_hash, jQuery(buttonElement)]);\r\n            }\r\n        }\r\n    } catch (error) {\r\n        console.error('Erro:', error);\r\n    } finally {\r\n        setTimeout(() => {\r\n            buttonElement.disabled = false;\r\n            buttonElement.style.opacity = '1';\r\n        }, 1000);\r\n    }\r\n}\r\n<\/script>\r\n\r\n<style>\r\n.custom-card, .custom-card * {\r\n    box-sizing: border-box !important;\r\n}\r\n\r\n.product-grid {\r\n    display: grid;\r\n    \/* Define exatamente 4 colunas com larguras iguais *\/\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 20px;\r\n    padding: 20px;\r\n    font-family: Arial, sans-serif;\r\n    \/* Centraliza o grid todo na p\u00e1gina *\/\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.custom-card {\r\n    border: 1px solid #eaeaea;\r\n    border-radius: 8px;\r\n    background: #fff;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.03);\r\n    display: flex;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* --- Links --- *\/\r\n.card-link-wrapper {\r\n    text-decoration: none !important;\r\n    display: block;\r\n}\r\n\r\n.card-title a {\r\n    color: inherit !important;\r\n    text-decoration: none !important;\r\n    transition: color 0.2s ease-in-out;\r\n}\r\n\r\n.card-title a:hover {\r\n    color: #1b8a53 !important;\r\n}\r\n\r\n\/* --- Imagem --- *\/\r\n.card-image-wrapper {\r\n    background-color: #f4f4f4;\r\n    padding: 20px;\r\n    height: 220px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.card-image-wrapper img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n    object-fit: contain;\r\n    mix-blend-mode: multiply;\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.card-link-wrapper:hover .card-image-wrapper img {\r\n    transform: scale(1.05);\r\n}\r\n\r\n\/* --- Conte\u00fado --- *\/\r\n.card-content {\r\n    padding: 20px 15px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex-grow: 1;\r\n    text-align: center;\r\n}\r\n\r\n.card-title {\r\n    font-size: 15px !important;\r\n    color: #555 !important;\r\n    font-weight: normal !important;\r\n    margin: 0 0 15px 0 !important;\r\n    line-height: 1.3;\r\n    min-height: 40px;\r\n}\r\n\r\n\/* ===== PRE\u00c7O CHEIO (AGORA GRANDE, BOLD, PRETO) ===== *\/\r\n.full-price {\r\n    margin: 6px 0 10px 0;\r\n    line-height: 1.1;\r\n}\r\n\r\n\/* Normal: s\u00f3 o pre\u00e7o *\/\r\n.full-price--normal .price-to {\r\n    font-size: 20px;\r\n    font-weight: 900;\r\n    color: #111;\r\n}\r\n\r\n\/* Promo: de X por Y *\/\r\n.full-price--promo {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: baseline;\r\n    gap: 6px;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.full-price--promo .price-from {\r\n    font-size: 13px;\r\n    color: #8a8a8a;\r\n    text-decoration: line-through;\r\n    font-weight: 700;\r\n}\r\n\r\n.full-price--promo .price-to-label {\r\n    font-size: 13px;\r\n    color: #666;\r\n    font-weight: 700;\r\n}\r\n\r\n.full-price--promo .price-to {\r\n    font-size: 20px;\r\n    font-weight: 900;\r\n    color: #111;\r\n}\r\n\r\n\/* ===== PIX ===== *\/\r\n.pix-price {\r\n    background: #eafaf1;\r\n    color: #1b8a53;\r\n    padding: 10px 8px;\r\n    border-radius: 4px;\r\n    font-size: 14px;\r\n    margin-top: 5px;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.pix-desconto {\r\n    font-size: 11px;\r\n    color: #1b8a53;\r\n}\r\n\r\n\/* --- A\u00e7\u00f5es --- *\/\r\n.card-actions {\r\n    display: flex !important;\r\n    flex-direction: row !important;\r\n    gap: 10px !important;\r\n    margin-top: auto;\r\n    width: 100% !important;\r\n    height: 40px !important;\r\n    align-items: stretch !important;\r\n}\r\n\r\n.qty-input {\r\n    width: 60px !important;\r\n    max-width: 60px !important;\r\n    min-width: 60px !important;\r\n    height: 100% !important;\r\n    border: 1px solid #ccc !important;\r\n    background-color: #fff !important;\r\n    border-radius: 4px !important;\r\n    text-align: center !important;\r\n    font-size: 14px !important;\r\n    color: #333 !important;\r\n    padding: 0 5px !important;\r\n    margin: 0 !important;\r\n    outline: none !important;\r\n}\r\n\r\n.btn-comprar {\r\n    flex: 1 !important;\r\n    width: auto !important;\r\n    height: 100% !important;\r\n    background: #1b8a53 !important;\r\n    color: #fff !important;\r\n    border: none !important;\r\n    border-radius: 4px !important;\r\n    font-weight: bold !important;\r\n    cursor: pointer !important;\r\n    transition: background 0.3s !important;\r\n    font-size: 11px !important;\r\n    text-transform: uppercase !important;\r\n    padding: 0 5px !important;\r\n    margin: 0 !important;\r\n    display: flex !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    line-height: 1.2 !important;\r\n    white-space: pre-wrap !important;\r\n}\r\n\r\n.btn-comprar:hover {\r\n    background: #146c40 !important;\r\n}\r\n\r\n.btn-comprar:disabled {\r\n    cursor: not-allowed !important;\r\n}\r\n\r\n.custom-card a.added_to_cart {\r\n    display: none !important;\r\n}\r\n\r\n\/* =========================================\r\n   RESPONSIVIDADE \r\n   Garante que o grid n\u00e3o quebre no celular\r\n   ========================================= *\/\r\n@media (max-width: 1024px) {\r\n    .product-grid {\r\n        grid-template-columns: repeat(3, 1fr);\r\n    }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .product-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .product-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n}\r\n<\/style>\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":"<p>Produtos<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2245","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clientehostix.com.br\/dioxide\/wp-json\/wp\/v2\/pages\/2245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clientehostix.com.br\/dioxide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clientehostix.com.br\/dioxide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clientehostix.com.br\/dioxide\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/clientehostix.com.br\/dioxide\/wp-json\/wp\/v2\/comments?post=2245"}],"version-history":[{"count":86,"href":"https:\/\/clientehostix.com.br\/dioxide\/wp-json\/wp\/v2\/pages\/2245\/revisions"}],"predecessor-version":[{"id":3422,"href":"https:\/\/clientehostix.com.br\/dioxide\/wp-json\/wp\/v2\/pages\/2245\/revisions\/3422"}],"wp:attachment":[{"href":"https:\/\/clientehostix.com.br\/dioxide\/wp-json\/wp\/v2\/media?parent=2245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}