correcciones de codigo en condicionales de desplegado de productos, aplicacion de condicionales ternarios para solucionar errores de codigo

Author: EdsCodes

js/carrito.js

@@ -27,15 +27,15 @@ const agregarProdCarrito = () => {
     const carrito = obtenerCarritoLS();
     carrito.push(producto);
     guardarCarritoLS(carrito);
-    renderBotonCarrito();
+    desplegarBotonCarrito();
 }
 
 const eliminarProductoCarrito = (id) => {
     const carrito = obtenerCarritoLS();
     const carritoActualizado = carrito.filter(item => item.id !== id);
     guardarCarritoLS(carritoActualizado);
-    renderCarrito();
-    renderBotonCarrito();
+    desplegarGraficosCarrito();
+    desplegarBotonCarrito();
     Swal.fire({
         position:"center",
         icon: "error",
@@ -69,8 +69,8 @@ const eliminarCarrito = () => {
                 icon: "success",
             });
         } else {
-            renderCarrito();
-            renderBotonCarrito();
+            desplegarGraficosCarrito();
+            desplegarBotonCarrito();
             Swal.fire({
                 title: "Guardado!",
                 text: "Estas a un solo paso de tener tus productos favoritos!",
@@ -80,7 +80,7 @@ const eliminarCarrito = () => {
     });
 }
 
-const renderBotonCarrito = () => {
+const desplegarBotonCarrito = () => {
     document.getElementById("totalCarrito").innerHTML = cantTotalProductos();
 }
 
@@ -90,7 +90,7 @@ const cantTotalProductos = () => {
 }
 
 
-function renderCarrito() {
+function desplegarGraficosCarrito() {
     const carrito = obtenerCarritoLS();
     let contenido = "";
 
@@ -106,7 +106,7 @@ function renderCarrito() {
                 <div class="columnaIzqCarrito col-sm-6 col-md-4 col-lg-4" id="ProductosCarrito">
                     <div class="itemCarrito">
                         <div class="ImgProducto_carrito">
-                            <img src="${producto.imagenUrl1}" alt="${producto.textoProducto}">
+                            <img src=".${producto.imagenUrl1}" alt="${producto.textoProducto}">
                         </div>
                         <div class="AccionProdCar">    
                             <h4>${producto.textoProducto}</h4>
@@ -127,7 +127,7 @@ function renderCarrito() {
                     <p class="total_articulovta">Sub Total: $${sumaTotalProductos()}</p>
                     <label for="Codigo de descuento:"></label>
                     <input class="codigoDescuento" type="any" name="codigoDescuento" id="codigoDescuento" placeholder="    Codigo Descuento">
-                    <button title="Validar codigo" onclick="renderCarrito()">Validar código</button>
+                    <button title="Validar codigo" onclick="desplegarGraficosCarrito()">Validar código</button>
                 </div>
                 <div class="campoCodDescuento">
                     <p class="total_articulovta" id="vrTotalProductos">Total: $${validarCodigoProm()}</p>
@@ -158,9 +158,7 @@ function renderCarrito() {
         contenido = `<h1 class="text-center" style="margin: 230px 0 230px 0">Tu carrito de compras se encuentra vacío!</h1>`;
     }
     let contenidoCarrito = document.getElementById("contenidoGralCarrito") 
-    if (contenidoCarrito) {
-        contenidoCarrito.innerHTML = contenido;
-    }
+    contenidoCarrito? contenidoCarrito.innerHTML = contenido: null;
 }
 
 let codigoDescuentoAplicado = false;
@@ -239,5 +237,5 @@ const finalizarCompra = () => {
     });
 }
 
-renderCarrito();
-renderBotonCarrito();
+desplegarGraficosCarrito();
+desplegarBotonCarrito();

js/detalleFiltrados.js

@@ -8,7 +8,7 @@ function generarHTMLProductoDetalle(producto) {
     const precioConAumento = Math.round(producto.precio * 1.10);
     return `
         <div class="card cardProdsFilt col-md-4" style="width: 10rem; font-size: 10px;">
-            <img src="${producto.imagenUrl1}" class="card-img-top" alt="${producto.textoProducto}">
+            <img src=".${producto.imagenUrl1}" class="card-img-top" alt="${producto.textoProducto}">
             <div class="card-body">
                 <h5 class="card-title">${producto.textoProducto}</h5>
                 <h6>${producto.descuento}</h6>
@@ -27,5 +27,6 @@ function generarHTMLProductoDetalle(producto) {
 
 mostrarProdsFilt.forEach(producto => {
     const productoHTML = generarHTMLProductoDetalle(producto); 
-    document.getElementById('prodsFiltrados').innerHTML += productoHTML;
+    let contenidoDetallefiltrados = document.getElementById('prodsFiltrados');
+    contenidoDetallefiltrados ? contenidoDetallefiltrados.innerHTML += productoHTML : null;
 });

js/detalleProducto.js

@@ -33,12 +33,12 @@ function renderProducto() {
             <div class="columnaIzqCompras col-sm-12 col-md-12 col-lg-6">
                 <div class="imgs_vta">
                     <div class="grupoImgsA">
-                        <img src="${producto.imagenUrl1}" alt="foto 1 articulo seleccionado"> 
-                        <img src="${producto.imagenUrl2}" alt="foto 2 articulo seleccionado"> 
+                        <img src=".${producto.imagenUrl1}" alt="foto 1 articulo seleccionado"> 
+                        <img src=".${producto.imagenUrl2}" alt="foto 2 articulo seleccionado"> 
                     </div>
                     <div class="grupoImgsB">
-                        <img src="${producto.imagenUrl3}" alt="foto 3 articulo seleccionado"> 
-                        <img src="${producto.imagenUrl4}" alt="foto 4 articulo seleccionado">
+                        <img src=".${producto.imagenUrl3}" alt="foto 3 articulo seleccionado"> 
+                        <img src=".${producto.imagenUrl4}" alt="foto 4 articulo seleccionado">
                     </div>
                 </div>
                 <div class="botones_vta">