{"id":1797,"date":"2024-12-22T01:15:39","date_gmt":"2024-12-22T01:15:39","guid":{"rendered":"https:\/\/pcbmaroc.com\/?page_id=1797"},"modified":"2025-02-04T17:55:19","modified_gmt":"2025-02-04T17:55:19","slug":"online-pcb-pcba-quoting-tool","status":"publish","type":"page","link":"https:\/\/pcbmaroc.com\/fr\/online-pcb-pcba-quoting-tool\/","title":{"rendered":"Outil de devis en ligne pour PCB et PCBA - Fabrication de PCB au Maroc"},"content":{"rendered":"    \n\n\n\n<div class=\"container\">\n  <!-- Left Section -->\n  <div class=\"left\">\n<!-- Price Notice -->\n   <div class=\"card\">\n        <div class=\"alert alert-info\" role=\"alert\">\n  <h5 class=\"alert-heading\">&#9888; Order Processing Notice<\/h5>\n  <p style=\"font-size:14px;\">Please note: Prices are no longer displayed during the order process.\n  <br>Once you submit your order details, we will review your request and send you a personalized quote with the final price.<\/p>\n<\/div>\n<\/div> \n  \n    <!-- First Card -->\n    <div class=\"card\">\n        <div> <h2>PCB Board<\/h2> <\/div>\n\n         <div class=\"form-group row1\">\n        <div class=\"w-30 flex-al-center\"><span class=\"label\">Dimensions<i class=\"fas fa-exclamation-circle icon-exa\" title=\"The width and length of the board\"><\/i><\/span><\/div>\n        <div class=\"input-group w-70\">\n    <input type=\"number\" id=\"dimension1\" value=\"50\" min=\"1\">\n    <span class=\"separator\">*<\/span>\n    <input type=\"number\" id=\"dimension2\" value=\"50\" min=\"1\">\n    <span>mm<\/span>\n  <\/div>\n      <\/div>\n\n        <div class=\"form-group row1\">\n        <div class=\"w-30 flex-al-center\"><span class=\"label\">PCB Qty<i class=\"fas fa-exclamation-circle icon-exa\" title=\"The desired number of pieces of boards\"><\/i><\/span><\/div>\n       <div class=\"w-70\">\n    <select class=\"input_and_select\" id=\"pcbQty\">\n      <option value=\"5\">5<\/option>\n      <option value=\"10\">10<\/option>\n      <option value=\"20\">20<\/option>\n      <option value=\"50\">50<\/option>\n      <option value=\"100\">100<\/option>\n      <option value=\"200\">200<\/option>\n      <option value=\"500\">500<\/option>\n    <\/select>\n  <\/div>\n      <\/div>\n\n      <div class=\"form-group row1\">\n        <div class=\"w-30 flex-al-center\"><span class=\"label\">Layers<i class=\"fas fa-exclamation-circle icon-exa\" title=\"The number of copper layers in the board\"><\/i><\/span><\/div>\n        <div class=\"input-group w-70\">\n             <select class=\"input_and_select\" id=\"pcb_layers\">\n            <option>2<\/option>\n            <option>1<\/option>\n\n          <\/select>\n        <\/div>\n      <\/div>\n\n      <div class=\"form-group row1\">\n        <div class=\"w-30 flex-al-center\"><span class=\"label\">Base material<i class=\"fas fa-exclamation-circle icon-exa\" title=\"Select the desired material\"><\/i><\/span><\/div>\n        <div class=\"button-group w-70\">\n        <button class=\"selectable-button selected\">FR-4<\/button>\n        <button class=\"selectable-button\">Copper<\/button>\n        <button class=\"selectable-button\">Rogers<\/button>\n        <button class=\"selectable-button\">Aluminium<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"form-group row1\">\n        <div class=\"w-30 flex-al-center\"><span class=\"label\">PCB color<i class=\"fas fa-exclamation-circle icon-exa\" title=\"The solder mask color\"><\/i><\/span><\/div>\n        <div class=\"color-group w-70\">\n          <button class=\"colors-card selected\"><div class=\"color green\"><\/div><\/button>\n          <button class=\"colors-card\"><div class=\"color blue\"><\/div><\/button>\n          <button class=\"colors-card\"><div class=\"color purple\"><\/div><\/button>\n          <button class=\"colors-card\"><div class=\"color red\"><\/div><\/button>\n          <button class=\"colors-card\"><div class=\"color black\"><\/div><\/button>\n          <button class=\"colors-card\"><div class=\"color white\"><\/div><\/button>\n        <\/div>\n      <\/div>\n\n       <div class=\"form-group row1\">\n        <div class=\"w-30 flex-al-center\"><span class=\"label\">Other special requests for PCB<i class=\"fas fa-exclamation-circle icon-exa\" title=\"Other special requests for PCB\"><\/i><\/span><\/div>\n        <div class=\"input-group w-70\">\n            <textarea id=\"special_request_pcb\"  style=\"\n                height: 50px;\n                min-height:50px;\n                line-height: 1.8;\n                font-size: 16px;\n                border-radius: 5px\">\n            <\/textarea>\n        <\/div>\n      <\/div>\n\n      <div style=\"margin:20px 0 !important ; border-bottom: 1px solid #dddddd\">\n      <\/div>\n\n      <div class=\"form-group row1\">\n        <div class=\"w-30 flex-al-center\"><span class=\"label\">Gerber file<i class=\"fas fa-exclamation-circle icon-exa\" title=\"this file is needed for producing boards\"><\/i><\/span><\/div>\n        <div class=\"input-group1 w-70\">\n     <input type=\"file\" id=\"gerber_file\" name=\"gerber_file\" accept=\".zip\" required=\"\" lang=\"en\">\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Second Card (similar structure) -->\n    <div class=\"card\">\n      <div style=\"display: flex;justify-content: space-between\">\n        <div> <h2>PCB Assembly<\/h2> <\/div>\n        <div class=\"row1\">\n          <span><\/span>\n          <div class=\"toggle off\" style=\"background-color: #D0D0D0\">\n            <div class=\"toggle-circle\" style=\"background-color: #FFFFFF\"><\/div>\n          <\/div>\n          <div class=\"toggle on\" style=\"background-color: #E7FDF5\">\n            <div class=\"toggle-circle\" style=\"margin-left: auto !important;\"><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"display-condition\">\n\n                    <div class=\"_row\">\n                        <div style=\"width:50%\">\n                            \n                            <div class=\"row1\">\n                              <div class=\"w-70 flex-al-center\"><span class=\"label\">PCB Qty<i class=\"fas fa-exclamation-circle icon-exa\" title=\"The number of PCB board to assemble.\"><\/i><\/span><\/div>\n                              <div class=\"w-30\">\n                                 <select class=\"input_and_select\" id=\"pcbQtyAssembly\">\n                                      <option value=\"5\">5<\/option>\n                                      <option value=\"10\">10<\/option>\n                                      <option value=\"20\">20<\/option>\n                                      <option value=\"50\">50<\/option>\n                                      <option value=\"100\">100<\/option>\n                                      <option value=\"200\">200<\/option>\n                                      <option value=\"500\">500<\/option>\n                                <\/select>\n                              <\/div>\n                            <\/div>\n                            <div class=\"form-group row1\">\n                                <div class=\"w-70 d-flex flex-al-center\">\n                                    <span class=\"label\">Number of Unique Parts<i class=\"fas fa-exclamation-circle icon-exa\" title=\"The variety of components in the BOM.\"><\/i><\/span>\n                                    <\/div>\n                                <div class=\"input-group w-30\">\n                                    <input type=\"number\" id=\"uniqueParts\" class=\"input_and_select\" value=\"0\">\n                                <\/div>\n                            <\/div>\n            \n                            <div class=\"form-group row1\">\n                                    <div class=\"w-70 flex-al-center\">\n                                        <span class=\"label\">Number of SMD Parts\n                                         <i class=\"fas fa-exclamation-circle icon-exa\" title=\"the total number of SMD components.\"><\/i><\/span>\n                                    <\/div>\n                                <div class=\"input-group w-30\">\n                                    <input type=\"number\" id=\"smdParts\" class=\"input_and_select\" value=\"0\">\n                                <\/div>\n                            <\/div>\n            \n                            <div class=\"form-group row1\">\n                                <div class=\"w-70 flex-al-center\"><span class=\"label\">Number of BGA\/QFP Parts <i class=\"fas fa-exclamation-circle icon-exa\" title=\"the total number of ICs thats hame more than 4 pins.\"><\/i><\/span><\/div>\n                                <div class=\"input-group w-30\">\n                                    <input type=\"number\" id=\"bgaParts\" class=\"input_and_select\" value=\"0\">\n                                <\/div>\n                            <\/div>\n            \n                            <div class=\"form-group row1\">\n                                <div class=\"w-70 flex-al-center\"><span class=\"label\">Number of Through-Hole Parts<i class=\"fas fa-exclamation-circle icon-exa\" title=\"the total number of THT components.\"><\/i><\/span><\/div>\n                                <div class=\"input-group w-30\">\n                                    <input type=\"number\" id=\"throughHoleParts\" class=\"input_and_select\" value=\"0\">\n                                <\/div>\n                            <\/div>\n                <\/div>\n                <div style=\"width:50%;border-left: 1px solid #dddddd;\n                     padding-left: 1rem;\">\n                    <div> <h2 style=\"margin-bottom:10px !important\">Exemple<\/h2> <\/div>\n                    <img decoding=\"async\" src=\"https:\/\/pcbmaroc.com\/wp-content\/uploads\/2025\/02\/pcbma-page.png\">\n                    <div> <span class=\"label text-black\">Number of unique parts : 6<\/span> <\/div>\n                    <div> <span class=\"label\">Number of SMD Parts: 3<\/span> <\/div>\n                    <div> <span class=\"label text-menthe\">Number of BGA\/QFP parts : 2<\/span> <\/div>\n                    <div> <span class=\"label text-orange\">Number of Through-Hole parts : 3<\/span> <\/div>\n                    \n                <\/div>\n                        \n                \n                <\/div>\n\n        <div class=\"form-group row1\">\n        <div class=\"w-30 flex-al-center\"><span class=\"label\">Other special request for PCBA<i class=\"fas fa-exclamation-circle icon-exa\" title=\"Other special requests for PCBA.\"><\/i><\/span><\/div>\n        <div class=\"input-group w-70\">\n            <textarea id=special_request_pcba style=\"\n                height: 50px;\n                min-height:50px;\n                line-height: 1.8;\n                font-size: 16px;\n                border-radius: 5px\">\n            <\/textarea>\n        <\/div>\n      <\/div>\n       <div style=\"margin:20px 0 !important ; border-bottom: 1px solid #dddddd\">\n      <\/div>\n\n      <div class=\"form-group row1\">\n        <div class=\"w-30 flex-al-center\"><span class=\"label\">BOM file<i class=\"fas fa-exclamation-circle icon-exa\" title=\"this file is needed for assembling boards.\"><\/i><\/span><\/div>\n        <div class=\"input-group1 w-70\">\n     <input type=\"file\" id=\"bom_file\" name=\"bom_file\" accept=\".zip\" required=\"\" lang=\"en\">\n        <\/div>\n      <\/div>\n\n       <div class=\"form-group row1\">\n        <div class=\"w-30 flex-al-center\">\n            <span class=\"label\">CPL file\n            <i class=\"fas fa-exclamation-circle icon-exa\" title=\"this file is needed for assembling\u00a0boards\"><\/i><\/span>\n            <\/div>\n        <div class=\"input-group1 w-70\">\n     <input type=\"file\" id=\"cpl_file\" name=\"cpl_file\" accept=\".zip\" required=\"\" lang=\"en\">\n        <\/div>\n      <\/div>\n    <\/div>\n    <\/div>\n\n  <\/div>\n\n  <!-- Right Section -->\n  <div class=\"right\" style=\"height:fit-content\">\n    <div class=\"card save-card\">\n      <h2>PCB Price per unit<\/h2>\n      <div class=\"_row\">\n        <span class=\"label\">PCB board<\/span>\n        <span class=\"label\" id=\"price_pcb_board\">--<\/span>\n      <\/div>\n       <div class=\"_row\">\n        <span class=\"label\">Assembly service<\/span>\n        <span class=\"label\" id=\"assemblyPrice\">--<\/span>\n      <\/div>\n      <h2>Shipping Info<\/h2>\n      <div class=\"_row\">\n        <span class=\"label\">Ship to<\/span>\n        <span>\n            <select class=\"input_and_select\" style=\"width:100px !important\" id=\"shipping_to\">\n                <option value=\"Morocco\">Morocco<\/option>\n                <option value=\"Other\">Other<\/option>\n            <\/select>\n        <\/span>\n      <\/div>\n      <div class=\"_row\">\n        <span class=\"label\">Shipping Method<\/span>\n        <span>\n            <select class=\"input_and_select\" style=\"width:100px !important\" id=shipping_moy>\n                <option value=\"Amana\">Amana<\/option>\n                <option value=\"Fed-Ex\">Fed-Ex<\/option>\n            <\/select>\n        <\/span>\n      <\/div>\n      <div style=\"margin:20px 0 !important ; border-bottom: 1px solid #dddddd\">\n      <\/div>\n       <div class=\"_row\">\n        <span class=\"label\">PCB cost<\/span>\n        <span class=\"label\" id=\"price_pcb_boardtotal\">--<\/span>\n      <\/div>\n       <div class=\"_row\">\n        <span class=\"label\">Assembly cost<\/span>\n        <span class=\"label\" id=\"assemblyPricetotal\">--<\/span>\n      <\/div>\n       <div class=\"_row\">\n        <span class=\"label\">Shipping<\/span>\n        <span class=\"label\" id=\"shipping_cost\">--<\/span>\n      <\/div>\n      <div class=\"_row\">\n        <span class=\"label\">Components cost<\/span>\n        <span class=\"label\">--<\/span>\n      <\/div>\n      <div class=\"_row\" style=\"margin-top:25px !important;margin-bottom:0px !important\">\n        <span style=\"font-size: 17px;font-weight: bold;color: black !important;\">Total calculated price<\/span>\n        <span class=\"label\" id=\"total_calculated_price\" style=\"font-size: 20px !important;font-weight: bold !important;color: black !important;\">--<\/span>\n      <\/div>\n              <div style=\"\n            text-align: end;\n        \">\n            <span class=\"label\">Notice: VAT is not included<\/span>\n        <\/div>\n      <button type=\"button\" id=\"add-to-cart-btn\">Request final Price<\/button>\n\n                <div class=\"row1\" style=\"\n                    margin-top: 20px;\n                    margin-bottom: 0px !important;\">\n                        <span class=\"label\">\n                        We will send you the final price after review within 2 business days\n                        <\/span>\n                <\/div>\n                \n            \n    <div id=\"danger-message\" class=\"danger-message\" style=\"display: none;\">Error: Something went wrong!<\/div>\n\n    <\/div>\n\n\n    <div id=\"overlay\" class=\"overlay\" style=\"display: none\">\n        <div class=\"loader\"><\/div>\n    <\/div>\n    \n  \n    \n   \n<\/div>\n<\/div>\n\n<script>\n\n  document.addEventListener('DOMContentLoaded', () => {\n\n\n       \n\n\n\n     \/\/ calculate the Price\n                              const priceTable = {\n                            \"0-10000\": { 5: 6.76, 10: 5.08, 20: 4.2, 50: 2.54, 100: 1.85, 200: 1.62, 500: 1.44 },\n                            \"10000-20000\": { 5: 8.88, 10: 6.9, 20: 5.44, 50: 3.35, 100: 2.65, 200: 2.43, 500: 2.26 },\n                            \"20000-50000\": { 5: 11.96, 10: 10.88, 20: 8.5, 50: 5.51, 100: 4.18, 200: 4.89, 500: 4.52 },\n                          };\n\n                          \/\/ Initialize DOM elements\n                          const qtySelect = document.getElementById(\"pcbQty\");\n                          const dimension1Input = document.getElementById(\"dimension1\");\n                          const dimension2Input = document.getElementById(\"dimension2\");\n                          const pcb_layers = document.getElementById(\"pcb_layers\");\n                          const special_request_pcb = document.getElementById(\"special_request_pcb\");\n                          const gerber_file = document.getElementById(\"gerber_file\");\n\n\n                          const special_request_pcba = document.getElementById(\"special_request_pcba\");\n                          const bom_file = document.getElementById(\"bom_file\");\n                          const cpl_file = document.getElementById(\"cpl_file\");\n\n\n\n\n                          const priceLabelPcbBoard = document.getElementById(\"price_pcb_board\");\n                          const priceLabelPcbBoardtolatl = document.getElementById(\"price_pcb_boardtotal\");\n                          const total_calculated_price = document.getElementById(\"total_calculated_price\");\n\n                          const shipping_moy = document.getElementById(\"shipping_moy\");\n                          const shipping_to = document.getElementById(\"shipping_to\");\n                          let shipping_moy_value = parseInt(50);\n                          const shipping_cost = document.getElementById(\"shipping_cost\");\n\n                          \n                          shipping_moy.addEventListener(\"change\", function() {\n                              console.log('shipping_moy',shipping_moy.value)\n                              if(shipping_moy.value.trim() !== 'Amana' || shipping_to.value.trim() !== 'Morocco' ){\n                              \/\/    total_calculated_price.textContent = (pricePcbBoardtolatl + assemblyPricetotal)?`${(pricePcbBoardtolatl + assemblyPricetotal).toFixed(2)} MAD`:'--';\n                                  total_calculated_price.textContent = '--';\n                                  shipping_cost.textContent = '--';\n                              }else{\n                                  shipping_cost.textContent = '50.00';\n                              \/\/    total_calculated_price.textContent = (pricePcbBoardtolatl + assemblyPricetotal + shipping_moy_value)?`${(pricePcbBoardtolatl + assemblyPricetotal + shipping_moy_value).toFixed(2)} MAD`:'--';\n                                  total_calculated_price.textContent = '--';\n                                }\n                          })\n                          \n                           shipping_to.addEventListener(\"change\", function() {\n                              console.log('shipping_moy',shipping_moy.value)\n                              if(shipping_to.value.trim() !== 'Morocco' || shipping_moy.value.trim() !== 'Amana'){\n                              \/\/    total_calculated_price.textContent = (pricePcbBoardtolatl + assemblyPricetotal)?`${(pricePcbBoardtolatl + assemblyPricetotal).toFixed(2)} MAD`:'--';\n                                  total_calculated_price.textContent = '--';\n                                  shipping_cost.textContent = '--';\n                              }else{\n                                   shipping_cost.textContent = '50.00';\n                              \/\/    total_calculated_price.textContent = (pricePcbBoardtolatl + assemblyPricetotal + shipping_moy_value)?`${(pricePcbBoardtolatl + assemblyPricetotal + shipping_moy_value).toFixed(2)} MAD`:'--';\n                                  total_calculated_price.textContent = '--';\n                              }\n                          })\n\n\n                          let pricePcbBoardtolatl = 0;\n                          let assemblyPricetotal = 0\n\n                          \n\n                          \/**\n                           * Calculate the price based on dimensions and quantity.\n                           *\/\n                          function calculatePrice() {\n                            showLoader();\n\n                            const qty = parseInt(qtySelect.value);\n                            const dim1 = parseInt(dimension1Input.value);\n                            const dim2 = parseInt(dimension2Input.value);\n                            const area = dim1 * dim2;\n\n                            const rangeKey = getRangeKey(area);\n                            const price = priceTable[rangeKey]?.[qty] ?? \"N\/A\";\n\n                            updatePriceDisplay(priceLabelPcbBoard, price,qty);\n                          }\n\n                          \/**\n                           * Get the range key based on the area.\n                           * @param {number} area - Calculated area from dimensions.\n                           * @returns {string|null} - Range key or null if no match.\n                           *\/\n                          function getRangeKey(area) {\n                            if (area <= 10000) return \"0-10000\";\n                            if (area <= 20000) return \"10000-20000\";\n                            if (area <= 50000) return \"20000-50000\";\n                            return null;\n                          }\n\n                          \/**\n                           * Update the price display on the page.\n                           * @param {HTMLElement} priceLabel - The label element to update.\n                           * @param {number|string} price - Calculated price or fallback text.\n                           *\/\n                          function updatePriceDisplay(priceLabel, price,qty) {\n                            priceLabelPcbBoard.textContent = price !== \"N\/A\" ? `${(price * 10).toFixed(2)}` : \"--\";\n                            priceLabelPcbBoardtolatl.textContent = price !== \"N\/A\" ? `${(price* 10 * qty).toFixed(2)}` : \"--\";\n\n                            pricePcbBoardtolatl =  price* 10 * qty;\n\n                          \/\/  total_calculated_price.textContent = (pricePcbBoardtolatl + assemblyPricetotal + shipping_moy_value)?`${(pricePcbBoardtolatl + assemblyPricetotal + shipping_moy_value).toFixed(2)} MAD`:'--';\n                            total_calculated_price.textContent = '--';\n\n                          }\n\n                          \/**\n                           * Show a loading overlay for a short duration.\n                           *\/\n                          function showLoader() {\n                            const overlay = document.getElementById(\"overlay\");\n                            overlay.style.display = \"flex\";\n\n                            setTimeout(() => {\n                              overlay.style.display = \"none\";\n                            }, 250);\n                          }\n                          \n                          \n                          \/\/\n                           const buttonsMaterial = document.querySelectorAll('.selectable-button');\n\n                            buttonsMaterial.forEach(button => {\n                                button.addEventListener('click', function () {\n                    \n                                    buttons.forEach(btn => btn.classList.remove('selected'));\n                    \n                                    this.classList.add('selected');\n                    \n                                    const value = this.textContent.trim();\n                                    base_material = value\n                                    if(base_material == \"FR-4\"){\n                                        calculatePrice();\n                                    }else{\n                                       priceLabelPcbBoard.textContent = \"--\"; \n                                       total_calculated_price.textContent = \"--\";\n                                       priceLabelPcbBoardtolatl.textContent = \"--\";\n                                    }\n                    \n                                });\n                            });\n        \/\/\n\n                          \/\/ Attach event listeners\n                          qtySelect.addEventListener(\"change\", calculatePrice);\n                          dimension1Input.addEventListener(\"input\", calculatePrice);\n                          dimension2Input.addEventListener(\"input\", calculatePrice);\n\n                          \/\/ Initial calculation\n                          calculatePrice();\n      \/\/ end calculate the Price\n\n      \/\/\/\/\n\n                          const discountTable = {\n                        5: 0,\n                        10: 0.1,\n                        20: 0.2,\n                        50: 0.3,\n                        100: 0.4,\n                        200: 0.5,\n                        500: 0.6,\n                    };\n\n                    \/\/ Weights for each part type\n                    const partWeights = {\n                        uniqueParts: 0.5,\n                        smdParts: 0.15,\n                        bgaParts: 0.2,\n                        throughHoleParts: 0.3,\n                    };\n\n                    \/\/ Initialize DOM elements\n                    const uniquePartsInput = document.getElementById(\"uniqueParts\");\n                    const smdPartsInput = document.getElementById(\"smdParts\");\n                    const bgaPartsInput = document.getElementById(\"bgaParts\");\n                    const throughHolePartsInput = document.getElementById(\"throughHoleParts\");\n                    const qtySelectAssembly = document.getElementById(\"pcbQtyAssembly\");\n\n                    const assemblyPriceLabel = document.getElementById(\"assemblyPrice\");\n                    const assemblyPriceLabeltotal = document.getElementById(\"assemblyPricetotal\");\n\n                    \/**\n                     * Calculate the total assembly price.\n                     *\/\n                    function calculateAssemblyPrice() {\n                        showLoader();\n\n                        const uniqueParts = parseFloat(uniquePartsInput.value) || 0;\n                        const smdParts = parseFloat(smdPartsInput.value) || 0;\n                        const bgaParts = parseFloat(bgaPartsInput.value) || 0;\n                        const throughHoleParts = parseFloat(throughHolePartsInput.value) || 0;\n\n                        \/\/ Calculate the base sum\n                        const totalPartsCost =\n                            uniqueParts * partWeights.uniqueParts +\n                            smdParts * partWeights.smdParts +\n                            bgaParts * partWeights.bgaParts +\n                            throughHoleParts * partWeights.throughHoleParts;\n\n                        \/\/ Get the selected quantity\n                        const qty = parseInt(qtySelectAssembly.value);\n\n                        \/\/ Apply the discount\n                        const discount = discountTable[qty] || 0;\n                        const finalPrice = totalPartsCost * (1 - discount);\n\n                        \/\/ Update the display\n                        assemblyPriceLabel.textContent = finalPrice ? `${(finalPrice * 10 ).toFixed(2)}`:\"--\";\n                        assemblyPriceLabeltotal.textContent = finalPrice ? `${(finalPrice * 10 * qty).toFixed(2)}`:\"--\";\n\n                        assemblyPricetotal = finalPrice * 10 * qty\n\n                        console.log('f',shipping_moy.value)\n\n                      \/\/  total_calculated_price.textContent = (pricePcbBoardtolatl + assemblyPricetotal + shipping_moy_value)?`${(pricePcbBoardtolatl + assemblyPricetotal + shipping_moy_value).toFixed(2)} MAD`:'--';\n                        total_calculated_price.textContent = '--';\n                      }\n\n                    \/\/ Attach event listeners to inputs\n                    uniquePartsInput.addEventListener(\"input\", calculateAssemblyPrice);\n                    smdPartsInput.addEventListener(\"input\", calculateAssemblyPrice);\n                    bgaPartsInput.addEventListener(\"input\", calculateAssemblyPrice);\n                    throughHolePartsInput.addEventListener(\"input\", calculateAssemblyPrice);\n                    qtySelectAssembly.addEventListener(\"change\", calculateAssemblyPrice);\n\n                    \/\/ Initial calculation\n                    calculateAssemblyPrice();\n      \/\/\/\n\n\n    \/\/ Get the toggle elements and the display-condition div\n    const toggleOff = document.querySelector('.toggle.off');\n    const toggleOn = document.querySelector('.toggle.on');\n    const displayCondition = document.querySelector('.display-condition');\n\n    \/\/ Check if the elements exist to avoid null errors\n    if (!toggleOff || !toggleOn || !displayCondition) {\n      console.error('Toggle elements or display-condition div not found.');\n      return;\n    }\n\n    \/\/ By default, hide toggle on and display-condition div\n    toggleOn.style.display = 'none';\n    displayCondition.style.display = 'none';\n\n    \/\/ Add event listener to toggle off\n    toggleOff.addEventListener('click', () => {\n      toggleOff.style.display = 'none'; \/\/ Hide toggle off\n      toggleOn.style.display = 'flex'; \/\/ Show toggle on\n      displayCondition.style.display = 'block'; \/\/ Show display-condition\n    });\n\n    \/\/ Add event listener to toggle on\n    toggleOn.addEventListener('click', () => {\n      toggleOn.style.display = 'none'; \/\/ Hide toggle on\n      toggleOff.style.display = 'flex'; \/\/ Show toggle off\n      displayCondition.style.display = 'none'; \/\/ Hide display-condition\n      \n      \/\/ \ud83d\udd3d Clear assembly inputs and recalculate pricing\n      const uniquePartsInput = document.getElementById(\"uniqueParts\");\n      const smdPartsInput = document.getElementById(\"smdParts\");\n      const bgaPartsInput = document.getElementById(\"bgaParts\");\n      const throughHolePartsInput = document.getElementById(\"throughHoleParts\");\n\n      const inputs = [\n        uniquePartsInput,\n        smdPartsInput,\n        bgaPartsInput,\n        throughHolePartsInput,\n      ];\n\n      inputs.forEach(input => {\n        if (!input) return;\n        input.value = \"\";\n        input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        input.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      });\n\n      if (typeof calculateAssemblyPrice === \"function\") {\n        calculateAssemblyPrice();\n      }\n      \n    });\n  });\n\n        \/\/\/\/\/\/\/\n        \n        let base_material = \"FR-4\";\n        let pcb_color = \"green\";\n\n        const buttons = document.querySelectorAll('.selectable-button');\n\n\n        buttons.forEach(button => {\n            button.addEventListener('click', function () {\n\n                buttons.forEach(btn => btn.classList.remove('selected'));\n\n                this.classList.add('selected');\n\n                const value = this.textContent.trim();\n                base_material = value\n\n            });\n        });\n\n        \/\/\/\/\/\/\n\n        \/\/\/\/\/\n        const colors = document.querySelectorAll('.colors-card');\n\n\n        colors.forEach(button => {\n            button.addEventListener('click', function () {\n\n                colors.forEach(btn => btn.classList.remove('selected'));\n\n                this.classList.add('selected');\n\n                 const colorDiv = this.querySelector('.color');\n                const colorClass = Array.from(colorDiv.classList).find(cls =>\n                    cls !== 'color'); \/\/ Get the class other than \"color\"\n\n                pcb_color = colorClass;\n\n            });\n        });\n\n        \/\/\/\/\/\n\n\n  document.getElementById('add-to-cart-btn').addEventListener('click', function () {\n      \n                            const shipping_moy = document.getElementById(\"shipping_moy\");\n                           const shipping_to = document.getElementById(\"shipping_to\");\n      \n       if(shipping_moy.value.trim() !== 'Amana' || shipping_to.value.trim() !== 'Morocco' ){\n           showError('Please contact us for custom shipping options.');\n           return\n       }\n      \n      const setValueOrDefaultNumber = (value) => value !== 0 ? value : '--';\n      const setValueOrDefaultString = (value) => value.trim() !== '' ? value : '--';\n\n\n      \n      \n      \n       \n      \n      const toggleOn = document.querySelector('.toggle.on');\n      let asIsActive = toggleOn.style.display !== 'none';\n      \n      function showError(message) {\n    const dangerMessage = document.getElementById('danger-message');\n    dangerMessage.innerText = message; \/\/ Set the error message\n    dangerMessage.style.display = 'block'; \/\/ Show the message\n\n    \/\/ Hide the message after 3 seconds\n    setTimeout(() => {\n      dangerMessage.style.display = 'none';\n    }, 10000);\n  }\n      \n\n                               \n                                const priceText = document.getElementById(\"total_calculated_price\").textContent.trim();\n                                const price = parseFloat(priceText.replace(\"MAD\", \"\").trim());\n\n\n                          \/\/ Initialize DOM elements\n                          const qtySelect = document.getElementById(\"pcbQty\");\n                          const dimension1Input = document.getElementById(\"dimension1\");\n                          const dimension2Input = document.getElementById(\"dimension2\");\n                          const pcb_layers = document.getElementById(\"pcb_layers\");\n                          const special_request_pcb = document.getElementById(\"special_request_pcb\");\n                          const gerber_file = document.getElementById(\"gerber_file\");\n\n\n                            const uniquePartsInput = document.getElementById(\"uniqueParts\");\n                            const smdPartsInput = document.getElementById(\"smdParts\");\n                            const bgaPartsInput = document.getElementById(\"bgaParts\");\n                            const throughHolePartsInput = document.getElementById(\"throughHoleParts\");\n                            const qtySelectAssembly = document.getElementById(\"pcbQtyAssembly\");\n                            const special_request_pcba = document.getElementById(\"special_request_pcba\");\n                            const bom_file = document.getElementById(\"bom_file\");\n                            const cpl_file = document.getElementById(\"cpl_file\");\n                            \n                            \n                            \n                              const dimension1 = parseFloat(dimension1Input.value);\n                            const dimension2 = parseFloat(dimension2Input.value);\n                \n                        if (!isNaN(dimension1) && !isNaN(dimension2)) {\n                            const product = dimension1 * dimension2;\n                \n                        if (product > 50000) {\n                        const message = `${dimension1} x ${dimension2} = ${product}. The selected dimensions exceed the limit. Please contact us for a custom request.`;\n                        showError(message); \/\/ Replace with your function to display the message.\n                        return\n                        }\n                    }\n      \/\/\n      \n      \/\/\n      \n                     if (base_material !== 'FR-4') {\n                    console.log('base_material', base_material);\n                    showError(\n                        `The selected material \"${base_material}\" is custom. To make your order with it, please contact us for a custom request.`\n                    );\n                    return;\n                }\n\n                                \/\/console.log('dim1 x dim2',,dim2);\n\n\n                            const formData = new FormData();\n                        formData.append('action', 'add_custom_product_to_cart');\n                        formData.append('base_material', base_material);\n                        formData.append('layers', pcb_layers.value);\n                        formData.append('dimensions', `${dimension1Input.value} x ${dimension2Input.value}`);\n                        formData.append('pcb_qty', qtySelect.value); \/\/ Ensure `pcb_qty` input exists\n                        formData.append('pcb_color', pcb_color);\n                        formData.append('special_request_pcb', setValueOrDefaultString(special_request_pcb.value));\n                        \n                        \/\/ File fields\n                        const gerberFile = document.getElementById('gerber_file');\n                        if (gerberFile && gerberFile.files.length > 0) {\n                            formData.append('gerber_file', gerberFile.files[0]);\n                        }else{\n                            showError('Gerber file is required !')\n                            return\n                        }\n                        const bomFile = document.getElementById('bom_file');\n                        if (bomFile && bomFile.files.length > 0) {\n                            formData.append('bom_file', bomFile.files[0]);\n                        }else{\n                            if(asIsActive){\n                              showError('CPL file and BOM file are required !')\n                            return   \n                            }\n                        }\n                        const cplFile = document.getElementById('cpl_file');\n                        if (cplFile && cplFile.files.length > 0) {\n                            formData.append('cpl_file', cplFile.files[0]);\n                        }else{\n                            if(asIsActive){\n                              showError('CPL file and BOM file are required !')\n                            return   \n                            }\n                            \n                        }\n                       \n                        \n                        formData.append('pcb_qty_ass', asIsActive ? qtySelectAssembly.value : '--');\n                        formData.append('uniqueParts', setValueOrDefaultNumber(uniquePartsInput.value));\n                        formData.append('smdParts', setValueOrDefaultNumber(smdPartsInput.value));\n                        formData.append('bgaParts', setValueOrDefaultNumber(bgaPartsInput.value));\n                        formData.append('throughHoleParts', setValueOrDefaultNumber(throughHolePartsInput.value));\n                        formData.append('special_request_pcba', setValueOrDefaultString(special_request_pcba.value));\n                        formData.append('custom_price', price);\n                        \n                        \n        jQuery.ajax({\n        url: 'https:\/\/pcbmaroc.com\/wp-admin\/admin-ajax.php',\n        type: 'POST',\n        data: { action: 'clear_cart_before_add' },\n        success: function () {\n             jQuery.ajax({\n        url: 'https:\/\/pcbmaroc.com\/wp-admin\/admin-ajax.php',\n        type: 'POST',\n        data: formData,\n        processData: false,\n        contentType: false,\n        success: function(response) {\n            if (response.status === 'success') {\n                \/\/ Redirect to the specified link\n                window.location.href = 'https:\/\/pcbmaroc.com\/checkout\/';\n            } else {\n                alert('Error: ' + response.message);\n            }\n        },\n        error: function(xhr, status, error) {\n            console.error('AJAX Error:', error);\n            alert('An error occurred.');\n        }\n    });\n        }\n    });\n\n});\n\n\/\/ load data from home script\n  \n  window.addEventListener(\"DOMContentLoaded\", () => {\n    const params = new URLSearchParams(window.location.search);\n\n    const setAndTrigger = (id, value, eventType = \"input\") => {\n      const el = document.getElementById(id);\n      if (el && value !== null) {\n        el.value = value;\n        el.dispatchEvent(new Event(eventType, { bubbles: true }));\n      }\n    };\n\n    setAndTrigger(\"pcb_layers\", params.get(\"layers\"), \"change\");\n    setAndTrigger(\"dimension1\", params.get(\"width\"), \"input\");\n    setAndTrigger(\"dimension2\", params.get(\"height\"), \"input\");\n    setAndTrigger(\"pcbQty\", params.get(\"quantity\"), \"change\");\n  });\n\n\/\/ enf of load data from home script\n\n<\/script>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1797","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pcbmaroc.com\/fr\/wp-json\/wp\/v2\/pages\/1797","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcbmaroc.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pcbmaroc.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pcbmaroc.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pcbmaroc.com\/fr\/wp-json\/wp\/v2\/comments?post=1797"}],"version-history":[{"count":0,"href":"https:\/\/pcbmaroc.com\/fr\/wp-json\/wp\/v2\/pages\/1797\/revisions"}],"wp:attachment":[{"href":"https:\/\/pcbmaroc.com\/fr\/wp-json\/wp\/v2\/media?parent=1797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}