https://autosteklo77.com/t/v2477/images/js/product_preview_popup.js

1$(function(){
2    var quick_view_class = "product-quick-view2";
3    var $quick_view_trigger;
4	var previewEvent = new Event(`productPrevievInit`, {bubbles: true});
5	
6    $(document).on('click', '.card_popup_close', function(){
7    	myo.close();
8    });
9    var obj = {
10    	popupFlag: true
11    };
12    
13    $(document).on("click", ".shop-product-button", function (e) {
14        var $this = $(this);
15        var url = $this.attr("data-url") || $this.attr("href");
16        
17		obj.currentProductUrl = url;
18		obj.currentPrice = false;
19		
20		if( shop2.cf_margin_price_enabled ){
21			obj.currentPrice = $this.closest('form').find('.product-price');
22		}
23		
24		if ($this.parents('.popover-body').length>0 || $this.parents('.promo-products-list').length>0) {
25			obj.popupFlag = false;
26		} else {
27			obj.popupFlag = true;
28		}
29		
30		return obj
31    });
32    
33    shop2.on('afterCartAddItem', function(d, status) {
34		if (!d.errstr && obj.popupFlag) { // если ошибок нет
35			$('#shop2-msg').hide();
36			loadProduct(obj.currentProductUrl);
37		}
38	});
39
40    if (shop2 && shop2.product && shop2.product._reload) {
41        var reload = shop2.product._reload;
42        
43        shop2.product._reload = function(node) {
44            var args = Array.prototype.slice.call(arguments, 0);
45            var popoverDiv = $(node).closest("." + quick_view_class);
46            if (popoverDiv.length) {
47                reloadProduct(node);
48            } else {
49                reload.apply(this, args);
50            }
51        }
52    }
53
54    function loadProduct (url, callback) {
55    	
56        if (!myo) return false;
57        if ($('.product-quick-view2').length>0) {
58        	myo.close();
59        };      
60        myo.open({
61            ajax: url + '?&products_only=1&product_preview=1',
62            wrapClass: quick_view_class,
63            onLoad: function () {
64				
65				if (typeof amountInit === "function") {
66                	amountInit();
67				};
68				
69		
70                
71                const imageObserver = new IntersectionObserver((entries, imgObserver) => {
72                    entries.forEach((entry) => {
73                        if (entry.isIntersecting) {
74                            const lazyImage = entry.target
75                            lazyImage.src = lazyImage.dataset.src
76                            lazyImage.classList.remove("gr_lazy_load");
77                            imgObserver.unobserve(lazyImage);
78                        }
79                    })
80                });
81                const arr = document.querySelectorAll("img.gr_lazy_load")
82                arr.forEach((v) => {
83                    imageObserver.observe(v);
84                });
85                
86                if( obj.currentPrice ){
87
88                    this.bodyDiv.find('.card-product-preview__item .card-product-preview__price').html(
89                        obj.currentPrice.html()
90                    );
91                }
92                
93                
94                var $popupKindClass = $(".popup_kinds_slider");
95                
96                if ($popupKindClass.length>0) {
97                    var sliderAutoplay = $(".popup_kinds_slider").data("autoplay");
98                    // forEach function from Todd Motto"s  blog, as mentioned above
99                    var forEachSlider = function(array, callback, scope) {
100                        for (var i = 0; i < array.length; i++) {
101                            callback.call(scope, i, array[i]); // passes back stuff we need
102                        }
103                    };
104                    // tiny-slider initialisation
105                    var sliders = document.querySelectorAll(".popup_kinds_slider");
106                    forEachSlider(sliders, function(index, value) {
107                        let thumbnail = value.dataset.name;
108                        let multislider = tns({
109                            loop: true,
110                            container: value,
111                            slideBy: 1,
112                            autoplayTimeout: 3000,
113                            autoplayHoverPause: true,
114                            mode: "carousel",
115                            axis: "horizontal",
116                            autoplay: sliderAutoplay,
117                            autoplayButtonOutput: false,
118                            mouseDrag: true,
119                            center: false,
120                            autoWidth: false,
121                            nav: true,
122                            navPosition: "bottom",
123                            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>'],
124                            preventActionWhenRunning: true,
125                            responsive: {
126                                320: {
127                                    items: 1,
128                                    gutter: 0,
129                            		controls: false
130                                },
131                                480: {
132                                    items: 1,
133                                    gutter: 0,
134                            		controls: false
135                                },
136                                768: {
137                                    items: 2,
138                                    gutter: 20,
139                            		controls: true
140                                },
141                                1024: {
142                                    items: 2,
143                                    gutter: 20,
144                            		controls: true
145                                }
146                            }
147                        });
148                    });
149                }
150                
151                if ($.isFunction(callback)) {
152                    callback();
153                };
154                document.dispatchEvent(previewEvent);
155            }
156        });
157    };
158
159    function reloadProduct (node) {
160        var $node = $(node),
161            kinds = shop2.product.getNodeData(node, 'kinds', true),
162            paramName = shop2.product.getNodeData(node, 'name'),
163            paramValue = shop2.product.getNodeData(node, 'value'),
164            $form = $node.closest('form'),
165            form = $form.get(0),
166            meta, kind_id, product_id;
167            
168        if (kinds && $.type(paramName) !== 'undefined' && $.type(paramValue) !== 'undefined' && form) {
169
170            if (form.elements.meta) {
171                meta = $.parseJSON(form.elements.meta.value);
172            }
173
174            product_id = form.elements.product_id.value;
175
176            $form.find('[name=submit]').prop('disabled', true);
177

178            kind_id = shop2.product.findKindId(product_id, kinds, paramName, paramValue, meta);
179
180            if (kind_id === 0) return false;
181
182            var url = window.location.protocol + "//" + window.location.host + shop2.uri + "/product/" + kind_id;
183
184            loadProduct(url);
185        }
186    };
187});