jquery - 如何从自制模态添加到购物车,而不重定向到产品页面?
问题描述
我使用 ajax quick-view-modal,它不是插件,我想完全修复它,并了解错误在哪里。问题是 - 当我选择正确的产品变体时 - 选择所需的颜色和尺寸,然后单击“添加到购物车”按钮,该产品没有添加到购物车,但正在重定向到该产品的页面。模态本身
add_action( 'wp_ajax_ajax_quick_view', 'themename_quick_view_product_callback' );
add_action( 'wp_ajax_nopriv_ajax_quick_view', 'themename_quick_view_product_callback' );
function themename_quick_view_product_callback(){
if ( ! wp_verify_nonce( $_POST['nonce'], 'quick-nonce' ) ) {
wp_die( 'Error' );
}
global $post, $woocommerce, $product;
$product = wc_get_product(esc_attr($_POST['id']));
ob_start();
?>
<div class="modal-body row">
<div class="modal-body-left col-md-5">
<?php
$attachment_id = get_post_thumbnail_id( $product->get_id() );
$product_thub = wp_get_attachment_image_url($attachment_id, 'shop_single'); ?>
<img src="<?php echo $product_thub;?>" >
<div class="modal-gal d-flex">
<?php
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id ) {
echo wp_get_attachment_image( $attachment_id, 'woocommerce_gallery_thumbnail' );
}
?>
</div>
</div>
<div class="modal-body-right col-md-7">
<h2><?php echo $product->get_name();?></h2>
<p><?php $rating = $product->get_average_rating();
$count = $product->get_rating_count();
echo wc_get_rating_html( $rating, $count ); ?></p>
<div class="modal-price mb-20">
<?php echo $product->get_price_html();?></div>
<p class="mb-20"><?php echo $product->get_short_description(); ?></p>
<p class="mb-20 cat-popup"><?php echo $product->get_categories($separator = ' '); ?></p>
<div class="modal-buttons">
<?php
if ( $product->is_type( 'variation' ) ) {
?>
<form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
<?php woocommerce_single_variation_add_to_cart_button(); ?>
</form>
<?php
} else {
woocommerce_template_single_add_to_cart();
}?>
</div>
</div>
</div>
<?php
$data['product'] = ob_get_clean();
wp_send_json( $data);
wp_die();
}
JS部分
jQuery(document).ready(function ($) {
$(document).on('click', 'a.modal-product-link', function () {
var productId = $(this).attr('data-product-id');
console.log(productId);
var data = {
id:productId,
action:'ajax_quick_view',
nonce: ajax_quick.nonce
};
$.ajax({
url:ajax_quick.url,
data:data,
type: 'POST',
dataType: 'json',
beforeSend:function(xhr){
$('#modal-product .modal-body').text('Loading');
},
success:function(data){
console.log(data);
$('#modal-product .modal-content section').html(data.product);
}
});
})
});
我认为这是关于[过滤器 woocommerce_add_to_cart_redirect()][1]
[1]: http://hookr.io/filters/woocommerce_add_to_cart_redirect/,但是如何正确使用呢?
请帮助我理解,我喜欢这种模式,我想改进它,并弄清楚我失败的地方。
PS这不仅仅是我的模态。相同的功能是,如果在商店页面中替换循环添加到购物车按钮 t 单个添加到购物车按钮。重定向也。
解决方案
推荐阅读
- bash - 使用 AWK 在某个字段中搜索相等性
- html - 我的图片没有显示在我的本地主机中
- apache-flink - 在非时间戳列上使用 GROUP BY 流式处理 Flink SQL
- python - 使用许多 if 语句改进 python 代码
- javascript - 如何过滤带有日期的数组数组,并获得一个简单的数组,其中包含搜索日期的行号,日期格式为“M/d/YYYY”?
- ffmpeg - ffmeg:合并的 TS 文件中的音频漂移,用于单独的音频和视频 TS 文件
- reactjs - TypeScript:如何使函数具有反应性
- swift - 为 addDocument(Firebase) 函数创建完成处理函数
- eclipse - 如何让 Eclipse 内部浏览器使用边缘而不是 IE 浏览器小部件?
- esp32 - ESP32 从固件 .bin 文件中检索嵌入的二进制文件