https://sbuket-nn.ru/bitrix/templates/dresscodeV2/components/bitri…/vue3/script.js?170299746114557

1function createVueSaleBasket(params) {
2
3    let app = BX.Vue3.BitrixVue.createApp({
4        data() {
5            return Object.assign({}, params, {
6                poolData: {},
7                ajaxWork: false,
8                timer: false,
9                questionItem: false,
10            });
11        },
12
13        mounted() {
14            BX.addCustomEvent("onBasketAdd", BX.delegate(this.onBasketAdd, this));
15            BX.addCustomEvent("onBasketResult", BX.delegate(this.onBasketResult, this));
16
17            this.updatePostCard();
18
19            $('.gifts__slider').each(function(){
20                $(this).owlCarousel({
21                    nav: true,
22                    navClass: ['feedback__nav feedback__nav-prev', 'feedback__nav feedback__nav-next'],
23                    mouseDrag : true,
24                    touchDrag : true,
25                    responsive: {
26                        991 : {
27                            items: 4,
28                        },
29                        768 : {
30                            items: 3,
31                        },
32                        0 : {
33                            items: 2,
34                        },
35                    },
36                });
37            });
38            $(document).on("click", ".item-podarkiblock__img-box", function(e){
39                var name = $(this).data("name"),
40                    img = $(this).data("img"),
41                    id = $(this).data("id");
42                $("#modalGift .modal-title").text(name);
43                $("#modalGift .img-responsive").attr("src", img);
44                $("#modalGift .changeCart").attr("data-id", id);
45            });
46        },
47
48        computed: {
49            basketItems() {
50                let result = [];
51
52                this.result.BASKET_ITEM_RENDER_DATA.forEach(item => {
53                    if (item.DELAY || item.NOT_AVAILABLE)
54                        return;
55
56                    result.push(item);
57                });
58
59                return result;
60            },
61
62        },
63
64        methods: {
65            onBasketAdd()
66            {
67                this.sendRequest();
68            },
69
70            action(e) {
71                let el = e.currentTarget || e.target;
72
73                if (typeof this[el.dataset.action + 'Action'] === 'function') {
74                    this[el.dataset.action + 'Action'](e);
75                }
76            },
77
78            incrementQuantity(item, value)
79            {
80                if (this.ajaxWork)
81                    return;
82
83                let quantity = item.QUANTITY;
84
85                quantity += value;
86                if (quantity<=0)
87                    quantity = 1;
88
89                if (item.QUANTITY == quantity)
90                    return;
91
92                item.QUANTITY = quantity;
93
94                this.poolData['QUANTITY_' + item.ID] = quantity;
95                this.sendPoolData();
96            },
97
98            sendPoolData() {
99                if (this.timer) {
100                    clearTimeout(this.timer);
101                    this.timer = false;
102                }
103
104                this.timer = setTimeout(BX.delegate(this.sendRequest, this), 300);
105            },
106
107            sendRequest(exData, callback) {
108                if (this.timer) {
109                    clearTimeout(this.timer);
110                    this.timer = false;
111                }
112
113                if (this.ajaxWork)
114                    return;
115
116                /*
117                if (!Object.values(this.poolData).length)
118                    return;
119                 */
120
121                let data = {};
122
123                data[this.params.ACTION_VARIABLE] = 'recalculateAjax';
124                data.via_ajax = 'Y';
125                data.site_id = this.siteId;
126                data.site_template_id = this.siteTemplateId;
127                data.sessid = BX.bitrix_sessid();

128                data.template = this.template;
129                data.signedParamsString = this.signedParamsString;
130                data.basket = this.poolData;
131
132                if (exData && Object.keys(exData).length)
133                {
134                    data = Object.assign(data, exData);
135                }
136
137                this.poolData = {};
138
139                this.ajaxWork = true;
140
141                $.ajax({
142                    method: 'POST',
143                    dataType: 'json',
144                    url: this.params.AJAX_PATH,
145                    data: data,
146                    context: this,
147                    success: function(response) {
148                        this.ajaxWork = false;
149
150                        if (typeof callback === 'function')
151                            callback.apply(response);
152
153                        BX.onCustomEvent('onBasketResult', [response]);
154                    },
155                    complete: this.ajaxComplete,
156                });
157            },
158
159            onBasketResult(response) {
160                this.result = response.BASKET_DATA;
161            },
162
163            ajaxComplete()
164            {
165                this.ajaxWork = false;
166            },
167
168            updatePostCard()
169            {
170                let text = [];
171
172                this.basketItems.forEach(item => {
173                    let key = 'POSTCARD_'+item.ID;
174
175                    if (localStorage[key+'_BLANK'] == "true")
176                    {
177                        text.push('Приложить пустую открытку');
178                    } else if (localStorage.hasOwnProperty(key+'_TEXT') && localStorage[key+'_TEXT'])
179                    {
180                        text.push(localStorage[key+'_TEXT']);
181                    }
182                });
183
184                localStorage['card_text'] = text.join("\n --- другая открытка --- \n");
185            },
186        },
187
188        template: params.vueTemplate
189    });
190
191    app.component('basket', {
192        props: {
193            basketItems: {
194                type: Object,
195                required: true,
196            },
197            total: {
198                type: Object,
199                required: true,
200            },
201            basketCoupon: {
202
203            },
204            couponList: {
205                type: Object,
206                required: true,
207            }
208        },
209        data() {
210            return {
211                showCouponForm: false,
212                coupon: '',
213            }
214        },
215        mounted()
216        {
217            this.couponList.forEach(item => {
218                if (item.JS_STATUS == 'APPLYED')
219                {
220                    this.coupon = item.COUPON;
221                }
222            });
223
224            if (!this.coupon.length)
225                this.coupon = this.basketCoupon;
226
227            this.showCouponForm = this.coupon.length>0;
228        },
229        computed: {
230            buttonProps()
231            {
232                let r = {};
233
234                if (this.showCouponForm)
235                    r['data-fashion-arrow-active'] = true;
236
237                return r;
238            },
239
240            currentCoupon()
241            {
242                let result = false;
243
244                this.couponList.every(item => {
245                    if (item.COUPON.toUpperCase() == this.coupon.toUpperCase())
246                        result = item;
247
248                    return !result;
249                });
250
251                return result;
252            },
253
254            currentCouponStatus()
255            {
256                let c = this.currentCoupon;
257
258                if (!c)
259                    return false;
260
261                return c.JS_STATUS;
262            },
263
264            currentCouponText()
265            {
266                let c = this.currentCoupon;
267
268                if (!c)
269                    return false;
270
271                return c.CHECK_CODE_TEXT.join(', ');
272            },
273
274            userCoupons()
275            {
276                let result = {};
277
278                if (!this.total.DISCOUNT_CARD || !this.total.DISCOUNT_CARD.COUPONS || !this.total.DISCOUNT_CARD.COUPONS.length)
279                    return false;
280
281                let items = JSON.parse(JSON.stringify(this.total.DISCOUNT_CARD.COUPONS));
282

283                items.forEach(item => {
284                    item.SELECTED = false;
285                    result[item.COUPON] = item;
286                });
287
288                if (!Object.keys(result).length)
289                    return false;
290
291                this.couponList.forEach(item => {
292
293                    if (result.hasOwnProperty(item.COUPON))
294                    {
295                        result[item.COUPON].SELECTED = item.JS_STATUS == 'APPLYED';
296                    }
297
298                    return !result;
299                });
300
301                return result;
302            },
303        },
304        watch: {
305            'total.DISCOUNT_CARD.USE_BONUS_BALANCE': function (val)
306            {
307                this.$root.sendRequest({
308                    USE_BONUS_BALANCE: val ? 'Y' : 'N',
309                });
310            },
311        },
312        methods: {
313            submitCoupon()
314            {
315                this.$root.sendRequest({
316                    basket: {
317                        coupon: this.coupon,
318                    }
319                });
320                //coupon
321                //delete_coupon
322                //recalculate
323            },
324        },
325        template: '#vue-basket'
326    });
327
328    app.component('user-coupon', {
329        props: {
330            item: {
331                type: Object,
332                required: true,
333            },
334            userCoupons: {
335                type: Object,
336                required: true,
337            },
338        },
339        methods: {
340            select()
341            {
342                let deleteCoupon = false,
343                    curCoupon = this.item.COUPON,
344                    self = this,
345                    checked = this.$refs.input.checked;
346

347                Object.values(this.userCoupons).forEach(item => {
348                    if (item.SELECTED)
349                    {
350                        deleteCoupon = item.COUPON;
351                    }
352                });
353
354                if (deleteCoupon)
355                {
356                    self.$root.sendRequest({
357                        basket: {
358                            delete_coupon: deleteCoupon,
359                        }
360                    }, function() {
361                        if (checked)
362                        {
363                            self.$root.sendRequest({
364                                basket: {
365                                    coupon: curCoupon,
366                                }
367                            });
368                        }
369                    });
370                } else {
371                    self.$root.sendRequest({
372                        basket: {
373                            coupon: curCoupon,
374                        }
375                    });
376                }
377            }
378        },
379        template: '#vue-user-coupon'
380    });
381
382    app.component('basket-empty', {
383        template: '#vue-basket-empty',
384    });
385
386    app.component('basket-item', {
387        props: {
388            item: {
389                type: Object,
390                required: true,
391            }
392        },
393        data() {
394            return {
395                modalConfirm: false,
396                inputFocused: false,
397                storage: {},
398            }
399        },
400        computed: {
401            addPostCard: {
402                get()
403                {
404                    this.storage['ADD'] = localStorage['POSTCARD_'+this.item.ID+'_ADD'] !== 'N';
405
406                    return this.storage['ADD'];
407                },
408                set(value)
409                {
410                    localStorage['POSTCARD_'+this.item.ID+'_ADD'] = value ? 'Y' : 'N';
411
412                    this.storage['ADD'] = value;
413
414                    this.$root.updatePostCard();
415                }
416            },
417
418            blankPostCard: {
419                get()
420                {
421                    this.storage['BLANK'] = !!localStorage['POSTCARD_'+this.item.ID+'_BLANK'];
422                    return this.storage['BLANK'];
423                },
424                set(value)
425                {
426                    if (value)
427                    {
428                        localStorage['POSTCARD_'+this.item.ID+'_BLANK'] = value;
429                    } else {
430                        delete localStorage['POSTCARD_'+this.item.ID+'_BLANK'];
431                    }
432                    this.storage['BLANK'] = value;
433
434                    this.$root.updatePostCard();
435                }
436            },
437
438            textPostCard: {
439                get()
440                {
441                    this.storage['TEXT'] = localStorage['POSTCARD_'+this.item.ID+'_TEXT'];
442                    return this.storage['TEXT'] ? this.storage['TEXT'] : '';
443                },
444                set(value)
445                {
446                    if (value)
447                    {
448                        localStorage['POSTCARD_'+this.item.ID+'_TEXT'] = value;
449                    } else {
450                        delete localStorage['POSTCARD_'+this.item.ID+'_TEXT'];
451                    }
452                    this.storage['TEXT'] = value;
453
454                    this.$root.updatePostCard();
455                },
456            },
457        },
458        watch: {
459            'item.QUANTITY': function(val) {
460                val = parseFloat(val);
461                if (isNaN(val) || val<=0)
462                {
463                    this.item.QUANTITY = 1;
464                    return;
465                }
466
467                this.$root.poolData['QUANTITY_' + this.item.ID] = val;
468                this.$root.sendPoolData();
469            },
470        },
471        methods: {
472            deleteItem()
473            {
474                this.modalConfirm = false;
475                this.$root.poolData['DELETE_' + this.item.ID] = 'Y';
476                this.$root.sendRequest();
477            },
478        },
479        template: '#vue-basket-item'
480    });

481
482    app.component('modal-delete-confirm', {
483        emits: ['cancel','confirm'],
484        mounted()
485        {
486            document.body.appendChild(this.$el);
487        },
488        template: '#vue-modal-delete-confirm'
489    });
490
491    return app.mount(params.container);
492}