En las páginas de colección de nuestro sitio Shopify, los botones VER DETALLES en cada tarjeta de producto están desalineados debido a la longitud variable del título del producto. Para alinearlos, decidimos establecer la altura mínima de los títulos de productos de todas las tarjetas de productos en una fila en la más alta de las tres en la misma fila usando JavaScript puro. A continuación se muestra la lógica completa para lograr esto.

Lógica:

• Encuentra TODOS los selectores de ".card__info"
• Establezca el número de tarjetas por fila, para verificar según window.innerWidth
• Establecer altura máxima = 0;
• Para cada selector card__info, ejecute lo siguiente:
• Obtener la tarjeta__título
• Obtener la altura.
• Establecer altura máxima = max (max_height, nueva altura)
• Para cada selector card__info, ejecute lo siguiente:
• Obtener la tarjeta__título
• Establezca la altura mínima en el valor máximo.
• Ideal: hágalo en filas window.innerWidth 768px y superior: 3 columnas más 2 columnas

El siguiente código es solo la primera parte de la solución. El resultado que obtengo en la consola es Max Height: NaN en lugar de la altura real porque hay 15 de los productos con sus títulos en la página de colección vinculada a continuación. https://3614yzdr1nq0vwa9-458195004.shopifypreview.com

Código JavaScript:

 // Logic to set min-height of product title in collection pages. // Find All selectors of ".card__info" let allCardInfo = document.querySelectorAll(".card__info"); // Set number of cards per row, to check based on window.innerWidth // 768px and above - 3 column else 2 columns var numOfCardsPerRow = ((window.innerWidth >= 768) ? 3 : 2); var maxHeight = 0; // Set max height = 0; // Foreach card__info selector, execute the following: // Pass 1. allCardInfo.forEach(element => { let cardTitle = element.querySelector(".card__title"); // Get the card__title let cardTitleHeight = cardTitle.clientHeight; // Get the height. maxHeight = Math.max(maxHeight, cardTitleHeight); // Set max height = max (max_height, new height) console.log('Max Height: ' + maxHeight); maxHeight = maxHeight; }); // Pass 2. allCardInfo.forEach(element => { // Foreach card__info selector, execute the following: // - Get the card__title // - Set the min-height to the max value. element.querySelector(".card__title").style.clientHeight = maxHeight; // Get the card__title }); // Pass 3. allCardInfo.forEach(element => { console.log('New Min Height: ' + element.querySelector(".card__title").clientHeight); });

No creo que la altura mínima que se estableció con el código anterior sea el valor correcto. ¿Podría ayudarme a corregir mi código para establecer la altura mínima correcta?