WooCommerce 显示产品缩略图并添加到购物车按钮

Question

赏金将在 6 天后到期。 此问题的答案有资格获得+50声望赏金。 ACE-CM希望引起对这个问题的更多关注。

我创建了一个使用 AJAX 获取产品标题的实时搜索字段。 它工作正常，但是，我想获取产品缩略图和“添加到购物车”按钮。

**编辑：我为缩略图添加了 output 并添加到购物车按钮。 它可以工作，但它只显示在单行中。 如何按如下 4 行更新我的 output？

前端代码

<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>

函数中的代码.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

您可以使用此[get_the_post_thumbnail_url()][1]获取缩略图 URL 并添加图像。

您可以使用此https://yourdomain.com/?add-to-cart=<product_id>将产品添加到购物车 URL。

https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/

Answer 2

试试这个方法

//Ajax
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();

            $myquery = esc_attr( $_POST['keyword'] );
            $a = $myquery;
            $search = get_the_title();
            if( stripos("/{$search}/", $a) !== false) {
                
                //get image and add-to-cart buttom here
                $query->the_post(); 
                global $product;
                wc_get_template_part('content', 'product');
                //End get image and add-to-cart buttom here

            }

    endwhile;
        wp_reset_postdata();  
    endif;

    die();
}

Answer 3

在 Rakesh Roy 调用缩略图的帮助下，我能够通过调用 global product 和 fetching 来实现完整的效果。

然而这并不完美。 由于产品以单一顺序显示。 我需要按照下图显示 4 行。 我怎样才能达到以下效果？

<?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();
}