Expanded in Modal window

Is Quick View a plugin or part of your theme? You will need to hook into a callback to trigger the initial collapse once the content has loaded. check your your quick-view plugin/theme and see if they offer such a callback. You can search the forums for a number of threads on similar callback issues.

Hit us back if you need more direction, and we’ll dive in bit deeper with you.

The quickview is part of the theme. We bought it from MagicalTheme … I will ask for support to the developer and will update soon here. Thank you very much.

By the way, the plugin is working just the initial display… the content should be hidden not expanded.. but when clicked it still working normally. What do you think? Can I just add jquery to add to just run the function initially when it loads? How? ??

normally the correct way would be to hook into to the quickview’s callback function.

Collapse-O-Matic already has a function you can call that will re-initialize the collapse elements, we just need to know the ‘when it finishes loading the quickview content’ to know when to trigger it.

If the developers are not providing the support your need, we can try and research the issue further. Is this the plugin you are using? More detailed info on the quickview plugin would be helpful.

I am not sure but looks like its the same as the screenshot…

We have Yith woocommerce plugins installed but I can’t find the yith-woocommerce-quick-view.

What we have are

yith-woocommerce-popup
yith-woocommerce-wishlist

and no word from either the theme or the plugin devs on a JavaScript callback trigger?

No response yet from their support.

Hi,

They told where to put the trigger for the callback. What are we going to add in the script?

Here is the quick view code.

//Quick View
        $('body').on('click','.quick-view',function(){
            var url = look_ajax_url;
            var productId = $(this).attr('product-data');
            var html = '<div class="look-page-loading">Loading....</div>';
            $.ajax({
                url: url,
                type: 'POST',
                data: {action : 'load_product',id : productId},
                beforeSend:function(){
                    $('body').append(html);
                },
                success: function(data){
                    $('.look-page-loading').remove();
                    $('.product-quickview-content').html(data);
                    $('#product-thumb-slide').waitForImages({
                        finished: function () {
                            $("#product-thumb-slide").verticalCarousel({nSlots: 4, speed: 400});
                        },
                        waitForAll: true
                    });

                    $("#myModal").modal();
                    if( !look_product_image_zoom && look_enable_product_lightbox)
                    {
                        $("a.zoom").prettyPhoto({
                            hook: 'data-rel',
                            social_tools: false,
                            theme: 'pp_woocommerce',
                            horizontal_padding: 20,
                            opacity: 0.8,
                            deeplinking: false
                        });
                        $("a[data-rel^='prettyPhoto']").prettyPhoto({
                            hook: 'data-rel',
                            social_tools: false,
                            theme: 'pp_woocommerce',
                            horizontal_padding: 20,
                            opacity: 0.8,
                            deeplinking: false
                        });
                    }
                    if (typeof($( '.variations_form' ).wc_variation_form) === "function")
                    {
                        $( '.variations_form' ).wc_variation_form();
                    }
                    $( '.variations_form .variations select' ).change();

                }
            });
        });

Thanks

ok, so it looks like they do not have an official call back. so you have a couple of options.
One: you can modify the QuickView code… but then this will be overwritten when the plugin (or theme?) is updated.

Two (recommended) we might be able to add a listener to trigger when the look-page-loading element is removed. To do this, you’ll need to add the following javascript to your theme:

jQuery(document).ready(function() {
    jQuery(".look-page-loading").on("remove", function () {
        collapse_init();
    });
});

There are a few ways to do this, but I would first check your theme for an option to add custom javascript to the header or footer.

Let us know if you get stuck, or require further assistance.

Update: I just did a quick search in the forums on QuickView and came up with this thread on just such a callback. In that case you would simply tie into it like so:

jQuery(document).on('qv_loader_stop', function(){
      collapse_init();
});

Thank you very much!

glad we could help. just give a shout if we can be of further assistance.