CODEWITHSUNDEEP
javascriptphpjquerywordpresswoocommerce
Brisk
Brisk

Reputation: 97

Update Woocommerce product gallery with Ajax

I'm trying to do a dynamic product gallery based on colours in woocommerce product page. When I click on one colour, example on red, i should see Red Gallery's photos. To do this i replaced all woocommerce gallery block with a new one created by ajax ( who have same classes of old gallery).

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 because the woocommere js, who create the slider, is read only on page load.

I think I should reload some Woocommerce JS Function to recreate slider with his functions, but I don't know how.

This is the php file, which one I create a new gallery, called from 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

    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?
                    }
                }
            });
        });
    }

Upvotes: 1

Views: 3499

Answers (2)

shadow
shadow

Reputation: 1

I had same problem. The dafoxuk answer is correct, you need to reinitialize ProductGallery class on the .woocomorce-product-gallery. The problem was that this element already has a flexslider entity attached to it. To solve this, just remove that element (.woocomorce-product-gallery) and create a new identical one. (Flexslider doesn't have a way to detach itself from the element as far as I know)

Upvotes: 0

dafoxuk
dafoxuk

Reputation: 469

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. 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.

Upvotes: 2

Related Questions