https://fortidsminneforeningen.no/js/components/add-to-cart.js?v=1

1
2Vue.component('add-to-cart', {
3    data: function () {
4        return { loading: false}
5    },
6    created() {
7       
8    },
9
10    template:
11        
12        `<div style="position: relative;">
13            <div v-if="this.$cartHub.loading" class="loading"><div class="lds-facebook"><div></div><div></div><div></div></div></div>
14            <div class="pills">
15            <cart-quantity v-if="inCart" v-bind:stock="this.stock" v-bind:product-id="this.productId" v-bind:store-id="this.storeId"></cart-quantity>
16                <span v-if="stock > 0 || !inCart" class="pill cart-stock" >{{ stock }} på lager</span>
17            </div>
18
19            <div>
20                <button v-if="stock > 0 && !inCart" :disabled="this.loading " class="big-button blue-background white-text add-to-cart-button" v-on:click="()=>onClick()">
21<span>{{this.loading ? "Loading" : this.inCart ? "Fjern fra handlekurv" : "Legg i handlekurv"}} </span>
22</button>
23
24            </div>
25            <div class="shop-buttons">
26           
27                <a class="button big-button green-background white-text shop-button" href="/nettbutikk/betaling" v-if="inCart">GÃ¥ til betaling</a>
28                <a class="button big-button red-background white-text shop-button" href="/nettbutikk/Handlevogn" v-if="inCart">Se handelkurv</a>
29            </div>
30        </div>`,
31    methods: {
32        
33        getOrderLine() {
34
35            return this.$cartHub.cart?.orderLines?.find(item => item.productId === this.productId)
36        },
37        onClick() {
38            this.inCart ? this.removeFromCart() : this.addToCart()
39        },
40
41        addToCart() {
42            var self = this;
43            this.loading = true;
44          
45
46            this.$cartHub.addToCart(this.productId, this.storeId).then((res) => {
47                this.loading = false;
48                if (!res || res.status !== 200) {
49                    alert("Something went wrong, please try again")
50                }
51              
52            });
53        },
54        removeFromCart() {
55            var self = this;
56            this.loading = true;
57            
58            let lineId = this.getOrderLine()?.orderLineId;
59            console.log(this.getOrderLine())
60            if (!lineId) {
61                self.loading = false;
62
63                return;
64            }
65
66            this.$cartHub.removeFromCart(this.storeId, lineId).then((res) => {
67                self.loading = false;
68                if (res.status === 200) {
69
70                } else {
71                    alert("Something went wrong, please try again")
72                }
73
74            });
75        },
76    },
77    computed: {
78        stock: function() {
79            return this.$attrs['data-stock'] - (this.getOrderLine()?.quantity || 0)
80        },
81
82        inCart: function() {
83
84            return this.$cartHub.cart?.orderLines?.some(item => item.productId === this.productId)
85        },
86
87        productId: function () {
88            return  this.$attrs['data-product-id'];
89            
90        },
91        storeId: function () {
92            return this.$attrs['data-store-id'];
93        }
94    }
95    
96});