https://www.manzetticlothing.com/wp-content/themes/manzetti/assets/js/modules/outfits.js

1jQuery(function($){
2    'use strict';
3
4    /** Outfits */
5    SK.outfits = function(){
6
7        SK.outfits.Pins();
8        SK.outfits.Media();
9        SK.outfits.Lightbox();
10
11    };
12
13    SK.outfits.Pins = function(){
14
15        if( $('.outfit__item').length ) {
16
17            let ajaxRequest = null;
18            const dynamicPanel = '<div class="outfit__product"></div>';
19
20            $(document).off('click', '.outfit-pin-js').on('click', '.outfit-pin-js', function(e){
21
22                e.preventDefault();
23
24                const _self     = $(this);
25                const product   = _self.attr('data-product');
26                const container = _self.closest('.outfit__item');
27
28                _self.addClass('outfit__pin--active');
29                ajaxCallProduct(ajaxRequest, product, $(dynamicPanel), container);
30
31                return false;
32
33            });
34
35            $('.sk-main').on('click', function(e) {
36                if ( !$('.outfit__product').is(e.target) && $('.outfit__product').has(e.target).length === 0 && $('.outfit__product--active').length ) {
37                    panelAnimationOut();
38                }
39            });
40
41        }
42
43        // Call Product
44        function ajaxCallProduct(ajaxRequest, product, panel, container) {
45
46            container.addClass('is--loading');
47            ajaxRequest = $.ajax({
48                url : theme_objects.ajax_url,
49                type: 'POST',
50                data: {
51                    action: 'sk_theme_outfit_product_action',
52                    product_id: product,
53                },
54                beforeSend: function() {
55
56                    if( ajaxRequest != null && ajaxRequest.readyState < 4 ) {
57                        ajaxRequest.abort();
58                    }
59
60                },
61                success: function(response) {
62
63                    if( response.result == true ) {
64                        panelAnimateIn(panel, container, response.content);
65
66                        SK.wishlist.Guest.ProductsUpdate();
67                        SK.wishlist.User.ProductsUpdate();
68                    }
69
70                },
71                error: function(){
72                    console.log('error');
73                }
74            });
75
76        }
77
78        // Panel Animations
79        function panelAnimateIn(panel, container, content){
80
81            container.removeClass('is--loading').addClass('outfit__item--opened');
82            panel.appendTo(container.find('.outfit__space')).html(content);
83
84            gsap.to( panel, {
85                duration: 0.3,
86                delay: 0.15,
87                y: '-50%',
88                autoAlpha: 1,
89                ease: 'power2.out',
90                onComplete: function(){
91                    panel.addClass('outfit__product--active');
92                }
93            });
94
95        }
96
97        function panelAnimationOut(){
98
99            if( $('.outfit__product--active').length ) {
100
101                const pinActive = $('.outfit__pin--active');
102                const panelActive = $('.outfit__item--opened');
103                const productActive = $('.outfit__product--active');
104
105                gsap.to( productActive, {
106                    duration: 0.3,
107                    y: '-40%',
108                    autoAlpha: 0,
109                    ease: 'power2.out',
110                    onComplete: function(){
111                        pinActive.removeClass('outfit__pin--active');
112                        panelActive.removeClass('outfit__item--opened');
113                        productActive.removeClass('outfit__product--active').remove();
114                    }
115                });
116
117            }
118
119        }
120
121    };
122
123    SK.outfits.Media = function(){
124
125        if( $('.sk-outfit-single').length ) {
126
127            const carouselProduct = $('.single-product__featured .swiper');
128            const carouselThumbs = $('.single-product__thumbs .swiper');
129
130            const swiperThumbs = new Swiper( carouselThumbs[0], {
131                effect: 'slide',
132                direction: 'vertical',
133                speed: 300,
134                autoHeight: true,
135                slidesPerView: 'auto',
136                spaceBetween: 15,
137                freeMode: true,
138                slideToClickedSlide: true,
139                navigation: {
140                    nextEl: $('.single-product__thumbs').find('.swiper-button-next')[0],
141                    prevEl: $('.single-product__thumbs').find('.swiper-button-prev')[0],
142                },
143                on: {
144                    lazyImageReady: function(slide, image){
145                        setTimeout( function(){
146                            image.className += ' initial';
147                        }, 10 );
148                    },
149                }
150            });
151
152            const swiperProducts = new Swiper( carouselProduct[0], {
153                effect: 'slide',
154                speed: 300,
155                autoHeight: true,
156                slidesPerView: 1,
157                spaceBetween: 0,
158                preloadImages: false,
159                lazy: {
160                    loadPrevNext: true
161                },
162                navigation: {
163                    nextEl: carouselProduct.find('.swiper-button-next')[0],
164                    prevEl: carouselProduct.find('.swiper-button-prev')[0],
165                },
166                pagination: {
167                    el:  carouselProduct.find('.swiper-pagination')[0],
168                    type: 'bullets',
169                    clickable: true,
170                },
171                thumbs: {
172                    swiper: swiperThumbs,
173                },
174                on: {
175                    init: function(){
176                        SK.carousel.CenterArrowsToMedia(carouselProduct, 'media');
177                    },
178                    lazyImageReady: function(slide, image){
179                        setTimeout( function(){
180                            image.className += ' initial';
181                        }, 10 );
182                    },
183                    resize: function(){
184                        SK.carousel.CenterArrowsToMedia(carouselProduct, 'media');
185                    },
186                }
187            });
188            
189        }
190
191    };
192
193    SK.outfits.Lightbox = function(){
194
195        $('[data-fancybox="product-gallery"]').fancybox({
196            loop: false,
197            hash: false,
198            arrows: true,
199            infobar: false,
200            idleTime: 0,
201            buttons: [
202                "zoom",
203                "close"
204            ],
205            animationEffect: "fade",
206            animationDuration: 500,
207            transitionEffect: "fade",
208            transitionDuration: 500,
209        });
210
211    };
212
213});