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.
Files changed (40) hide show
  1. package/Readme.md +1 -2
  2. package/build/css/kitchen-plp-main.css +1 -1
  3. package/build/css/pdp-main-before-combine.css +1 -1
  4. package/build/css/pdp-main-non-critical.css +1 -1
  5. package/build/css/pdp-main.css +1 -1
  6. package/build/js/bloomreach-widget.min.js +1 -1
  7. package/build/js/emulation.min.js +8 -334
  8. package/build/js/page/{bloomreach-widget/complete-your-project-widget.js → bloomreach-widget.js} +359 -205
  9. package/package.json +1 -1
  10. package/src/components/.DS_Store +0 -0
  11. package/src/components/bloomreach/complete-card.hbs +32 -4
  12. package/src/components/pdp-price-actions.hbs +2 -2
  13. package/src/components/price-block-v2.hbs +0 -2
  14. package/src/data/data_kitchen-plp.json +7 -16
  15. package/src/js/emulation/bloomreach-widget-loading.js +2 -2
  16. package/src/js/emulation/mock.js +0 -309
  17. package/src/js/page/.DS_Store +0 -0
  18. package/src/js/page/{bloomreach-widget/complete-your-project-widget.js → bloomreach-widget.js} +359 -205
  19. package/src/page_product-details-bloomreach.html +1 -1
  20. package/src/page_product-details-with-global-search-v2.html +1 -2
  21. package/src/scss/components/bloomreach/_bloomreach.scss +0 -3
  22. package/src/scss/components/bloomreach/_complete-card.scss +38 -0
  23. package/src/scss/components/kitchen/_colour-swatches.scss +9 -3
  24. package/src/sitemap.html +4 -10
  25. package/build/js/page/bloomreach-widget/bloomreach-widget.js +0 -241
  26. package/build/js/page/bloomreach-widget/why-not-add-widget.js +0 -196
  27. package/src/components/bloomreach/why-not-add-card-skeleton.hbs +0 -14
  28. package/src/components/bloomreach/why-not-add-card.hbs +0 -73
  29. package/src/components/bloomreach/why-not-add-content.hbs +0 -41
  30. package/src/components/bloomreach/why-not-add-skeleton.hbs +0 -9
  31. package/src/components/bloomreach/why-not-add.hbs +0 -6
  32. package/src/components/reviews-rating.hbs +0 -22
  33. package/src/js/emulation/why-not-add-loading.js +0 -11
  34. package/src/js/emulation/why-not-add.js +0 -28
  35. package/src/js/page/bloomreach-widget/bloomreach-widget.js +0 -241
  36. package/src/js/page/bloomreach-widget/why-not-add-widget.js +0 -196
  37. package/src/page_product-details-with-why-not-add-single.html +0 -131
  38. package/src/scss/components/bloomreach/_reviews.scss +0 -60
  39. package/src/scss/components/bloomreach/_why-not-add-card.scss +0 -212
  40. 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,6 +0,0 @@
1
- <div
2
- data-why-not-add-widget
3
- data-mock-key="{{context}}"
4
- >
5
- {{> bloomreach/why-not-add-skeleton}}
6
- </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&amp;entry.1885983523=Decorative+Uk+sourced+blue+slate+chippings+are+ideal+for+gardens+and+borders.+This+beautiful+stone+changes+colour+when+wet.&amp;entry.935962220=112777&amp;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>