https://www.zajadacz.de/out/master/src/js/widgets/custom/tcaz_crossselling_slider.js?1790942523?1790942539

1if (window.tc === undefined) {
2    var tc = {};
3}
4
5tcaz.crosssellingSlider = {};
6
7tcaz.crosssellingSlider.javascript = function (types, article, configOverwrite = undefined) {
8
9    if (types === undefined || types === '' || types === null) {
10        return false;
11    }
12
13    if(types !== 'undefined') {
14        this._types = types.replace(' ', '').split(',');
15    }
16
17    if(article !== 'undefined') {
18        this._article = article;
19    }
20
21    if ( configOverwrite !== undefined ) {
22        this._configOverwrite = configOverwrite;
23    }
24
25}
26
27tcaz.crosssellingSlider.javascript.prototype = {
28
29    _types      : undefined,
30    _article    : undefined,
31
32    _configOverwrite: undefined,
33
34    // config for sliders
35    config: {
36
37        'basket' : {
38            'size': {
39                'desktop': 5,
40                'tablet': 3,
41                'mobile': 1
42            },
43            'margin': 10,
44            'responsive': 'fnc',
45        },
46
47        'actionlist' : {
48            'size': {
49                'desktop': 1,
50                'tablet': 1,
51                'mobile': 1
52            },
53            'margin': 20,
54            'stagePadding': 30
55        },
56
57        'last100' : {
58            'size': {
59                'desktop': 1,
60                'tablet': 1,
61                'mobile': 1
62            },
63            'margin': 20,
64            'stagePadding': 30
65        },
66
67        'newArticles' : {
68            'size': {
69                'desktop': 1,
70                'tablet': 1,
71                'mobile': 1
72            },
73            'margin': 20,
74            'stagePadding': 30
75        },
76
77        'top100' : {
78            'size': {
79                'desktop': 1,
80                'tablet': 1,
81                'mobile': 1
82            },
83            'margin': 20,
84            'stagePadding': 30
85        },
86
87        'crossselling' : {
88            'size': {
89                'desktop': 1,
90                'tablet': 0,
91                'mobile': 0
92            },
93            'margin': 20,
94            'responsive': 'fnc',
95
96        },
97
98        'accessoires' : {
99            'size': {
100                'desktop': 1,
101                'tablet': 0,
102                'mobile': 0
103            },
104            'margin': 20,
105            'responsive': 'fnc'
106        },
107
108        'assortmentArticles' : {
109            'size': {
110                'desktop': 1,
111                'tablet': 0,
112                'mobile': 0
113            },
114            'margin': 9.9,
115            'responsive': 'fnc'
116        },
117
118        'articleAssortmentArticles': {
119            'size': {
120                'desktop': 1,
121                'tablet': 0,
122                'mobile': 0
123            },
124            'margin': 9.9,
125            'responsive': 'fnc'
126        },
127
128        'assortments' : {
129            'size': {
130                'desktop': 1,
131                'tablet': 0,
132                'mobile': 0
133            },
134            'margin': 9.9,
135            'responsive': 'fnc'
136        }
137
138
139    },
140
141    calculateResponsive: function () {
142
143        var self, width, margin, i, responsive;
144
145        self = this;
146
147        width  = 320
148        margin = 20
149
150        responsive = {};
151
152        for (i = 0; i < 7; i++) {
153            if (i * width + margin > 2 * width) {
154                responsive[i * width + margin] = {
155                    items : i,
156                    slideBy : i,
157                    stagePadding: 0,
158                }
159            }
160        }
161
162        return responsive;
163    },
164
165
166    setupCarousel: function(container) {
167
168        var type, self;
169
170        type        = container.data('type');
171        self        = this
172
173        container.find('.owl-carousel').owlCarousel({
174            items: 1,
175            loop: false,
176            slideSpeed: 2000,
177            nav: true,
178            autoplay: false,
179            dots: false,
180            lazyLoad: true,
181            margin: this.config[type].margin || 0,
182            responsive: self.config[type].responsive === 'fnc' ? responsiveFn() : responsiveValues(),
183            responsiveBaseElement: self.config[type].responsive === 'fnc' ? container.get(0): window,
184            responsiveRefreshRate: 200,
185            onInitialized: function(event) {
186                if (tc.lib.getCurrentBreakpoint() === 'mobile' && self.config[type].stagePadding !== undefined) {
187
188                    container.find('.owl-item:first').css('margin-left', '-30px');
189                }
190
191                toggleNavigation(event);
192            },
193            onResized: toggleNavigation,
194        });
195
196        function toggleNavigation(event) {
197            var $carousel = $(event.target);
198            if (event.item.count <= event.page.size) {
199                $carousel.find('.owl-nav').hide();
200            } else {
201                $carousel.find('.owl-nav').show();
202            }
203        }
204
205        function responsiveValues(){
206            return {
207                0: {
208                    items: self.config[type].size.mobile,
209                    stagePadding: self.config[type].stagePadding,
210                },
211                750: {
212                    items: self.config[type].size.tablet,
213                    stagePadding: 0,
214                    margin: 0
215                },
216                1024: {
217                    items: self.config[type].size.desktop,
218                    stagePadding: 0,
219                    margin: 0
220                }
221            }
222        }
223
224        function responsiveFn() {
225            if (self.config[type].responsive === 'fnc') {
226                return self.calculateResponsive();
227            } else {
228                return {
229                    0: {
230                        items: self.config[type].size.mobile,
231                        stagePadding: self.config[type].stagePadding || 0
232                    },
233                    750: {
234                        items: self.config[type].size.tablet,
235                    },
236                    1024: {
237                        items: self.config[type].size.desktop,
238                    }
239                };
240            }
241        }
242
243        container.find('.owl-prev span').html('<i class="icon icon-new primary blue">'+tc.tpl.arrowLeftSmall+'</i>');
244        container.find('.owl-next span').html('<i class="icon icon-new primary blue">'+tc.tpl.arrowRightSmall+'</i>');
245
246
247    },
248
249    build: function(data) {
250
251        var self, container;
252
253        self = this;
254
255        if (typeof data === 'undefined') {
256            return false;

257        }
258
259        Object.entries(data).forEach(([key, value]) => {
260
261            if (key === 'actionList' && !tcaz.user.rights.includes('TCAZ_SHOW_ACTIONS')) {
262                return;
263            }
264
265            container = tc.jQuery('[data-slider="'+ key +'"]');
266
267            container.parent().find('#loading').remove();
268
269            if (key === "basket") {
270                tc.jQuery('.crossselling-loading').remove();
271            }
272
273            if( container.length > 0 && value !== '') {
274
275                container.removeClass('hidden');
276                container.append('<div class="owl-carousel ' + key + '">' + value + '</div>');
277                container.data('type', key);
278
279                this.setupCarousel(container);
280            }
281
282        });
283    },
284
285    load: function() {
286
287        var self, params, url;
288
289        self    = this;
290
291        params = '';
292
293        self._types.forEach(function(type) {
294            params += '&types[]=' + type;
295        });
296
297        if ( self._article !== undefined ) {
298            params += '&oxid=' + self._article;
299        }
300
301        tc.jQuery.ajax({
302            url: tc.link.ajax + '?cl=tc_crossselling_calculator_ajax' + params + '&renderPartial=1',
303            type: "POST",
304        }).done(function (data) {
305            self.build(data);
306        });
307    }
308}