@viur/shop-components 0.0.1-dev.22 → 0.0.1-dev.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,13 +1,188 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<sl-card horizontal class="viur-shop-cart-card">
|
|
3
|
+
<img
|
|
4
|
+
class="viur-shop-cart-card-img"
|
|
5
|
+
slot="image"
|
|
6
|
+
:src="getImage(state.leaf.shop_image)"
|
|
7
|
+
/>
|
|
8
|
+
<div class="viur-shop-cart-card-header" slot="header">
|
|
9
|
+
<h4 class="viur-shop-cart-card-headline headline">
|
|
10
|
+
{{ state.leaf.shop_name }} | {{ leaf.shop_art_no_or_gtin }}
|
|
11
|
+
</h4>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="viur-shop-cart-card-body-row">
|
|
14
|
+
<div class="viur-shop-cart-card-body-info">
|
|
15
|
+
<div class="viur-shop-cart-card-descr">
|
|
16
|
+
Version: 900x900x2000 <br />
|
|
17
|
+
Farbe: Chromoptik <br />
|
|
18
|
+
Glasart: Klar hell mit Edelglasbeschichtung<br />
|
|
19
|
+
Anschlag: Beidseitig variabel<br />
|
|
20
|
+
Griff: Stangengriff Exklusiv (56)
|
|
21
|
+
</div>
|
|
22
|
+
<div class="viur-shop-cart-card-body-footer">
|
|
23
|
+
<sl-button
|
|
24
|
+
size="small"
|
|
25
|
+
outline
|
|
26
|
+
class="viur-shop-cart-card-add-to-favourites-btn"
|
|
27
|
+
variant="primary"
|
|
28
|
+
title="Add to favourites"
|
|
29
|
+
>
|
|
30
|
+
<sl-icon name="heart" slot="prefix"></sl-icon>
|
|
31
|
+
</sl-button>
|
|
32
|
+
<sl-button
|
|
33
|
+
size="small"
|
|
34
|
+
outline
|
|
35
|
+
class="viur-shop-cart-card-delete-btn"
|
|
36
|
+
variant="primary"
|
|
37
|
+
title="Remove from cart"
|
|
38
|
+
@click="removeItem(state.leaf, state.leaf.article.dest.key, node)"
|
|
39
|
+
>
|
|
40
|
+
<sl-icon name="trash" slot="prefix"></sl-icon>
|
|
41
|
+
</sl-button>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="viur-shop-cart-card-body-amount">
|
|
45
|
+
<sl-input
|
|
46
|
+
class="amount-input"
|
|
47
|
+
type="number"
|
|
48
|
+
label="Anzahl"
|
|
49
|
+
placeholder="Number"
|
|
50
|
+
min="0"
|
|
51
|
+
v-model="state.leaf.quantity"
|
|
52
|
+
@input="
|
|
53
|
+
updateItem(
|
|
54
|
+
state.leaf,
|
|
55
|
+
state.leaf.article.dest.key,
|
|
56
|
+
node,
|
|
57
|
+
state.leaf.quantity,
|
|
58
|
+
)
|
|
59
|
+
"
|
|
60
|
+
>
|
|
61
|
+
</sl-input>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="viur-shop-cart-card-price-wrap" slot="footer">
|
|
64
|
+
<div class="viur-shop-cart-card-price-label">Preis</div>
|
|
65
|
+
<div class="viur-shop-cart-card-price">
|
|
66
|
+
{{ state.leaf.price.retail }}
|
|
67
|
+
€
|
|
68
|
+
</div>
|
|
69
|
+
<div class="viur-shop-cart-card-small-print">Brutto / Stk.</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</sl-card>
|
|
3
73
|
</template>
|
|
4
74
|
|
|
5
75
|
<script setup>
|
|
6
|
-
import { computed, reactive } from "vue";
|
|
76
|
+
import { computed, onBeforeMount, reactive } from "vue";
|
|
7
77
|
|
|
8
78
|
const props = defineProps({
|
|
9
79
|
leaf: { type: Object, required: true },
|
|
80
|
+
node: { type: Object, required: true },
|
|
10
81
|
});
|
|
11
82
|
|
|
12
|
-
const
|
|
83
|
+
const emit = defineEmits(["updateItem", "removeItem"]);
|
|
84
|
+
|
|
85
|
+
const state = reactive({
|
|
86
|
+
leaf: {},
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
function updateItem(item, articleKey, node, quantity) {
|
|
90
|
+
emit("updateItem", {
|
|
91
|
+
item: item,
|
|
92
|
+
articleKey: articleKey,
|
|
93
|
+
node: node,
|
|
94
|
+
quantity: quantity,
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
function removeItem(item, articleKey, node) {
|
|
99
|
+
emit("removeItem", { item: item, articleKey: articleKey, node: node });
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
onBeforeMount(() => {
|
|
103
|
+
state.leaf = props.leaf;
|
|
104
|
+
});
|
|
13
105
|
</script>
|
|
106
|
+
|
|
107
|
+
<style scoped>
|
|
108
|
+
.viur-shop-cart-card-img {
|
|
109
|
+
aspect-ratio: 1;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.viur-shop-cart-card {
|
|
113
|
+
margin-bottom: var(--sl-spacing-x-large);
|
|
114
|
+
|
|
115
|
+
&::part(header) {
|
|
116
|
+
border-bottom: none;
|
|
117
|
+
padding-top: 0;
|
|
118
|
+
padding-right: 0;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&::part(image) {
|
|
122
|
+
flex-basis: 25%;
|
|
123
|
+
max-width: 250px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&::part(body) {
|
|
127
|
+
display: flex;
|
|
128
|
+
flex: 1;
|
|
129
|
+
padding-top: 0;
|
|
130
|
+
padding-bottom: 0;
|
|
131
|
+
padding-right: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&::part(group) {
|
|
135
|
+
padding: var(--sl-spacing-small) 0;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.viur-shop-cart-card-body-row {
|
|
140
|
+
display: grid;
|
|
141
|
+
grid-template-columns: 1fr auto auto;
|
|
142
|
+
gap: var(--sl-spacing-large);
|
|
143
|
+
flex: 1;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.viur-shop-cart-card-body-info {
|
|
147
|
+
display: flex;
|
|
148
|
+
flex-direction: column;
|
|
149
|
+
height: 100%;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.viur-shop-cart-card-descr {
|
|
153
|
+
margin-bottom: auto;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.viur-shop-cart-card-body-footer {
|
|
157
|
+
display: flex;
|
|
158
|
+
flex-direction: row;
|
|
159
|
+
gap: var(--sl-spacing-2x-small);
|
|
160
|
+
margin-top: var(--sl-spacing-large);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.amount-input {
|
|
164
|
+
width: 5em;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.viur-shop-cart-card-price-wrap {
|
|
168
|
+
display: flex;
|
|
169
|
+
flex-direction: column;
|
|
170
|
+
|
|
171
|
+
.viur-shop-cart-card-small-print {
|
|
172
|
+
font-size: 0.75em;
|
|
173
|
+
margin-left: auto;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.viur-shop-cart-card-price {
|
|
178
|
+
font-size: 1.3em;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.viur-shop-cart-card-price-label {
|
|
182
|
+
color: var(--ignt-color-primary);
|
|
183
|
+
font-weight: 600;
|
|
184
|
+
margin-bottom: 10px;
|
|
185
|
+
font-size: 1em;
|
|
186
|
+
margin-left: auto;
|
|
187
|
+
}
|
|
188
|
+
</style>
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<Loader v-if="!cartKey.length"></Loader>
|
|
3
3
|
<template v-else>
|
|
4
|
+
<sl-dialog ref="confirm" @sl-hide="onDialogHide">
|
|
5
|
+
<p>Möchten Sie den Artikel wirklich aus dem Warenkorb entfernen?</p>
|
|
6
|
+
<div class="footer-wrap" slot="footer">
|
|
7
|
+
<sl-button variant="danger" @click="confirm.hide()" size="medium">
|
|
8
|
+
Abbrechen
|
|
9
|
+
</sl-button>
|
|
10
|
+
<sl-button variant="success" @click="onConfirm" size="medium">
|
|
11
|
+
Aus Warenkorb entfernen
|
|
12
|
+
</sl-button>
|
|
13
|
+
</div>
|
|
14
|
+
</sl-dialog>
|
|
15
|
+
|
|
4
16
|
<div v-for="node in state.nodes">
|
|
5
17
|
<template
|
|
6
18
|
v-if="Object.keys(state.leaves).includes(node.key)"
|
|
@@ -11,6 +23,9 @@
|
|
|
11
23
|
v-for="leaf in state.leaves[node.key]"
|
|
12
24
|
:key="leaf.key"
|
|
13
25
|
:leaf="leaf"
|
|
26
|
+
:node="node"
|
|
27
|
+
@removeItem="removeItem"
|
|
28
|
+
@updateItem="updateItem"
|
|
14
29
|
>
|
|
15
30
|
</CartLeaf>
|
|
16
31
|
</template>
|
|
@@ -123,91 +138,7 @@
|
|
|
123
138
|
<strong>Warenkorb nicht gespeichert!</strong><br />
|
|
124
139
|
</sl-alert>
|
|
125
140
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
<template v-else>
|
|
129
|
-
<sl-card
|
|
130
|
-
horizontal
|
|
131
|
-
class="viur-shop-cart-card"
|
|
132
|
-
v-for="item in cartStore.state.carts[cartStore.state.basket].items"
|
|
133
|
-
>
|
|
134
|
-
<img
|
|
135
|
-
class="viur-shop-cart-card-img"
|
|
136
|
-
slot="image"
|
|
137
|
-
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
|
138
|
-
/>
|
|
139
|
-
<div class="viur-shop-cart-card-header" slot="header">
|
|
140
|
-
<h4 class="viur-shop-cart-card-headline headline">
|
|
141
|
-
{{ item.article.dest.shop_name }} | 425018
|
|
142
|
-
</h4>
|
|
143
|
-
</div>
|
|
144
|
-
<div class="viur-shop-cart-card-body-row">
|
|
145
|
-
<div class="viur-shop-cart-card-body-info">
|
|
146
|
-
<div class="viur-shop-cart-card-descr">
|
|
147
|
-
Version: 900x900x2000 <br />
|
|
148
|
-
Farbe: Chromoptik <br />
|
|
149
|
-
Glasart: Klar hell mit Edelglasbeschichtung<br />
|
|
150
|
-
Anschlag: Beidseitig variabel<br />
|
|
151
|
-
Griff: Stangengriff Exklusiv (56)
|
|
152
|
-
</div>
|
|
153
|
-
<div class="viur-shop-cart-card-body-footer">
|
|
154
|
-
<sl-button
|
|
155
|
-
size="small"
|
|
156
|
-
outline
|
|
157
|
-
class="viur-shop-cart-card-add-to-favourites-btn"
|
|
158
|
-
variant="primary"
|
|
159
|
-
title="Add to favourites"
|
|
160
|
-
>
|
|
161
|
-
<sl-icon name="heart" slot="prefix"></sl-icon>
|
|
162
|
-
</sl-button>
|
|
163
|
-
<sl-button
|
|
164
|
-
size="small"
|
|
165
|
-
outline
|
|
166
|
-
class="viur-shop-cart-card-delete-btn"
|
|
167
|
-
variant="primary"
|
|
168
|
-
title="Remove from cart"
|
|
169
|
-
@click="
|
|
170
|
-
removeItem(
|
|
171
|
-
item,
|
|
172
|
-
item.article.dest.key,
|
|
173
|
-
cartStore.state.basket,
|
|
174
|
-
)
|
|
175
|
-
"
|
|
176
|
-
>
|
|
177
|
-
<sl-icon name="trash" slot="prefix"></sl-icon>
|
|
178
|
-
</sl-button>
|
|
179
|
-
</div>
|
|
180
|
-
</div>
|
|
181
|
-
<div class="viur-shop-cart-card-body-amount">
|
|
182
|
-
<sl-input
|
|
183
|
-
class="amount-input"
|
|
184
|
-
type="number"
|
|
185
|
-
label="Anzahl"
|
|
186
|
-
placeholder="Number"
|
|
187
|
-
min="0"
|
|
188
|
-
v-model="item.quantity"
|
|
189
|
-
@input="
|
|
190
|
-
updateItem(
|
|
191
|
-
item,
|
|
192
|
-
item.article.dest.key,
|
|
193
|
-
cartStore.state.basket,
|
|
194
|
-
item.quantity,
|
|
195
|
-
)
|
|
196
|
-
"
|
|
197
|
-
>
|
|
198
|
-
</sl-input>
|
|
199
|
-
</div>
|
|
200
|
-
<div class="viur-shop-cart-card-price-wrap" slot="footer">
|
|
201
|
-
<div class="viur-shop-cart-card-price-label">Preis</div>
|
|
202
|
-
<div class="viur-shop-cart-card-price">
|
|
203
|
-
{{ item.price.retail }}
|
|
204
|
-
€
|
|
205
|
-
</div>
|
|
206
|
-
<div class="viur-shop-cart-card-small-print">Brutto / Stk.</div>
|
|
207
|
-
</div>
|
|
208
|
-
</div>
|
|
209
|
-
</sl-card>
|
|
210
|
-
</template>
|
|
141
|
+
|
|
211
142
|
</div>
|
|
212
143
|
|
|
213
144
|
<teleport to="#order_sidebar" v-if="sidebar">
|
|
@@ -274,6 +205,7 @@ const state = reactive({
|
|
|
274
205
|
}),
|
|
275
206
|
images: {},
|
|
276
207
|
currentItem: {},
|
|
208
|
+
currentNode: {},
|
|
277
209
|
nodes: [],
|
|
278
210
|
leaves: {},
|
|
279
211
|
});
|
|
@@ -301,33 +233,40 @@ const currentCartKey = computed(() => {
|
|
|
301
233
|
async function onConfirm() {
|
|
302
234
|
await cartStore.updateItem(
|
|
303
235
|
state.currentItem.article.dest.key,
|
|
304
|
-
|
|
236
|
+
state.currentNode.key,
|
|
305
237
|
0,
|
|
306
238
|
);
|
|
307
239
|
confirm.value.hide();
|
|
308
240
|
}
|
|
309
241
|
|
|
310
|
-
function updateItem(
|
|
311
|
-
|
|
242
|
+
function updateItem(e) {
|
|
243
|
+
console.log("updateItem :", e);
|
|
244
|
+
|
|
245
|
+
if (e.quantity === 0) {
|
|
312
246
|
confirm.value.show();
|
|
313
|
-
state.currentItem = item;
|
|
247
|
+
state.currentItem = e.item;
|
|
248
|
+
state.currentNode = e.node;
|
|
314
249
|
} else {
|
|
315
|
-
cartStore.updateItem(articleKey,
|
|
250
|
+
cartStore.updateItem(e.articleKey, e.node.key, e.quantity);
|
|
316
251
|
}
|
|
317
252
|
}
|
|
318
253
|
|
|
319
|
-
function removeItem(
|
|
254
|
+
function removeItem(e) {
|
|
255
|
+
console.log("removeItem :", e);
|
|
256
|
+
|
|
320
257
|
confirm.value.show();
|
|
321
|
-
state.currentItem = item;
|
|
258
|
+
state.currentItem = e.item;
|
|
259
|
+
state.currentNode = e.node;
|
|
322
260
|
}
|
|
323
261
|
|
|
324
262
|
function onDialogHide() {
|
|
325
|
-
|
|
263
|
+
state.leaves[state.currentNode.key].forEach((item) => {
|
|
326
264
|
if (item.key === state.currentItem.key) {
|
|
327
265
|
item.quantity = 1;
|
|
328
266
|
}
|
|
329
267
|
});
|
|
330
268
|
state.currentItem = {};
|
|
269
|
+
state.currentNode = {};
|
|
331
270
|
}
|
|
332
271
|
|
|
333
272
|
async function getChildren(parentKey = props.cartKey) {
|