wickes-css2 2.98.0-develop.5 → 2.98.0-develop.7
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/Readme.md +1 -0
- package/build/css/category-main.css +1 -1
- package/build/css/homepage-main.css +1 -1
- package/build/css/main.css +1 -1
- package/build/css/my-account-main-v2.css +1 -1
- package/build/css/my-account-main.css +1 -1
- package/build/css/pdp-main-before-combine.css +1 -1
- package/build/css/pdp-main-non-critical.css +1 -1
- package/build/css/pdp-main.css +1 -1
- package/build/css/plp-main.css +1 -1
- package/build/css/store-locator-main.css +1 -1
- package/build/js/basket.min.js +1 -1
- package/build/js/bundle.min.js +1 -1
- package/build/js/checkout.min.js +1 -1
- package/build/js/emulation.min.js +46 -32
- package/build/js/general.bundle.min.js +1 -1
- package/build/js/merged-checkout.min.js +1 -1
- package/build/js/pdp.bundle.min.js +1 -1
- package/build/js/plp.bundle.min.js +1 -1
- package/build/js/project-list.min.js +1 -1
- package/package.json +1 -1
- package/src/components/mini-basket/mini-basket.hbs +3 -3
- package/src/components/mini-basket/product-item.hbs +23 -21
- package/src/js/components/general/text-clamp.js +2 -1
- package/src/js/emulation/mock.js +46 -32
- package/src/scss/components/_custom-slider.scss +29 -0
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
<div class="custom-slider mini-basket d-none">
|
|
2
|
-
<div class="custom-slider__wrap
|
|
2
|
+
<div class="custom-slider__wrap">
|
|
3
3
|
<div class="custom-slider__header">
|
|
4
4
|
<span class="custom-slider__count">Your basket (1)</span>
|
|
5
5
|
<button type="button" class="icon-wrap close-popup">
|
|
6
6
|
<i class="far fa-times icon"></i>
|
|
7
7
|
</button>
|
|
8
8
|
</div>
|
|
9
|
-
<
|
|
9
|
+
<div class="products popover-mini-basket__cards-holder">
|
|
10
10
|
{{#each mini-basket.products}}
|
|
11
11
|
{{> mini-basket/product-item this switch-vat=true}}
|
|
12
12
|
{{/each}}
|
|
13
|
-
</
|
|
13
|
+
</div>
|
|
14
14
|
</div>
|
|
15
15
|
<div class="custom-slider__footer footer-fixed">
|
|
16
16
|
<div class="mini-basket__total">
|
|
@@ -1,22 +1,24 @@
|
|
|
1
|
-
<
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
<div class="card product-card-preview">
|
|
2
|
+
<div class="products__item card__inner">
|
|
3
|
+
<a class="card__img-wrap card__img-wrap_link products__image" href="page_product-details-with-global-search-v2.html">
|
|
4
|
+
<img class="product-img" src="{{src}}" alt="">
|
|
5
|
+
</a>
|
|
6
|
+
<div class="products__details product-card__content">
|
|
7
|
+
<a href="#" class="title product-card__title product-card__title_link">{{title}}</a>
|
|
8
|
+
<p class="item">Click & Collect: <span class="value">{{CC}}</span></p>
|
|
9
|
+
<p class="item">Qty: <span class="value">{{quantity.value}}</span></p>
|
|
10
|
+
{{#if switch-vat}}
|
|
11
|
+
<p class="price including-vat-inherit">
|
|
12
|
+
{{incVatPrice}}
|
|
13
|
+
<span class="inc">Inc.VAT</span>
|
|
14
|
+
</p>
|
|
15
|
+
<p class="price excluding-vat-inherit">
|
|
16
|
+
{{excVatPrice}}
|
|
17
|
+
<span class="inc">Exc.VAT</span>
|
|
18
|
+
</p>
|
|
19
|
+
{{else}}
|
|
20
|
+
<p class="price">{{price}}</p>
|
|
21
|
+
{{/if}}
|
|
22
|
+
</div>
|
|
21
23
|
</div>
|
|
22
|
-
</
|
|
24
|
+
</div>
|
|
@@ -9,6 +9,7 @@ Wick.TextClamp = (function () {
|
|
|
9
9
|
var wismoProductLink = $('.wismo-order__name-link');
|
|
10
10
|
var complementCardHeader = $('.complem__head');
|
|
11
11
|
var orderItemTitle = $('.order-item__title');
|
|
12
|
+
let customSlider = $('.custom-slider.mini-basket');
|
|
12
13
|
|
|
13
14
|
function clampText(selector, size) {
|
|
14
15
|
if (selector.length) {
|
|
@@ -52,7 +53,7 @@ Wick.TextClamp = (function () {
|
|
|
52
53
|
});
|
|
53
54
|
}
|
|
54
55
|
|
|
55
|
-
if (productCardHorizontal.length) {
|
|
56
|
+
if (productCardHorizontal.length && !customSlider.length) {
|
|
56
57
|
productCardHorizontal.each(function (index, value) {
|
|
57
58
|
$clamp(value, {clamp: 3});
|
|
58
59
|
});
|
package/src/js/emulation/mock.js
CHANGED
|
@@ -22,48 +22,62 @@ Wick.FEMock = {
|
|
|
22
22
|
}
|
|
23
23
|
],
|
|
24
24
|
cartPDP: `
|
|
25
|
-
<div class="custom-slider__wrap
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
25
|
+
<div class="custom-slider__wrap slider-mini-basket popover-mini-basket">
|
|
26
|
+
<div class="custom-slider__header">
|
|
27
|
+
<a href="#" type="button" class="link close-popup">
|
|
28
|
+
<span class="icon-wrap">
|
|
29
|
+
<svg class="svg-inline--fa fa-angle-left fa-w-6" aria-hidden="true" focusable="false" data-prefix="far" data-icon="angle-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512" data-fa-i2svg="">
|
|
30
|
+
<path fill="currentColor" d="M4.2 247.5L151 99.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17L69.3 256l118.5 119.7c4.7 4.7 4.7 12.3 0 17L168 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 264.5c-4.7-4.7-4.7-12.3 0-17z"></path>
|
|
31
|
+
</svg>
|
|
32
|
+
</span>
|
|
33
|
+
Continue Shopping
|
|
34
|
+
</a>
|
|
35
|
+
<a href="#" type="button" class="icon-wrap close-popup">
|
|
36
|
+
<svg class="svg-inline--fa fa-times fa-w-10 icon" aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg="">
|
|
37
|
+
<path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
|
|
38
|
+
</svg>
|
|
39
|
+
</a>
|
|
36
40
|
</div>
|
|
37
41
|
<div class="custom-slider__message">
|
|
38
42
|
<span class="icon-wrap success">
|
|
39
|
-
<svg class="svg-inline--fa fa-check-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>
|
|
43
|
+
<svg class="svg-inline--fa fa-check-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg><!-- <i class="fas fa-check-circle"></i> Font Awesome fontawesome.com -->
|
|
40
44
|
</span>
|
|
41
|
-
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
|
|
46
|
+
<div class="messages popover-mini-basket__added">
|
|
47
|
+
<p class="messages__text">
|
|
48
|
+
<span>
|
|
49
|
+
You've just added</span>
|
|
50
|
+
</p>
|
|
51
|
+
|
|
52
|
+
<span class="messages__notice">
|
|
53
|
+
Excluding items already in basket</span>
|
|
54
|
+
</div>
|
|
45
55
|
</div>
|
|
46
|
-
<
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
<div class="products popover-mini-basket__cards-holder">
|
|
57
|
+
<div class="card product-card-preview">
|
|
58
|
+
<div class="products__item card__inner" data-name="Blue Circle Ready To Use Postcrete - 20kg" data-id="221100" data-price="7.50" data-brand="Blue Circle" data-category="Building Materials/Cement & Aggregates/Cement" data-position="0">
|
|
59
|
+
<a href="/Blue-Circle-Ready-To-Use-Postcrete---20kg/p/221100" class="card__img-wrap card__img-wrap_link products__image">
|
|
60
|
+
<img loading="lazy" class="product-img" src="//media.wickes.co.uk/is/image/wickes/B3182_221100_00?$thumbnail$" alt="Blue Circle Ready To Use Postcrete - 20kg" title="Blue Circle Ready To Use Postcrete - 20kg">
|
|
61
|
+
</a>
|
|
62
|
+
|
|
63
|
+
<div class="products__details">
|
|
64
|
+
<a href="/Blue-Circle-Ready-To-Use-Postcrete---20kg/p/221100" class="title product-card__title">Blue Circle Ready To Use Postcrete - 20kg</a>
|
|
65
|
+
<p class="item">Added for delivery</p>
|
|
66
|
+
<p class="item pdp-price__control-holder">Qty:
|
|
67
|
+
<span class="value product-card__quantity-value">1</span>
|
|
68
|
+
</p>
|
|
69
|
+
<p class="price product-card__price-value">£7.50</p>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
57
72
|
</div>
|
|
58
|
-
|
|
59
|
-
</ul>
|
|
73
|
+
</div>
|
|
60
74
|
<div class="custom-slider__content">
|
|
61
75
|
<p>Product description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget. Product description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
|
|
62
76
|
</div>
|
|
63
77
|
</div>
|
|
64
|
-
<div class="custom-slider__footer
|
|
65
|
-
|
|
66
|
-
|
|
78
|
+
<div class="custom-slider__footer">
|
|
79
|
+
<button class="btn btn_full btn-secondary close-popup">Continue Shopping</button>
|
|
80
|
+
<a href="/cart" class="btn btn-action btn_full btn-view-basket-cta" type="button">View Basket</a>
|
|
67
81
|
</div>
|
|
68
82
|
`
|
|
69
83
|
}
|
|
@@ -104,6 +104,8 @@
|
|
|
104
104
|
.messages {
|
|
105
105
|
display: flex;
|
|
106
106
|
flex-direction: column;
|
|
107
|
+
border: none;
|
|
108
|
+
background: none;
|
|
107
109
|
|
|
108
110
|
&__text {
|
|
109
111
|
font-size: 1rem;
|
|
@@ -135,6 +137,7 @@
|
|
|
135
137
|
justify-content: space-between;
|
|
136
138
|
grid-gap: 8px;
|
|
137
139
|
padding: 8px 0;
|
|
140
|
+
border: none;
|
|
138
141
|
|
|
139
142
|
& + .products__item {
|
|
140
143
|
border-top: 1px solid $gray-light;
|
|
@@ -165,6 +168,7 @@
|
|
|
165
168
|
font-weight: 500;
|
|
166
169
|
line-height: 1.375rem;
|
|
167
170
|
text-decoration: none;
|
|
171
|
+
margin-bottom: 0;
|
|
168
172
|
}
|
|
169
173
|
|
|
170
174
|
.item {
|
|
@@ -175,6 +179,8 @@
|
|
|
175
179
|
|
|
176
180
|
.value {
|
|
177
181
|
color: $gray-dark;
|
|
182
|
+
margin-left: 0;
|
|
183
|
+
font-weight: 400;
|
|
178
184
|
}
|
|
179
185
|
|
|
180
186
|
& + .item {
|
|
@@ -195,6 +201,21 @@
|
|
|
195
201
|
font-weight: 500;
|
|
196
202
|
}
|
|
197
203
|
}
|
|
204
|
+
|
|
205
|
+
&.product-card__content {
|
|
206
|
+
margin-top: 0;
|
|
207
|
+
padding: 0;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
&.popover-mini-basket__cards-holder {
|
|
212
|
+
.card {
|
|
213
|
+
margin-bottom: 0;
|
|
214
|
+
|
|
215
|
+
& + .card {
|
|
216
|
+
border-top: 1px solid $gray-light;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
198
219
|
}
|
|
199
220
|
}
|
|
200
221
|
|
|
@@ -271,6 +292,10 @@
|
|
|
271
292
|
&.mini-basket {
|
|
272
293
|
.custom-slider__wrap {
|
|
273
294
|
padding-top: 16px;
|
|
295
|
+
|
|
296
|
+
&--scroll {
|
|
297
|
+
margin-bottom: 120px;
|
|
298
|
+
}
|
|
274
299
|
}
|
|
275
300
|
|
|
276
301
|
.custom-slider__footer {
|
|
@@ -467,6 +492,10 @@
|
|
|
467
492
|
&.mini-basket {
|
|
468
493
|
.custom-slider__wrap {
|
|
469
494
|
padding-top: 24px;
|
|
495
|
+
|
|
496
|
+
&--scroll {
|
|
497
|
+
margin-bottom: 132px;
|
|
498
|
+
}
|
|
470
499
|
}
|
|
471
500
|
}
|
|
472
501
|
}
|