通过Ajax加载single_product_content时,变体Javascript不起作用(WooCommerce) [英] Variations Javascript not working when single_product_content is loaded via Ajax (WooCommerce)
问题描述
在我的WooCommerce商店模板中,我正在使用Ajax在archive-product.php页面中动态加载单个产品内容.这部分正在工作.但是缺少用于选择产品变体的JavaScript,因此我尝试在成功的Ajax请求之后将脚本添加到html.我可以加载脚本,但仍然不能选择产品变体.没有事件被触发.好像我缺少什么...
In my WooCommerce Shop Templates I am loading the single-product-content dynamically in the archive-product.php page with Ajax. This part is working. But the javascript to choose the product variations is missing so I tried to add the script to the html after the successful ajax request. I could load the script but I still can not choose a product variation. No events are triggered. Seems like I am missing something...
我的Javascript:
My Javascript:
jQuery('.project-preview').on('click',function(){
var theId = $(this).attr('data-project-id');
var div = $('#product-container');
$.ajax({
type: "POST",
url: singleprojectajax.ajaxurl,
data : {action : 'load_single_product_content', post_id: theId },
success: function(data){
div.html(data);
loadVariationScript();
},
error : function() {
}
});
});
function loadVariationScript () {
jQuery.getScript("../wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");
jQuery.getScript("../wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js");
}
在functions.php中
In functions.php
add_action( 'wp_enqueue_scripts', 'child_add_scripts' );
function child_add_scripts(){
wp_register_script( 'pa_script', get_stylesheet_directory_uri() . '/main.js', array('jquery'), true );
wp_localize_script( 'pa_script', 'singleprojectajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
wp_enqueue_script('pa_script');
}
function load_single_product_content () {
$post_id = intval(isset($_POST['post_id']) ? $_POST['post_id'] : 0);
if ($post_id > 0) {
$the_query = new WP_query(array('p' => $post_id, 'post_type' => 'product'));
if ($the_query->have_posts()) {
while ($the_query->have_posts()) : $the_query->the_post();
wc_get_template_part( 'content', 'single-product' );
endwhile;
} else {
echo "There were no products found";
}
}
wp_die();
}
add_action('wp_ajax_load_single_product_content', 'load_single_product_content');
add_action('wp_ajax_nopriv_load_single_product_content', 'load_single_product_content');
WooCommerce脚本"add-to-cart-variations.js": https://searchcode.com/codesearch/view/95139130/
The WooCommerce script "add-to-cart-variations.js": https://searchcode.com/codesearch/view/95139130/
推荐答案
您尝试过以下方法吗:
jQuery(document).ready(function($) {
"use strict";
$('.project-preview').on('click',function(){
var theId = $(this).attr('data-project-id');
var div = $('#product-container');
$.ajax({
type: "POST",
url: singleprojectajax.ajaxurl,
data : {action : 'load_single_product_content', post_id: theId },
success: function(data){
div.html(data);
},
complete: function(){
loadVariationScript();
},
error : function() {
}
});
});
function loadVariationScript() {
$.getScript("www.yoursitenamehere.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");
$.getScript("www.yoursitenamehere.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js");
}
});
您在AJAX中使用了 $
,因此可以安全地假设您已经在文档就绪环境中.因此,您无需使用 jQuery
.
You used $
for your AJAX, so it's safe to assume you're already inside the document ready environment. So you don't need to use jQuery
.
我将 $.getScript()
放在 complete
ajax方法中.另外,您需要将整个网址包含在页面中.
I placed the $.getScript()
in the complete
ajax method. Plus you need to include the entire url to your page.
这篇关于通过Ajax加载single_product_content时,变体Javascript不起作用(WooCommerce)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!