更改在 WooCommerce AJAX 调用中获取的每行产品数量

Question

我的实时搜索字段使用 AJAX 获取产品标题、缩略图和添加到购物车按钮。

它以单列形式显示输出，这对于大型产品来说是不可读的return。

如何更新我的输出，使其显示在如下所示的 4 行中？ (下)

前端

 <input type="text" name="keyword" id="keyword" onkeyup="fetch()">

<div id="datafetch">Your numbers will show here</div>



<script>
function fetch(){

    $.post('<?php echo admin_url('admin-ajax.php'); ?>',{'action':'my_action'},
    function(response){
        $('#datafetch').append(response);
        console.log(result);
    });
}
</script>

Functions.php中的代码

     <?php
}// LOTTERY start the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

        $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'product' ) );


    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post();
    global $product;
        $product = get_product( get_the_ID() ); //set the global product object

$myquery = esc_attr( $_POST['keyword'] );
$a = $myquery;
$search = get_the_title();
if( stripos("/{$search}/", $a) !== false) {?>
            <h4><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h4>
<h4><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_post_thumbnail();?></a></h4>
<p><?php echo $product->get_price_html(); ?></p>
                        <?php woocommerce_template_loop_add_to_cart(); //ouptput the woocommerce loop add to cart button ?>

        <?php
                                  }
    endwhile;
        wp_reset_postdata();  
    endif;

    die();
}

Answer 1

您可以使用 counter 变量。试试下面的代码。

add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'product' ) );
    if( $the_query->have_posts() ) : $count = 1; while( $the_query->have_posts() ): $the_query->the_post();

        if ( $count %4 == 1 ) {  
             echo '<div class="row"">';
        }

        global $product;
        $product = get_product( get_the_ID() ); //set the global product object

        $myquery = esc_attr( $_POST['keyword'] );
        $a = $myquery;
        $search = get_the_title();
        if( stripos("/{$search}/", $a) !== false) {?>
            <h4><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h4>
            <h4><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_post_thumbnail();?></a></h4>
            <p><?php echo $product->get_price_html(); ?></p>
            <?php woocommerce_template_loop_add_to_cart(); //ouptput the woocommerce loop add to cart button ?>
        <?php }

        if ( $count %4 == 0 ) {
            echo "</div>";
        }
        $count++;

    endwhile;

        if ( $count %4 != 1 ) echo "</div>";

        wp_reset_postdata();  
    endif;
    die();
}

更改在 WooCommerce AJAX 调用中获取的每行产品数量

Change Number of Products Per Row Fetched in WooCommerce AJAX call

php

ajax

woocommerce