@lancom/shared 0.0.110 → 0.0.113
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/components/checkout/order/order-billing-information/order-billing-information.vue +8 -1
- package/components/faq/faq.vue +236 -0
- package/components/product/product_reviews/product-reviews.scss +0 -4
- package/components/product/product_reviews/product_review/product-review.scss +4 -1
- package/components/products/products_filters/products-filters.vue +1 -1
- package/nuxt.config.js +4 -1
- package/package.json +1 -1
- package/store/product.js +1 -1
|
@@ -12,8 +12,11 @@
|
|
|
12
12
|
:address="order.shippingAddress"
|
|
13
13
|
:without-additional-info="true" />
|
|
14
14
|
</div>
|
|
15
|
+
<div class="Cart__quantity-errors">
|
|
16
|
+
<cart-quantity-errors />
|
|
17
|
+
</div>
|
|
15
18
|
<progress-steps-controls
|
|
16
|
-
:disabled-next="isSubmit && invalid"
|
|
19
|
+
:disabled-next="(isSubmit && invalid) || isNotValidQuantity"
|
|
17
20
|
@prev="$emit('prev')"
|
|
18
21
|
@next="submit" />
|
|
19
22
|
</validation-observer>
|
|
@@ -22,12 +25,16 @@
|
|
|
22
25
|
</template>
|
|
23
26
|
|
|
24
27
|
<script>
|
|
28
|
+
import CartQuantityErrors from '@lancom/shared/components/checkout/cart/cart_quantity_errors/cart-quantity-errors';
|
|
29
|
+
import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
|
|
25
30
|
import AddressForm from '@lancom/shared/components/checkout/order/address-form/address-form';
|
|
26
31
|
import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
|
|
27
32
|
|
|
28
33
|
export default {
|
|
29
34
|
name: 'OrderBillingInformation',
|
|
35
|
+
mixins: [CartMixin],
|
|
30
36
|
components: {
|
|
37
|
+
CartQuantityErrors,
|
|
31
38
|
AddressForm,
|
|
32
39
|
ProgressStepsControls
|
|
33
40
|
},
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="FAQ__wrapper view-transition">
|
|
3
|
+
<slot name="header">
|
|
4
|
+
<div class="FAQ__header">
|
|
5
|
+
<h1 class="lc_h1--white">
|
|
6
|
+
Frequently asked questions
|
|
7
|
+
</h1>
|
|
8
|
+
<span class="lc_subtitle1--strong-white FAQ__subtitle">
|
|
9
|
+
Here you can find all the questions you need answered
|
|
10
|
+
</span>
|
|
11
|
+
</div>
|
|
12
|
+
</slot>
|
|
13
|
+
<div class="content-inner">
|
|
14
|
+
<div class="row FAQ__content-wrapper">
|
|
15
|
+
<div class="FAQ__content col-md-10 col-12 mr-auto ml-auto">
|
|
16
|
+
<div
|
|
17
|
+
v-for="group in groups"
|
|
18
|
+
:key="group.type"
|
|
19
|
+
class="FAQ__group">
|
|
20
|
+
<div
|
|
21
|
+
:ref="group.type"
|
|
22
|
+
class="FAQ__group-header"
|
|
23
|
+
@click="togable && toggleGroup(group)">
|
|
24
|
+
<div
|
|
25
|
+
class="FAQ__group-title"
|
|
26
|
+
:class="group.type">
|
|
27
|
+
{{ group.name }}
|
|
28
|
+
</div>
|
|
29
|
+
<i
|
|
30
|
+
v-if="togable"
|
|
31
|
+
class="icon-cancel FAQ__group-caret"
|
|
32
|
+
:class="{ active: openedGroup === group.type }"></i>
|
|
33
|
+
</div>
|
|
34
|
+
<transition
|
|
35
|
+
name="fade"
|
|
36
|
+
appear>
|
|
37
|
+
<div
|
|
38
|
+
v-if="openedGroup === group.type"
|
|
39
|
+
class="FAQ__group-content view-transition">
|
|
40
|
+
<div
|
|
41
|
+
v-for="entity in group.entities"
|
|
42
|
+
:key="entity._id"
|
|
43
|
+
:ref="entity._id"
|
|
44
|
+
class="FAQ__entity">
|
|
45
|
+
<div
|
|
46
|
+
class="FAQ__entity-header"
|
|
47
|
+
@click="toggleEntity(entity)">
|
|
48
|
+
<div class="FAQ__entity-title">
|
|
49
|
+
{{ entity.question }}
|
|
50
|
+
</div>
|
|
51
|
+
<i
|
|
52
|
+
class="icon-angle-down FAQ__entity-header-caret"
|
|
53
|
+
:class="{ active: openedEntities.includes(entity._id) }"></i>
|
|
54
|
+
</div>
|
|
55
|
+
<transition
|
|
56
|
+
name="fade"
|
|
57
|
+
appear>
|
|
58
|
+
<div
|
|
59
|
+
v-if="openedEntities.includes(entity._id)"
|
|
60
|
+
class="FAQ__entity-body view-transition"
|
|
61
|
+
v-html="entity.answer">
|
|
62
|
+
</div>
|
|
63
|
+
</transition>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</transition>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</template>
|
|
73
|
+
|
|
74
|
+
<script>
|
|
75
|
+
export default {
|
|
76
|
+
name: 'FAQ',
|
|
77
|
+
props: {
|
|
78
|
+
groups: {
|
|
79
|
+
type: Array,
|
|
80
|
+
required: true
|
|
81
|
+
},
|
|
82
|
+
togable: {
|
|
83
|
+
type: Boolean,
|
|
84
|
+
default: true
|
|
85
|
+
},
|
|
86
|
+
preopenedGroup: {
|
|
87
|
+
type: Object
|
|
88
|
+
},
|
|
89
|
+
preopenedEntity: {
|
|
90
|
+
type: String
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
data() {
|
|
94
|
+
return {
|
|
95
|
+
openedGroup: null,
|
|
96
|
+
openedEntities: []
|
|
97
|
+
};
|
|
98
|
+
},
|
|
99
|
+
mounted() {
|
|
100
|
+
if (this.preopenedGroup) {
|
|
101
|
+
this.toggleGroup({ type: this.preopenedGroup });
|
|
102
|
+
}
|
|
103
|
+
if (this.preopenedEntity) {
|
|
104
|
+
this.toggleEntity({ _id: this.preopenedEntity });
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
methods: {
|
|
108
|
+
toggleGroup({ type }) {
|
|
109
|
+
this.openedGroup = this.openedGroup === type ? null : type;
|
|
110
|
+
},
|
|
111
|
+
toggleEntity({ _id }) {
|
|
112
|
+
const index = this.openedEntities.indexOf(_id);
|
|
113
|
+
if (~index) {
|
|
114
|
+
this.$delete(this.openedEntities, index);
|
|
115
|
+
} else {
|
|
116
|
+
this.openedEntities.push(_id);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
</script>
|
|
122
|
+
|
|
123
|
+
<style lang="scss">
|
|
124
|
+
@import "@lancom/shared/assets/scss/variables";
|
|
125
|
+
$types: delivery, general, other, printing, garments;
|
|
126
|
+
.FAQ {
|
|
127
|
+
&__wrapper {
|
|
128
|
+
margin-top: 20px;
|
|
129
|
+
}
|
|
130
|
+
&__header {
|
|
131
|
+
text-align: center;
|
|
132
|
+
background-color: $dark_blue;
|
|
133
|
+
padding: 70px 0 86px 0;
|
|
134
|
+
}
|
|
135
|
+
&__subtitle {
|
|
136
|
+
font-size: 25px;
|
|
137
|
+
font-weight: normal;
|
|
138
|
+
line-height: 35px;
|
|
139
|
+
letter-spacing: 0.02em;
|
|
140
|
+
}
|
|
141
|
+
&__content {
|
|
142
|
+
padding: 100px 0 180px 0;
|
|
143
|
+
}
|
|
144
|
+
&__group {
|
|
145
|
+
background-color: $light_gray;
|
|
146
|
+
& + & {
|
|
147
|
+
margin-top: 16px;
|
|
148
|
+
}
|
|
149
|
+
&-header {
|
|
150
|
+
padding: 22px 45px;
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
justify-content: space-between;
|
|
154
|
+
cursor: pointer;
|
|
155
|
+
text-transform: uppercase;
|
|
156
|
+
}
|
|
157
|
+
&-title {
|
|
158
|
+
font-weight: 500;
|
|
159
|
+
font-size: 22px;
|
|
160
|
+
line-height: 29px;
|
|
161
|
+
letter-spacing: 0.02em;
|
|
162
|
+
color: $dark_blue;
|
|
163
|
+
line-height: 41px;
|
|
164
|
+
padding-left: 62px;
|
|
165
|
+
position: relative;
|
|
166
|
+
&:before {
|
|
167
|
+
content: '';
|
|
168
|
+
width: 40px;
|
|
169
|
+
height: 40px;
|
|
170
|
+
position: absolute;
|
|
171
|
+
left: 0;
|
|
172
|
+
top: 50%;
|
|
173
|
+
transform: translateY(-50%);
|
|
174
|
+
background-size: cover;
|
|
175
|
+
}
|
|
176
|
+
@each $type in $types {
|
|
177
|
+
&.#{$type}:before {
|
|
178
|
+
background-image: url(~static/icons/#{$type}.svg);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
&-caret {
|
|
183
|
+
font-size: 16px;
|
|
184
|
+
&:before {
|
|
185
|
+
transform: rotate(45deg);
|
|
186
|
+
transition: transform .22s ease-in-out;
|
|
187
|
+
}
|
|
188
|
+
&.active:before {
|
|
189
|
+
transform: rotate(0);
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
&-content {
|
|
193
|
+
padding: 22px 45px 60px 45px;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
&__entity {
|
|
197
|
+
background-color: #FFFFFF;
|
|
198
|
+
& + & {
|
|
199
|
+
margin-top: 10px;
|
|
200
|
+
}
|
|
201
|
+
&-header {
|
|
202
|
+
padding: 18px 30px;
|
|
203
|
+
position: relative;
|
|
204
|
+
cursor: pointer;
|
|
205
|
+
&-caret {
|
|
206
|
+
font-size: 28px;
|
|
207
|
+
position: absolute;
|
|
208
|
+
top: 50%;
|
|
209
|
+
right: 30px;
|
|
210
|
+
transform: translateY(-50%);
|
|
211
|
+
&:before {
|
|
212
|
+
transform: rotate(0);
|
|
213
|
+
transition: transform .22s ease-in-out;
|
|
214
|
+
}
|
|
215
|
+
&.active:before {
|
|
216
|
+
transform: rotate(180deg);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
&-title {
|
|
221
|
+
font-weight: 500;
|
|
222
|
+
font-size: 18px;
|
|
223
|
+
line-height: 25px;
|
|
224
|
+
letter-spacing: 0.02em;
|
|
225
|
+
color: $dark_blue;
|
|
226
|
+
}
|
|
227
|
+
&-body {
|
|
228
|
+
padding: 6px 30px 24px 30px;
|
|
229
|
+
line-height: 27px;
|
|
230
|
+
color: $gray;
|
|
231
|
+
overflow: hidden;
|
|
232
|
+
@import "@lancom/shared/assets/scss/normalize";
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
</style>
|
|
@@ -20,11 +20,7 @@
|
|
|
20
20
|
display: none !important;
|
|
21
21
|
}
|
|
22
22
|
::v-deep .slick-list {
|
|
23
|
-
padding: 10px 71px 20px 71px;
|
|
24
23
|
min-height: 205px;
|
|
25
|
-
@media (max-width: $bp-extra-small-max) {
|
|
26
|
-
padding: 10px 51px 20px 51px;
|
|
27
|
-
}
|
|
28
24
|
}
|
|
29
25
|
::v-deep .slick-arrow.slick-prev,
|
|
30
26
|
::v-deep .slick-arrow.slick-next {
|
|
@@ -47,7 +47,7 @@ export default {
|
|
|
47
47
|
label: ' high to low'
|
|
48
48
|
}];
|
|
49
49
|
return {
|
|
50
|
-
sortBy: sortByOptions.find(({ value }) => value === this.$route.query.sort),
|
|
50
|
+
sortBy: sortByOptions.find(({ value }) => value === this.$route.query.sort) || sortByOptions[0],
|
|
51
51
|
search: this.$route.query.text || '',
|
|
52
52
|
sortByOptions
|
|
53
53
|
};
|
package/nuxt.config.js
CHANGED
|
@@ -99,8 +99,11 @@ module.exports = (config, axios) => ({
|
|
|
99
99
|
const catalogFrontImages = (product.images || []).filter(i => (i.types || []).includes('catalog_front')).map(i => i.image);
|
|
100
100
|
const image = spliceFirstImage(feedImages) || spliceFirstImage(frontImages) || spliceFirstImage(catalogFrontImages) || spliceFirstImage(backImages) || {};
|
|
101
101
|
const images = getImages(backImages) || getImages(frontImages) || [];
|
|
102
|
+
const title = product.feedTitle
|
|
103
|
+
? product.feedTitle.replace('{colour}', sp.color.name).replace('{size}', sp.size.name).replace('{brand}', product.brand.name)
|
|
104
|
+
: `${product.name} ${sp.color.name}`;
|
|
102
105
|
const info = {
|
|
103
|
-
title: { _text:
|
|
106
|
+
title: { _text: title },
|
|
104
107
|
description: { _text: product.description || product.fabricInfoShort || product.name },
|
|
105
108
|
link: { _text: `https://${config.HOST_NAME}/${product.brand.alias}/${product.productType.alias}/${product.alias}?color=${sp.color.alias}` },
|
|
106
109
|
'g:id': { _text: sp.SKU },
|
package/package.json
CHANGED
package/store/product.js
CHANGED
|
@@ -138,7 +138,7 @@ export const actions = {
|
|
|
138
138
|
const [first] = (product.printAreas || []);
|
|
139
139
|
if (first) {
|
|
140
140
|
commit('setEditablePrintArea', first);
|
|
141
|
-
commit('setSelectedPrintArea', { printArea: first._id, size: first.printSize
|
|
141
|
+
commit('setSelectedPrintArea', { printArea: first._id, size: first.printSize });
|
|
142
142
|
}
|
|
143
143
|
} catch (e) {
|
|
144
144
|
const { status, data } = e?.response || {};
|