wickes-css2 2.111.0-develop.5 → 2.111.0-dont-forget-widget.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.111.0-develop.5",
+  "version": "2.111.0-dont-forget-widget.2",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/bloomreach/complete-card.hbs

@@ -25,38 +25,10 @@
           {{name}}
         </a>
 
-        <div class="complete-card__reviews">
-          <div class="rating-bg">
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-            <i class="fa fa-star star-in" aria-hidden="true"></i>
-
-            <div class="rating-overlay"
-                 data-rating="{{#if externalAverageRating}}{{externalAverageRating}}{{else}}0{{/if}}">
-                                <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-              <span class="star-overlay">
-                                    <i class="fa fa-star" aria-hidden="true"></i>
-                                </span>
-            </div>
-
-            <span class="complete-card__reviews-count">
-                (<span class="complete-card__reviews-count-value">{{externalReviewCount}}</span>)
-            </span>
-          </div>
-        </div>
+        {{> reviews-rating
+            externalAverageRating=externalAverageRating
+            externalReviewCount=externalReviewCount
+        }}
       </div>
       <div class="complete-card__options">
         {{#if dropdownOptions.length}}

package/src/components/bloomreach/complete-your-project-skeleton.hbs

@@ -0,0 +1,21 @@
+<div class="complete-widget">
+  <h3 class="complete-widget__title text-center">
+    {{#if title}}{{title}}{{else}}Complete your project{{/if}}
+  </h3>
+
+  <div class="complete-widget__content" data-complete-widget-content>
+    <div class="complete-widget__wrapper">
+      {{> bloomreach/complete-card-skeleton}}
+
+      <div class="complete-widget__divider">
+        <i class="fal fa-plus"></i>
+      </div>
+
+      {{> bloomreach/complete-card-skeleton}}
+      {{> bloomreach/complete-card-skeleton}}
+      {{> bloomreach/complete-card-skeleton}}
+    </div>
+
+    {{> bloomreach/complete-summary-skeleton}}
+  </div>
+</div>

package/src/components/bloomreach/complete-your-project.hbs

@@ -1,21 +1,4 @@
-<div class="complete-widget">
-  <h3 class="complete-widget__title text-center">
-    {{#if title}}{{title}}{{else}}Complete your project{{/if}}
-  </h3>
-
-  <div class="complete-widget__content" data-complete-widget-content>
-    <div class="complete-widget__wrapper">
-      {{> bloomreach/complete-card-skeleton}}
-
-      <div class="complete-widget__divider">
-        <i class="fal fa-plus"></i>
-      </div>
-
-      {{> bloomreach/complete-card-skeleton}}
-      {{> bloomreach/complete-card-skeleton}}
-      {{> bloomreach/complete-card-skeleton}}
-    </div>
-
-    {{> bloomreach/complete-summary-skeleton}}
-  </div>
-</div>
+<div
+    data-complete-widget
+    data-mock-key="{{context}}"
+></div>

package/src/components/bloomreach/why-not-add-card-skeleton.hbs

@@ -0,0 +1,14 @@
+<div class="why-not-add-card why-not-add-card--skeleton ssc">
+  <div class="ssc-square why-not-add-card__image"></div>
+
+  <div class="ssc-line why-not-add-card__skeleton-title"></div>
+  <div class="ssc-line why-not-add-card__skeleton-title-short"></div>
+
+  <div class="ssc-line why-not-add-card__skeleton-reviews"></div>
+
+  <div class="ssc-line why-not-add-card__skeleton-price"></div>
+
+  <div class="ssc-line why-not-add-card__skeleton-delivery"></div>
+
+  <div class="ssc-square why-not-add-card__skeleton-cta"></div>
+</div>

package/src/components/bloomreach/why-not-add-card.hbs

@@ -0,0 +1,86 @@
+<div class="why-not-add-card" data-product-code="{{code}}">
+  {{#if badge.text}}
+    <div
+        class="why-not-add-card__badge"
+        style="background-color: {{badge.color}}; color: {{badge.textColor}};"
+    >
+      {{badge.text}}
+    </div>
+  {{/if}}
+  {{#if image.url}}
+    <img
+        class="why-not-add-card__image"
+        src="{{image.url}}"
+        alt="{{image.altText}}"
+    >
+  {{/if}}
+
+  <div class="why-not-add-card__content">
+    <a href="{{url}}" target="_blank" class="why-not-add-card__title">
+      {{name}}
+    </a>
+
+    {{> reviews-rating
+        externalAverageRating=externalAverageRating
+        externalReviewCount=externalReviewCount
+    }}
+
+    <div class="why-not-add-card__bottom">
+      <div class="why-not-add-card__price-wrap">
+        <div class="why-not-add-card__price {{#if wasPriceFormatted}}why-not-add-card__price--sale{{/if}}">
+          {{#if wasPriceFormatted}}
+            <span class="why-not-add-card__was-price">
+              {{#if switch-vat}}
+                <span class="including-vat-inherit">{{incVatWasPriceFormatted}}</span>
+                <span class="excluding-vat-inherit">{{excVatWasPriceFormatted}}</span>
+              {{else}}
+                {{wasPriceFormatted}}
+              {{/if}}
+            </span>
+
+            <span class="why-not-add-card__sale-price">
+              {{#if switch-vat}}
+                <span class="including-vat-inherit">{{incVatFormattedValue}}</span>
+                <span class="excluding-vat-inherit">{{excVatFormattedValue}}</span>
+              {{else}}
+                {{price.formattedValue}}
+              {{/if}}
+            </span>
+          {{else}}
+            <span class="why-not-add-card__regular-price">
+              {{#if switch-vat}}
+                <span class="including-vat-inherit">{{incVatFormattedValue}}</span>
+                <span class="excluding-vat-inherit">{{excVatFormattedValue}}</span>
+              {{else}}
+                {{price.formattedValue}}
+              {{/if}}
+            </span>
+          {{/if}}
+        </div>
+
+        {{#if switch-vat}}
+          <div class="why-not-add-card__vat-label">
+            <span class="including-vat-inherit">Inc.VAT</span>
+            <span class="excluding-vat-inherit">Exc.VAT</span>
+          </div>
+        {{/if}}
+
+        <div class="why-not-add-card__delivery">Excluding delivery</div>
+      </div>
+
+      {{> button
+          type="button"
+          action=true
+          icon="fas fa-shopping-basket"
+          showLoader=true
+          loaderModifier="why-not-add-card__loader"
+          modification="why-not-add-card__cta"
+      }}
+    </div>
+    {{#if addToCartError}}
+      <div class="why-not-add-card__error d-none">
+        {{addToCartError}}
+      </div>
+    {{/if}}
+  </div>
+</div>

package/src/components/bloomreach/why-not-add-content.hbs

@@ -0,0 +1,41 @@
+<div class="why-not-add {{modifier}} {{#if isSingleProduct}}why-not-add--single{{/if}}" data-why-not-add>
+  <div class="why-not-add__header">
+    <h3 class="why-not-add__title">{{title}}</h3>
+
+    {{#unless isSingleProduct}}
+      <div class="why-not-add__arrows">
+        <button
+            class="why-not-add__arrow why-not-add__arrow-prev"
+            type="button"
+            aria-label="Previous slide"
+            data-why-not-add-prev
+        >
+          <i class="fas fa-chevron-left"></i>
+        </button>
+
+        <button
+            class="why-not-add__arrow why-not-add__arrow-next"
+            type="button"
+            aria-label="Next slide"
+            data-why-not-add-next
+        >
+          <i class="fas fa-chevron-right"></i>
+        </button>
+      </div>
+    {{/unless}}
+  </div>
+
+  <div class="swiper-container why-not-add__slider" data-why-not-add-slider>
+    <div class="swiper-wrapper">
+      {{#each products}}
+        <div class="swiper-slide why-not-add__slide">
+          {{> bloomreach/why-not-add-card this}}
+        </div>
+      {{/each}}
+    </div>
+  </div>
+
+  {{#unless isSingleProduct}}
+    <div class="why-not-add__pagination" data-why-not-add-pagination></div>
+  {{/unless}}
+</div>

package/src/components/bloomreach/why-not-add-skeleton.hbs

@@ -0,0 +1,9 @@
+<div class="why-not-add why-not-add--skeleton ssc">
+  <div class="why-not-add__header">
+    <div class="ssc-line why-not-add__skeleton-title"></div>
+  </div>
+
+  <div class="why-not-add__skeleton-cards">
+    {{> bloomreach/why-not-add-card-skeleton}}
+  </div>
+</div>

package/src/components/bloomreach/why-not-add.hbs

@@ -0,0 +1,4 @@
+<div
+    data-why-not-add-widget
+    {{#if context}}data-mock-key="{{context}}"{{/if}}
+></div>

package/src/components/pdp-price-actions.hbs

@@ -1,7 +1,7 @@
 {{#if c-and-c}}
 <div class="{{#if tile-measurement}}ti__total{{else}}pdp-price{{/if}}__control-holder">
-  <button class="btn btn-primary btn_full" data-toggle="modal" data-target="#modal-click-and-collect">
-    <span class="btn__text">FREE Click & Collect within 30 minutes</span>
+  <button class="btn btn-action btn_full" data-toggle="modal" data-target="#modal-click-and-collect">
+    <span class="btn__text">Click & Collect</span>
   </button>
 </div>
 {{/if}}

package/src/components/price-block-v2.hbs

@@ -196,6 +196,8 @@
         </div>
       {{/if}}
 
+      {{> bloomreach/why-not-add context=mockDataKey}}
+
       {{#if mfeProductCalculator}}
         <div class="pdp-price__quantity-calculator">MFE Calculator Placeholder</div>
       {{/if}}

package/src/components/reviews-rating.hbs

@@ -0,0 +1,22 @@
+<div class="reviews">
+  <div class="rating-bg">
+    <i class="fa fa-star star-in" aria-hidden="true"></i>
+    <i class="fa fa-star star-in" aria-hidden="true"></i>
+    <i class="fa fa-star star-in" aria-hidden="true"></i>
+    <i class="fa fa-star star-in" aria-hidden="true"></i>
+    <i class="fa fa-star star-in" aria-hidden="true"></i>
+
+    <div
+        class="rating-overlay"
+        data-rating="{{#if externalAverageRating}}{{externalAverageRating}}{{else}}0{{/if}}"
+    >
+      <span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
+      <span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
+      <span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
+      <span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
+      <span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
+    </div>
+
+    <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>
+  </div>
+</div>

package/src/js/components/general/cart-slider.js

@@ -23,6 +23,11 @@ createPopupSlider({
 
         showSlider();
 
+        if (Wick.DontForgetWidgetLoader && !Wick.MiniBasketSliderFE.isMiniBasketLoaded) {
+            Wick.DontForgetWidgetLoader.load();
+            Wick.MiniBasketSliderFE.isMiniBasketLoaded = true;
+        }
+
         if ($(el.sliderWrap).length) {
             $(el.sliderWrap).on(
                 'scroll',

package/src/js/emulation/bloomreach-widget-loading.js

@@ -3,9 +3,9 @@ var Wick = window.Wick || {};
 $(document).ready(function () {
     window.setTimeout(function () {
         const $container = $('[data-complete-widget]');
-        const contextKey = $container.data('context-key');
+        const contextKey = $container.data('mock-key');
         const payloadData = Wick.FEMock.dataBloomreach[contextKey];
 
-        Wick.BloomreachWidget.init(payloadData);
+        Wick.BloomreachWidget.init('completeYourProject', payloadData);
     }, 3000);
 });

package/src/js/emulation/complete-your-project-loading.js

@@ -0,0 +1,16 @@
+var Wick = window.Wick || {};
+
+$(document).ready(function () {
+    const $container = $('[data-complete-widget]');
+
+    if (!$container.length) {
+        return;
+    }
+
+    window.setTimeout(function () {
+        const mockDataKey = $container.data('mock-key');
+        const payloadData = Wick.FEMock.dataBloomreach[mockDataKey];
+
+        Wick.BloomreachWidget.init('completeYourProject', payloadData);
+    }, 3000);
+});

package/src/js/emulation/dont-forget-loading.js

@@ -0,0 +1,18 @@
+var Wick = window.Wick || {};
+
+Wick.DontForgetWidgetLoader = {
+    load() {
+        const $container = $('[data-dont-forget-widget]').last();
+
+        if (!$container.length) {
+            return;
+        }
+
+        const mockDataKey = $container.attr('data-mock-key');
+        const payloadData = Wick.FEMock.dataBloomreach[mockDataKey];
+
+        window.setTimeout(function () {
+            Wick.BloomreachWidget.init('dontForget', payloadData);
+        }, 1000);
+    },
+};