App Bsale (Perú) - Implementación Tema Empire

<!-- App Bsale (Perú) -->
<div class="section_billing-parent"> <p class="field__title">¿NECESITAS BOLETA O FACTURA?</p><div class="content_cb"> <input class="input-radio" name="checkout_billing_option" id="checkout_ticket_option" type="radio" checked> <label style="display: inline;" for="checkout_ticket_option"> <b>Boleta</b> </label> <input class="input-radio" name="checkout_billing_option" id="checkout_bill_option" type="radio"> <label style="display: inline;" for="checkout_bill_option"> <b>Factura</b> </label> </div><div id="section__billing-form"> <p class="field__subtitle">Completa todos los campos a continuación:</p><div class="field__input-wrapper"> <label for="cart_ruc_lc">RUC:</label> <div class="field__input-editable" id="cart_ruc_lc" name="cart_ruc_lc" contenteditable="true" data-maxlength="12"> </div></div><p class="field__input-error" id="error_checkout_ruc"></p><div class="field__input-wrapper"> <label for="cart_razon_social_lc">Razón social:</label> <div class="field__input-editable" id="cart_razon_social_lc" name="cart_razon_social_lc" contenteditable="true" data-maxlength="80"> </div></div><p class="field__input-error" id="error_checkout_razon_social"></p><div class="field__input-wrapper"> <label for="cart_provincia_lc">Provincia:</label> <div class="field__input-editable" id="cart_provincia_lc" name="cart_provincia_lc" contenteditable="true" data-maxlength="60"> </div></div><p class="field__input-error" id="error_checkout_provincia"></p><div class="field__input-wrapper"> <label for="cart_distrito_lc">Distrito:</label> <div class="field__input-editable" id="cart_distrito_lc" name="cart_distrito_lc" contenteditable="true" data-maxlength="60"> </div></div><p class="field__input-error" id="error_checkout_distrito"></p><div class="field__input-wrapper"> <label for="cart_direccion_fiscal_lc">Dirección fiscal:</label> <div class="field__input-editable" id="cart_direccion_fiscal_lc" name="cart_direccion_fiscal_lc" contenteditable="true" data-maxlength="100"> </div></div><p class="field__input-error" id="error_checkout_direccion_fiscal"></p><div class="field__input-wrapper"> <label for="cart_telefono_lc">Teléfono (opcional):</label> <div class="field__input-editable" id="cart_telefono_lc" name="cart_telefono_lc" contenteditable="true" data-maxlength="12"> </div></div><p class="field__input-error" id="error_checkout_telefono"></p><p class="field__legend">Todos los campos son requeridos excepto el teléfono.</p></div></div>
<style>.section_billing-parent{margin: 20px 0px 20px 0px;; text-align: right; align-items: right;}.content_cb{margin-bottom: 10px; display: flex; justify-content: right;}.field__input-wrapper{display: block; text-align: left; justify-content: right; margin-top: 10px; margin-bottom: 10px;}.field__input-editable{display: block !important; border: 1px solid #ccc; margin: 0px; padding: 5px; height: 36px; width: 100%; font-family: inherit; font-size: inherit;}.field__input-error{display: 'none'; font-size: 14px; margin: 0px 0px 10px; color: red;}.field__label{width: 200px;}.field__legend{font-size: 14px; font-weight: bold; color: red;}.field__title{font-size: 18px; font-weight: bold; color: black;}.field__subtitle{font-size: 15px; font-weight: normal; color: black;}/***/ .subtotal{background-color: #f2f2f2; padding: 21px;}.input-radio{position: absolute; opacity: 0; display: none;}.input-radio+label:before{content: ""; margin-right: 10px; display: inline-block; vertical-align: text-top; width: 20px; height: 20px; background: #fff; position: relative; top: 0px; border: 1px solid rgb(209, 209, 209); border-radius: 4px;}.input-radio:checked+label:after{content: ""; position: absolute; left: 15px; top: 44%; background: white; width: 2px; height: 2px; box-shadow: 2px 0 #fff, 4px 0 #fff, 4px -2px #fff, 4px -4px #fff, 4px -6px #fff, 4px -8px #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg);}.input-radio+label{position: relative; cursor: pointer; padding: 7px 10px 10px 10px;}.input-radio:checked+label:before{background: #9aced2; background-image: initial; background-position-x: initial; background-position-y: initial; background-size: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color:{{settings.btn_color}};}</style>
<script>document.getElementById('section__billing-form').style.display='none'; document.getElementById('checkout_ticket_option').checked=true; document.getElementById('checkout_bill_option').checked=false; document.getElementById('checkout_ticket_option').addEventListener('change', (e)=>{ocultarCamposBoletaLC(e.target.checked);}); document.getElementById('checkout_bill_option').addEventListener('change', (e)=>{ocultarCamposFacturaLC(e.target.checked);}); document.getElementById('cart_ruc_lc').addEventListener('blur', (e)=>{actualizarAtributosLC(e);}); document.getElementById('cart_ruc_lc').addEventListener('input', (e)=>{controlarLargoCaracteresLC(e.target); formatoRucLC(e.target.innerText, e.target); moverCursorAlFinalLC(e.target);}); document.getElementById('cart_razon_social_lc').addEventListener('blur', (e)=>{actualizarAtributosLC(e);}); document.getElementById('cart_razon_social_lc').addEventListener('input', (e)=>{controlarLargoCaracteresLC(e.target); moverCursorAlFinalLC(e.target);}); document.getElementById('cart_provincia_lc').addEventListener('blur', (e)=>{actualizarAtributosLC(e);}); document.getElementById('cart_provincia_lc').addEventListener('input', (e)=>{controlarLargoCaracteresLC(e.target); moverCursorAlFinalLC(e.target);}); document.getElementById('cart_distrito_lc').addEventListener('blur', (e)=>{actualizarAtributosLC(e);}); document.getElementById('cart_distrito_lc').addEventListener('input', (e)=>{controlarLargoCaracteresLC(e.target); moverCursorAlFinalLC(e.target);}); document.getElementById('cart_direccion_fiscal_lc').addEventListener('blur', (e)=>{actualizarAtributosLC(e);}); document.getElementById('cart_direccion_fiscal_lc').addEventListener('input', (e)=>{controlarLargoCaracteresLC(e.target); moverCursorAlFinalLC(e.target);}); document.getElementById('cart_telefono_lc').addEventListener('blur', (e)=>{actualizarAtributosLC(e);}); document.getElementById('cart_telefono_lc').addEventListener('input', (e)=>{controlarLargoCaracteresLC(e.target); moverCursorAlFinalLC(e.target);}); if (document.getElementsByName("checkout")){[...document.getElementsByName("checkout")].map((button)=>{button.addEventListener('click', async (e)=>{actualizarAtributosLC(e); validarCamposLC(e);});});}; const esperarLC=(ms)=> new Promise(resolve=> setTimeout(resolve, ms)); const ocultarCamposBoletaLC=(checked)=>{if (checked){document.getElementById('section__billing-form').style.display='none'; document.getElementById('cart_ruc_lc').required=false; document.getElementById('cart_razon_social_lc').required=false; document.getElementById('cart_provincia_lc').required=false; document.getElementById('cart_distrito_lc').required=false; document.getElementById('cart_direccion_fiscal_lc').required=false; document.getElementById('cart_telefono_lc').required=false;}}; const ocultarCamposFacturaLC=(checked)=>{if (checked){document.getElementById('section__billing-form').style.display='block'; document.getElementById('cart_ruc_lc').required=true; document.getElementById('cart_razon_social_lc').required=true; document.getElementById('cart_provincia_lc').required=true; document.getElementById('cart_distrito_lc').required=true; document.getElementById('cart_direccion_fiscal_lc').required=true; document.getElementById('cart_telefono_lc').required=false;}}; const controlarLargoCaracteresLC=(element)=>{const maxLength=parseInt(element.dataset.maxlength, 10); if (element.innerText.trim().length > maxLength){/* Si excede el límite, recortar el texto */ element.innerText=element.innerText.slice(0, maxLength);}}; const moverCursorAlFinalLC=(element)=>{const range=document.createRange(); const selection=window.getSelection(); range.selectNodeContents(element); range.collapse(false); selection.removeAllRanges(); selection.addRange(range);}; const formatoRucLC=(value, input)=>{if (input.innerText.trim().length > 9){let tmp=value.split('-').join('').split('.').join(''), ruc=tmp.substring(0, tmp.length - 1); input.innerText=(ruc.trim(ruc)=='') ? '' : ruc + '-' + tmp.charAt(tmp.length - 1);}}; const actualizarAtributosLC=async (e)=>{let data={}; if (document.getElementById('checkout_bill_option').checked===true){data={attributes:{'tipo_documento': 'FACTURA', 'ruc': document.getElementById('cart_ruc_lc').innerText, 'razon_social': document.getElementById('cart_razon_social_lc').innerText, 'provincia': document.getElementById('cart_provincia_lc').innerText, 'distrito': document.getElementById('cart_distrito_lc').innerText, 'direccion_fiscal': document.getElementById('cart_direccion_fiscal_lc').innerText, 'telefono': document.getElementById('cart_telefono_lc').innerText}};}else{data={attributes:{'tipo_documento': 'BOLETA', 'ruc': '', 'razon_social': '', 'provincia': '', 'distrito': '', 'direccion_fiscal': '', 'telefono': ''}};}try{const response=await fetch(window.Shopify.routes.root + 'cart/update.js',{method: 'POST', headers:{'Content-Type': 'application/json'}, body: JSON.stringify(data)}); const result=await response.json(); console.log(result); await esperarLC(500);}catch (error){console.error(error);}}; const validarCamposLC=async (e)=>{try{console.log('LC: Validar formulario de facturación'); if (document.getElementById('checkout_bill_option').checked){let isError=false; document.getElementById('error_checkout_ruc').style.display='none'; document.getElementById('error_checkout_razon_social').style.display='none'; document.getElementById('error_checkout_provincia').style.display='none'; document.getElementById('error_checkout_distrito').style.display='none'; document.getElementById('error_checkout_direccion_fiscal').style.display='none'; if (document.getElementById('cart_ruc_lc').innerText.trim()===''){isError=true; document.getElementById('error_checkout_ruc').innerHTML='Introduce un RUC'; document.getElementById('error_checkout_ruc').style.display='block';}else if (!validarRucLC(document.getElementById('cart_ruc_lc').innerText.trim())){isError=true; document.getElementById('error_checkout_ruc').innerHTML='Introduce un RUC válido'; document.getElementById('error_checkout_ruc').style.display='block';}else if (document.getElementById('cart_razon_social_lc').innerText.trim()===''){isError=true; document.getElementById('error_checkout_razon_social').innerHTML='Introduce una razón social'; document.getElementById('error_checkout_razon_social').style.display='block';}else if (document.getElementById('cart_provincia_lc').innerText.trim()===''){isError=true; document.getElementById('error_checkout_provincia').innerHTML='Introduce una provincia'; document.getElementById('error_checkout_provincia').style.display='block';}else if (document.getElementById('cart_distrito_lc').innerText.trim()===''){isError=true; document.getElementById('error_checkout_distrito').innerHTML='Introduce un distrito'; document.getElementById('error_checkout_distrito').style.display='block';}else if (document.getElementById('cart_direccion_fiscal_lc').innerText.trim()===''){isError=true; document.getElementById('error_checkout_direccion_fiscal').innerHTML='Introduce una dirección fiscal'; document.getElementById('error_checkout_direccion_fiscal').style.display='block';}if (isError){e.preventDefault(); return;}await esperarLC(700);console.log('LC: Ir al checkout'); window.location='/checkout';}}catch (error){console.error(error);}}; const validarRucLC=(ruc)=>{/* Eliminar los caracteres que no interesan, sólo números. */ ruc=ruc.replace(/[-.,[\]()\s]+/g,""); /* 11 dígitos y empieza en 10,15,16,17 o 20. */ if (!(ruc >=1e10 && ruc < 11e9 || ruc >=15e9 && ruc < 18e9 || ruc >=2e10 && ruc < 21e9)) return false; let suma=-(ruc%10<2); for (let i=0; i<11; i++, ruc=ruc/10|0) suma +=(ruc % 10) * (i % 7 + (i/7|0) + 1); return suma % 11===0;};</script>
<!-- App Bsale (Perú) -->