The repo for Purrform's main BigCommerce store.
feat: add ageInMonths and foodGroup to DietBuilder state and payload
+63
-15
+5
assets/js/theme/custom/diet-builder.js
+5
assets/js/theme/custom/diet-builder.js
···
607
607
608
608
this.state.catName = catName;
609
609
this.state.ageGroup = ageGroup;
610
+
this.state.ageInMonths = ageInMonths;
610
611
this.state.age = ageKey;
611
612
this.state.coef = config.coef;
612
613
this.state.meals = config.meals;
···
1348
1349
this.state.payload = {
1349
1350
email,
1350
1351
catName: this.state.catName,
1352
+
catAgeInMonths: Math.round(this.state.ageInMonths),
1353
+
foodGroup: this.state.ageGroup,
1351
1354
calculatedRDA: this.state.calculatedRDA,
1352
1355
recommendedProducts: this.state.productsForKlaviyo.map((p) => ({
1353
1356
name: p.name,
···
1543
1546
},
1544
1547
properties: {
1545
1548
catName: payload.catName,
1549
+
catAgeInMonths: payload.catAgeInMonths,
1550
+
foodGroup: payload.foodGroup,
1546
1551
calculatedRDA: payload.calculatedRDA,
1547
1552
recommendedProducts: payload.recommendedProducts,
1548
1553
},
+2
-10
assets/scss/custom/components/widgets/_3-column.scss
+2
-10
assets/scss/custom/components/widgets/_3-column.scss
···
1
1
.tc-image {
2
-
width: auto !important;
2
+
width: auto !important;
3
3
}
4
+
4
5
.tc-content-inner {
5
6
display: flex;
6
7
flex-direction: column;
···
8
9
align-items: flex-start;
9
10
height: 100%;
10
11
}
11
-
// .three-column-widget {
12
-
// display: flex;
13
-
// flex-direction: row;
14
-
// justify-content: space-between;
15
-
// margin: 0 auto;
16
-
// max-width: 1200px;
17
-
// padding: 0 15px;
18
-
// width: 100%;
19
-
// }
+55
-4
assets/scss/custom/components/widgets/_homepage_carousel.scss
+55
-4
assets/scss/custom/components/widgets/_homepage_carousel.scss
···
1
1
$overAll: 568px;
2
+
2
3
.calashock-hero-carousel-widget {
3
4
height: $overAll;
5
+
4
6
@media only screen and (min-width: 651px) {
5
7
height: 420px;
6
8
}
9
+
7
10
@media only screen and (min-width: 1251px) {
8
11
margin: 0 auto;
9
12
height: 640px;
10
13
max-width: 1920px;
11
14
overflow-x: hidden;
12
15
}
16
+
13
17
.calashock-sliding-slides {
14
18
margin: 0;
15
19
height: $overAll;
16
20
list-style: none;
21
+
17
22
@media only screen and (min-width: 651px) {
18
23
height: 420px;
19
24
}
25
+
20
26
@media only screen and (min-width: 1251px) {
21
27
height: 640px;
22
28
}
29
+
23
30
.slick-dots {
24
31
li {
25
32
button {
···
28
35
}
29
36
}
30
37
}
38
+
31
39
.calashock-hero-carousel-slide {
32
40
height: 100%;
33
41
height: $overAll;
34
42
position: relative;
43
+
35
44
@media only screen and (min-width: 651px) {
36
45
height: 420px;
37
46
}
47
+
38
48
@media only screen and (min-width: 1251px) {
39
49
height: 640px;
40
50
display: flex !important;
41
51
place-content: center;
42
52
}
53
+
43
54
> div {
44
55
width: 100%;
45
56
height: 50%;
46
57
background-repeat: no-repeat;
47
58
background-position: center;
48
59
background-size: cover;
60
+
49
61
@media only screen and (min-width: 651px) {
50
62
width: 100%;
51
63
height: 100%;
···
55
67
}
56
68
}
57
69
}
70
+
58
71
.mobile {
59
72
@media only screen and (min-width: 651px) {
60
73
display: none;
61
74
}
62
75
}
76
+
63
77
.tablet {
64
78
display: none;
79
+
65
80
@media only screen and (min-width: 651px) {
66
81
display: block;
67
82
}
83
+
68
84
@media only screen and (min-width: 901px) {
69
85
display: none;
70
86
}
71
87
}
88
+
72
89
.tablet2 {
73
90
display: none;
91
+
74
92
@media only screen and (min-width: 901px) {
75
93
display: block;
76
94
}
95
+
77
96
@media only screen and (min-width: 1251px) {
78
97
display: none;
79
98
}
80
99
}
100
+
81
101
.desktop {
82
102
display: none;
103
+
83
104
@media only screen and (min-width: 1251px) {
84
105
display: block;
85
106
}
···
95
116
96
117
section {
97
118
margin: 0 auto;
98
-
// max-width: 1440px;
99
119
height: 50%;
100
120
width: 100%;
101
121
position: absolute;
102
122
text-align: center;
103
123
display: grid;
104
124
flex-direction: column;
105
-
justify-content: center;
125
+
place-content: center center;
106
126
align-items: center;
107
-
align-content: center;
108
127
gap: 1.25rem;
109
128
padding: 0;
110
129
bottom: 0;
130
+
111
131
@media only screen and (min-width: 651px) {
112
132
justify-content: start;
113
133
height: 420px;
···
116
136
align-items: flex-start;
117
137
bottom: initial;
118
138
}
139
+
119
140
@media only screen and (min-width: 1251px) {
120
141
height: 640px;
121
142
max-width: 1280px;
122
143
width: 100vw;
123
144
}
145
+
124
146
@media only screen and (min-width: 1351px) {
125
147
padding: 1rem 0 4rem;
126
148
}
127
149
}
150
+
128
151
h3 {
129
152
margin: 0;
130
153
padding: 0 1rem;
···
134
157
font-weight: 600;
135
158
color: $color-p;
136
159
font-family: 'Filson Pro', sans-serif;
160
+
137
161
@media only screen and (min-width: 651px) {
138
162
padding: 0;
139
163
text-align: left;
140
164
color: $color-f-w;
141
165
}
166
+
142
167
@media only screen and (min-width: 1251px) {
143
168
max-width: 700px;
144
169
font-size: 48px;
145
170
line-height: 4rem;
146
171
}
147
172
}
173
+
148
174
p {
149
175
padding: 0 1rem 0.75rem;
150
176
max-width: 340px;
···
152
178
font-weight: 400;
153
179
margin: 0;
154
180
color: $color-f-b;
181
+
155
182
@media only screen and (min-width: 651px) {
156
183
padding: 0 0 1rem;
157
184
text-align: left;
158
185
color: $color-f-w;
159
186
font-size: 25px;
160
187
}
188
+
161
189
@media only screen and (min-width: 1251px) {
162
190
max-width: 700px;
163
191
padding: 0;
164
192
}
165
193
}
194
+
166
195
.button {
167
196
margin: 0;
168
197
place-self: center;
169
198
letter-spacing: 0.02rem;
170
199
padding: 14px 24px;
200
+
171
201
@media only screen and (min-width: 651px) {
172
202
place-self: flex-start;
173
203
}
174
204
}
205
+
175
206
.slick-dots {
176
207
padding: 40px 0;
177
208
background-color: transparent;
···
181
212
margin-left: auto;
182
213
margin-right: auto;
183
214
width: auto;
215
+
184
216
@media only screen and (min-width: 651px) {
185
217
bottom: 0;
186
218
padding: 27px 1.5rem;
187
219
text-align: left;
188
220
}
221
+
189
222
@media only screen and (min-width: $tablet) {
190
223
text-align: center;
191
224
}
225
+
192
226
li {
193
-
padding: 0 5px 0;
227
+
padding: 0 5px;
194
228
height: 18px;
195
229
width: 18px;
196
230
}
231
+
197
232
.slick-active {
198
233
button {
199
234
&::before {
···
202
237
}
203
238
}
204
239
}
240
+
205
241
button {
206
242
height: 12px;
207
243
width: 12px;
208
244
border-color: transparent;
209
245
background-color: $color-f-w;
246
+
210
247
&::before,
211
248
&::after {
212
249
height: 12px;
···
218
255
}
219
256
}
220
257
}
258
+
221
259
.slick-arrow {
222
260
background-color: #39393d;
223
261
height: 40px;
224
262
border-radius: 99px;
263
+
225
264
&::before,
226
265
&::after {
227
266
background-image: none;
···
233
272
position: absolute;
234
273
border-radius: 3px;
235
274
}
275
+
236
276
&::before {
237
277
top: 7px;
238
278
}
279
+
239
280
&::after {
240
281
top: 15px;
241
282
}
283
+
242
284
&.slick-prev,
243
285
&.slick-next {
244
286
top: 25%;
287
+
245
288
@media only screen and (min-width: 651px) {
246
289
top: 50%;
247
290
}
248
291
}
249
292
}
293
+
250
294
.slick-prev.slick-arrow {
251
295
left: 20px;
296
+
252
297
&::before,
253
298
&::after {
254
299
left: 16px;
255
300
}
301
+
256
302
&::before {
257
303
transform: rotate(-130deg);
258
304
}
305
+
259
306
&::after {
260
307
transform: rotate(-50deg);
261
308
}
262
309
}
310
+
263
311
.slick-next.slick-arrow {
264
312
right: 20px;
313
+
265
314
&::before,
266
315
&::after {
267
316
left: 18px;
268
317
}
318
+
269
319
&::before {
270
320
transform: rotate(130deg);
271
321
}
322
+
272
323
&::after {
273
324
transform: rotate(50deg);
274
325
}