1

Soy nueva utilizando html, css y javascript y tengo que hacer el front de una tienda virtual. Tengo ese código en HTML para hacer un catalogo de productos. Con CSS lo estilizo para que se muestre asi como en la imagen. Al principio eso funcionaría para mostrar el catalogo. Pero no creo que sea la mejor forma de hacer un catalogo de productos para una tienda virtual, pues debería repetir esta parte del código para cada producto que quiero mostrar

 <div class="produto">
          <img src="images/Novidades/Novidade1.jpg" alt="" class="produto__img">
        <div class="productDescription">
          <h3 class="produto__title">Novidade 1</h3>
          <spam class="produto__price">$90.00</spam>
        </div>
        <a href=""><i class="produto__icon fas fa-cart-plus"></i></a>
      </div>.

Quisiera saber cual es la mejor forma de hacer un catalogo de productos usando solo HTML, CSS y/o javascript, por ejemplo alguna función en javascript o jquery que ayude a agregar las imagenes y la descripcion directamente en el html sin tener que repetir tanto el código y que quede igual al catalogo de la imagen?

Aqui les dejo el codigo que tengo y que hace que el catalogo quede como en la imagen.

<section class="NovidadesSection">
  <main class="mainDestacados">
    <h2>NOVIDADES</h2>
    <section class="containerProdutos">
      <div class="produto">
          <img src="images/Novidades/Novidade1.jpg" alt="" class="produto__img">
        <div class="productDescription">
          <h3 class="produto__title">Novidade 1</h3>
          <spam class="produto__price">$90.00</spam>
        </div>
        <a href=""><i class="produto__icon fas fa-cart-plus"></i></a>
      </div>
      <div class="produto">
          <img src="images/Novidades/Novidade2.jpg" alt="" class="produto__img">
        <div class="productDescription">
          <h3 class="produto__title">Novidade 2</h3>
          <spam class="produto__price">$90.00</spam>
        </div>
        <a href=""><i class="produto__icon fas fa-cart-plus"></i></a>
      </div>
      <div class="produto">
          <img src="images/Novidades/Novidade3.jpg" alt="" class="produto__img">
        <div class="productDescription">
          <h3 class="produto__title">Novidade 3</h3>
          <spam class="produto__price">$90.00</spam>
        </div>
        <a href=""><i class="produto__icon fas fa-cart-plus"></i></a>
      </div>
      <div class="produto">
          <img src="images/Novidades/Novidade4.jpg" alt="" class="produto__img">
       <div class="productDescription">
        <h3 class="produto__title">Novidade 4</h3>
        <spam class="produto__price">$90.00</spam>
        </div>
        <a href=""><i class="produto__icon fas fa-cart-plus"></i></a>
      </div>
      <div class="produto">
        <img src="images/Novidades/Novidade5.jpg" alt="" class="produto__img">
      <div class="productDescription">
        <h3 class="produto__title">Novidade 5</h3>
        <spam class="produto__price">$90.00</spam>
      </div>
      <a href=""><i class="produto__icon fas fa-cart-plus"></i></a>
    </div>
    <div class="produto">
        <img src="images/Novidades/Novidade6.jpg" alt="" class="produto__img">
      <div class="productDescription">
        <h3 class="produto__title">Novidade 6</h3>
        <spam class="produto__price">$90.00</spam>
      </div>
      <a href=""><i class="produto__icon fas fa-cart-plus"></i></a>
    </div>
    <div class="produto">
        <img src="images/Novidades/Novidade7.jpg" alt="" class="produto__img">
      <div class="productDescription">
        <h3 class="produto__title">Novidade 7</h3>
        <spam class="produto__price">$90.00</spam>
      </div>
      <a href=""><i class="produto__icon fas fa-cart-plus"></i></a>
    </div>
    <div class="produto">
        <img src="images/Novidades/Novidade8.jpg" alt="" class="produto__img">
     <div class="productDescription">
        <h3 class="produto__title">Novidade 8</h3>
        <spam class="produto__price">$90.00</spam>
      </div>
      <a href=""><i class="produto__icon fas fa-cart-plus"></i></a>
    </div>
    </section>
  </main>
</section>

introducir la descripción de la imagen aquí

2 respuestas 2

2

Como bien has determinado, para optimizar tu código lo lógico es no tener que replicar la estructura HTML de cada producto de tu tienda tantas veces como productos tengas. A través de un array de objetos y de un bucle podemos ir recorriendo el array para ir construyendo tu galería.

Lo bueno de plantearlo de esta manera es que en un futuro podrías querer tener esa estructura de datos con las imágenes en un JSON externo o sacarla de una Base de Datos y mientras acabases teniendo un array de objetos del que partir no tendrías que cambiar el resto de la lógica de la galería.

La función que hice es simple, a través de la función forEach() recorro el array de objetos y en cada iteración saco la información que necesito para ir constriyendo un HTML que luego inyecto en el DOM.

const imagenes = [
  {
    src: 'https://estaticos.muyinteresante.es/media/cache/1140x_thumb/uploads/images/gallery/5937e90a5bafe882f5bc09e6/gatitos-cesta_0.jpg',
    alt: 'Gatitos, no se puede decir más',
    nombre: 'Artículo 1',
    precio: 52
  },
  {
    src: 'https://www.hola.com/imagenes/estar-bien/20180925130054/consejos-para-cuidar-a-un-gatito-recien-nacido-cs/0-601-526/cuidardgatito-t.jpg',
    alt: 'Gatitos, no se puede decir más',
    nombre: 'Artículo 2',
    precio: 82
  },
  {
    src: 'https://www.zooplus.es/magazine/wp-content/uploads/2018/04/fotolia_169457098.jpg',
    alt: 'Gatitos, no se puede decir más',
    nombre: 'Artículo 3',
    precio: 99
  },
];

function renderizarGaleria(imagenes) {
  let html = '';
  
  imagenes.forEach(function(imagen){
    html += `
      <div class="galeria-item">
        <img src="${imagen.src}" alt="${imagen.alt}" width="200px" />
        <h3>${imagen.nombre}</h3>
        <p>${imagen.precio}€</p>
      </div>
    `;
  });
  
  $('#galeria').html(html);
}

$(function() {
  renderizarGaleria(imagenes);
});
#galeria {
  display: flex;
  justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="galeria"></div>

EDIT:

Como añadido, estás usando la etiqueta <spam> que no existe. Creo que la que buscabas es <span>, el spam es publicidad no deseada y en este caso el <span> si que lo deseamos :)

1
  • Muchas Gracias ! Me ayudó muchísimo y conseguí resolver el problema !
    – Nicole
    el 18 may. 2021 a las 21:20
0

para no estar repitiéndote constantemente te recomiendo crear una función a la que le entregues los atributos de un componente y esta retorne dicho componente. Para tu caso podria ser:

function Componente(props) {
return (
    <div className="produto">
        <img src=props.src alt="" className="produto__img">
            <div className="productDescription">
                <h3 className="produto__title">props.novidade</h3>
                <spam className="produto__price">.props.price</spam>
            </div>
            <a><i className="produto__icon fas fa-cart-plus"></i></a>
    </div>

); }

Esta la puedes llamar cuantas veces quieras, para cada uno de los componentes, de la siguiente forma:

<Componente src={'ingresar src'} novidade={'ingresar novidade'} price={'price'}/>

Mi recomendación es que averigues como utilizar Grid en css y que dicha función la pongas en un archivo .js externo y la exportes.

1
  • Muchas Gracias por la ayuda !
    – Nicole
    el 18 may. 2021 a las 21:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.