Product light-box not working after ajax load

  • Resolved joeidv

    (@joeidv)


    7 years, 3 months ago

    Hey,

    Rather then redirect to the single product page I have my site theme configured to load a a product lightbox. After loading an AJAX filter the lightbox link is no longer “clickable”.

    Let me know your thoughts on what I might need to change.

    I’m currently using the free version of this plugin (want to upgrade to pro if I can get this problem fixed)

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author RazyRx

    (@razyrx)

    Hello @joeidv,

    Please provide your site URL.

    Regards,
    Oleg

    Thread Starter joeidv

    (@joeidv)

    Hi @razyrx ,

    So I can’t provide a site link as i’m working on a dev site that isn’t public.
    I can provide any code that might be relevant though.

    This is the PHP file for the lightbox function.

    // Add Button to Grid Tools
function flatsome_lightbox_button(){
    if(get_theme_mod('disable_quick_view', 0)) return;

    // Run Quick View Script
    wp_enqueue_script('wc-add-to-cart-variation');

    global $product;
    echo '  <a class="quick-view" data-prod="'.$product->get_id().'" href="#quick-view">'.__('Quick View','flatsome').'</a>';
}
add_action('flatsome_product_box_actions', 'flatsome_lightbox_button', 50);

/* Add stuff to lightbox */
add_action( 'woocommerce_single_product_lightbox_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_lightbox_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_lightbox_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_before_single_product_lightbox_summary','woocommerce_show_product_sale_flash', 20);
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_single_excerpt' 30);

if(get_theme_mod('product_info_meta', 1)){
  add_action( 'woocommerce_single_product_lightbox_summary', 'woocommerce_template_single_meta', 40);
}

/* Quick View Output */
function flatsome_quickview() {
    global $post, $product, $woocommerce;
    $prod_id =  $_POST["product"];
    $post = get_post($prod_id);
    $product = wc_get_product($prod_id);
    ob_start();

    wc_get_template('content-single-product-lightbox.php');

    $output = ob_get_contents();
    ob_end_clean();
    echo $output;
    die();
}

add_action('wp_ajax_flatsome_quickview', 'flatsome_quickview');
add_action('wp_ajax_nopriv_flatsome_quickview', 'flatsome_quickview');
    Plugin Author RazyRx

    (@razyrx)

    Hi @joeidv,

    When you click on “Quick view” button browser execute some JavaScript code to load product information and display it, this code was attached to this button on page load, but on filtering products replaces with new one, and buttons with this products doesn’t have any JavaScript code attached to it.
    You need to add same JavaScript as on page load to “After Update” field in plugin settings -> JavaScript tab

    Regards,
    Oleg

    Thread Starter joeidv

    (@joeidv)

    I have purchased the full version of the plugin, am loving the extra features!
    Hoping to figure this out soon, am searching for that javascript code.
    This is the function I believe:

     85: function(t, e) {
        "use strict";
        Flatsome.behavior("quick-view", {
            attach: function(t) {
                jQuery(".quick-view", t).each(function(t, e) {
                    jQuery(e).hasClass("quick-view-added") || (jQuery(e).click(function(t) {
                        if ("" != jQuery(this).attr("data-prod")) {
                            jQuery(this).parent().parent().addClass("processing");
                            var e = jQuery(this).attr("data-prod"),
                                i = {
                                    action: "flatsome_quickview",
                                    product: e
                                };
                            jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
                                jQuery(".processing").removeClass("processing"), jQuery.magnificPopup.open({
                                    removalDelay: 300,
                                    closeBtnInside: !0,
                                    autoFocusLast: !1,
                                    items: {
                                        src: '<div class="product-lightbox lightbox-content">' + t + "</div>",
                                        type: "inline"
                                    }
                                }), setTimeout(function() {
                                    jQuery(".product-lightbox").imagesLoaded(function() {
                                        jQuery(".product-lightbox .slider").flickity({
                                            cellAlign: "left",
                                            wrapAround: !0,
                                            autoPlay: !1,
                                            prevNextButtons: !0,
                                            adaptiveHeight: !0,
                                            imagesLoaded: !0,
                                            dragThreshold: 15
                                        })
                                    })
                                }, 300), jQuery(".product-lightbox form").hasClass("variations_form") && jQuery(".product-lightbox form.variations_form").wc_variation_form(), jQuery(".product-lightbox form.variations_form").on("show_variation", function(t, e) {
                                    e.image.src ? (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image.src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0)) : e.image_src && (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image_src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0))
                                }), jQuery(".product-lightbox .quantity").addQty()
                            }), t.preventDefault()
                        }
                    }), jQuery(e).addClass("quick-view-added"))
                })
            }
        })
    }

    Not sure what I need to add to the Javascript page.

    • This reply was modified 7 years, 3 months ago by joeidv.
    • This reply was modified 7 years, 3 months ago by joeidv.
    Thread Starter joeidv

    (@joeidv)

    Not sure what Javascript I need to add

    
 85: function(t, e) {
        "use strict";
        Flatsome.behavior("quick-view", {
            attach: function(t) {
                jQuery(".quick-view", t).each(function(t, e) {
                    jQuery(e).hasClass("quick-view-added") || (jQuery(e).click(function(t) {
                        if ("" != jQuery(this).attr("data-prod")) {
                            jQuery(this).parent().parent().addClass("processing");
                            var e = jQuery(this).attr("data-prod"),
                                i = {
                                    action: "flatsome_quickview",
                                    product: e
                                };
                            jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
                                jQuery(".processing").removeClass("processing"), jQuery.magnificPopup.open({
                                    removalDelay: 300,
                                    closeBtnInside: !0,
                                    autoFocusLast: !1,
                                    items: {
                                        src: '<div class="product-lightbox lightbox-content">' + t + "</div>",
                                        type: "inline"
                                    }
                                }), setTimeout(function() {
                                    jQuery(".product-lightbox").imagesLoaded(function() {
                                        jQuery(".product-lightbox .slider").flickity({
                                            cellAlign: "left",
                                            wrapAround: !0,
                                            autoPlay: !1,
                                            prevNextButtons: !0,
                                            adaptiveHeight: !0,
                                            imagesLoaded: !0,
                                            dragThreshold: 15
                                        })
                                    })
                                }, 300), jQuery(".product-lightbox form").hasClass("variations_form") && jQuery(".product-lightbox form.variations_form").wc_variation_form(), jQuery(".product-lightbox form.variations_form").on("show_variation", function(t, e) {
                                    e.image.src ? (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image.src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0)) : e.image_src && (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image_src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0))
                                }), jQuery(".product-lightbox .quantity").addQty()
                            }), t.preventDefault()
                        }
                    }), jQuery(e).addClass("quick-view-added"))
                })
            }
        })
    }
    Plugin Author RazyRx

    (@razyrx)

    Hi @joeidv,

    Please try to add in plugin settings -> JavaScript tab -> after update field this code
    Flatsome.behaviors["quick-view"].attach();

    Regards,
    Oleg

    Thread Starter joeidv

    (@joeidv)

    Thanks @razyrx

    That got it working, appreciate the great support.

    Best,

    Joe

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Product light-box not working after ajax load’ is closed to new replies.