我的實時搜索欄位使用 AJAX 獲取產品標題、縮略圖和添加到購物車按鈕。
它將輸出顯示在單列中，這對于大量產品退貨是不可讀的。
如何更新我的輸出，使其顯示在 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();
}
uj5u.com熱心網友回復：
您可以使用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 ">';
}
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();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/367746.html