{"product_id":"custom-musallah","title":"CUSTOM MUSALLAH","description":"\u003c!-- FIXED MUSALLAH CUSTOMIZER (CLEAN + WORKING) --\u003e\n\n\u003cdiv style=\"max-width:1000px;margin:auto;font-family:'Segoe UI',sans-serif;background:#0f172a;padding:30px;border-radius:10px;color:white;\"\u003e\n\n  \u003ch2 style=\"text-align:center;color:#d4af37;margin-bottom:20px;\"\u003eCustomize Your Musallah\u003c\/h2\u003e\n\n  \u003clabel style=\"color:#d4af37;\"\u003eName:\u003c\/label\u003e\n  \u003cinput type=\"text\" id=\"nameInput\" style=\"width:100%;padding:12px;margin-bottom:10px;border-radius:6px;\"\u003e\n\n  \u003clabel style=\"color:#d4af37;\"\u003eName Position:\u003c\/label\u003e\n  \u003cselect id=\"namePosition\" style=\"width:100%;padding:10px;margin-bottom:15px;\"\u003e\n    \u003coption value=\"top\"\u003eTop\u003c\/option\u003e\n    \u003coption value=\"center\"\u003eCenter\u003c\/option\u003e\n    \u003coption value=\"bottom\"\u003eBottom\u003c\/option\u003e\n  \u003c\/select\u003e\n\n  \u003clabel style=\"color:#d4af37;\"\u003eUpload Image:\u003c\/label\u003e\n  \u003cinput type=\"file\" id=\"imageInput\" accept=\"image\/*\" style=\"margin-bottom:10px;\"\u003e\n\n  \u003clabel style=\"color:#d4af37;\"\u003eImage Position:\u003c\/label\u003e\n  \u003cselect id=\"imagePosition\" style=\"width:100%;padding:10px;margin-bottom:15px;\"\u003e\n    \u003coption value=\"top-left\"\u003eTop Left\u003c\/option\u003e\n    \u003coption value=\"top-right\"\u003eTop Right\u003c\/option\u003e\n    \u003coption value=\"bottom-left\"\u003eBottom Left\u003c\/option\u003e\n    \u003coption value=\"bottom-right\"\u003eBottom Right\u003c\/option\u003e\n    \u003coption value=\"center\"\u003eCenter\u003c\/option\u003e\n  \u003c\/select\u003e\n\n  \u003clabel style=\"color:#d4af37;\"\u003eText Color:\u003c\/label\u003e\n  \u003cinput type=\"color\" id=\"colorInput\" value=\"#d4af37\" style=\"width:100%;margin-bottom:15px;height:40px;\"\u003e\n\n  \u003clabel style=\"color:#d4af37;\"\u003eMusallah Color:\u003c\/label\u003e\n  \u003cselect id=\"musallahColor\" style=\"width:100%;padding:10px;margin-bottom:15px;\"\u003e\n    \u003coption value=\"#0f172a\"\u003eJet Black\u003c\/option\u003e\n    \u003coption value=\"#1e3a8a\"\u003eRoyal Blue\u003c\/option\u003e\n    \u003coption value=\"#065f46\"\u003eEmerald Green\u003c\/option\u003e\n    \u003coption value=\"#7c2d12\"\u003eRich Brown\u003c\/option\u003e\n    \u003coption value=\"#831843\"\u003eRoyal Maroon\u003c\/option\u003e\n    \u003coption value=\"#d4af37\"\u003eLuxury Gold\u003c\/option\u003e\n  \u003c\/select\u003e\n\n  \u003clabel style=\"color:#d4af37;\"\u003ePattern:\u003c\/label\u003e\n  \u003cselect id=\"patternSelect\" style=\"width:100%;padding:10px;margin-bottom:15px;\"\u003e\n    \u003coption value=\"none\"\u003eNone\u003c\/option\u003e\n    \u003coption value=\"lines\"\u003eLines\u003c\/option\u003e\n    \u003coption value=\"dots\"\u003eDots\u003c\/option\u003e\n    \u003coption value=\"grid\"\u003eGrid\u003c\/option\u003e\n  \u003c\/select\u003e\n\n  \u003clabel style=\"color:#d4af37;\"\u003eFoam Underlay:\u003c\/label\u003e\n  \u003cselect id=\"foamOption\" style=\"width:100%;padding:10px;margin-bottom:20px;\"\u003e\n    \u003coption value=\"No\"\u003eNo\u003c\/option\u003e\n    \u003coption value=\"Yes\"\u003eYes\u003c\/option\u003e\n  \u003c\/select\u003e\n\n  \u003ccanvas id=\"previewCanvas\" width=\"400\" height=\"600\" style=\"border:2px solid #d4af37;width:100%;border-radius:10px;\"\u003e\u003c\/canvas\u003e\n\n  \u003cdiv style=\"margin-top:20px;text-align:center;\"\u003e\n    \u003cbutton onclick=\"downloadPDF()\" style=\"padding:12px 25px;background:#d4af37;color:black;border:none;border-radius:6px;\"\u003eDownload PDF\u003c\/button\u003e\n    \u003cbutton onclick=\"addToCart()\" style=\"padding:12px 25px;background:green;color:white;border:none;border-radius:6px;\"\u003eAdd to Cart\u003c\/button\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"\u003e\u003c\/script\u003e\n\n\u003cscript\u003e\nconst canvas = document.getElementById('previewCanvas');\nconst ctx = canvas.getContext('2d');\n\nconst nameInput = document.getElementById('nameInput');\nconst namePosition = document.getElementById('namePosition');\nconst imageInput = document.getElementById('imageInput');\nconst imagePosition = document.getElementById('imagePosition');\nconst colorInput = document.getElementById('colorInput');\nconst musallahColor = document.getElementById('musallahColor');\nconst patternSelect = document.getElementById('patternSelect');\nconst foamOption = document.getElementById('foamOption');\n\nlet uploadedImage = null;\n\nfunction getNameY() {\n  if (namePosition.value === 'top') return 80;\n  if (namePosition.value === 'center') return 300;\n  if (namePosition.value === 'bottom') return 550;\n}\n\nfunction getImageCoords() {\n  switch(imagePosition.value) {\n    case 'top-left': return [20, 20];\n    case 'top-right': return [280, 20];\n    case 'bottom-left': return [20, 450];\n    case 'bottom-right': return [280, 450];\n    case 'center': return [150, 300];\n  }\n}\n\nfunction drawCanvas() {\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n  ctx.fillStyle = musallahColor.value;\n  ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n  ctx.fillStyle = colorInput.value;\n  ctx.font = '28px serif';\n  ctx.textAlign = 'center';\n  ctx.fillText(nameInput.value, canvas.width \/ 2, getNameY());\n\n  if (uploadedImage) {\n    const [x, y] = getImageCoords();\n    ctx.drawImage(uploadedImage, x, y, 100, 100);\n  }\n}\n\n[nameInput, namePosition, imagePosition, colorInput, musallahColor, patternSelect, foamOption].forEach(el =\u003e {\n  el.addEventListener('input', drawCanvas);\n});\n\nimageInput.addEventListener('change', function(e) {\n  const file = e.target.files[0];\n  if (!file) return;\n\n  const reader = new FileReader();\n  reader.onload = function(event) {\n    const img = new Image();\n    img.onload = function() {\n      uploadedImage = img;\n      drawCanvas();\n    }\n    img.src = event.target.result;\n  }\n  reader.readAsDataURL(file);\n});\n\nfunction downloadPDF() {\n  const { jsPDF } = window.jspdf;\n  const pdf = new jsPDF();\n  const imgData = canvas.toDataURL('image\/png');\n  pdf.addImage(imgData, 'PNG', 10, 10, 180, 260);\n  pdf.save('musallah-design.pdf');\n}\n\nconst VARIANT_ID = 1234567890;\n\nfunction addToCart() {\n  fetch('\/cart\/add.js', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application\/json' },\n    body: JSON.stringify({\n      items: [{\n        id: VARIANT_ID,\n        quantity: 1,\n        properties: {\n          \"Name\": nameInput.value,\n          \"Name Position\": namePosition.value,\n          \"Image Position\": imagePosition.value,\n          \"Musallah Color\": musallahColor.value,\n          \"Pattern\": patternSelect.value,\n          \"Foam Underlay\": foamOption.value\n        }\n      }]\n    })\n  })\n  .then(() =\u003e alert('Added to cart!'));\n}\n\ndrawCanvas();\n\u003c\/script\u003e\n","brand":"Musallah.co.za","offers":[{"title":"45678912345","offer_id":47290448707778,"sku":null,"price":100.0,"currency_code":"ZAR","in_stock":true}],"url":"https:\/\/www.musallah.co.za\/products\/custom-musallah","provider":"Musallah.co.za","version":"1.0","type":"link"}