new product_preview_popup.js

$(function(){
    var quick_view_class = "product-quick-view2";
    var $quick_view_trigger;
    var previewEvent = new Event(`productPrevievInit`, {bubbles: true});

    $(document).on('click', '.card_popup_close', function(){
        myo.close();
    });
    var obj = {
        popupFlag: true
    };

    $(document).on("click", ".shop-product-btn", function (e) {
        var $this = $(this);
        var url = $this.attr("data-url") || $this.attr("href");

        obj.currentProductUrl = url;
        obj.currentPrice = false;

        if( shop2.cf_margin_price_enabled ){
            obj.currentPrice = $this.closest('form').find('.product-price');
        }

        if ($this.parents('.popover-body').length>0 || $this.parents('.promo-products-list').length>0) {
            obj.popupFlag = false;
        } else {
            obj.popupFlag = true;
        }

        return obj
    });

    shop2.on('afterCartAddItem', function(d, status) {
        if (!d.errstr && obj.popupFlag) { // если ошибок нет
            $('#shop2-msg').hide();
            loadProduct(obj.currentProductUrl);
        }
    });

    if (shop2 && shop2.product && shop2.product._reload) {
        var reload = shop2.product._reload;

        shop2.product._reload = function(node) {
            var args = Array.prototype.slice.call(arguments, 0);
            var popoverDiv = $(node).closest("." + quick_view_class);
            if (popoverDiv.length) {
                reloadProduct(node);
            } else {
                reload.apply(this, args);
            }
        }
    }

    function loadProduct (url, callback) {

        if (!myo) return false;
        if ($('.product-quick-view2').length>0) {
            myo.close();
        };
        myo.open({
            ajax: url + '?&products_only=1&product_preview=1',
            wrapClass: quick_view_class,
            onLoad: function () {

                if (typeof amountInit === "function") {
                    amountInit();
                };

                if (typeof shop2_gr.methods.amountInit === "function") {
                    shop2_gr.methods.amountInit();
                };

                const imageObserver = new IntersectionObserver((entries, imgObserver) => {
                    entries.forEach((entry) => {
                        if (entry.isIntersecting) {
                            const lazyImage = entry.target
                            lazyImage.src = lazyImage.dataset.src
                            lazyImage.classList.remove("gr_lazy_load");
                            imgObserver.unobserve(lazyImage);
                        }
                    })
                });
                const arr = document.querySelectorAll("img.gr_lazy_load")
                arr.forEach((v) => {
                    imageObserver.observe(v);
                });

                if( obj.currentPrice ){

                    this.bodyDiv.find('.card-product-preview__item .card-product-preview__price').html(
                        obj.currentPrice.html()
                    );
                }

                var $popupKindClass = $(".popup_kinds_slider");

                if ($popupKindClass.length>0) {
                    var sliderAutoplay = $(".popup_kinds_slider").data("autoplay");
                    // forEach function from Todd Motto"s  blog, as mentioned above
                    var forEachSlider = function(array, callback, scope) {
                        for (var i = 0; i < array.length; i++) {
                            callback.call(scope, i, array[i]); // passes back stuff we need
                        }
                    };
                    // tiny-slider initialisation
                    var sliders = document.querySelectorAll(".popup_kinds_slider");
                    forEachSlider(sliders, function(index, value) {
                        let thumbnail = value.dataset.name;
                        let multislider = tns({
                            loop: true,
                            container: value,
                            slideBy: 1,
                            autoplayTimeout: 3000,
                            autoplayHoverPause: true,
                            mode: "carousel",
                            axis: "horizontal",
                            autoplay: sliderAutoplay,
                            autoplayButtonOutput: false,
                            mouseDrag: true,
                            center: false,
                            autoWidth: false,
                            nav: true,
                            navPosition: "bottom",
                            controlsText: ['<svg class="gr-svg-icon"><use xlink:href="#icon_shop_slider_prev"></use></svg><svg class="gr-svg-icon gr_small_icon"><use xlink:href="#icon_shop_slider_prev_small"></use></svg>', '<svg class="gr-svg-icon"><use xlink:href="#icon_shop_slider_next"></use></svg><svg class="gr-svg-icon gr_small_icon"><use xlink:href="#icon_shop_slider_next_small"></use></svg>'],
                            preventActionWhenRunning: true,
                            responsive: {
                                320: {
                                    items: 1,
                                    gutter: 0,
                                    controls: false
                                },
                                480: {
                                    items: 1,
                                    gutter: 0,
                                    controls: false
                                },
                                768: {
                                    items: 2,
                                    gutter: 20,
                                    controls: true
                                },
                                1024: {
                                    items: 2,
                                    gutter: 20,
                                    controls: true
                                }
                            }
                        });
                    });
                }

                if ($.isFunction(callback)) {
                    callback();
                };
                document.dispatchEvent(previewEvent);
            }
        });
    };

    function reloadProduct (node) {
        var $node = $(node),
            kinds = shop2.product.getNodeData(node, 'kinds', true),
            paramName = shop2.product.getNodeData(node, 'name'),
            paramValue = shop2.product.getNodeData(node, 'value'),
            $form = $node.closest('form'),
            form = $form.get(0),
            meta, kind_id, product_id;

        if (kinds && $.type(paramName) !== 'undefined' && $.type(paramValue) !== 'undefined' && form) {

            if (form.elements.meta) {
                meta = $.parseJSON(form.elements.meta.value);
            }

            product_id = form.elements.product_id.value;

            $form.find('[name=submit]').prop('disabled', true);

            kind_id = shop2.product.findKindId(product_id, kinds, paramName, paramValue, meta);

            if (kind_id === 0) return false;

            var url = window.location.protocol + "//" + window.location.host + shop2.uri + "/product/" + kind_id;

            loadProduct(url);
        }
    };
});