{"id":9325,"date":"2026-06-08T19:44:46","date_gmt":"2026-06-08T11:44:46","guid":{"rendered":"http:\/\/cw-clothing.com\/customizer\/"},"modified":"2026-06-08T19:44:46","modified_gmt":"2026-06-08T11:44:46","slug":"customizer","status":"publish","type":"page","link":"https:\/\/cw-clothing.com\/es\/customizer\/","title":{"rendered":"Customizer"},"content":{"rendered":"        <!-- Custom Apparel Customizer CSS -->\n        <style>\n            .cac-container {\n                display: flex;\n                flex-wrap: wrap;\n                gap: 40px;\n                background: #faf9f6;\n                border: 1px solid #e5e0d8;\n                border-radius: 8px;\n                padding: 30px;\n                margin: 20px 0;\n                font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n                color: #2c2c2c;\n            }\n            .cac-preview-pane {\n                flex: 1 1 400px;\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n                background: #ffffff;\n                border: 1px solid #eef0eb;\n                border-radius: 6px;\n                padding: 20px;\n                position: relative;\n                box-shadow: 0 4px 12px rgba(0,0,0,0.02);\n                min-height: 450px;\n            }\n            .cac-canvas-wrapper {\n                width: 100%;\n                max-width: 350px;\n                height: auto;\n                position: relative;\n            }\n            .cac-control-pane {\n                flex: 1 1 400px;\n                display: flex;\n                flex-direction: column;\n                justify-content: space-between;\n                gap: 20px;\n            }\n            .cac-header {\n                border-bottom: 2px solid #c5a880;\n                padding-bottom: 15px;\n                margin-bottom: 10px;\n            }\n            .cac-header h2 {\n                font-family: Georgia, serif;\n                font-size: 28px;\n                margin: 0;\n                color: #1c1c1c;\n                font-weight: 300;\n                text-transform: uppercase;\n                letter-spacing: 1px;\n            }\n            .cac-header p {\n                font-size: 14px;\n                color: #8c857b;\n                margin: 5px 0 0 0;\n            }\n            .cac-section {\n                background: #ffffff;\n                padding: 15px 20px;\n                border-radius: 6px;\n                border: 1px solid #eef0eb;\n                margin-bottom: 15px;\n            }\n            .cac-section-title {\n                font-family: Georgia, serif;\n                font-size: 16px;\n                color: #1c1c1c;\n                margin: 0 0 12px 0;\n                font-weight: 500;\n                border-left: 3px solid #c5a880;\n                padding-left: 8px;\n            }\n            .cac-options-grid {\n                display: grid;\n                grid-template-columns: repeat(2, 1fr);\n                gap: 10px;\n            }\n            .cac-option-card {\n                border: 1px solid #e1ded7;\n                border-radius: 4px;\n                padding: 10px;\n                cursor: pointer;\n                transition: all 0.25s ease;\n                display: flex;\n                flex-direction: column;\n                background: #fafaf9;\n            }\n            .cac-option-card:hover {\n                border-color: #c5a880;\n                background: #ffffff;\n            }\n            .cac-option-card.selected {\n                border-color: #1c1c1c;\n                background: #f1ede6;\n                box-shadow: inset 0 0 0 1px #1c1c1c;\n            }\n            .cac-option-name {\n                font-weight: 600;\n                font-size: 14px;\n                color: #1c1c1c;\n            }\n            .cac-option-price {\n                font-size: 12px;\n                color: #8c857b;\n                margin-top: 4px;\n            }\n            .cac-input-text {\n                width: 100%;\n                padding: 10px;\n                border: 1px solid #e1ded7;\n                border-radius: 4px;\n                font-size: 14px;\n                outline: none;\n                transition: border-color 0.2s;\n                box-sizing: border-box;\n            }\n            .cac-input-text:focus {\n                border-color: #c5a880;\n            }\n            .cac-color-selector {\n                display: flex;\n                gap: 10px;\n                margin-top: 10px;\n            }\n            .cac-color-dot {\n                width: 28px;\n                height: 28px;\n                border-radius: 50%;\n                cursor: pointer;\n                border: 2px solid #ffffff;\n                outline: 1px solid #e1ded7;\n                transition: transform 0.2s, outline-color 0.2s;\n            }\n            .cac-color-dot:hover {\n                transform: scale(1.1);\n            }\n            .cac-color-dot.selected {\n                outline: 2px solid #1c1c1c;\n            }\n            .cac-pricing-bar {\n                background: #f1ede6;\n                border: 1px solid #e5e0d8;\n                padding: 15px 20px;\n                border-radius: 6px;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n                margin-top: 20px;\n            }\n            .cac-price-label {\n                font-size: 14px;\n                color: #8c857b;\n                text-transform: uppercase;\n                letter-spacing: 0.5px;\n            }\n            .cac-price-val {\n                font-family: Georgia, serif;\n                font-size: 24px;\n                font-weight: 600;\n                color: #1c1c1c;\n            }\n            .cac-btn-add {\n                width: 100%;\n                background: #1c1c1c;\n                color: #ffffff;\n                border: none;\n                padding: 15px;\n                font-size: 16px;\n                font-weight: 600;\n                text-transform: uppercase;\n                letter-spacing: 1px;\n                cursor: pointer;\n                border-radius: 4px;\n                transition: background 0.2s;\n                margin-top: 10px;\n            }\n            .cac-btn-add:hover {\n                background: #c5a880;\n            }\n            .cac-badge {\n                position: absolute;\n                top: 15px;\n                left: 15px;\n                background: #c5a880;\n                color: #ffffff;\n                font-size: 11px;\n                text-transform: uppercase;\n                padding: 4px 8px;\n                letter-spacing: 1px;\n                border-radius: 2px;\n                font-weight: 500;\n            }\n            .cac-error-notice {\n                border-left: 4px solid #cc0000;\n                background: #fff5f5;\n                padding: 15px;\n                margin: 20px 0;\n                color: #cc0000;\n                border-radius: 4px;\n            }\n        <\/style>\n\n        <!-- Customizer Container -->\n        <div class=\"cac-container\">\n            <!-- Left: Interactive Visual SVG Canvas -->\n            <div class=\"cac-preview-pane\">\n                <div class=\"cac-badge\">Bespoke Studio<\/div>\n                <div class=\"cac-canvas-wrapper\">\n                    <!-- Elegant Custom SVG Apparel Vector (Classic Shirt Layout with components to animate) -->\n                    <svg id=\"cac-shirt-svg\" viewBox=\"0 0 400 500\" width=\"100%\" height=\"100%\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <g id=\"shirt-shadow\" opacity=\"0.1\">\n                            <ellipse cx=\"200\" cy=\"460\" rx=\"140\" ry=\"15\" fill=\"#000000\" \/>\n                        <\/g>\n                        <!-- Main Shirt Torso \/ Fabric Base -->\n                        <g id=\"shirt-torso\">\n                            <path d=\"M120 180 L80 340 L80 440 Q80 460 120 460 L280 460 Q320 460 320 440 L320 340 L280 180 Z\" fill=\"#ffffff\" stroke=\"#cbd5e1\" stroke-width=\"2\" id=\"torso-fabric-fill\" \/>\n                            <path d=\"M200 180 L200 460\" stroke=\"#cbd5e1\" stroke-width=\"1.5\" stroke-dasharray=\"4,4\" \/>\n                        <\/g>\n                        <!-- Left & Right Arms (Sleeves) -->\n                        <g id=\"shirt-sleeves\">\n                            <!-- Left Arm -->\n                            <path d=\"M120 180 L50 240 L30 350 L70 355 L100 240 Z\" fill=\"#ffffff\" stroke=\"#cbd5e1\" stroke-width=\"2\" id=\"left-sleeve-fill\" \/>\n                            <!-- Right Arm -->\n                            <path d=\"M280 180 L350 240 L370 350 L330 355 L300 240 Z\" fill=\"#ffffff\" stroke=\"#cbd5e1\" stroke-width=\"2\" id=\"right-sleeve-fill\" \/>\n                        <\/g>\n                        <!-- Dynamic Collar Design -->\n                        <g id=\"shirt-collar\">\n                            <!-- Left Collar Leaf -->\n                            <path id=\"collar-left\" d=\"M200 180 L140 160 L130 200 L200 180 Z\" fill=\"#ffffff\" stroke=\"#cbd5e1\" stroke-width=\"2\" \/>\n                            <!-- Right Collar Leaf -->\n                            <path id=\"collar-right\" d=\"M200 180 L260 160 L270 200 L200 180 Z\" fill=\"#ffffff\" stroke=\"#cbd5e1\" stroke-width=\"2\" \/>\n                            <!-- Collar Center Band -->\n                            <path d=\"M140 160 Q200 145 260 160 L260 170 Q200 155 140 170 Z\" fill=\"#f8fafc\" stroke=\"#e2e8f0\" stroke-width=\"1\" \/>\n                        <\/g>\n                        <!-- Dynamic Cuff Selection -->\n                        <g id=\"shirt-cuffs\">\n                            <!-- Left Cuff -->\n                            <path id=\"cuff-left\" d=\"M30 350 L70 355 L65 375 L25 370 Z\" fill=\"#ffffff\" stroke=\"#a1a1aa\" stroke-width=\"1.5\" \/>\n                            <!-- Right Cuff -->\n                            <path id=\"cuff-right\" d=\"M370 350 L330 355 L335 375 L375 370 Z\" fill=\"#ffffff\" stroke=\"#a1a1aa\" stroke-width=\"1.5\" \/>\n                        <\/g>\n                        <!-- Fine Monogram Embroidery -->\n                        <g id=\"shirt-embroidery\" transform=\"translate(140, 260)\">\n                            <!-- Simulated Chest pocket area -->\n                            <path d=\"M0 0 L50 0 L50 60 Q25 75 0 60 Z\" fill=\"none\" stroke=\"#e2e8f0\" stroke-width=\"1\" stroke-dasharray=\"2,2\" \/>\n                            <!-- Interactive Text Monogram -->\n                            <text id=\"embroidery-text-preview\" x=\"25\" y=\"35\" font-family=\"'Brush Script MT', cursive, Georgia, serif\" font-size=\"12\" font-weight=\"bold\" fill=\"#d4af37\" text-anchor=\"middle\" letter-spacing=\"0.5\"><\/text>\n                        <\/g>\n                    <\/svg>\n                <\/div>\n            <\/div>\n\n            <!-- Right: Interactive Controls -->\n            <div class=\"cac-control-pane\">\n                <form id=\"cac-designer-form\" method=\"post\" action=\"\">\n                    <input type=\"hidden\" name=\"add-to-cart\" value=\"10379\" \/>\n                    \n                    <!-- Hidden inputs to submit to WooCommerce -->\n                    <input type=\"hidden\" name=\"custom_fabric\" id=\"input-fabric\" value=\"Egyptian Cotton\" \/>\n                    <input type=\"hidden\" name=\"custom_collar\" id=\"input-collar\" value=\"Classic Spread\" \/>\n                    <input type=\"hidden\" name=\"custom_cuff\" id=\"input-cuff\" value=\"Single Button\" \/>\n                    <input type=\"hidden\" name=\"custom_embroidery\" id=\"input-embroidery\" value=\"\" \/>\n                    <input type=\"hidden\" name=\"custom_embroidery_color\" id=\"input-embroidery-color\" value=\"Gold\" \/>\n\n                    <div class=\"cac-header\">\n                        <h2>Versatile 4-Piece Butt-Lift Activewear &amp; Gym Set<\/h2>\n                        <p>Interactive Bespoke Atelier Configurator<\/p>\n                    <\/div>\n\n                    <!-- 1. FABRIC SELECTION -->\n                    <div class=\"cac-section\">\n                        <div class=\"cac-section-title\">1. Select Premium Fabric<\/div>\n                        <div class=\"cac-options-grid\" id=\"grid-fabric\">\n                            <div class=\"cac-option-card selected\" data-value=\"Egyptian Cotton\" data-price=\"0\" data-color=\"#ffffff\">\n                                <span class=\"cac-option-name\">Egyptian Cotton<\/span>\n                                <span class=\"cac-option-price\">Included<\/span>\n                            <\/div>\n                            <div class=\"cac-option-card\" data-value=\"Oxford Blue\" data-price=\"10\" data-color=\"#e6f2ff\">\n                                <span class=\"cac-option-name\">Oxford Blue<\/span>\n                                <span class=\"cac-option-price\">+&yen;10<\/span>\n                            <\/div>\n                            <div class=\"cac-option-card\" data-value=\"Royal Silk\" data-price=\"45\" data-color=\"#1a2b4c\">\n                                <span class=\"cac-option-name\">Royal Silk (Navy)<\/span>\n                                <span class=\"cac-option-price\">+&yen;45<\/span>\n                            <\/div>\n                            <div class=\"cac-option-card\" data-value=\"Windsor Wool\" data-price=\"60\" data-color=\"#3a3a3a\">\n                                <span class=\"cac-option-name\">Windsor Wool<\/span>\n                                <span class=\"cac-option-price\">+&yen;60<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- 2. COLLAR DESIGN -->\n                    <div class=\"cac-section\">\n                        <div class=\"cac-section-title\">2. Collar Style<\/div>\n                        <div class=\"cac-options-grid\" id=\"grid-collar\">\n                            <div class=\"cac-option-card selected\" data-value=\"Classic Spread\" data-price=\"0\" data-left=\"M200 180 L140 160 L130 200 L200 180 Z\" data-right=\"M200 180 L260 160 L270 200 L200 180 Z\">\n                                <span class=\"cac-option-name\">Classic Spread<\/span>\n                                <span class=\"cac-option-price\">Included<\/span>\n                            <\/div>\n                            <div class=\"cac-option-card\" data-value=\"Mandarin Style\" data-price=\"15\" data-left=\"M200 180 L165 170 L168 185 L200 180 Z\" data-right=\"M200 180 L235 170 L232 185 L200 180 Z\">\n                                <span class=\"cac-option-name\">Mandarin Band<\/span>\n                                <span class=\"cac-option-price\">+&yen;15<\/span>\n                            <\/div>\n                            <div class=\"cac-option-card\" data-value=\"Button-Down\" data-price=\"10\" data-left=\"M200 180 L140 155 L145 205 L200 180 Z\" data-right=\"M200 180 L260 155 L255 205 L200 180 Z\">\n                                <span class=\"cac-option-name\">Button-Down<\/span>\n                                <span class=\"cac-option-price\">+&yen;10<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- 3. CUFFS -->\n                    <div class=\"cac-section\">\n                        <div class=\"cac-section-title\">3. Cuff Style<\/div>\n                        <div class=\"cac-options-grid\" id=\"grid-cuff\">\n                            <div class=\"cac-option-card selected\" data-value=\"Single Button\" data-price=\"0\" data-color=\"#ffffff\">\n                                <span class=\"cac-option-name\">Single Button<\/span>\n                                <span class=\"cac-option-price\">Included<\/span>\n                            <\/div>\n                            <div class=\"cac-option-card\" data-value=\"French Cuff\" data-price=\"20\" data-color=\"#e2e8f0\">\n                                <span class=\"cac-option-name\">French Cuff<\/span>\n                                <span class=\"cac-option-price\">+&yen;20<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- 4. EMBROIDERY \/ MONOGRAM -->\n                    <div class=\"cac-section\">\n                        <div class=\"cac-section-title\">4. Personal Monogram Embroidery<\/div>\n                        <input type=\"text\" id=\"embroidery-input\" class=\"cac-input-text\" maxlength=\"10\" placeholder=\"Enter Initials (e.g. J.D.)\" \/>\n                        \n                        <div class=\"cac-color-selector\" id=\"embroidery-colors\">\n                            <div class=\"cac-color-dot selected\" style=\"background: #d4af37;\" data-value=\"Gold\" data-hex=\"#d4af37\" title=\"Gold Thread\"><\/div>\n                            <div class=\"cac-color-dot\" style=\"background: #c0c0c0;\" data-value=\"Silver\" data-hex=\"#c0c0c0\" title=\"Silver Thread\"><\/div>\n                            <div class=\"cac-color-dot\" style=\"background: #990000;\" data-value=\"Crimson\" data-hex=\"#990000\" title=\"Crimson Thread\"><\/div>\n                            <div class=\"cac-color-dot\" style=\"background: #1e3a8a;\" data-value=\"Royal Blue\" data-hex=\"#1e3a8a\" title=\"Royal Blue Thread\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Dynamic Pricing and Submit -->\n                    <div class=\"cac-pricing-bar\">\n                        <div class=\"cac-price-label\">Calculated Premium Price:<\/div>\n                        <div class=\"cac-price-val\" id=\"cac-total-price-display\">&yen;24.70<\/div>\n                    <\/div>\n\n                    <button type=\"submit\" class=\"cac-btn-add\">Add Tailored Item to Cart<\/button>\n                <\/form>\n            <\/div>\n        <\/div>\n\n        <!-- Customizer Interactive JavaScript -->\n        <script>\n            document.addEventListener('DOMContentLoaded', function() {\n                const basePrice = parseFloat(24.70);\n                const currencySymbol = '&yen;';\n\n                \/\/ DOM Selectors\n                const torsoFill = document.getElementById('torso-fabric-fill');\n                const leftSleeveFill = document.getElementById('left-sleeve-fill');\n                const rightSleeveFill = document.getElementById('right-sleeve-fill');\n                const cuffLeft = document.getElementById('cuff-left');\n                const cuffRight = document.getElementById('cuff-right');\n                const collarLeft = document.getElementById('collar-left');\n                const collarRight = document.getElementById('collar-right');\n                const embroideryTextPreview = document.getElementById('embroidery-text-preview');\n                const embroideryInput = document.getElementById('embroidery-input');\n                const priceDisplay = document.getElementById('cac-total-price-display');\n\n                \/\/ Hidden Form Fields\n                const hiddenFabric = document.getElementById('input-fabric');\n                const hiddenCollar = document.getElementById('input-collar');\n                const hiddenCuff = document.getElementById('input-cuff');\n                const hiddenEmbroidery = document.getElementById('input-embroidery');\n                const hiddenEmbroideryColor = document.getElementById('input-embroidery-color');\n\n                \/\/ State object to keep track of prices\n                const state = {\n                    fabricPrice: 0,\n                    collarPrice: 0,\n                    cuffPrice: 0,\n                    embroideryPrice: 0\n                };\n\n                \/\/ GA4 & GTM Event Tracking Helper (Vanilla JS)\n                function trackCustomizerEvent(eventName, eventParams) {\n                    window.dataLayer = window.dataLayer || [];\n                    window.dataLayer.push({\n                        'event': eventName,\n                        'customizer': eventParams\n                    });\n                    \n                    if (typeof gtag === 'function') {\n                        gtag('event', eventName, eventParams);\n                    }\n                    console.log('Bespoke Plugin Analytics: ' + eventName, eventParams);\n                }\n\n                \/\/ Helper to update displayed price\n                function updatePrice() {\n                    const total = basePrice + state.fabricPrice + state.collarPrice + state.cuffPrice + state.embroideryPrice;\n                    priceDisplay.textContent = currencySymbol + total.toFixed(2);\n                }\n\n                \/\/ Fabric selection\n                const fabricCards = document.querySelectorAll('#grid-fabric .cac-option-card');\n                fabricCards.forEach(card => {\n                    card.addEventListener('click', function() {\n                        fabricCards.forEach(c => c.classList.remove('selected'));\n                        this.classList.add('selected');\n                        \n                        const val = this.getAttribute('data-value');\n                        const price = parseFloat(this.getAttribute('data-price'));\n                        const colorHex = this.getAttribute('data-color');\n                        \n                        hiddenFabric.value = val;\n                        state.fabricPrice = price;\n\n                        \/\/ Trigger GTM\/GA4 select_fabric event\n                        trackCustomizerEvent('select_fabric', {\n                            'fabric_id': val,\n                            'fabric_name': val,\n                            'fabric_price_premium': price\n                        });\n                        \n                        \/\/ Update visual apparel colors\n                        torsoFill.setAttribute('fill', colorHex);\n                        leftSleeveFill.setAttribute('fill', colorHex);\n                        rightSleeveFill.setAttribute('fill', colorHex);\n                        cuffLeft.setAttribute('fill', colorHex);\n                        cuffRight.setAttribute('fill', colorHex);\n                        collarLeft.setAttribute('fill', colorHex);\n                        collarRight.setAttribute('fill', colorHex);\n                        \n                        updatePrice();\n                    });\n                });\n\n                \/\/ Collar Selection\n                const collarCards = document.querySelectorAll('#grid-collar .cac-option-card');\n                collarCards.forEach(card => {\n                    card.addEventListener('click', function() {\n                        collarCards.forEach(c => c.classList.remove('selected'));\n                        this.classList.add('selected');\n                        \n                        const val = this.getAttribute('data-value');\n                        const price = parseFloat(this.getAttribute('data-price'));\n                        const leftPath = this.getAttribute('data-left');\n                        const rightPath = this.getAttribute('data-right');\n                        \n                        hiddenCollar.value = val;\n                        state.collarPrice = price;\n\n                        \/\/ Trigger GTM\/GA4 select_collar event\n                        trackCustomizerEvent('select_collar', {\n                            'collar_id': val,\n                            'collar_name': val,\n                            'collar_price_premium': price\n                        });\n                        \n                        \/\/ Update collar geometry\n                        collarLeft.setAttribute('d', leftPath);\n                        collarRight.setAttribute('d', rightPath);\n                        \n                        updatePrice();\n                    });\n                });\n\n                \/\/ Cuff Selection\n                const cuffCards = document.querySelectorAll('#grid-cuff .cac-option-card');\n                cuffCards.forEach(card => {\n                    card.addEventListener('click', function() {\n                        cuffCards.forEach(c => c.classList.remove('selected'));\n                        this.classList.add('selected');\n                        \n                        const val = this.getAttribute('data-value');\n                        const price = parseFloat(this.getAttribute('data-price'));\n                        \n                        hiddenCuff.value = val;\n                        state.cuffPrice = price;\n\n                        \/\/ Trigger GTM\/GA4 select_cuff event\n                        trackCustomizerEvent('select_cuff', {\n                            'cuff_id': val,\n                            'cuff_name': val,\n                            'cuff_price_premium': price\n                        });\n                        \n                        \/\/ Simple visual indicator for cuffs\n                        if (val === 'French Cuff') {\n                            cuffLeft.setAttribute('stroke-width', '3');\n                            cuffRight.setAttribute('stroke-width', '3');\n                        } else {\n                            cuffLeft.setAttribute('stroke-width', '1.5');\n                            cuffRight.setAttribute('stroke-width', '1.5');\n                        }\n                        \n                        updatePrice();\n                    });\n                });\n\n                \/\/ Embroidery Input\n                embroideryInput.addEventListener('input', function() {\n                    const val = this.value.trim().toUpperCase();\n                    hiddenEmbroidery.value = val;\n                    embroideryTextPreview.textContent = val;\n                    \n                    \/\/ Add surcharge for premium personalization\n                    state.embroideryPrice = val.length > 0 ? 15 : 0;\n                    \n                    updatePrice();\n                });\n\n                \/\/ Track Monogram completion on input blur (avoid keystroke flooding)\n                embroideryInput.addEventListener('blur', function() {\n                    const val = this.value.trim().toUpperCase();\n                    if (val.length > 0) {\n                        trackCustomizerEvent('bespoke_monogram', {\n                            'monogram_text': val,\n                            'monogram_thread_color': hiddenEmbroideryColor.value || 'Gold',\n                            'monogram_price_premium': 15.00\n                        });\n                    }\n                });\n\n                \/\/ Embroidery Thread Colors\n                const colorDots = document.querySelectorAll('#embroidery-colors .cac-color-dot');\n                colorDots.forEach(dot => {\n                    dot.addEventListener('click', function() {\n                        colorDots.forEach(d => d.classList.remove('selected'));\n                        this.classList.add('selected');\n                        \n                        const val = this.getAttribute('data-value');\n                        const hex = this.getAttribute('data-hex');\n                        \n                        hiddenEmbroideryColor.value = val;\n                        embroideryTextPreview.setAttribute('fill', hex);\n                    });\n                });\n\n                \/\/ Intercept Form Submit for Purchase Funnel (Add To Cart)\n                const designerForm = document.getElementById('cac-designer-form');\n                if (designerForm) {\n                    designerForm.addEventListener('submit', function() {\n                        const currentFabric = hiddenFabric.value || 'Royal Oxford';\n                        const currentCollar = hiddenCollar.value || 'Spread';\n                        const currentCuff = hiddenCuff.value || 'Single Rounded';\n                        const currentEmb = hiddenEmbroidery.value;\n                        const currentEmbColor = hiddenEmbroideryColor.value || 'Gold';\n                        \n                        const totalSurcharges = state.fabricPrice + state.collarPrice + state.cuffPrice + state.embroideryPrice;\n                        const finalCalculatedPrice = basePrice + totalSurcharges;\n                        \n                        const customVariantStr = `Fabric: ${currentFabric} | Collar: ${currentCollar} | Cuff: ${currentCuff}` + \n                                                (currentEmb ? ` | Monogram: ${currentEmb} (${currentEmbColor})` : '');\n                        \n                        const cartItemPayload = {\n                            'items': [{\n                                'item_id': document.getElementsByName('add-to-cart')[0]?.value || '101',\n                                'item_name': 'Bespoke Custom Dress Shirt (Plugin)',\n                                'price': finalCalculatedPrice,\n                                'quantity': 1,\n                                'item_brand': 'Savile Row Bespoke',\n                                'item_category': 'Bespoke Apparel',\n                                'item_variant': customVariantStr,\n                                'fabric': currentFabric,\n                                'collar': currentCollar,\n                                'cuff': currentCuff,\n                                'monogram': currentEmb || 'None'\n                            }]\n                        };\n                        \n                        \/\/ 1. Standard E-commerce Event (GA4 & GTM)\n                        trackCustomizerEvent('add_to_cart', {\n                            ...cartItemPayload,\n                            'transport_type': 'beacon'\n                        });\n                        \n                        \/\/ 2. Custom Customizer Micro-conversion event\n                        trackCustomizerEvent('add_bespoke_to_cart', {\n                            'product_id': document.getElementsByName('add-to-cart')[0]?.value || '101',\n                            'total_value': finalCalculatedPrice,\n                            'quantity': 1,\n                            'fabric_selected': currentFabric,\n                            'collar_selected': currentCollar,\n                            'cuff_selected': currentCuff\n                        });\n                    });\n                }\n            });\n        <\/script>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9325","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Customizer - Shenzhen Cloud Weaving Clothing Co., LTD<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cw-clothing.com\/es\/customizer\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizer - Shenzhen Cloud Weaving Clothing Co., LTD\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cw-clothing.com\/es\/customizer\/\" \/>\n<meta property=\"og:site_name\" content=\"Shenzhen Cloud Weaving Clothing Co., LTD\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cw-clothing.com\/es\/customizer\/\",\"url\":\"https:\/\/cw-clothing.com\/es\/customizer\/\",\"name\":\"Customizer - Shenzhen Cloud Weaving Clothing Co., LTD\",\"isPartOf\":{\"@id\":\"https:\/\/cw-clothing.com\/#website\"},\"datePublished\":\"2026-06-08T11:44:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cw-clothing.com\/es\/customizer\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cw-clothing.com\/es\/customizer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cw-clothing.com\/es\/customizer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/cw-clothing.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cw-clothing.com\/#website\",\"url\":\"https:\/\/cw-clothing.com\/\",\"name\":\"Shenzhen Cloud Weaving Clothing Co., LTD\",\"description\":\"Premium Custom Apparel Solutions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cw-clothing.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customizer - Shenzhen Cloud Weaving Clothing Co., LTD","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cw-clothing.com\/es\/customizer\/","og_locale":"es_ES","og_type":"article","og_title":"Customizer - Shenzhen Cloud Weaving Clothing Co., LTD","og_url":"https:\/\/cw-clothing.com\/es\/customizer\/","og_site_name":"Shenzhen Cloud Weaving Clothing Co., LTD","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cw-clothing.com\/es\/customizer\/","url":"https:\/\/cw-clothing.com\/es\/customizer\/","name":"Customizer - Shenzhen Cloud Weaving Clothing Co., LTD","isPartOf":{"@id":"https:\/\/cw-clothing.com\/#website"},"datePublished":"2026-06-08T11:44:46+00:00","breadcrumb":{"@id":"https:\/\/cw-clothing.com\/es\/customizer\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cw-clothing.com\/es\/customizer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cw-clothing.com\/es\/customizer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/cw-clothing.com\/"},{"@type":"ListItem","position":2,"name":"Customizer"}]},{"@type":"WebSite","@id":"https:\/\/cw-clothing.com\/#website","url":"https:\/\/cw-clothing.com\/","name":"Shenzhen Cloud Weaving Clothing Co., LTD","description":"Premium Custom Apparel Solutions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cw-clothing.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cw-clothing.com\/es\/wp-json\/wp\/v2\/pages\/9325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cw-clothing.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cw-clothing.com\/es\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/cw-clothing.com\/es\/wp-json\/wp\/v2\/comments?post=9325"}],"version-history":[{"count":0,"href":"https:\/\/cw-clothing.com\/es\/wp-json\/wp\/v2\/pages\/9325\/revisions"}],"wp:attachment":[{"href":"https:\/\/cw-clothing.com\/es\/wp-json\/wp\/v2\/media?parent=9325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}