https://dalonicoffee.by/local/components/everydaycoffee/basket.mini/templates/.default/script.js

1var everydaycoffeeBasketMiniInit = function (data) {
2    data = JSON.parse(data);
3    BX.Vue.create({
4        el: '#' + data.params.ELEMENT_ID,
5        data: data,
6        async created() {
7            BX.Vue.event.$on('refresh-cart', this.refreshCart);
8            BX.Vue.event.$on('new-basket-item', this.onNewBasketItem);
9
10            let result = {
11                count: 0,
12                errors: [],
13                items: [],
14                totals: [],
15            };
16
17            result = await BX.ajax.runComponentAction('everydaycoffee:basket.mini', 'getUserBasketItems', {mode: 'ajax'});
18
19            this.result = result.data;
20        },
21        beforeDestroy() {
22            BX.Vue.event.$off('refresh-cart', this.refreshCart);
23            BX.Vue.event.$off('new-basket-item', this.onNewBasketItem);
24        },
25        methods: {
26            showMiniCart: function () {
27                $('.mini_cart,.off_canvars_overlay').addClass('active')
28            },
29            hideMiniCart: function () {
30                $('.mini_cart,.off_canvars_overlay').removeClass('active')
31            },
32            removeItem: async function (itemId) {
33                this.result.items = this.result.items.filter(el => el.ID !== itemId);
34                await BX.ajax.runComponentAction('everydaycoffee:basket.mini', 'removeBasketItems', {
35                    mode: 'ajax',
36                    data: {
37                        basketItemId: itemId
38                    }
39                });
40                await this.refreshCart();
41            },
42            refreshCart: async function () {
43                const result = await BX.ajax.runComponentAction('everydaycoffee:basket.mini', 'getUserBasketItems', {mode: 'ajax'});
44                this.result = result.data;
45            },
46            onNewBasketItem: function (){
47                this.showMiniCart();
48                this.refreshCart();
49            },
50            emitRefreshCart: function () {
51                BX.Vue.event.$emit('refresh-cart');
52            }
53        },
54        template: `	
55        <div class="header_account_list mini_cart_wrapper">
56                                <a v-on:click="showMiniCart" href="javascript:void(0)">
57                                    <span class="lnr lnr-cart"></span>
58                                    <span v-if="result.count" class="item_count">{{result.count}}</span>
59                                </a>
60                                <!--mini cart-->
61                                <div class="mini_cart">
62                                    <div class="cart_gallery">
63                                        <div class="cart_close">
64                                            <div class="cart_text">
65                                                <h3 v-on:click="emitRefreshCart">корзина</h3>   
66                                            </div>
67                                            <div class="mini_cart_close">
68                                                <a v-on:click="hideMiniCart" href="javascript:void(0)">
69                                                    <i class="icon-x"></i>
70                                                </a>
71                                            </div>
72                                        </div>
73                                        <div v-for="item in result.items" :key="item.ID" class="cart_item">
74                                            <div class="cart_img">
75                                                <a :href="item.PRODUCT_URL">
76                                                    <img :src="item.IMAGE_URL" alt=""/>
77                                                </a>
78                                            </div>
79                                            <div class="cart_info">
80                                                <a :href="item.PRODUCT_URL">{{item.NAME}}</a>
81                                                <p v-for="customPropValue, customPropName in item.CUSTOM_PROPS">
82                                                    <span>{{customPropName}}: </span>{{customPropValue}}
83                                                </p>
84                                                <p>{{item.QUANTITY}} x <span> {{decodeURI(item.PRICE)}} </span></p>
85                                            </div>
86                                            <div class="cart_remove">
87                                                <a @click="removeItem(item.ID)" href="javascript:void(0)"><i class="icon-x"></i></a>
88                                            </div>
89                                        </div>
90                                    </div>
91                                    <div v-if="result.count > 0" class="mini_cart_table">
92                                        <div class="cart_table_border">
93                                            <div v-for="total in result.totals" :key="total.title">

94                                                <span>{{total.title}}:</span>
95                                                <span class="price">{{decodeURI(total.amount)}}</span>
96                                            </div>
97                                        </div>
98                                    </div>
99                                    <div v-if="result.count > 0" class="mini_cart_footer">
100                                        <div class="cart_button">
101                                            <a :href="params.LINK_TO_CART"
102                                            ><i class="fa fa-shopping-cart"></i> В корзину</a
103                                            >
104                                        </div>
105                                        <div class="cart_button btn-checkout">
106                                            <a :href="params.LINK_TO_CHECKOUT"
107                                            ><i class="fa fa-sign-in"></i> Оформить заказ</a
108                                            >
109                                        </div>
110                                        <div class="cart_button btn-dayoff-modal">
111                                            <button data-bs-toggle="modal" data-bs-target="#dayOffModal"
112                                            ><i class="fa fa-sign-in"></i> Оформить заказ</button
113                                            >
114                                        </div>
115                                    </div>
116                                    <div v-if="result.count <= 0" class="mini_cart_footer">
117                                        <div class="cart_button">
118                                            <a :href="params.LINK_TO_CATALOG"
119                                            ><i class="fa fa-shopping-cart"></i> В каталог</a
120                                            >
121                                        </div>
122                                    </div>
123                                </div>
124                                <!--mini cart end-->
125                            </div>
126    `,
127    });
128}