{"id":21,"date":"2026-05-25T07:11:18","date_gmt":"2026-05-25T07:11:18","guid":{"rendered":"https:\/\/www.mycustommug.co.uk\/custom\/?page_id=21"},"modified":"2026-06-05T17:47:58","modified_gmt":"2026-06-05T17:47:58","slug":"custom-text-mug","status":"publish","type":"page","link":"https:\/\/www.mycustommug.co.uk\/custom\/custom-text-mug\/","title":{"rendered":"Custom Text Mug"},"content":{"rendered":"\n\n\n\n\n<p class=\"has-text-align-center alignfull has-huge-font-size wp-block-paragraph\"><strong>Aston Martin Staff Gaydon<\/strong><\/p>\n\n\n\n\n\n<div class=\"mug-placement-widget\">\n    <div class=\"mug-visual-display\">\n        <div class=\"mug-render-box\">\n            <canvas id=\"mugCanvas\" width=\"300\" height=\"300\"><\/canvas>\n            \n            <div id=\"preview-text-primary\" class=\"mug-text-layer font-modern color-black\">Front Text Here<\/div>\n            <div id=\"preview-text-secondary\" class=\"mug-text-layer font-modern color-black\" style=\"display: none;\">Back Text Here<\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"mug-control-panel\">\n        <h2>Customise Your 11oz Mug<\/h2>\n        <p class=\"widget-subtitle\">Configure your design and schedule a collection slot below.<\/p>\n\n        <div class=\"product-specs-box\">\n            <h3>Premium Product Details:<\/h3>\n            <ul>\n                <li><strong>Mug Quality:<\/strong> Classic white 11oz ceramic mug with a comfortable large handle.<\/li>\n                <li><strong>Durability:<\/strong> Fully dishwasher safe with a high-durability permanent print that will not fade or wash off.<\/li>\n                <li><strong>Gifting &amp; Packaging:<\/strong> Comes safely packed in its own protective cardboard box, complete with a personalized sticky label displaying your name.<\/li>\n            <\/ul>\n        <\/div>\n\n        <div class=\"option-group\">\n            <label>1. Select Print Placement:<\/label>\n            <div class=\"placement-grid\">\n                <label class=\"place-card\"><input type=\"radio\" name=\"placement_choice\" value=\"Front\" checked=\"\" onchange=\"handlePlacementChange()\"><span>Front View<\/span><\/label>\n                <label class=\"place-card\"><input type=\"radio\" name=\"placement_choice\" value=\"Middle\" onchange=\"handlePlacementChange()\"><span>Middle View<\/span><\/label>\n                <label class=\"place-card\"><input type=\"radio\" name=\"placement_choice\" value=\"Rear\" onchange=\"handlePlacementChange()\"><span>Rear View<\/span><\/label>\n                <label class=\"place-card special-card\"><input type=\"radio\" name=\"placement_choice\" value=\"Both\" onchange=\"handlePlacementChange()\"><span>Both Sides (+\u00a31)<\/span><\/label>\n            <\/div>\n        <\/div>\n\n        <div class=\"option-group\" id=\"primary-text-wrapper\">\n            <label id=\"primary-input-label\" for=\"text-main\">2. Enter Custom Wording:<\/label>\n            <input type=\"text\" id=\"text-main\" placeholder=\"Type message here...\" maxlength=\"30\" oninput=\"renderLiveMug()\">\n        <\/div>\n\n        <div class=\"option-group\" id=\"secondary-text-wrapper\" style=\"display: none;\">\n            <label for=\"text-alt\">3. Enter Back Side Wording:<\/label>\n            <input type=\"text\" id=\"text-alt\" placeholder=\"Type back message here...\" maxlength=\"30\" oninput=\"renderLiveMug()\">\n        <\/div>\n\n        <div class=\"option-group\">\n            <label for=\"font-style-picker\">Choose PowerPoint Font:<\/label>\n            <select id=\"font-style-picker\" onchange=\"renderLiveMug()\">\n                <optgroup label=\"Standard Fonts\">\n                    <option value=\"calibri\">Calibri (Clean Body)<\/option>\n                    <option value=\"arialblack\">Arial Black (Impact Bold)<\/option>\n                    <option value=\"georgia\">Georgia (Elegant Serif)<\/option>\n                <\/optgroup>\n                <optgroup label=\"Popular Script &amp; Cursive Fonts\">\n                    <option value=\"brushscript\" selected=\"\">Brush Script MT (Bold Cursive)<\/option>\n                    <option value=\"lucida\">Lucida Handwriting (Casual Script)<\/option>\n                    <option value=\"edwardian\">Edwardian Script (Fancy Calligraphy)<\/option>\n                    <option value=\"corsiva\">Monotype Corsiva (Elegant Script)<\/option>\n                <\/optgroup>\n            <\/select>\n        <\/div>\n\n        <div class=\"option-group\">\n            <label>Select Colour:<\/label>\n            <div class=\"swatch-row\">\n                <label class=\"swatch\" style=\"background:#111111;\" title=\"Black\"><input type=\"radio\" name=\"color_picker\" value=\"Black\" checked=\"\" onchange=\"renderLiveMug()\"><\/label>\n                <label class=\"swatch\" style=\"background:#003366;\" title=\"Navy\"><input type=\"radio\" name=\"color_picker\" value=\"Navy\" onchange=\"renderLiveMug()\"><\/label>\n                <label class=\"swatch\" style=\"background:#cc0000;\" title=\"Red\"><input type=\"radio\" name=\"color_picker\" value=\"Red\" onchange=\"renderLiveMug()\"><\/label>\n                <label class=\"swatch\" style=\"background:#006633;\" title=\"Green\"><input type=\"radio\" name=\"color_picker\" value=\"Green\" onchange=\"renderLiveMug()\"><\/label>\n                <label class=\"swatch\" style=\"background:#ffc0cb;\" title=\"Soft Pink\"><input type=\"radio\" name=\"color_picker\" value=\"Soft Pink\" onchange=\"renderLiveMug()\"><\/label>\n                <label class=\"swatch\" style=\"background:#ff007f;\" title=\"Magenta\"><input type=\"radio\" name=\"color_picker\" value=\"Magenta\" onchange=\"renderLiveMug()\"><\/label>\n                <label class=\"swatch\" style=\"background:#6a0dad;\" title=\"Purple\"><input type=\"radio\" name=\"color_picker\" value=\"Purple\" onchange=\"renderLiveMug()\"><\/label>\n                <label class=\"swatch\" style=\"background:#87ceeb;\" title=\"Sky Blue\"><input type=\"radio\" name=\"color_picker\" value=\"Sky Blue\" onchange=\"renderLiveMug()\"><\/label>\n            <\/div>\n        <\/div>\n\n        <div class=\"option-group\" style=\"background: #f8fafc; padding: 14px; border-radius: 8px; border: 1px dashed #cbd5e1; margin-bottom: 12px;\">\n            <label style=\"color: #0f172a; font-size: 14px; margin-bottom: 2px;\">Collection: In-Person Handover<\/label>\n            <p style=\"font-size: 11.5px; color: #64748b; margin: 0 0 10px 0; line-height: 1.3;\">Location: <strong>Notice board in the main canteen<\/strong>. Choose your date\/time slot below.<\/p>\n            \n            <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\">\n                <div style=\"flex: 1; min-width: 130px;\">\n                    <label for=\"pickup-date\" style=\"font-size: 12px; color: #475569;\">Pick Day:<\/label>\n                    <input type=\"date\" id=\"pickup-date\" onchange=\"handleDateSelectionChange()\" required=\"\" style=\"padding: 8px;\">\n                <\/div>\n                <div style=\"flex: 1; min-width: 140px;\">\n                    <label for=\"pickup-time\" style=\"font-size: 12px; color: #475569;\">Pick 5-Min Slot:<\/label>\n                    <select id=\"pickup-time\" disabled=\"\" required=\"\" style=\"padding: 8px;\">\n                        <option value=\"\" disabled=\"\" selected=\"\">&#8212; Choose Day First &#8212;<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n            <span id=\"date-error-msg\" style=\"display: block; font-size: 11px; color: #ef4444; margin-top: 5px; font-weight: 500;\"><\/span>\n        <\/div>\n\n        <div class=\"policy-notice-box\">\n            <details>\n                <summary>Friendly Return Policy &amp; Handover Terms<\/summary>\n                <div class=\"policy-content\">\n                    <p><strong>In-Person Handover:<\/strong> To prevent order mix-ups and protect your purchase, we will look over your customized mug together at the main canteen notice board. A simple QR sign off signature will be taken upon physical collection to verify receipt.<\/p>\n                    <p><strong>Personalisation &amp; Returns:<\/strong> Under UK Consumer Law, standard cancellation rights do not apply to customized items. Because your unique wording is permanently printed onto the mug surface, sales are final. We cannot accept returns for structural text changes or change-of-mind once printed. Of course, in the unlikely event your mug has a structural defect or manufacturing fault upon handover, we will issue an immediate priority replacement or refund!<\/p>\n                <\/div>\n            <\/details>\n        <\/div>\n\n        <div class=\"checkout-footer-container\" style=\"background: #f1f5f9; border: 2px solid #e2e8f0; padding: 15px; border-radius: 10px; margin-top: 20px;\">\n            <div style=\"display: flex; gap: 10px; align-items: flex-end; margin-bottom: 8px;\">\n                <div style=\"flex: 1;\">\n                    <label for=\"promo-code-input\" style=\"font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 4px; display: block;\">Promo Code:<\/label>\n                    <input type=\"text\" id=\"promo-code-input\" placeholder=\"Enter code...\" oninput=\"applyDiscountLogic()\" style=\"width: 100%; padding: 10px; border: 2px solid #cbd5e1; border-radius: 6px; box-sizing: border-box;\">\n                <\/div>\n                <button type=\"button\" class=\"checkout-submit-action\" onclick=\"submitMugCheckoutData()\" style=\"margin: 0; padding: 10px 20px; flex-shrink: 0; font-size: 14px;\">\n                    Pay &amp; Collect (\u00a3<span id=\"price-tag\">7.00<\/span>)\n                <\/button>\n            <\/div>\n            <span id=\"promo-status-msg\" style=\"display: block; font-size: 12px; font-weight: 600; min-height: 15px;\"><\/span>\n        <\/div>\n    <\/div>\n<\/div>\n\n<form id=\"paypal-form\" action=\"https:\/\/www.paypal.com\/cgi-bin\/webscr\" method=\"post\" target=\"_blank\">\n    <input type=\"hidden\" name=\"cmd\" value=\"_xclick\">\n    <input type=\"hidden\" name=\"business\" value=\"&#x77;a&#x79;&#110;e&#x72;&#105;&#x63;&#x68;3&#x37;&#64;y&#x61;&#104;&#x6f;&#111;&#46;&#x63;&#111;m\"> \n    <input type=\"hidden\" name=\"item_name\" value=\"Custom 11oz Ceramic Mug Order\">\n    <input type=\"hidden\" name=\"currency_code\" value=\"GBP\">\n    <input type=\"hidden\" name=\"amount\" id=\"paypal-amount\" value=\"7.00\">\n    <input type=\"hidden\" name=\"on0\" value=\"Mug Configuration\">\n    <input type=\"hidden\" name=\"os0\" id=\"paypal-details\" value=\"\">\n<\/form>\n\n<style>\n    .mug-placement-widget {\n        display: flex; flex-wrap: wrap; max-width: 820px; margin: 20px auto;\n        background: #ffffff; border-radius: 14px; box-shadow: 0 4px 25px rgba(0,0,0,0.06);\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif; overflow: hidden;\n    }\n    .mug-visual-display {\n        flex: 1; min-width: 320px; background: #ffffff; display: flex; align-items: center; justify-content: center; padding: 40px 20px;\n    }\n    .mug-render-box { position: relative; width: 300px; height: 300px; }\n    #mugCanvas { width: 100%; height: 100%; display: block; }\n    \n    .mug-text-layer {\n        position: absolute; width: 110px; text-align: center; font-size: 16px; \n        line-height: 1.3; word-wrap: break-word; pointer-events: none;\n        top: 51%; left: 50%; transform: translate(-50%, -50%);\n        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n    }\n    \n    .product-specs-box {\n        background: #f1f5f9; padding: 12px 14px; border-radius: 8px; margin-bottom: 22px; border-left: 4px solid #64748b;\n    }\n    .product-specs-box h3 { margin: 0 0 6px 0; font-size: 13px; color: #334155; text-transform: uppercase; letter-spacing: 0.5px; }\n    .product-specs-box ul { margin: 0; padding-left: 16px; }\n    .product-specs-box li { font-size: 12px; color: #475569; line-height: 1.45; margin-bottom: 5px; }\n\n    .policy-notice-box { background: #fffbeb; border: 1px solid #fef3c7; border-radius: 6px; padding: 2px 4px; }\n    .policy-notice-box details summary { font-size: 12.5px; color: #b45309; font-weight: 600; padding: 6px; cursor: pointer; outline: none; }\n    .policy-content { padding: 4px 6px 6px 6px; font-size: 11.5px; color: #78350f; border-top: 1px dashed #fde68a; line-height: 1.4; }\n    \n    .f-calibri { font-family: 'Calibri', 'Candara', sans-serif; font-weight: bold; }\n    .f-arialblack { font-family: 'Arial Black', 'Impact', sans-serif; font-weight: 900; }\n    .f-georgia { font-family: 'Georgia', serif; font-weight: bold; }\n    \n    .f-brushscript { font-family: 'Brush Script MT', 'Brush Script SDK', cursive; font-size: 21px; }\n    .f-lucida { font-family: 'Lucida Handwriting', cursive; font-size: 14px; font-weight: bold; }\n    .f-edwardian { font-family: 'Edwardian Script ITC', serif; font-size: 28px; font-weight: normal; }\n    .f-corsiva { font-family: 'Monotype Corsiva', serif; font-size: 19px; font-style: italic; font-weight: bold; }\n\n    .c-Black { color: #111111; }\n    .c-Navy { color: #003366; }\n    .c-Red { color: #cc0000; }\n    .c-Green { color: #006633; }\n    .c-Soft-Pink { color: #ffc0cb; }\n    .c-Magenta { color: #ff007f; }\n    .c-Purple { color: #6a0dad; }\n    .c-Sky-Blue { color: #87ceeb; }\n\n    .mug-control-panel { flex: 1.2; min-width: 340px; padding: 30px; box-sizing: border-box; border-left: 1px solid #eee; }\n    .mug-control-panel h2 { margin: 0 0 4px 0; font-size: 22px; color: #111; }\n    .widget-subtitle { font-size: 12.5px; color: #666; margin: 0 0 15px 0; line-height: 1.4; }\n    .option-group { margin-bottom: 18px; }\n    .option-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13.5px; color: #222; }\n    \n    input[type=\"text\"], input[type=\"date\"], select {\n        width: 100%; padding: 11px; border: 2px solid #e2e8f0; border-radius: 6px; font-size: 14px; box-sizing: border-box;\n    }\n    \n    .placement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }\n    .place-card {\n        border: 2px solid #e2e8f0; padding: 12px 6px; text-align: center; border-radius: 6px;\n        cursor: pointer; position: relative; background: #fff;\n    }\n    .place-card input { position: absolute; opacity: 0; width: 0; height: 0; }\n    .place-card span { font-size: 13px; font-weight: 500; color: #475569; }\n    .place-card:has(input:checked) { border-color: #0070ba; background: #f0f7ff; }\n    .place-card:has(input:checked) span { color: #0070ba; font-weight: bold; }\n    .special-card:has(input:checked) { border-color: #10b981; background: #f0fdf4; }\n    .special-card:has(input:checked) span { color: #10b981; }\n\n    .swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }\n    .swatch {\n        width: 28px; height: 28px; border-radius: 50%; cursor: pointer;\n        border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; position: relative;\n    }\n    .swatch input { opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }\n    .swatch:has(input:checked) { box-shadow: 0 0 0 2px #0070ba; }\n\n    .checkout-submit-action {\n        background: #0070ba; color: white; border: none; padding: 14px;\n        font-size: 15px; font-weight: bold; border-radius: 6px; cursor: pointer;\n    }\n    .checkout-submit-action:hover { background: #005ea6; }\n<\/style>\n\n<script>\n    var basePrice = 7.00; \n    var currentPriceStr = \"7.00\";\n    var targetRotation = 0; \n    var currentRotation = 0;\n    var activeMode = \"Front\";\n    var activePromoName = \"\";\n\n    var rgbColorMap = {\n        \"Black\": \"RGB(17, 17, 17)\",\n        \"Navy\": \"RGB(0, 51, 102)\",\n        \"Red\": \"RGB(204, 0, 0)\",\n        \"Green\": \"RGB(0, 102, 51)\",\n        \"Soft Pink\": \"RGB(255, 192, 203)\",\n        \"Magenta\": \"RGB(255, 0, 127)\",\n        \"Purple\": \"RGB(106, 13, 173)\",\n        \"Sky Blue\": \"RGB(135, 206, 235)\"\n    };\n\n    window.addEventListener('load', function() {\n        initMugCanvas();\n        animateMugRotation();\n        setupCalendarMinLimits();\n    });\n\n    function setupCalendarMinLimits() {\n        var dateInput = document.getElementById('pickup-date');\n        if(dateInput) {\n            var today = new Date().toISOString().split('T')[0];\n            dateInput.min = today;\n        }\n    }\n\n    function handleDateSelectionChange() {\n        var dateField = document.getElementById('pickup-date');\n        var timeDropdown = document.getElementById('pickup-time');\n        var errorField = document.getElementById('date-error-msg');\n        \n        if(!dateField.value) return;\n\n        var selectedDate = new Date(dateField.value);\n        var dayOfWeek = selectedDate.getUTCDay(); \n\n        timeDropdown.innerHTML = \"\";\n        errorField.textContent = \"\";\n        timeDropdown.disabled = false;\n\n        if (dayOfWeek === 0 || dayOfWeek === 6) {\n            errorField.textContent = \"\u26a0 We are closed on weekends. Please choose a Monday to Friday date.\";\n            timeDropdown.disabled = true;\n            dateField.value = \"\";\n            var opt = document.createElement(\"option\");\n            opt.text = \"-- Choose Day First --\";\n            opt.disabled = true; opt.selected = true;\n            timeDropdown.add(opt);\n            return;\n        }\n\n        var optionsArray = [\n            { val: \"09:15 - 09:20\", txt: \"09:15 - 09:20\" },\n            { val: \"09:20 - 09:25\", txt: \"09:20 - 09:25\" },\n            { val: \"09:25 - 09:30\", txt: \"09:25 - 09:30\" },\n            { val: \"12:15 - 12:20\", txt: \"12:15 - 12:20\" },\n            { val: \"12:20 - 12:25\", txt: \"12:20 - 12:25\" },\n            { val: \"12:25 - 12:30\", txt: \"12:25 - 12:30\" },\n            { val: \"12:30 - 12:35\", txt: \"12:30 - 12:35\" },\n            { val: \"12:35 - 12:40\", txt: \"12:35 - 12:40\" },\n            { val: \"12:40 - 12:45\", txt: \"12:40 - 12:45\" },\n            { val: \"14:30 - 14:35\", txt: \"14:30 - 14:35\" },\n            { val: \"14:35 - 14:40\", txt: \"14:35 - 14:40\" },\n            { val: \"14:40 - 14:45\", txt: \"14:40 - 14:45\" }\n        ];\n        \n        optionsArray.forEach(function(item) {\n            var opt = document.createElement(\"option\");\n            opt.value = item.val;\n            opt.text = item.txt;\n            timeDropdown.add(opt);\n        });\n    }\n\n    function drawWhiteMug(rotationDegrees) {\n        var canvas = document.getElementById('mugCanvas');\n        if (!canvas) return;\n        var ctx = canvas.getContext('2d');\n        ctx.clearRect(0, 0, 300, 300);\n        \n        var rad = rotationDegrees * Math.PI \/ 180;\n        var visibilityFactor = Math.sin(rad); \n        var scaleX = Math.cos(rad);\n        var isBehindMug = visibilityFactor < -0.05;\n\n        if (isBehindMug) {\n            drawRealisticHandle(ctx, scaleX, visibilityFactor);\n        }\n\n        ctx.beginPath();\n        ctx.ellipse(150, 235, 75, 11, 0, 0, 2 * Math.PI);\n        ctx.fillStyle = 'rgba(0,0,0,0.05)';\n        ctx.fill();\n\n        ctx.beginPath();\n        ctx.moveTo(75, 70);\n        ctx.lineTo(225, 70);\n        ctx.lineTo(225, 222);\n        ctx.quadraticCurveTo(150, 235, 75, 222);\n        ctx.closePath();\n        \n        var bodyGradient = ctx.createLinearGradient(75, 0, 225, 0);\n        bodyGradient.addColorStop(0, '#e2e8f0');   \n        bodyGradient.addColorStop(0.2, '#ffffff'); \n        bodyGradient.addColorStop(0.75, '#ffffff'); \n        bodyGradient.addColorStop(1, '#cbd5e1');   \n        \n        ctx.fillStyle = bodyGradient;\n        ctx.fill();\n\n        if (!isBehindMug) {\n            drawRealisticHandle(ctx, scaleX, visibilityFactor);\n        }\n\n        ctx.beginPath();\n        ctx.ellipse(150, 70, 75, 10, 0, 0, 2 * Math.PI);\n        ctx.fillStyle = '#f1f5f9';\n        ctx.fill();\n        ctx.lineWidth = 1.5;\n        ctx.strokeStyle = '#e2e8f0';\n        ctx.stroke();\n    }\n\n    function drawRealisticHandle(ctx, scaleX, visibilityFactor) {\n        var baseAnchorX = 150 + scaleX * 74;\n        var handleWidth = 36 * Math.abs(scaleX);\n        if (handleWidth < 1) return;\n\n        ctx.save();\n        ctx.beginPath();\n        ctx.moveTo(baseAnchorX, 90); \n        ctx.bezierCurveTo(baseAnchorX + (scaleX * 45), 85, baseAnchorX + (scaleX * 45), 200, baseAnchorX, 195); \n        ctx.lineTo(baseAnchorX, 172); \n        ctx.bezierCurveTo(baseAnchorX + (scaleX * 24), 175, baseAnchorX + (scaleX * 24), 112, baseAnchorX, 110); \n        ctx.closePath();\n\n        var xStart = baseAnchorX;\n        var xEnd = baseAnchorX + (scaleX * 45);\n        var handleGrad = ctx.createLinearGradient(xStart, 0, xEnd, 0);\n        \n        if (scaleX >= 0) {\n            handleGrad.addColorStop(0, '#d1d5db');   \n            handleGrad.addColorStop(0.3, '#f8fafc'); \n            handleGrad.addColorStop(0.7, '#ffffff'); \n            handleGrad.addColorStop(1, '#94a3b8');   \n        } else {\n            handleGrad.addColorStop(0, '#94a3b8');\n            handleGrad.addColorStop(0.3, '#ffffff');\n            handleGrad.addColorStop(0.7, '#f8fafc');\n            handleGrad.addColorStop(1, '#d1d5db');\n        }\n\n        ctx.fillStyle = handleGrad;\n        ctx.fill();\n        ctx.lineWidth = 1;\n        ctx.strokeStyle = 'rgba(0,0,0,0.06)';\n        ctx.stroke();\n        ctx.restore();\n    }\n\n    function animateMugRotation() {\n        currentRotation += (targetRotation - currentRotation) * 0.12;\n        drawWhiteMug(currentRotation);\n        requestAnimationFrame(animateMugRotation);\n    }\n\n    function handlePlacementChange() {\n        var mode = document.querySelector('input[name=\"placement_choice\"]:checked').value;\n        activeMode = mode;\n        \n        var secondaryWrapper = document.getElementById('secondary-text-wrapper');\n        var primaryLabel = document.getElementById('primary-input-label');\n        \n        var boxPrimary = document.getElementById('preview-text-primary');\n        var boxSecondary = document.getElementById('preview-text-secondary');\n        \n        if (mode === \"Front\") {\n            targetRotation = 0; \n            boxPrimary.style.left = \"42%\";\n            boxPrimary.style.width = \"95px\";\n            boxSecondary.style.display = \"none\";\n            secondaryWrapper.style.display = \"none\";\n            primaryLabel.textContent = \"2. Enter Custom Wording:\";\n            basePrice = 7.00;\n        } \n        else if (mode === \"Middle\") {\n            targetRotation = 270; \n            boxPrimary.style.left = \"50%\"; \n            boxPrimary.style.width = \"130px\";\n            boxSecondary.style.display = \"none\";\n            secondaryWrapper.style.display = \"none\";\n            primaryLabel.textContent = \"2. Enter Custom Wording:\";\n            basePrice = 7.00;\n        } \n        else if (mode === \"Rear\") {\n            targetRotation = 180; \n            boxPrimary.style.left = \"58%\";\n            boxPrimary.style.width = \"95px\";\n            boxSecondary.style.display = \"none\";\n            secondaryWrapper.style.display = \"none\";\n            primaryLabel.textContent = \"2. Enter Custom Wording:\";\n            basePrice = 7.00;\n        } \n        else if (mode === \"Both\") {\n            targetRotation = 270; \n            boxPrimary.style.left = \"33%\";\n            boxPrimary.style.width = \"85px\";\n            boxSecondary.style.left = \"67%\";\n            boxSecondary.style.width = \"85px\";\n            boxSecondary.style.display = \"block\";\n            secondaryWrapper.style.display = \"block\";\n            primaryLabel.textContent = \"2. Enter Front Side Wording:\";\n            basePrice = 8.00;\n        }\n        \n        applyDiscountLogic();\n        renderLiveMug();\n    }\n\n    function applyDiscountLogic() {\n        var promoInput = document.getElementById('promo-code-input').value.trim().toUpperCase();\n        var statusMsg = document.getElementById('promo-status-msg');\n        var priceIndicator = document.getElementById('price-tag');\n        \n        var calculatedPrice = basePrice;\n        activePromoName = \"\";\n\n        if (promoInput === \"\") {\n            statusMsg.textContent = \"\";\n        } \n        else if (promoInput === \"ASTON\") {\n            calculatedPrice = basePrice * 0.90; \n            statusMsg.textContent = \"\u2713 Code Applied: 10% ASTON Discount!\";\n            statusMsg.style.color = \"#10b981\";\n            activePromoName = \"ASTON\";\n        } \n        else {\n            statusMsg.textContent = \"\u2717 Invalid discount code.\";\n            statusMsg.style.color = \"#ef4444\";\n        }\n\n        currentPriceStr = calculatedPrice.toFixed(2);\n        priceIndicator.textContent = currentPriceStr;\n    }\n\n    function renderLiveMug() {\n        var mainText = document.getElementById('text-main').value.trim();\n        var altText = document.getElementById('text-alt').value.trim();\n        var fontSel = document.getElementById('font-style-picker').value;\n        var colorSel = document.querySelector('input[name=\"color_picker\"]:checked').value;\n        \n        var boxPrimary = document.getElementById('preview-text-primary');\n        var boxSecondary = document.getElementById('preview-text-secondary');\n        \n        if (activeMode === \"Front\") {\n            boxPrimary.textContent = mainText ? mainText : \"Front Text Here\";\n        } else if (activeMode === \"Middle\") {\n            boxPrimary.textContent = mainText ? mainText : \"Middle Text Here\";\n        } else if (activeMode === \"Rear\") {\n            boxPrimary.textContent = mainText ? mainText : \"Back Text Here\";\n        } else if (activeMode === \"Both\") {\n            boxPrimary.textContent = mainText ? mainText : \"Front Text Here\";\n            boxSecondary.textContent = altText ? altText : \"Back Text Here\";\n        }\n        \n        var cleanColorClass = colorSel.replace(\" \", \"-\");\n        \n        boxPrimary.className = \"mug-text-layer f-\" + fontSel + \" c-\" + cleanColorClass;\n        boxSecondary.className = \"mug-text-layer f-\" + fontSel + \" c-\" + cleanColorClass;\n    }\n\n    function initMugCanvas() {\n        renderLiveMug();\n    }\n\n    function submitMugCheckoutData() {\n        var finalMode = document.querySelector('input[name=\"placement_choice\"]:checked').value;\n        var valMain = document.getElementById('text-main').value.trim();\n        var valAlt = document.getElementById('text-alt').value.trim();\n        var valFnt = document.getElementById('font-style-picker').value;\n        var valClr = document.querySelector('input[name=\"color_picker\"]:checked').value;\n        var valDate = document.getElementById('pickup-date').value;\n        var valTime = document.getElementById('pickup-time').value;\n\n        if(!valMain) { alert('Please enter your custom text choices.'); return; }\n        if(finalMode === \"Both\" && !valAlt) { alert('Please enter text for the back side.'); return; }\n        if(!valDate || !valTime) { alert('Please select a collection date and break time slot.'); return; }\n\n        var targetedRGBString = rgbColorMap[valClr];\n\n        \/\/ Package all selection variables into a concise readable string for your transaction logs\n        var compiledDataPayload = \"Pos: \" + finalMode + \" | Text1: \" + valMain;\n        if(finalMode === \"Both\") {\n            compiledDataPayload += \" | Text2: \" + valAlt;\n        }\n        compiledDataPayload += \" | Font: \" + valFnt + \" | Color: \" + valClr + \" (\" + targetedRGBString + \") | Slot: \" + valDate + \" @ \" + valTime;\n        \n        if (activePromoName !== \"\") {\n            compiledDataPayload += \" | Promo: \" + activePromoName;\n        }\n\n        \/\/ Dynamically assign parameters into our standard hidden form fields\n        document.getElementById('paypal-amount').value = currentPriceStr;\n        document.getElementById('paypal-details').value = compiledDataPayload;\n\n        \/\/ Auto-submit the standard form to open up PayPal directly\n        document.getElementById('paypal-form').submit();\n    }\n<\/script>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Use promo code ASTON for a 10% discount.<\/p>\n\n\n<div class=\"carousel-slider-outer carousel-slider-outer-image-carousel carousel-slider-outer-408\" style=\"--carousel-slider-nav-color:#f1f1f1;--carousel-slider-active-nav-color:#00d1b2;--carousel-slider-arrow-size:48px;--carousel-slider-bullet-size:10px\">\n<div id=\"&#039;id-408\" class=\"carousel-slider carousel-slider-408 arrows-visibility-hover dots-visibility-never arrows-outside dots-center dots-circle owl-carousel\" data-slide-type=\"image-carousel\" data-owl-settings='{\"nav\":true,\"dots\":false,\"slideBy\":1,\"stagePadding\":0,\"margin\":10,\"loop\":true,\"lazyLoad\":false,\"autoplay\":true,\"autoplayTimeout\":5000,\"autoplaySpeed\":500,\"autoplayHoverPause\":true,\"autoWidth\":false,\"responsive\":{\"300\":{\"items\":1},\"576\":{\"items\":2},\"768\":{\"items\":2},\"1024\":{\"items\":3},\"1280\":{\"items\":4},\"1536\":{\"items\":5}}}'>\n<div class=\"carousel-slider__item\">\n\t<img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.mycustommug.co.uk\/custom\/wp-content\/uploads\/2026\/06\/20260514_2028351-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a><\/div>\n\n<div class=\"carousel-slider__item\">\n\t<img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.mycustommug.co.uk\/custom\/wp-content\/uploads\/2026\/06\/20260514_2028401-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a><\/div>\n\n<div class=\"carousel-slider__item\">\n\t<img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.mycustommug.co.uk\/custom\/wp-content\/uploads\/2026\/06\/20260522_14140711-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a><\/div>\n\n<div class=\"carousel-slider__item\">\n\t<img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.mycustommug.co.uk\/custom\/wp-content\/uploads\/2026\/06\/20260526_1930151-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a><\/div>\n\n<div class=\"carousel-slider__item\">\n\t<img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.mycustommug.co.uk\/custom\/wp-content\/uploads\/2026\/06\/20260530_16053211-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a><\/div>\n\n<div class=\"carousel-slider__item\">\n\t<img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.mycustommug.co.uk\/custom\/wp-content\/uploads\/2026\/06\/20260601_215402-removebg-preview-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a><\/div>\n\n<\/div><!-- .carousel-slider-408 -->\n<\/div><!-- .carousel-slider-outer-408 -->\n\n","protected":false},"excerpt":{"rendered":"<p>Front Text Here Back Text Here Customise Your 11oz Mug Configure your design and schedule a collection slot below. Premium Product Details: Mug Quality: Classic white 11oz ceramic mug with a comfortable large handle. Durability: Fully dishwasher safe with a high-durability permanent print that will not fade or wash off. Gifting &amp; Packaging: Comes safely<a class=\"more-link\" href=\"https:\/\/www.mycustommug.co.uk\/custom\/custom-text-mug\/\">Continue reading <span class=\"screen-reader-text\">&#8220;Custom Text Mug&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.mycustommug.co.uk\/custom\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mycustommug.co.uk\/custom\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mycustommug.co.uk\/custom\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mycustommug.co.uk\/custom\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mycustommug.co.uk\/custom\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":12,"href":"https:\/\/www.mycustommug.co.uk\/custom\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":416,"href":"https:\/\/www.mycustommug.co.uk\/custom\/wp-json\/wp\/v2\/pages\/21\/revisions\/416"}],"wp:attachment":[{"href":"https:\/\/www.mycustommug.co.uk\/custom\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}