wickes-css2 2.103.0-develop.7 → 2.103.0-develop.9

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.
Files changed (57) hide show
  1. package/build/css/category-main.css +1 -1
  2. package/build/css/homepage-main.css +1 -1
  3. package/build/css/kitchen-plp-main.css +1 -1
  4. package/build/css/main.css +1 -1
  5. package/build/css/my-account-main-v2.css +1 -1
  6. package/build/css/my-account-main.css +1 -1
  7. package/build/css/pdp-main-before-combine.css +1 -1
  8. package/build/css/pdp-main-non-critical.css +1 -1
  9. package/build/css/pdp-main.css +1 -1
  10. package/build/css/plp-main.css +1 -1
  11. package/build/css/store-locator-main.css +1 -1
  12. package/build/js/basket.min.js +2 -2
  13. package/build/js/bundle.min.js +1 -1
  14. package/build/js/checkout.min.js +2 -2
  15. package/build/js/emulation.min.js +954 -10
  16. package/build/js/general.bundle.min.js +1 -1
  17. package/build/js/merged-checkout.min.js +2 -2
  18. package/build/js/mini-basket-slider.min.js +1 -0
  19. package/build/js/page/basket/basket-update-cart-action.js +59 -0
  20. package/build/js/page/basket/basket-update-cart.js +29 -0
  21. package/build/js/page/basket/basket-utils.js +50 -0
  22. package/build/js/page/basket/mini-basket-total.js +97 -0
  23. package/build/js/page/basket/quantity-change-handler.js +64 -0
  24. package/build/js/page/basket/update-quantity-operation.js +37 -0
  25. package/build/js/page/basket/update-quantity.js +65 -0
  26. package/build/js/page/basket-v2.js +138 -244
  27. package/build/js/page/components/discounts.js +6 -6
  28. package/build/js/page/components/mini-basket-slider.js +569 -0
  29. package/build/js/pdp.bundle.min.js +1 -1
  30. package/build/js/plp.bundle.min.js +1 -1
  31. package/build/js/project-list.min.js +1 -1
  32. package/package.json +1 -1
  33. package/src/components/mini-basket/mini-basket-empty.hbs +3 -13
  34. package/src/components/mini-basket/mini-basket-order-item.hbs +73 -0
  35. package/src/components/mini-basket/mini-basket.hbs +32 -13
  36. package/src/components/mini-basket/product-item.hbs +37 -16
  37. package/src/data/data_confirmation-summary.json +4 -2
  38. package/src/data/data_mini-basket.json +4 -80
  39. package/src/js/components/general/cart-slider.js +4 -0
  40. package/src/js/components/general/create-popup-slider.js +5 -2
  41. package/src/js/emulation/custom-slider-emulation.js +4 -10
  42. package/src/js/emulation/mini-basket-data.js +949 -0
  43. package/src/js/page/basket/basket-update-cart-action.js +59 -0
  44. package/src/js/page/basket/basket-update-cart.js +29 -0
  45. package/src/js/page/basket/basket-utils.js +50 -0
  46. package/src/js/page/basket/mini-basket-total.js +97 -0
  47. package/src/js/page/basket/quantity-change-handler.js +64 -0
  48. package/src/js/page/basket/update-quantity-operation.js +37 -0
  49. package/src/js/page/basket/update-quantity.js +65 -0
  50. package/src/js/page/basket-v2.js +138 -244
  51. package/src/js/page/components/discounts.js +6 -6
  52. package/src/js/page/components/mini-basket-slider.js +569 -0
  53. package/src/layouts/base.hbs +0 -6
  54. package/src/partials/scripts.hbs +1 -0
  55. package/src/scss/components/_custom-slider.scss +131 -3
  56. package/src/scss/components/_popover-mini-basket.scss +0 -4
  57. package/src/js/components/general/mini-basket-slider.js +0 -8
package/src/scss/components/_custom-slider.scss CHANGED
@@ -80,6 +80,19 @@
80
80
  }
81
81
  }
82
82
 
83
+ &__notifications {
84
+ &:has(.notification) {
85
+ margin-top: 16px;
86
+ }
87
+
88
+ .notification:only-child {
89
+ @include font-size(14);
90
+ @include line-height(24);
91
+ margin-bottom: 0;
92
+ border-width: 1px;
93
+ }
94
+ }
95
+
83
96
  &__message {
84
97
  margin-top: 8px;
85
98
  display: flex;
@@ -159,6 +172,32 @@
159
172
  &__details {
160
173
  flex: 1;
161
174
 
175
+ &-header {
176
+ display: flex;
177
+ align-items: flex-start;
178
+ justify-content: space-between;
179
+ grid-gap: 8px;
180
+
181
+ .btn--remove {
182
+ min-width: 24px;
183
+ padding: 4px;
184
+ background: 0 0;
185
+ border: none;
186
+ display: flex;
187
+ align-items: center;
188
+ justify-content: center;
189
+
190
+ .remove-icon {
191
+ color: $blue;
192
+ font-size: 1rem;
193
+ }
194
+ }
195
+ }
196
+
197
+ &-body {
198
+ margin-top: 4px;
199
+ }
200
+
162
201
  .item,
163
202
  .price {
164
203
  margin-bottom: 0;
@@ -190,8 +229,8 @@
190
229
  }
191
230
 
192
231
  .price {
193
- @include font-size(18);
194
- @include line-height(24);
232
+ @include font-size(16);
233
+ @include line-height(20);
195
234
  margin-top: 8px;
196
235
  font-weight: 700;
197
236
  color: $blue-dark;
@@ -201,23 +240,88 @@
201
240
  @include line-height(16);
202
241
  font-weight: 500;
203
242
  }
243
+
244
+ .product-card__price-value {
245
+ font-size: inherit;
246
+ line-height: inherit;
247
+ }
204
248
  }
205
249
 
206
250
  &.product-card__content {
207
251
  margin-top: 0;
208
252
  padding: 0;
253
+ height: 100%;
254
+ display: flex;
255
+ flex-direction: column;
256
+ }
257
+ }
258
+
259
+ &__quantity-control {
260
+ display: flex;
261
+ align-items: center;
262
+ margin-top: 8px;
263
+
264
+ .quantity {
265
+ margin-bottom: 0;
266
+ min-width: 40px;
267
+ text-align: center;
268
+ padding: 0 5px;
269
+
270
+ .product-card__quantity-value {
271
+ margin: 0;
272
+ font-weight: 400;
273
+ }
274
+ }
275
+
276
+ .btn--quantity {
277
+ background: none;
278
+ padding: 0;
279
+ width: 24px;
280
+ min-height: 24px;
281
+ display: inline-flex;
282
+ align-items: center;
283
+ justify-content: center;
284
+
285
+ .quantity-cta-icon {
286
+ font-size: 1.35rem;
287
+ color: $blue;
288
+ }
289
+
290
+ &[disabled] {
291
+ border: none;
292
+ opacity: 0.6;
293
+ }
294
+ }
295
+ }
296
+
297
+ .btn--remove,
298
+ .btn--quantity {
299
+ &:hover {
300
+ opacity: 0.7;
209
301
  }
210
302
  }
211
303
 
212
304
  &.popover-mini-basket__cards-holder {
213
305
  .card {
214
306
  margin-bottom: 0;
307
+ display: flex;
215
308
 
216
309
  & + .card {
217
310
  border-top: 1px solid $gray-light;
218
311
  }
219
312
  }
220
313
  }
314
+
315
+ &__offers {
316
+ margin-top: 4px;
317
+
318
+ .products__promo {
319
+ @include font-size(12);
320
+ @include line-height(16);
321
+ color: $red;
322
+ font-weight: 400;
323
+ }
324
+ }
221
325
  }
222
326
 
223
327
  &__footer {
@@ -324,7 +428,7 @@
324
428
  font-weight: 500;
325
429
  }
326
430
 
327
- .value {
431
+ &-value {
328
432
  @include font-size(18);
329
433
  @include line-height(24);
330
434
  font-weight: 700;
@@ -454,6 +558,30 @@
454
558
  }
455
559
  }
456
560
 
561
+ @include media-breakpoint-up(sm) {
562
+ .custom-slider {
563
+ .products__details {
564
+ .price {
565
+ @include font-size(18);
566
+ @include line-height(24);
567
+
568
+ .inc {
569
+ @include font-size(12);
570
+ @include line-height(16);
571
+ font-weight: 500;
572
+ }
573
+ }
574
+
575
+ &-footer {
576
+ display: flex;
577
+ align-items: center;
578
+ justify-content: space-between;
579
+ margin-top: auto;
580
+ }
581
+ }
582
+ }
583
+ }
584
+
457
585
  @include media-breakpoint-up(sm) {
458
586
  .custom-slider {
459
587
  &__wrap {
package/src/scss/components/_popover-mini-basket.scss CHANGED
@@ -173,10 +173,6 @@
173
173
  .card__img {
174
174
  border: 0;
175
175
  }
176
-
177
- .product-card__content {
178
- height: auto;
179
- }
180
176
  }
181
177
  }
182
178
  }
package/src/js/components/general/mini-basket-slider.js DELETED
@@ -1,8 +0,0 @@
1
- createPopupSlider({
2
- type: 'miniBasket',
3
- sliderSelector: '.custom-slider.mini-basket',
4
- onAppendEvent: 'showMiniBasket',
5
- onAppend: function (event, { showSlider }) {
6
- showSlider();
7
- },
8
- });