在使用ajax的自定义页面中制作一个自定义的wooccommerce帖子

Question

我正在尝试进行ajax调用，以便在主页中显示一些帖子内容，我已经设置好了所有内容，但问题是我无法在ajax操作文件中获得所需的wooccommerce挂钩，因为我无法获得当前的帖子id和循环来使用挂钩。所以我有点不知道我应该做什么

add_action("wp_ajax_product_ajax", "product_ajax");
add_action("wp_ajax_nopriv_product_ajax", "product_ajax");
function product_ajax()  {
defined( 'ABSPATH' ) || exit;
global $product;
?>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="container">
<div class="modal-main">
<div class="row">
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', 
$product ); ?>>
<div class="col-md-6">
<div class="description-prodact-modal">
<?php woocommerce_template_single_title(); ?>
<p>
</p>
<div class="prise-modal">
<p></p>
</div>
<div class="cart-modal">
<form action="">
<div class="columns">
<div class="favorite-modal">
<button><i class="lar la-heart"></i></button>
</div>
<div class="add-to-cart">
<button><i class="las la-shopping-cart"></i>افزودن به سبد خرید</button>
</div>
<div class="number-prodact">
<input type="button" name="" id="" value="+">
<input type="text" value="1">
<input type="button" name="" id="" value="-">
</div>
</div>
</form>   
</div>
<hr>
<div class="prodact-meta">
<span class="category-prodact">دسته بندی:
<a href="#">لوازم منزل</a>
</span>
<span class="tag-prodact">برچسب:
<a href="#">صندلی , میز</a>
</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="gallery-prodact">
<div class="gallery-cr owl-carousel
owl-theme">
<div class="item"><img
src="assets/img/1-12-433x516.jpg"
alt="image"></div>
<div class="item"><img
src="assets/img/1-17-433x516.jpg"
alt="image"></div>
<div class="item"><img
src="assets/img/1-19-433x516.jpg"
alt="image"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
wp_die();

}

我在另一个页面上看到了这个：

<script>
jQuery(document).ready(function () {
jQuery('.main_ajax_loader').hide();
jQuery(".ajax_link").click(function (e) {
e.preventDefault();
var ajax_url = "<?php echo esc_js(admin_url('admin-ajax.php')); ?>";

jQuery.ajax({
url: ajax_url,
type: "post",
data: {action: "product_ajax"},

success: function (response) {
jQuery('.main_ajax_loader').show()
jQuery(".ajax_content").html(response);
jQuery('.main_ajax_loader').hide();
},
error: function (response) {
}
})
})
});
</script>

那么我应该如何在这个页面中使用wooccommerce挂钩呢？

Answer 1

在源页面中进行新的隐藏输入

<input type="hidden" name="my_product_id_ajax" class="my_product_id_ajax" value="<?php echo $product_id; ?>" />

然后在ajax调用中传递输入值：

$product_id = $_POST['parameter_name'];

参数名称是您在ajax调用中发送的变量的名称；

Answer 2

根据您想要实现的目标，我有一些想法。我假设您是在专门寻找一个单一的产品ID，因为您正在使用content-product.php。

在第一个代码示例中，您有一个$product变量。如果不是空的，您可能可以使用$product->get_id()获取ID。

如果在第二个代码示例中需要通过AJAX传递ID，则可能会将data: {action: "product_ajax"}更改为data: {action: "product_ajax", product_id: "<?php echo $product->get_id();?>"}。

然后你可以在你的第一个代码示例中得到值，按照下面的行：

if ( ! empty( $_POST['product_id'] ) {
$product_id = intval( $_POST['product_id'] );
$product = wc_get_product( $product_id );
// Do something with $product
}

如果你在一个普通的Wordpress页面上，你可以这样做：

data: {action: "product_ajax", post_id: "<?php echo get_the_ID();?>"}。