Bricks Builder es una herramienta visual extremadamente flexible y poderosa para construir sitios web. Aunque Bricks ofrece una gran cantidad de funcionalidades listas para usar, su verdadero potencial radica en su capacidad para adaptarse a necesidades específicas mediante personalizaciones. Por ejemplo, si deseas mostrar las imágenes secundarias de un producto de WooCommerce (la galería de productos) dentro de un query dinámico, puedes lograrlo fácilmente extendiendo su funcionalidad con filtros personalizados. Esta flexibilidad permite que Bricks se adapte perfectamente a proyectos complejos, como la creación de sliders dinámicos o galerías interactivas.

En este artículo, aprenderás cómo usar un filtro personalizado (bricks/posts/query_vars) para modificar las consultas de Bricks y obtener exactamente las imágenes de la galería de un producto. Esto te permitirá tener un control total sobre cómo se muestran las imágenes, lo que es especialmente útil para crear sliders dinámicos o galerías personalizadas.

El Problema: Bricks No Muestra la Galería de Productos de WooCommerce

Cuando trabajas con productos de WooCommerce en Bricks, puedes mostrar fácilmente el título, el precio y otros datos dinámicos. Sin embargo, las imágenes secundarias de un producto (la galería) no están disponibles directamente en los queries estándar. Esto significa que:

  • No puedes mostrar las imágenes de la galería de un producto dentro de un slider o galería dinámica.
  • Tienes que depender de soluciones alternativas para mostrar estas imágenes.

Esta limitación puede ser frustrante si quieres crear diseños más atractivos, como sliders de imágenes relacionadas o galerías interactivas.

La Solución: Modificar las Consultas de Bricks

La solución consiste en usar el filtro bricks/posts/query_vars para ajustar las variables de consulta y obtener las IDs de las imágenes de la galería de un producto. Al hacerlo, puedes:

  • Mostrar las imágenes secundarias de un producto: Usa las IDs de las imágenes para incluirlas en un slider o galería.
  • Personalizar completamente la visualización: Diseña tu propia galería usando cualquier librería (como Swiper.js, Slick Slider, etc.).
  • Optimizar el rendimiento: Solo obtienes las imágenes que necesitas, evitando cargar datos innecesarios.

Veamos cómo implementar esta solución paso a paso.

Código para Mostrar la Galería de WooCommerce

El siguiente código permite obtener las imágenes secundarias de un producto de WooCommerce y mostrarlas en un query de Bricks. Puedes agregarlo al archivo functions.php de tu tema hijo o a un plugin personalizado.

<?php
/**
 * Modifica las variables de consulta para mostrar las imágenes de la galería de WooCommerce.
 * Este filtro se aplica específicamente a elementos con IDs 'wumdxy' o 'tchuiy'.
 */
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
    // Verificamos si WooCommerce está activo. Si no lo está, no hacemos nada.
    if ( ! class_exists( 'woocommerce' ) ) { 
        return; 
    }
    
    // Aplicamos el filtro solo a los elementos con IDs específicos ('wumdxy' o 'tchuiy').
    if ( $element_id == "wumdxy" || $element_id == "tchuiy") {
        // Obtenemos el post actual.
        $current_post = get_post();
        
        // Convertimos el post en un objeto de producto de WooCommerce.
        $product = wc_get_product( $current_post );
        
        // Obtenemos las IDs de las imágenes de la galería del producto.
        $gallery_image_ids = $product->get_gallery_image_ids();
        
        // Si no hay imágenes en la galería, asignamos un valor predeterminado (un array vacío).
        $gallery_image_ids = $gallery_image_ids ?: [''];
        
        // Modificamos las variables de consulta para incluir las IDs de las imágenes.
        $query_vars['post__in'] = $gallery_image_ids;
        
        // Limitamos el número de imágenes a mostrar (en este caso, 2).
        $query_vars['posts_per_page'] = 2;
    }
    
    // Devolvemos las variables de consulta modificadas.
    return $query_vars;
}, 10, 3);

Cómo Funciona el Código

  1. Verificación de WooCommerce:
    • El código verifica si WooCommerce está activo usando class_exists('woocommerce').
  2. Filtrado por Elemento Específico:
    • El filtro se aplica solo a elementos con IDs específicos (wumdxy, tchuiy). Esto asegura que no interfiera con otros queries en tu sitio.
  3. Obtención de las Imágenes:
    • Usamos $product->get_gallery_image_ids() para obtener las IDs de las imágenes secundarias del producto.
  4. Modificación de query_vars:
    • Asignamos las IDs de las imágenes al parámetro post__in, lo que hace que el query muestre solo esas imágenes.
    • Configuramos el orden (orderby) y limitamos el número de imágenes (posts_per_page).

Ventajas de Este Método

  1. Mayor Control Creativo:

    • Puedes diseñar sliders o galerías únicas que se adapten perfectamente a tu sitio.

  2. Optimización del Rendimiento:

    • Solo cargas las imágenes que necesitas, mejorando la velocidad de carga.

  3. Resuelve una Limitación Real:

    • Supera la falta de soporte nativo de Bricks para mostrar la galería de productos de WooCommerce.

Consejos Adicionales

  1. Usa Librerías de Sliders:

  2. Manejo de Casos Sin Imágenes:

    • Si un producto no tiene imágenes en su galería, el código asigna [''] como valor predeterminado para evitar errores.

  3. Extensión Futura:

    • Puedes adaptar este código para trabajar con otras fuentes de imágenes, como campos personalizados o taxonomías.

Otra Opción: Editar el Query de Bricks con PHP en el Editor Visual de Bricks

<?php
// Verifica si WooCommerce está activo
if (!class_exists('woocommerce')) {
    return [];
}

// Obtiene el producto actual (post)
$current_post = get_post();
if (!$current_post) {
    return [];
}

// Obtiene el objeto del producto de WooCommerce
$product = wc_get_product($current_post);
if (!$product) {
    return [];
}

// Obtiene los IDs de las imágenes de la galería del producto
$gallery_image_ids = $product->get_gallery_image_ids();

// Si no hay imágenes en la galería, retorna un array vacío
if (empty($gallery_image_ids)) {
    return [];
}

// Retorna los parámetros de consulta para las imágenes
return [
    'post_type'      => 'attachment',       // Tipo de post: attachment
    'post_mime_type' => 'image',            // Solo imágenes
    'post_status'    => 'inherit',          // Estado del post: inherit
    'orderby'        => 'post__in',         // Ordenar según el array de IDs
    'post__in'       => $gallery_image_ids, // IDs de las imágenes
    'posts_per_page' => -1,                 // Mostrar todas las imágenes
];