我尝试在woocommerce产品页面上做一个基于颜色的动态产品图库。当我点击一个颜色,比如红色,我应该看到红色图库的照片。为了做到这一点,我用 AJAX 创建的一个新的图库替换了所有的woocommerce图库块(他们有旧图库的相同类)。
新照片的加载工作正常,我得到了基于颜色的画廊照片。但当 AJAX 加载新的画廊滑块不工作,我想是因为woocomere js,谁创建的滑块,是只读的页面加载。
我想我应该重新加载一些Woocommerce JS函数来重新创建滑块与他的函数,但我不知道如何。
这是php文件,我在其中创建了一个新的图库,从 AJAX 调用:
global $product;
$current_id = "";
if(isset($_POST['prodid']) && $_POST['prodid'] != "" ) {
$current_id = $_POST['prodid'];
$product = new WC_Product($current_id);
}
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
'woocommerce-product-gallery',
'woocommerce-product-gallery--' . ( $product->get_image_id() ? 'with-images' : 'without-images' ),
'woocommerce-product-gallery--columns-' . absint( $columns ),
'images',
) );
?>
<figure class="woocommerce-product-gallery__wrapper">
<?php
if ( $product->get_image_id() ) {
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
do_action( 'woocommerce_product_thumbnails' );
?>
</figure>
这是在单击框颜色时调用的 AJAX 函数
function changeGallery(selected_gallery, productID) {
jQuery(function($) {
var select_color = selected_gallery;
var xhttp;
$.ajax({
url : 'https://mysite.it/wp-admin/admin-ajax.php', // AJAX handler
data : { action : 'load_gallery', gallery : select_color, prodid : productID },
type : 'POST',
beforeSend: function() {
},
success : function( result ){
if( result ) {
$('.woocommerce-product-gallery').html(result);
//Reload here some woocommerce JS functions?
}
}
});
});
}
2条答案
按热度按时间68de4m5k1#
解决这类问题的方法是查看WooCommerce源代码,看看插件是如何初始化图库的。基于此,我认为你需要做一些类似的事情:
请参见Github:single-product.js以获取参考。
nukf8bse2#
我遇到了同样的问题。dafoxuk的答案是正确的,你需要重新初始化.woocomorce-product-gallery上的ProductGallery类。问题是这个元素已经附加了一个flexslider实体。要解决这个问题,只需删除该元素(.woocomorce-product-gallery)并创建一个新的相同的元素。(据我所知,Flexslider没有办法将自己从元素中分离出来)