wickes-css2 2.111.0-why-not-add-refactor-fix.2 → 2.111.0
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 -2
- package/build/css/kitchen-plp-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/js/bloomreach-widget.min.js +1 -1
- package/build/js/emulation.min.js +8 -334
- package/build/js/page/{bloomreach-widget/complete-your-project-widget.js → bloomreach-widget.js} +359 -205
- package/package.json +1 -1
- package/src/components/.DS_Store +0 -0
- package/src/components/bloomreach/complete-card.hbs +32 -4
- package/src/components/pdp-price-actions.hbs +2 -2
- package/src/components/price-block-v2.hbs +0 -2
- package/src/data/data_kitchen-plp.json +7 -16
- package/src/js/emulation/bloomreach-widget-loading.js +2 -2
- package/src/js/emulation/mock.js +0 -309
- package/src/js/page/.DS_Store +0 -0
- package/src/js/page/{bloomreach-widget/complete-your-project-widget.js → bloomreach-widget.js} +359 -205
- package/src/page_product-details-bloomreach.html +1 -1
- package/src/page_product-details-with-global-search-v2.html +1 -2
- package/src/scss/components/bloomreach/_bloomreach.scss +0 -3
- package/src/scss/components/bloomreach/_complete-card.scss +38 -0
- package/src/scss/components/kitchen/_colour-swatches.scss +9 -3
- package/src/sitemap.html +4 -10
- package/build/js/page/bloomreach-widget/bloomreach-widget.js +0 -241
- package/build/js/page/bloomreach-widget/why-not-add-widget.js +0 -196
- package/src/components/bloomreach/why-not-add-card-skeleton.hbs +0 -14
- package/src/components/bloomreach/why-not-add-card.hbs +0 -73
- package/src/components/bloomreach/why-not-add-content.hbs +0 -41
- package/src/components/bloomreach/why-not-add-skeleton.hbs +0 -9
- package/src/components/bloomreach/why-not-add.hbs +0 -6
- package/src/components/reviews-rating.hbs +0 -22
- package/src/js/emulation/why-not-add-loading.js +0 -11
- package/src/js/emulation/why-not-add.js +0 -28
- package/src/js/page/bloomreach-widget/bloomreach-widget.js +0 -241
- package/src/js/page/bloomreach-widget/why-not-add-widget.js +0 -196
- package/src/page_product-details-with-why-not-add-single.html +0 -131
- package/src/scss/components/bloomreach/_reviews.scss +0 -60
- package/src/scss/components/bloomreach/_why-not-add-card.scss +0 -212
- package/src/scss/components/bloomreach/_why-not-add.scss +0 -143
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
<div class="why-not-add {{#if isSingleProduct}}why-not-add--single{{/if}}" data-why-not-add>
|
|
2
|
-
<div class="why-not-add__header">
|
|
3
|
-
<h3 class="why-not-add__title">Why not add</h3>
|
|
4
|
-
|
|
5
|
-
{{#unless isSingleProduct}}
|
|
6
|
-
<div class="why-not-add__arrows">
|
|
7
|
-
<button
|
|
8
|
-
class="why-not-add__arrow why-not-add__arrow-prev"
|
|
9
|
-
type="button"
|
|
10
|
-
aria-label="Previous slide"
|
|
11
|
-
data-why-not-add-prev
|
|
12
|
-
>
|
|
13
|
-
<i class="fas fa-chevron-left"></i>
|
|
14
|
-
</button>
|
|
15
|
-
|
|
16
|
-
<button
|
|
17
|
-
class="why-not-add__arrow why-not-add__arrow-next"
|
|
18
|
-
type="button"
|
|
19
|
-
aria-label="Next slide"
|
|
20
|
-
data-why-not-add-next
|
|
21
|
-
>
|
|
22
|
-
<i class="fas fa-chevron-right"></i>
|
|
23
|
-
</button>
|
|
24
|
-
</div>
|
|
25
|
-
{{/unless}}
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
<div class="swiper-container why-not-add__slider" data-why-not-add-slider>
|
|
29
|
-
<div class="swiper-wrapper">
|
|
30
|
-
{{#each products}}
|
|
31
|
-
<div class="swiper-slide why-not-add__slide">
|
|
32
|
-
{{> bloomreach/why-not-add-card this}}
|
|
33
|
-
</div>
|
|
34
|
-
{{/each}}
|
|
35
|
-
</div>
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
{{#unless isSingleProduct}}
|
|
39
|
-
<div class="why-not-add__pagination" data-why-not-add-pagination></div>
|
|
40
|
-
{{/unless}}
|
|
41
|
-
</div>
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
<div class="why-not-add why-not-add--skeleton ssc">
|
|
2
|
-
<div class="why-not-add__header">
|
|
3
|
-
<div class="ssc-line why-not-add__skeleton-title"></div>
|
|
4
|
-
</div>
|
|
5
|
-
|
|
6
|
-
<div class="why-not-add__skeleton-cards">
|
|
7
|
-
{{> bloomreach/why-not-add-card-skeleton}}
|
|
8
|
-
</div>
|
|
9
|
-
</div>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
<div class="reviews">
|
|
2
|
-
<div class="rating-bg">
|
|
3
|
-
<i class="fa fa-star star-in" aria-hidden="true"></i>
|
|
4
|
-
<i class="fa fa-star star-in" aria-hidden="true"></i>
|
|
5
|
-
<i class="fa fa-star star-in" aria-hidden="true"></i>
|
|
6
|
-
<i class="fa fa-star star-in" aria-hidden="true"></i>
|
|
7
|
-
<i class="fa fa-star star-in" aria-hidden="true"></i>
|
|
8
|
-
|
|
9
|
-
<div
|
|
10
|
-
class="rating-overlay"
|
|
11
|
-
data-rating="{{#if externalAverageRating}}{{externalAverageRating}}{{else}}0{{/if}}"
|
|
12
|
-
>
|
|
13
|
-
<span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
|
|
14
|
-
<span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
|
|
15
|
-
<span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
|
|
16
|
-
<span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
|
|
17
|
-
<span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
<span class="{{#if countClass}}{{countClass}}{{else}}reviews-count{{/if}}">(<span class="{{#if countValueClass}}{{countValueClass}}{{else}}reviews-count-value{{/if}}">{{#if externalReviewCount}}{{externalReviewCount}}{{else}}0{{/if}}</span>)</span>
|
|
21
|
-
</div>
|
|
22
|
-
</div>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
var Wick = window.Wick || {};
|
|
2
|
-
|
|
3
|
-
$(document).ready(function () {
|
|
4
|
-
window.setTimeout(function () {
|
|
5
|
-
const $container = $('[data-why-not-add-widget]');
|
|
6
|
-
const mockDataKey = $container.data('mock-key');
|
|
7
|
-
const payloadData = Wick.FEMock.dataBloomreach[mockDataKey];
|
|
8
|
-
|
|
9
|
-
Wick.BloomreachWidget.init('whyNotAdd', payloadData);
|
|
10
|
-
}, 3000);
|
|
11
|
-
});
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
var Wick = window.Wick || {};
|
|
2
|
-
|
|
3
|
-
function simulateHybrisSendingHtml() {
|
|
4
|
-
const htmlFromHybris = Wick.FEMock.cartPDP;
|
|
5
|
-
|
|
6
|
-
window.dispatchEvent(
|
|
7
|
-
new CustomEvent('productAddedToCart', {
|
|
8
|
-
detail: {
|
|
9
|
-
html: htmlFromHybris,
|
|
10
|
-
},
|
|
11
|
-
})
|
|
12
|
-
);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
function bindWhyNotAddToCartEvent() {
|
|
16
|
-
$(window)
|
|
17
|
-
.off('addToCart.whyNotAddEmulation')
|
|
18
|
-
.on('addToCart.whyNotAddEmulation', function ({ detail: { resolve } }) {
|
|
19
|
-
setTimeout(function () {
|
|
20
|
-
resolve();
|
|
21
|
-
simulateHybrisSendingHtml();
|
|
22
|
-
}, 3000);
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
$(document).ready(function () {
|
|
27
|
-
bindWhyNotAddToCartEvent();
|
|
28
|
-
});
|
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
var Wick = window.Wick || {};
|
|
2
|
-
|
|
3
|
-
import { createEvent } from '../utils/create-event';
|
|
4
|
-
import CompleteYourProjectWidget from './complete-your-project-widget';
|
|
5
|
-
import WhyNotAddWidget from './why-not-add-widget';
|
|
6
|
-
|
|
7
|
-
Wick.BloomreachWidget = {
|
|
8
|
-
widgets: {},
|
|
9
|
-
|
|
10
|
-
el: {
|
|
11
|
-
loadingButtonText: '.loading-button__text',
|
|
12
|
-
loadingButtonLoader: '.loading-button__loader',
|
|
13
|
-
ratingOverlay: '.rating-overlay',
|
|
14
|
-
starOverlay: '.star-overlay',
|
|
15
|
-
vatInc: '.including-vat-inherit',
|
|
16
|
-
vatExc: '.excluding-vat-inherit',
|
|
17
|
-
},
|
|
18
|
-
|
|
19
|
-
registerWidgets(widgetList) {
|
|
20
|
-
widgetList.forEach(function ({ type, widget }) {
|
|
21
|
-
Wick.BloomreachWidget.widgets[type] = widget;
|
|
22
|
-
});
|
|
23
|
-
},
|
|
24
|
-
|
|
25
|
-
getWidget(type) {
|
|
26
|
-
return Wick.BloomreachWidget.widgets[type];
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
init(type, payloadData) {
|
|
30
|
-
const widget = Wick.BloomreachWidget.getWidget(type);
|
|
31
|
-
|
|
32
|
-
if (!widget || typeof widget.init !== 'function') {
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
widget.init(payloadData, Wick.BloomreachWidget);
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
normalizePayload(payloadData) {
|
|
40
|
-
if (Array.isArray(payloadData)) {
|
|
41
|
-
return payloadData;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
if (payloadData && Array.isArray(payloadData.recommendedProducts)) {
|
|
45
|
-
return payloadData.recommendedProducts;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
return [];
|
|
49
|
-
},
|
|
50
|
-
|
|
51
|
-
hasRecommendations(payloadData) {
|
|
52
|
-
return Wick.BloomreachWidget.normalizePayload(payloadData).length > 0;
|
|
53
|
-
},
|
|
54
|
-
|
|
55
|
-
getDisplayPrice(product) {
|
|
56
|
-
return product.displayPrice || product.price || {};
|
|
57
|
-
},
|
|
58
|
-
|
|
59
|
-
getDisplayPriceExcVat(product) {
|
|
60
|
-
return product.displayPriceExclusiveVat || product.priceExclusiveVat || null;
|
|
61
|
-
},
|
|
62
|
-
|
|
63
|
-
getPriceValue(price) {
|
|
64
|
-
return price && typeof price.value === 'number' ? price.value : 0;
|
|
65
|
-
},
|
|
66
|
-
|
|
67
|
-
getPriceFormattedValue(price) {
|
|
68
|
-
if (!price) {
|
|
69
|
-
return '';
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
if (price.formattedValue) {
|
|
73
|
-
return price.formattedValue;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
if (typeof price.value === 'number') {
|
|
77
|
-
return Wick.BloomreachWidget.formatPrice(price.value);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
return '';
|
|
81
|
-
},
|
|
82
|
-
|
|
83
|
-
getWasPrice(product) {
|
|
84
|
-
const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
|
|
85
|
-
|
|
86
|
-
return displayPrice && displayPrice.wasPrice ? displayPrice.wasPrice : null;
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
-
getWasPriceFormatted(product) {
|
|
90
|
-
const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
|
|
91
|
-
const wasPrice = Wick.BloomreachWidget.getWasPrice(product);
|
|
92
|
-
|
|
93
|
-
if (wasPrice && wasPrice.formattedValue) {
|
|
94
|
-
return wasPrice.formattedValue;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
if (typeof wasPrice === 'number') {
|
|
98
|
-
return Wick.BloomreachWidget.formatPrice(wasPrice);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
if (wasPrice) {
|
|
102
|
-
return `${displayPrice.currencySymbol || '£'}${wasPrice}`;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
return '';
|
|
106
|
-
},
|
|
107
|
-
|
|
108
|
-
getExcVatWasPrice(product) {
|
|
109
|
-
const priceExclusiveVat = product.priceExclusiveVat || null;
|
|
110
|
-
const displayPriceExclusiveVat = product.displayPriceExclusiveVat || null;
|
|
111
|
-
const wasPrice =
|
|
112
|
-
(displayPriceExclusiveVat && displayPriceExclusiveVat.wasPrice) ||
|
|
113
|
-
(priceExclusiveVat && priceExclusiveVat.wasPrice);
|
|
114
|
-
|
|
115
|
-
if (wasPrice && wasPrice.formattedValue) {
|
|
116
|
-
return wasPrice.formattedValue;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
if (typeof wasPrice === 'number') {
|
|
120
|
-
return Wick.BloomreachWidget.formatPrice(wasPrice);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
return wasPrice || '';
|
|
124
|
-
},
|
|
125
|
-
|
|
126
|
-
getProductImage(product, fallbackProduct) {
|
|
127
|
-
const productImages = product.images || [];
|
|
128
|
-
const fallbackImages = fallbackProduct ? fallbackProduct.images || [] : [];
|
|
129
|
-
const images = productImages.length ? productImages : fallbackImages;
|
|
130
|
-
|
|
131
|
-
return (
|
|
132
|
-
images.find(function (item) {
|
|
133
|
-
return item.format === 'product';
|
|
134
|
-
}) ||
|
|
135
|
-
images.find(function (item) {
|
|
136
|
-
return item.imageType === 'PRIMARY';
|
|
137
|
-
}) ||
|
|
138
|
-
images[0] ||
|
|
139
|
-
{}
|
|
140
|
-
);
|
|
141
|
-
},
|
|
142
|
-
|
|
143
|
-
getProductRenderData(product, options = {}) {
|
|
144
|
-
const displayPrice = Wick.BloomreachWidget.getDisplayPrice(product);
|
|
145
|
-
const displayPriceExcVat = Wick.BloomreachWidget.getDisplayPriceExcVat(product);
|
|
146
|
-
const wasPriceFormatted = Wick.BloomreachWidget.getWasPriceFormatted(product);
|
|
147
|
-
const excVatWasPriceFormatted = Wick.BloomreachWidget.getExcVatWasPrice(product);
|
|
148
|
-
const isSwitchVat = !!(window.ACC && window.ACC.app && window.ACC.app.isVatToggleAvailable);
|
|
149
|
-
|
|
150
|
-
return {
|
|
151
|
-
...product,
|
|
152
|
-
price: displayPrice,
|
|
153
|
-
image:
|
|
154
|
-
options.image ||
|
|
155
|
-
Wick.BloomreachWidget.getProductImage(product, options.fallbackProduct),
|
|
156
|
-
wasPriceFormatted,
|
|
157
|
-
'switch-vat': isSwitchVat,
|
|
158
|
-
incVatFormattedValue: Wick.BloomreachWidget.getPriceFormattedValue(displayPrice),
|
|
159
|
-
incVatValue: Wick.BloomreachWidget.getPriceValue(displayPrice),
|
|
160
|
-
excVatFormattedValue: Wick.BloomreachWidget.getPriceFormattedValue(displayPriceExcVat),
|
|
161
|
-
excVatValue: Wick.BloomreachWidget.getPriceValue(displayPriceExcVat),
|
|
162
|
-
incVatWasPriceFormatted: wasPriceFormatted,
|
|
163
|
-
excVatWasPriceFormatted: Wick.BloomreachWidget.getExcVatWasPrice(product),
|
|
164
|
-
};
|
|
165
|
-
},
|
|
166
|
-
|
|
167
|
-
drawRating($root) {
|
|
168
|
-
const { ratingOverlay, starOverlay } = Wick.BloomreachWidget.el;
|
|
169
|
-
|
|
170
|
-
$root.find(ratingOverlay).each(function () {
|
|
171
|
-
let rating = parseFloat($(this).attr('data-rating')) || 0;
|
|
172
|
-
const $stars = $(this).children(starOverlay);
|
|
173
|
-
|
|
174
|
-
$stars.each(function () {
|
|
175
|
-
const $star = $(this);
|
|
176
|
-
|
|
177
|
-
if (rating >= 1) {
|
|
178
|
-
rating--;
|
|
179
|
-
} else if (rating > 0) {
|
|
180
|
-
const width = Math.asin(2 * rating - 1) / Math.PI + 0.5;
|
|
181
|
-
$star.css('width', width + 'rem');
|
|
182
|
-
rating = 0;
|
|
183
|
-
} else {
|
|
184
|
-
$star.css('width', '0rem');
|
|
185
|
-
}
|
|
186
|
-
});
|
|
187
|
-
});
|
|
188
|
-
},
|
|
189
|
-
|
|
190
|
-
dispatchWidgetEvent(eventName, payload) {
|
|
191
|
-
return new Promise(function (resolve, reject) {
|
|
192
|
-
const eventDetail = { resolve, reject };
|
|
193
|
-
const event = createEvent(eventName, payload, eventDetail);
|
|
194
|
-
|
|
195
|
-
window.dispatchEvent(event);
|
|
196
|
-
});
|
|
197
|
-
},
|
|
198
|
-
|
|
199
|
-
reapplyVatDisplay() {
|
|
200
|
-
if (!Wick.VatToggle || typeof Wick.VatToggle.isActive !== 'function') {
|
|
201
|
-
return;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
const { vatInc, vatExc } = Wick.BloomreachWidget.el;
|
|
205
|
-
const hiddenClassName = Wick.VatToggle.HIDDEN_CLASS_NAME || 'd-none';
|
|
206
|
-
const isExcVatActive = Wick.VatToggle.isActive();
|
|
207
|
-
|
|
208
|
-
$(vatInc).toggleClass(hiddenClassName, isExcVatActive);
|
|
209
|
-
$(vatExc).toggleClass(hiddenClassName, !isExcVatActive);
|
|
210
|
-
},
|
|
211
|
-
|
|
212
|
-
bindVatToggle(namespace) {
|
|
213
|
-
if (!Wick.VatToggle || !Wick.VatToggle.TOGGLE_VAT_EVENT_NAME) {
|
|
214
|
-
return;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
const eventName = `${Wick.VatToggle.TOGGLE_VAT_EVENT_NAME}.${namespace}`;
|
|
218
|
-
|
|
219
|
-
$(window).off(eventName).on(eventName, Wick.BloomreachWidget.reapplyVatDisplay);
|
|
220
|
-
},
|
|
221
|
-
|
|
222
|
-
formatPrice(value) {
|
|
223
|
-
return new Intl.NumberFormat('en-GB', {
|
|
224
|
-
style: 'currency',
|
|
225
|
-
currency: 'GBP',
|
|
226
|
-
minimumFractionDigits: 2,
|
|
227
|
-
maximumFractionDigits: 2,
|
|
228
|
-
}).format(value);
|
|
229
|
-
},
|
|
230
|
-
};
|
|
231
|
-
|
|
232
|
-
Wick.BloomreachWidget.registerWidgets([
|
|
233
|
-
{
|
|
234
|
-
type: 'completeYourProject',
|
|
235
|
-
widget: CompleteYourProjectWidget,
|
|
236
|
-
},
|
|
237
|
-
{
|
|
238
|
-
type: 'whyNotAdd',
|
|
239
|
-
widget: WhyNotAddWidget,
|
|
240
|
-
},
|
|
241
|
-
]);
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
var Wick = window.Wick || {};
|
|
2
|
-
|
|
3
|
-
import { createLoadingButton } from '../utils/create-loading-button';
|
|
4
|
-
|
|
5
|
-
const Handlebars = require('hbsfy/runtime');
|
|
6
|
-
|
|
7
|
-
Handlebars.registerPartial('loader', require('../../../elements/loader.hbs'));
|
|
8
|
-
Handlebars.registerPartial('button', require('../../../components/base/button.hbs'));
|
|
9
|
-
Handlebars.registerPartial(
|
|
10
|
-
'bloomreach/why-not-add',
|
|
11
|
-
require('../../../components/bloomreach/why-not-add.hbs')
|
|
12
|
-
);
|
|
13
|
-
Handlebars.registerPartial(
|
|
14
|
-
'bloomreach/why-not-add-skeleton',
|
|
15
|
-
require('../../../components/bloomreach/why-not-add-skeleton.hbs')
|
|
16
|
-
);
|
|
17
|
-
Handlebars.registerPartial(
|
|
18
|
-
'bloomreach/why-not-add-card-skeleton',
|
|
19
|
-
require('../../../components/bloomreach/why-not-add-card-skeleton.hbs')
|
|
20
|
-
);
|
|
21
|
-
Handlebars.registerPartial(
|
|
22
|
-
'bloomreach/why-not-add-card',
|
|
23
|
-
require('../../../components/bloomreach/why-not-add-card.hbs')
|
|
24
|
-
);
|
|
25
|
-
Handlebars.registerPartial('reviews-rating', require('../../../components/reviews-rating.hbs'));
|
|
26
|
-
|
|
27
|
-
const whyNotAddTemplate = require('../../../components/bloomreach/why-not-add-content.hbs');
|
|
28
|
-
|
|
29
|
-
const WhyNotAddWidget = {
|
|
30
|
-
ADD_TO_CART_EVENT: 'addToCart',
|
|
31
|
-
|
|
32
|
-
products: [],
|
|
33
|
-
sliders: [],
|
|
34
|
-
loadingButton: null,
|
|
35
|
-
|
|
36
|
-
el: {
|
|
37
|
-
cta: '.why-not-add-card__cta',
|
|
38
|
-
next: '[data-why-not-add-next]',
|
|
39
|
-
pagination: '[data-why-not-add-pagination]',
|
|
40
|
-
prev: '[data-why-not-add-prev]',
|
|
41
|
-
root: '[data-why-not-add]',
|
|
42
|
-
slider: '[data-why-not-add-slider]',
|
|
43
|
-
widgetContainer: '[data-why-not-add-widget]',
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
normalizeProducts(payloadData) {
|
|
47
|
-
return Wick.BloomreachWidget.normalizePayload(payloadData)
|
|
48
|
-
.map(function (item) {
|
|
49
|
-
return item.baseProduct || item;
|
|
50
|
-
})
|
|
51
|
-
.slice(0, 5);
|
|
52
|
-
},
|
|
53
|
-
|
|
54
|
-
renderWidget($container, payloadData) {
|
|
55
|
-
const products = WhyNotAddWidget.normalizeProducts(payloadData);
|
|
56
|
-
|
|
57
|
-
if (!products.length) {
|
|
58
|
-
$container.empty().hide();
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
WhyNotAddWidget.products = products;
|
|
63
|
-
|
|
64
|
-
$container
|
|
65
|
-
.html(
|
|
66
|
-
whyNotAddTemplate({
|
|
67
|
-
products: products.map(Wick.BloomreachWidget.getProductRenderData),
|
|
68
|
-
isSingleProduct: products.length === 1,
|
|
69
|
-
})
|
|
70
|
-
)
|
|
71
|
-
.show();
|
|
72
|
-
},
|
|
73
|
-
|
|
74
|
-
destroySliders() {
|
|
75
|
-
WhyNotAddWidget.sliders.forEach(function (slider) {
|
|
76
|
-
if (slider && slider.destroy) {
|
|
77
|
-
slider.destroy(true, true);
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
WhyNotAddWidget.sliders = [];
|
|
82
|
-
},
|
|
83
|
-
|
|
84
|
-
initSliders($root) {
|
|
85
|
-
WhyNotAddWidget.destroySliders();
|
|
86
|
-
|
|
87
|
-
$root.find(WhyNotAddWidget.el.slider).each(function () {
|
|
88
|
-
const $slider = $(this);
|
|
89
|
-
const $widget = $slider.closest(WhyNotAddWidget.el.root);
|
|
90
|
-
const slidesCount = $slider.find('.swiper-slide').length;
|
|
91
|
-
|
|
92
|
-
if (slidesCount <= 1) {
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
const slider = new Swiper(this, {
|
|
97
|
-
roundLengths: true,
|
|
98
|
-
slidesPerView: 1,
|
|
99
|
-
spaceBetween: 12,
|
|
100
|
-
watchOverflow: true,
|
|
101
|
-
navigation: {
|
|
102
|
-
nextEl: $widget.find(WhyNotAddWidget.el.next)[0],
|
|
103
|
-
prevEl: $widget.find(WhyNotAddWidget.el.prev)[0],
|
|
104
|
-
disabledClass: 'why-not-add__arrow--disabled',
|
|
105
|
-
},
|
|
106
|
-
pagination: {
|
|
107
|
-
el: $widget.find(WhyNotAddWidget.el.pagination)[0],
|
|
108
|
-
clickable: true,
|
|
109
|
-
renderBullet(index, className) {
|
|
110
|
-
return `<button class="${className}" type="button" aria-label="Go to slide ${
|
|
111
|
-
index + 1
|
|
112
|
-
}"></button>`;
|
|
113
|
-
},
|
|
114
|
-
bulletClass: 'why-not-add__pagination-item',
|
|
115
|
-
bulletActiveClass: 'why-not-add__pagination-item--active',
|
|
116
|
-
},
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
WhyNotAddWidget.sliders.push(slider);
|
|
120
|
-
});
|
|
121
|
-
},
|
|
122
|
-
bindAddToCart($root) {
|
|
123
|
-
$root.off('click.whyNotAdd', WhyNotAddWidget.el.cta);
|
|
124
|
-
$root.on('click.whyNotAdd', WhyNotAddWidget.el.cta, function (event) {
|
|
125
|
-
event.preventDefault();
|
|
126
|
-
|
|
127
|
-
const $button = $(this);
|
|
128
|
-
const $card = $button.closest('.why-not-add-card');
|
|
129
|
-
const productCode = $card.attr('data-product-code');
|
|
130
|
-
|
|
131
|
-
if (!productCode || WhyNotAddWidget.loadingButton.isLoading($button)) {
|
|
132
|
-
return;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
const payload = {
|
|
136
|
-
productCode,
|
|
137
|
-
};
|
|
138
|
-
|
|
139
|
-
WhyNotAddWidget.loadingButton.start($button);
|
|
140
|
-
|
|
141
|
-
Wick.BloomreachWidget.dispatchWidgetEvent(WhyNotAddWidget.ADD_TO_CART_EVENT, payload)
|
|
142
|
-
.then(function () {
|
|
143
|
-
WhyNotAddWidget.loadingButton.stop($button);
|
|
144
|
-
Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
|
|
145
|
-
})
|
|
146
|
-
.catch(function () {
|
|
147
|
-
WhyNotAddWidget.loadingButton.stop($button);
|
|
148
|
-
});
|
|
149
|
-
});
|
|
150
|
-
},
|
|
151
|
-
|
|
152
|
-
bindVatToggle() {
|
|
153
|
-
if (Wick.BloomreachWidget.bindVatToggle) {
|
|
154
|
-
Wick.BloomreachWidget.bindVatToggle('whyNotAddVatToggle');
|
|
155
|
-
}
|
|
156
|
-
},
|
|
157
|
-
|
|
158
|
-
initRenderedWidget($container) {
|
|
159
|
-
const $root = $container.find(WhyNotAddWidget.el.root);
|
|
160
|
-
|
|
161
|
-
if (!$root.length) {
|
|
162
|
-
return;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
if (!WhyNotAddWidget.loadingButton) {
|
|
166
|
-
WhyNotAddWidget.loadingButton = createLoadingButton({
|
|
167
|
-
text: Wick.BloomreachWidget.el.loadingButtonText,
|
|
168
|
-
loader: Wick.BloomreachWidget.el.loadingButtonLoader,
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
Wick.BloomreachWidget.drawRating($root);
|
|
173
|
-
WhyNotAddWidget.initSliders($root);
|
|
174
|
-
WhyNotAddWidget.bindAddToCart($root);
|
|
175
|
-
WhyNotAddWidget.bindVatToggle();
|
|
176
|
-
Wick.BloomreachWidget.reapplyVatDisplay();
|
|
177
|
-
},
|
|
178
|
-
|
|
179
|
-
init(payloadData) {
|
|
180
|
-
const $containers = $(WhyNotAddWidget.el.widgetContainer);
|
|
181
|
-
|
|
182
|
-
if (!payloadData) {
|
|
183
|
-
$containers.empty().hide();
|
|
184
|
-
return;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
$containers.each(function () {
|
|
188
|
-
const $container = $(this);
|
|
189
|
-
|
|
190
|
-
WhyNotAddWidget.renderWidget($container, payloadData);
|
|
191
|
-
WhyNotAddWidget.initRenderedWidget($container);
|
|
192
|
-
});
|
|
193
|
-
},
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
export default WhyNotAddWidget;
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
{{#extend "base" pageClass="page-product-details" title="Product details page new"
|
|
2
|
-
isDiscount=true
|
|
3
|
-
isSQM=true
|
|
4
|
-
isDescription=true
|
|
5
|
-
isCashback=false
|
|
6
|
-
isSize=true
|
|
7
|
-
isGuide=true
|
|
8
|
-
hourly-delivery=true
|
|
9
|
-
badge-text='15% off'
|
|
10
|
-
badge-color='yellow'
|
|
11
|
-
badge-text-color='gray'
|
|
12
|
-
currentlyInStock=true
|
|
13
|
-
pagePdp=true
|
|
14
|
-
globalSearchV2="true"
|
|
15
|
-
switch-vat=true
|
|
16
|
-
}}
|
|
17
|
-
{{#content "head" mode="append" pagePdp=true}}
|
|
18
|
-
<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
|
|
19
|
-
{{/content}}
|
|
20
|
-
{{#content "body"}}
|
|
21
|
-
<main class="pdp__main">
|
|
22
|
-
<div class="container">
|
|
23
|
-
<div class="pdp">
|
|
24
|
-
<div class="pdp__title">
|
|
25
|
-
<h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long
|
|
26
|
-
title in two raws
|
|
27
|
-
</h1>
|
|
28
|
-
<div class="pdp__reviews_small">
|
|
29
|
-
<span class="product-code product-code-v2">Product code: <strong id="product-code-val">236334</strong></span>
|
|
30
|
-
<div class="product-card__reviews review-star">
|
|
31
|
-
<div class="product-rating product-rating-v2">
|
|
32
|
-
<div class="rating-bg">
|
|
33
|
-
<i class="fa fa-star" aria-hidden="true"></i>
|
|
34
|
-
<i class="fa fa-star" aria-hidden="true"></i>
|
|
35
|
-
<i class="fa fa-star" aria-hidden="true"></i>
|
|
36
|
-
<i class="fa fa-star" aria-hidden="true"></i>
|
|
37
|
-
<i class="fa fa-star" aria-hidden="true"></i>
|
|
38
|
-
<div class="rating-overlay"
|
|
39
|
-
data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
|
|
40
|
-
<i class="fa fa-star" aria-hidden="true"></i>
|
|
41
|
-
<i class="fa fa-star" aria-hidden="true"></i>
|
|
42
|
-
<i class="fa fa-star" aria-hidden="true"></i>
|
|
43
|
-
<i class="fa fa-star" aria-hidden="true"></i>
|
|
44
|
-
<i class="fa fa-star" aria-hidden="true"></i>
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
<span class="review-star-average review-star-average-v2">(4.6)</span>
|
|
49
|
-
</div>
|
|
50
|
-
<span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews" id="open-review">82 reviews</a></span>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
53
|
-
|
|
54
|
-
<div class="pdp__gallery">
|
|
55
|
-
{{> gallery-pdp-v2 }}
|
|
56
|
-
</div>
|
|
57
|
-
<div class="pdp__aside">
|
|
58
|
-
{{> price-block-v2
|
|
59
|
-
isProductSaved=false
|
|
60
|
-
isUserLogedOut=true
|
|
61
|
-
install=true
|
|
62
|
-
sample=true
|
|
63
|
-
cc=true
|
|
64
|
-
delivery=true
|
|
65
|
-
mockDataKey="whyNotAddRecommendationsSingle"
|
|
66
|
-
}}
|
|
67
|
-
</div>
|
|
68
|
-
<div class="pdp__description">
|
|
69
|
-
{{> product-main-info-v2 isProductSaved=true}}
|
|
70
|
-
</div>
|
|
71
|
-
<div
|
|
72
|
-
class="pdp__widget"
|
|
73
|
-
data-complete-widget
|
|
74
|
-
data-mock-key="completeYourProject3Recomendations"
|
|
75
|
-
>
|
|
76
|
-
{{> bloomreach/complete-your-project title="Complete your project"}}
|
|
77
|
-
</div>
|
|
78
|
-
{{> fulfilment-accordions }}
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
<div class="container container-info">
|
|
82
|
-
<div class="pdp">
|
|
83
|
-
<div class="pdp__info">
|
|
84
|
-
{{> pdp-info-v2 }}
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
{{> recently-viewed }}
|
|
89
|
-
|
|
90
|
-
{{> similar-products-v2 }}
|
|
91
|
-
|
|
92
|
-
{{> seo-widgets title="More products" }}
|
|
93
|
-
{{> seo-widgets title="Related category" }}
|
|
94
|
-
</main>
|
|
95
|
-
{{/content}}
|
|
96
|
-
{{#content "foot" mode="append"}}
|
|
97
|
-
<script type="text/html" id="mini-basket-popup">
|
|
98
|
-
{{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
|
|
99
|
-
</script>
|
|
100
|
-
<script defer src="./js/page/pdp.js"></script>
|
|
101
|
-
<script defer src="./js/global-search.min.js"></script>
|
|
102
|
-
{{#extend "modal" id="modal-pdp-feedback" title="Feedback Form" fullWidth=true}}
|
|
103
|
-
{{#content "body"}}
|
|
104
|
-
<iframe class="cboxIframe" name="cbox1538824723052"
|
|
105
|
-
src="https://docs.google.com/forms/d/1jHV5b8AazYbPmoTXJBxmyns4AcRhtKnnIC4_K_MFOPU/viewform?entry.1452922942=Wickes+Blue+Slate+Chippings+-+Major+Bag&entry.1885983523=Decorative+Uk+sourced+blue+slate+chippings+are+ideal+for+gardens+and+borders.+This+beautiful+stone+changes+colour+when+wet.&entry.935962220=112777&entry.474385230=1000626184"></iframe>
|
|
106
|
-
{{/content}}
|
|
107
|
-
{{/extend}}
|
|
108
|
-
{{> click-and-collect-modal}}
|
|
109
|
-
{{/content}}
|
|
110
|
-
{{/extend}}
|
|
111
|
-
<!--<script defer src="./js/components/badge-cashback.js"></script>-->
|
|
112
|
-
<script>
|
|
113
|
-
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
|
|
114
|
-
$(document).ready(function () {
|
|
115
|
-
$('.modal').on('scroll', function () {
|
|
116
|
-
$(':focus').blur();
|
|
117
|
-
});
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
$(document).ready(function () {
|
|
122
|
-
|
|
123
|
-
$('#info-details').toggleClass('accordion_collapsed');
|
|
124
|
-
$('#details-content').css('display', 'block');
|
|
125
|
-
|
|
126
|
-
$('#open-review').on('click', function () {
|
|
127
|
-
$('#info-review').toggleClass('accordion_collapsed');
|
|
128
|
-
$('#review-content').css('display', 'block');
|
|
129
|
-
})
|
|
130
|
-
})
|
|
131
|
-
</script>
|