使用 Ajax 更新 Woocommerce 产品库答案

【问题标题】：Update Woocommerce product gallery with Ajax使用 Ajax 更新 Woocommerce 产品库
【发布时间】：2019-01-09 16:57:58
【问题描述】：

我正在尝试根据 woocommerce 产品页面中的颜色创建动态产品库。当我单击一种颜色时，例如红色，我应该会看到 Red Gallery 的照片。为此，我将所有 woocommerce 画廊块替换为由 ajax 创建的新画廊块（具有相同类别的旧画廊）。

新照片的加载工作正常，我根据颜色获得图库照片。但是当 ajax 加载新画廊时，滑块不起作用，我认为因为创建滑块的 woocommere 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 funcions?
                    }
                }
            });
        });
    }

【问题讨论】：

标签： javascript php jquery wordpress woocommerce

【解决方案1】：

解决此类问题的方法是查看 WooCommerce 源代码，了解插件如何初始化图库。基于此，我认为您需要执行以下操作：

jQuery( '.woocommerce-product-gallery' ).each( function() {
    jQuery( this ).wc_product_gallery();
} );

参考Github: single-product.js。

【讨论】：

感谢您的评论。已经尝试做这样的事情，但不工作

【解决方案2】：

我有同样的问题。 dafoxuk 的答案是正确的，您需要重新初始化 .woocomorce-product-gallery 上的 ProductGallery 类。问题是这个元素已经附加了一个 flexslider 实体。要解决此问题，只需删除该元素 (.woocomorce-product-gallery) 并创建一个新的相同元素。（据我所知，Flexslider 没有办法将自己与元素分离）

【讨论】：