Topic: Insert element block using dynamic id

Guillermo
April 10, 2025 at 2:35 am

Hi, I’ve created a template where I add a collection of elements (products) with a link like this:

<a href="javascript:void(0);" class="quick-view-btn" data-product-id="<?php echo get_the_ID(); ?>">+ INFO PRODUCTO</a>

when you click on the link it shows a popup window that show a bunch of content from ACF.
I’ve created a block element to show that elments from ACF, but I have no idea how to get that product_id to get that content fields.
I have tried, <?php do_action(‘hook_acordeon’, $product_id); ?>, but it’s not working.

Any idea how can I use the block with dynamic id?.

Thanks.
Ying
April 10, 2025 at 8:20 am

Hi there,

but I have no idea how to get that product_id to get that content fields.

Where are you going to use the product id？ It’s not in your link HTML.

Not sure what you are trying to achieve, can you explain some more? Or can I see what you’ve done on your site to have a better understanding?

Let me know 🙂
Guillermo
April 11, 2025 at 2:25 am
I’ve created a plugin that adds this piece of code in single-product and a popup.
```
$product_id = intval($_POST['product_id']);
<div class="contenedor acordeon">
<?php 
do_action('hook_acordeon', $product_id);
?>
</div>
```
hook_acordeon is a block element with dynamic data from ACF and Data Source: Current post.

When I you check the single product, single product it works fine because it gets the current post id (I guess).

But when I use it on the template with more than one product (id), it doesn’t shows the block.
On the main page, if you click on a product and click on “+ INFO PRODUCTO” it shows a popup, in that popup I have added the code, but as you can see it’s not showing the accordion.

I hope I have explain myself better

Ying

April 11, 2025 at 12:53 pm

It’s hard to tell, try adding some debug code to your code.

1. Add some debugging code to your code:

$product_id = isset($_POST['product_id']) ? intval($_POST['product_id']) : 0;
error_log('Popup Product ID: ' . $product_id);
error_log('Post Exists: ' . (get_post($product_id) ? 'Yes' : 'No'));
error_log('ACF Fields: ' . print_r(get_fields($product_id), true));
?>
<div class="contenedor acordeon">
<?php 
do_action('hook_acordeon', $product_id);
?>
</div>

2. Enable WP debug.

Let me know what you get in the debug log.

Guillermo

April 13, 2025 at 9:09 am

Hi,
I must not have explained correctly.
In the template there is no problem to obtain the produc_id. Anyway this is the debug:

the problem is when passing the id to the hook to display the element(which is using dynamic data).
Can it be a problem of how the element is configured?
null

Thank!

David

April 15, 2025 at 2:06 am

Hi there,

try wrapping the hook in a loop that queries the product ID.
This should provide the context for the element to which the post meta values can be retrieved.


<?php
$product_id = intval($_POST['product_id']);

// Validate $product_id
if ($product_id && get_post($product_id)) {
    // Set up a WP_Query for the specific product_id
    $query = new WP_Query([
        'p' => $product_id,
        'post_type' => 'any', // Adjust to 'product' if using WooCommerce, etc.
        'posts_per_page' => 1,
    ]);

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
            ?>
            <div class="contenedor acordeon">
                <?php do_action('hook_acordeon'); ?>
            </div>
            <?php
        endwhile;
        // Reset post data to avoid conflicts
        wp_reset_postdata();
    else :
        echo '<p>Product not found.</p>';
    endif;
} else {
    echo '<p>Invalid product ID.</p>';
}
?>

Guillermo
April 15, 2025 at 10:43 am

I’m afraid it’s also not working.
Is there a way to log the block-hook (hook_acorden) element and see if the id is in there?.

Thanks.
David
April 15, 2025 at 2:28 pm

How is the modal request being made ? Is it an AJAX request or something ?

Guillermo

April 15, 2025 at 8:47 pm

Hi,
when you click on +INFO the popup is created on ajax using the function “obtener_info_producto”.

// Abrir el popup al hacer clic en el botón "Quick View"
    $(document).on('click', '.quick-view-btn', function() {
        //console.log('Botón Quick View clicado'); // Log para verificar el clic
        var productId = $(this).data('product-id');
        //console.log('ID del producto:', productId); // Log para verificar el ID del producto

        $('#quick-view-popup').fadeIn();
        //console.log('Popup Quick View mostrado'); // Log para verificar que el popup se muestra

        $.ajax({
            type: 'POST',
            url: ajax_url, // Asegúrate de que ajax_url está correctamente definido
            data: {
                action: 'obtener_info_producto', // Asegúrate de que este nombre coincide con el manejador en PHP
                product_id: productId
            },
            success: function(response) {
                //console.log('Respuesta AJAX exitosa:', response); // Log para verificar la respuesta del servidor
                $('#quick-view-popup').addClass('mostrar');
                $('#quick-view-popup').removeClass('ocultar');
                $('#quick-view-product-info').html(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error("Error en la solicitud AJAX:", textStatus, errorThrown);
                console.error("Detalles del error:", jqXHR.responseText); // Log para verificar detalles del error
                alert("Hubo un problema al cargar la información del producto. Por favor, intenta nuevamente.");
            }
        });
    });

This is the function. It works fine except calling the hook element:

/** Quick view */
function obtener_info_producto() {
    if (isset($_POST['product_id'])) {
        $product_id = intval($_POST['product_id']);

        //og("ID del producto recibido: " . $product_id); // Log para verificar el ID del producto

        $producto = wc_get_product($product_id);

        //error_log("Producto obtenido: " . print_r($producto, true)); // Log para verificar el producto

        $produccion_estimada = get_field('produccion_estimada', $product_id);
 
        if ($producto) {
            // Generar el contenido del popup
            ?>
            <div id="quick-view-product" class="quick-view-product">
                <div class="product-images">
                    <img id="main-product-image" src="<?php echo wp_get_attachment_url($producto->get_image_id()); ?>" alt="<?php echo $producto->get_name(); ?>">
                    <?php
                    $attachment_ids = $producto->get_gallery_image_ids();
                    if ($attachment_ids) {
                        echo '<div class="product-gallery">';
                        echo '<img class="gallery-image" src="' . wp_get_attachment_url($producto->get_image_id()) . '" alt="' . $producto->get_name() . '">';
                        foreach ($attachment_ids as $attachment_id) {
                            echo '<img class="gallery-image" src="' . wp_get_attachment_url($attachment_id) . '" alt="' . $producto->get_name() . '">';
                        }
                        echo '</div>';
                    }
                    ?>
                </div>
                <div class="product-details">
                    <h3><?php echo $producto->get_name(); ?></h3>
                    <p class="precio-producto"><?php echo $producto->get_price_html(); ?></p>
                    <?php if ($producto->get_stock_status() === 'instock'): ?>
                        <p class="stock-disponible">Edición limitada. Solo se elaborarán <?php echo esc_html($produccion_estimada); ?> cajas de 9 unidades. <br>¡Reserva ya tu parte de la cosecha!</p>
                    <?php else: ?>
                        <p class="stock-agotado">Agotado</p>
                    <?php endif; ?>
                    <?php $produccion_estimada = get_field('produccion_estimada', $product_id); ?>    
                    <div class="pre-ventas-bar">
                    <?php $produccion_estimada = get_field('produccion_estimada', $product_id); ?>
                    <div class="pre-ventas-bar-fill" style="width: <?php echo (( $produccion_estimada - $producto->get_stock_quantity()) / $produccion_estimada) * 100; ?>%;"></div>
                    </div>
                    <p><?php echo $producto->get_description(); ?></p>
                    <!--<p><span class="subtitle-popup">Producción Estimada:</span> <?php //echo get_field('produccion_estimada', $product_id); ?></p>-->
                    <p><span class="subtitle-popup">Fecha Estimada de Plantación:</span> <?php echo get_field('fecha_estimada_plantacion', $product_id); ?></p>
                    <p><span class="subtitle-popup">Fecha de Entrega Estimada:</span> <?php echo get_field('fecha_de_entrega_estimada', $product_id); ?></p>
                    <div class="contenedor acordeon">
                        
                        <?php 
                        $product_id = isset($_POST['product_id']) ? intval($_POST['product_id']) : 0;
                        /*error_log('Popup Product ID: ' . $product_id);
                        error_log('Post Exists: ' . (get_post($product_id) ? 'Yes' : 'No'));
                        error_log('ACF Fields: ' . print_r(get_fields($product_id), true));*/
            
                        // Validate $product_id
                        if ($product_id && get_post($product_id)) {
                            // Set up a WP_Query for the specific product_id
                            $query = new WP_Query([
                                'p' => $product_id,
                                'post_type' => 'any', // Adjust to 'product' if using WooCommerce, etc.
                                'posts_per_page' => 1,
                            ]);

                            error_log('Query Results: ' . print_r($query->posts, true)); // Log the query results
            
                            if ($query->have_posts()) :
                                while ($query->have_posts()) : $query->the_post();
                                    ?>
                                    <div class="contenedor acordeon">
                                        <?php do_action('hook_acordeon', $product_id); ?>
                                    </div>
                                    <?php
                                endwhile;
                                // Reset post data to avoid conflicts
                                wp_reset_postdata();
                            else :
                                echo '<p>Product not found.</p>';
                            endif;
                        } else {
                            echo '<p>Invalid product ID.</p>';
                        }
                        ?>
                    </div>
                </div>
            </div>
            <?php
        } else {
            error_log("Producto no encontrado: " . $product_id); // Log para verificar si el producto no se encuentra
        }
        wp_die();
    } else {
        error_log("Product ID no establecido en la solicitud AJAX"); // Log para verificar si el ID del producto no está establecido
    }
}

add_action('wp_ajax_obtener_info_producto', 'obtener_info_producto');
add_action('wp_ajax_nopriv_obtener_info_producto', 'obtener_info_producto');

If you need to access the entire code:

https://github.com/Tecnologia-apadrina/delpueblo/blob/main/wp-content/plugins/cultivos-delpueblo/cultivos-delpueblo.php

Thanks a lot.

David
April 16, 2025 at 2:07 am

The GP Element – does it have its display rules set ? eg. Entire site so it fires anywhere
And if you add static content to the element – does it show up ?
Guillermo
April 16, 2025 at 6:12 am

Mmm, it looks like it’s not showing up static content either.

On the other hand, the static contect it’s showing up in single-content.

We’re close.
Ying
April 16, 2025 at 10:05 am

So, what is the location you set for the element?
Guillermo
April 18, 2025 at 12:36 am

Hi,
sorry, on the last comment I posted an but I didn´t show up.

Please check it here:

https://postimg.cc/YGMM1Rrv
David
April 22, 2025 at 3:08 am
In your obtener_info_producto within the loop you have:
```
<div class="contenedor acordeon">
    <?php do_action('hook_acordeon', $product_id); ?>
</div>
```
Does the <div class="contenedor acordeon"> output ?
If so then the hook may need object buffering. Try wrapping the do_action('hook_acordeon', $product_id); with ob_start() and ob_get_clean()

NOTE: the $product_id should not be required in the do_action as the Loop is providing the post context. And the post meta fetching done by GB Dynamic Data will only work with the post context, it won’t consume that variable in the hook.
Guillermo
April 23, 2025 at 11:45 pm

Hi,
I’ve uploaded the changes and still not working.

I’ve added a

echo "Accion hook_acordeon";

so you can see that the div is being printed, but not the hook.

Thanks for your effort.
David
April 24, 2025 at 1:12 pm

Can you see the Element being called on the page? You should see it in the Admin Bar > Elements menu.

Viewing 16 posts - 1 through 16 (of 18 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Insert element block using dynamic id