https://rikasale.ru/local/components/slam/easybasket.ajax/templates/.default/catalog-card.js

1document.addEventListener('alpine:init', () => {
2
3    Alpine.data('productCard', ($el, catalogId) => ({
4        itemNode: null,
5        catalogId: null,
6        basketData: {},
7        basketDataDefault: {
8            PRELOADER: false,
9            ID: null
10        },
11        hasFavorite: false,
12        showAddButton: true,
13
14        init() {
15            const _this = this;
16            _this.itemNode = $el;
17            _this.catalogId = Number(catalogId);
18
19            //подписываемся за изменение глобальных хранилищ где может быть товар
20            Alpine.effect(() =>
21            {
22                // ищем товар в smallBasket
23                const findProduct = Alpine.store('smallBasket').productList.filter((e) => e.PRODUCT_ID === catalogId);
24
25                // console.log(Alpine.store('smallBasket').productList)
26
27                _this.basketData = findProduct.length === 0 ? _this.basketDataDefault : findProduct[0];
28
29                // console.log(_this.basketData.ID)
30
31                _this.showAddButton = _this.basketData.ID ? false : true
32
33
34                // ищем товар в favoriteItems
35                const findFavorite = Alpine.store('favoriteItems').items.filter((e) => e === catalogId);
36                this.hasFavorite = findFavorite.length > 0;
37            });
38
39            this.$watch('basketData', (v) => {
40                _this.showAddButton = !Number.isInteger(v.ID);
41            });
42        },
43        /**
44         * добавить в корзину
45         * @param quantity
46         */
47        addToBasket(quantity){
48
49            // При добавлении товара в корзину отправляем информацию в Яндекс метрику
50            if(location.hostname == "rikasale.ru" || location.hostname == "guide-russia.su"){
51                ym(83483953,'reachGoal','add_to_cart');
52                ym(91123796,'reachGoal','add_to_cart');
53                console.log('%c Аналитика - add_to_cart', 'color:green;font-size:16px;');
54            }
55
56            Alpine.store('smallBasket').addToBasket(this.catalogId, quantity);
57            this.showAddButton = false;
58            this.fly();
59        },
60        /**
61         * добавить/удалить избранное
62         * @param $el
63         */
64        editFavorite($el){
65            if ($el.classList.contains('active')){
66                Alpine.store('favoriteItems').deleteFavorite(this.catalogId);
67                return;
68            }
69            Alpine.store('favoriteItems').addFavorite(this.catalogId);
70            this.fly(true);
71        },
72
73        oneClickBuy(){
74            const oneClickNode = document.querySelector('#one-click-buy');
75            oneClickNode.dataset.productId = this.catalogId;
76            Alpine.store('oneClickModal').success = false;
77
78            $('#one-click-buy').modal();
79        },
80        /**
81         * анимация
82         * @param favorite
83         */
84        fly(favorite){
85            // поиск картинки
86            const img = this.itemNode.querySelector('.product-card__image img') || this.itemNode.querySelector('.product-image__main .swiper-slide-active img');
87            if (img === null) return;
88
89            const anim = new animateImageFly();
90            if (!favorite)
91            {
92                anim.animateBasket(img)
93                return;
94            }
95            anim.animateFavorite(img)
96        }
97    }));
98})
99
100// анимация полета в корзину\избранное
101const animateImageFly = function ()
102{
103    const
104        basketNode = document.querySelector('.easybasket-js'),
105        basketNodePosition = basketNode.getBoundingClientRect(),
106        favoriteNode = document.querySelector(".favoriteItems-js"),
107        favoriteNodePosition = favoriteNode.getBoundingClientRect(),
108        fly_animate = function (image, x, y)
109        {
110            const rect = image.getBoundingClientRect();
111            const cloneImg = image.cloneNode(true);
112            cloneImg.classList.add('fly');
113            cloneImg.style.top = Math.round(rect.top + window.pageYOffset)  + 'px';
114            cloneImg.style.left = Math.round(rect.left + window.pageXOffset) + 'px';
115            cloneImg.style.position = 'absolute';
116            cloneImg.style.zIndex = 9999;
117            cloneImg.style.width = image.clientWidth  + 'px';
118            cloneImg.style.height = image.clientHeight + 'px';
119            document.body.appendChild(cloneImg);
120
121            // TODO нужна анимация без jquery
122            const $img = $(cloneImg);
123            $img.animate({ top: y + 20, left: x + 30, height: 0, width: 0 }, 500, function ()
124            {
125                $img.remove();
126            });
127        }
128    return {
129        animateBasket: function (image)
130        {
131            const x = Math.round(basketNodePosition.left + window.pageXOffset),
132                y = Math.round(basketNodePosition.top + window.pageYOffset);
133
134            fly_animate(image, x, y);
135        },
136        animateFavorite: function (image)
137        {
138            const x = Math.round(favoriteNodePosition.left + window.pageXOffset),
139                y = Math.round(favoriteNodePosition.top + window.pageYOffset);
140
141            fly_animate(image, x, y);
142        }
143    }
144};
145