[英]Update Woocommerce product gallery with Ajax
I'm trying to do a dynamic product gallery based on colours in woocommerce product page.我正在尝试根据 woocommerce 产品页面中的颜色制作动态产品库。 When i click on one colour, example on red, i should see Red Gallery's photos.
当我点击一种颜色时,例如红色,我应该会看到 Red Gallery 的照片。 To do this i replaced all woocommerce gallery block with a new one created by ajax ( who have same classes of old gallery).
为此,我将所有 woocommerce 画廊块替换为由 ajax 创建的新画廊块(具有相同类别的旧画廊)。
The loading of new photos work fine and i get gallery photos based on colour.新照片的加载工作正常,我获得了基于颜色的画廊照片。 But when ajax load new gallery the slider don't work, i think becouse the woocommere js, who create the slider, is read only on page load.
但是当ajax加载新图库时,滑块不起作用,我认为因为创建滑块的woocommere js只能在页面加载时读取。
I think i should reload some Woocommerce JS Function to recreate slider with his functions, but i don't know how.我想我应该重新加载一些 Woocommerce JS 函数来用他的函数重新创建滑块,但我不知道如何。
This is the php file, wich one i create a new gallery, called from ajax:这是 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>
This is the ajax function called on box colour click这是在框颜色点击时调用的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 funcions?
}
}
});
});
}
The way to solve issues like this is to look at the WooCommerce source code to see how the plugin initialises the gallery to begin with. 解决此类问题的方法是查看WooCommerce源代码,以了解插件如何初始化画廊。 Based on this, I think you need to do something like:
基于此,我认为您需要执行以下操作:
jQuery( '.woocommerce-product-gallery' ).each( function() {
jQuery( this ).wc_product_gallery();
} );
See Github: single-product.js for reference. 请参阅Github:single-product.js以获取参考。
I had same problem.我有同样的问题。 The dafoxuk answer is correct, you need to reinitialize ProductGallery class on the .woocomorce-product-gallery.
dafoxuk 的答案是正确的,您需要重新初始化 .woocomorce-product-gallery 上的 ProductGallery 类。 The problem was that this element already has a flexslider entity attached to it.
问题是这个元素已经附加了一个 flexslider 实体。 To solve this, just remove that element (.woocomorce-product-gallery) and create a new identical one.
要解决此问题,只需删除该元素 (.woocomorce-product-gallery) 并创建一个新的相同元素。 (Flexslider doesn't have a way to detach itself from the element as far as I know)
(据我所知,Flexslider 没有办法将自己与元素分离)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.