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

package/src/js/page/bloomreach-widget/dont-forget-widget.js

@@ -0,0 +1,33 @@
+import { createBloomreachRecommendationCarouselWidget } from './bloomreach-recommendation-carousel-widget';
+
+const Handlebars = require('hbsfy/runtime');
+
+Handlebars.registerPartial('loader', require('../../../elements/loader.hbs'));
+Handlebars.registerPartial('button', require('../../../components/base/button.hbs'));
+Handlebars.registerPartial(
+    'bloomreach/why-not-add-card',
+    require('../../../components/bloomreach/why-not-add-card.hbs')
+);
+Handlebars.registerPartial(
+    'bloomreach/why-not-add-card-skeleton',
+    require('../../../components/bloomreach/why-not-add-card-skeleton.hbs')
+);
+Handlebars.registerPartial('reviews-rating', require('../../../components/reviews-rating.hbs'));
+
+const template = require('../../../components/bloomreach/why-not-add-content.hbs');
+const skeletonTemplate = require('../../../components/bloomreach/why-not-add-skeleton.hbs');
+
+const DontForgetWidget = createBloomreachRecommendationCarouselWidget({
+    namespace: 'dontForget',
+    title: 'Don’t forget',
+    modifier: 'why-not-add--dont-forget',
+    widgetContainer: '[data-dont-forget-widget]',
+    template,
+    skeletonTemplate,
+    disableAfterSuccess: true,
+    disableAfterFailure: true,
+    successIcon: 'fas fa-check',
+    addToCartError: 'Product has not been added to basket',
+});
+
+export default DontForgetWidget;

package/src/js/page/bloomreach-widget/why-not-add-widget.js

@@ -0,0 +1,30 @@
+import { createBloomreachRecommendationCarouselWidget } from './bloomreach-recommendation-carousel-widget';
+
+const Handlebars = require('hbsfy/runtime');
+
+Handlebars.registerPartial('loader', require('../../../elements/loader.hbs'));
+Handlebars.registerPartial('button', require('../../../components/base/button.hbs'));
+Handlebars.registerPartial(
+    'bloomreach/why-not-add-card',
+    require('../../../components/bloomreach/why-not-add-card.hbs')
+);
+Handlebars.registerPartial(
+    'bloomreach/why-not-add-card-skeleton',
+    require('../../../components/bloomreach/why-not-add-card-skeleton.hbs')
+);
+Handlebars.registerPartial('reviews-rating', require('../../../components/reviews-rating.hbs'));
+
+const template = require('../../../components/bloomreach/why-not-add-content.hbs');
+const skeletonTemplate = require('../../../components/bloomreach/why-not-add-skeleton.hbs');
+
+const WhyNotAddWidget = createBloomreachRecommendationCarouselWidget({
+    namespace: 'whyNotAdd',
+    title: 'Why not add',
+    widgetContainer: '[data-why-not-add-widget]',
+    template,
+    skeletonTemplate,
+    disableAfterSuccess: false,
+    disableAfterFailure: false,
+});
+
+export default WhyNotAddWidget;

package/src/page_product-details-bloomreach.html

@@ -70,7 +70,7 @@ switch-vat=true
       <div
           class="pdp__widget"
           data-complete-widget
-          data-context-key="completeYourProject2Recomendations"
+          data-mock-key="completeYourProject2Recomendations"
       >
         {{> bloomreach/complete-your-project title="Complete your project"}}
       </div>

package/src/page_product-details-with-global-search-v2.html

@@ -63,6 +63,7 @@ switch-vat=true
         sample=true
         cc=true
         delivery=true
+        mockDataKey="whyNotAddRecommendations"
         }}
       </div>
       <div class="pdp__description">
@@ -71,7 +72,7 @@ switch-vat=true
       <div
           class="pdp__widget"
           data-complete-widget
-          data-context-key="completeYourProject3Recomendations"
+          data-mock-key="completeYourProject3Recomendations"
       >
         {{> bloomreach/complete-your-project title="Complete your project"}}
       </div>

package/src/page_product-details-with-why-not-add-single.html

@@ -0,0 +1,131 @@
+{{#extend "base" pageClass="page-product-details" title="Product details page new"
+isDiscount=true
+isSQM=true
+isDescription=true
+isCashback=false
+isSize=true
+isGuide=true
+hourly-delivery=true
+badge-text='15% off'
+badge-color='yellow'
+badge-text-color='gray'
+currentlyInStock=true
+pagePdp=true
+globalSearchV2="true"
+switch-vat=true
+}}
+{{#content "head" mode="append" pagePdp=true}}
+<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+{{/content}}
+{{#content "body"}}
+<main class="pdp__main">
+  <div class="container">
+    <div class="pdp">
+      <div class="pdp__title">
+        <h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long
+          title in two raws
+        </h1>
+        <div class="pdp__reviews_small">
+          <span class="product-code product-code-v2">Product code: <strong id="product-code-val">236334</strong></span>
+          <div class="product-card__reviews review-star">
+            <div class="product-rating product-rating-v2">
+              <div class="rating-bg">
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <i class="fa fa-star" aria-hidden="true"></i>
+                <div class="rating-overlay"
+                     data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                  <i class="fa fa-star" aria-hidden="true"></i>
+                </div>
+              </div>
+            </div>
+            <span class="review-star-average review-star-average-v2">(4.6)</span>
+          </div>
+          <span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews" id="open-review">82 reviews</a></span>
+        </div>
+      </div>
+
+      <div class="pdp__gallery">
+        {{> gallery-pdp-v2 }}
+      </div>
+      <div class="pdp__aside">
+        {{> price-block-v2
+        isProductSaved=false
+        isUserLogedOut=true
+        install=true
+        sample=true
+        cc=true
+        delivery=true
+        mockDataKey="whyNotAddRecommendationsSingle"
+        }}
+      </div>
+      <div class="pdp__description">
+        {{> product-main-info-v2 isProductSaved=true}}
+      </div>
+      <div
+          class="pdp__widget"
+          data-complete-widget
+          data-mock-key="completeYourProject3Recomendations"
+      >
+        {{> bloomreach/complete-your-project title="Complete your project"}}
+      </div>
+      {{> fulfilment-accordions }}
+    </div>
+  </div>
+  <div class="container container-info">
+    <div class="pdp">
+      <div class="pdp__info">
+        {{> pdp-info-v2 }}
+      </div>
+    </div>
+  </div>
+  {{> recently-viewed }}
+
+  {{> similar-products-v2 }}
+
+  {{> seo-widgets title="More products" }}
+  {{> seo-widgets title="Related category" }}
+</main>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script type="text/html" id="mini-basket-popup">
+  {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
+</script>
+<script defer src="./js/page/pdp.js"></script>
+<script defer src="./js/global-search.min.js"></script>
+{{#extend "modal" id="modal-pdp-feedback" title="Feedback Form" fullWidth=true}}
+{{#content "body"}}
+<iframe class="cboxIframe" name="cbox1538824723052"
+        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>
+{{/content}}
+{{/extend}}
+{{> click-and-collect-modal}}
+{{/content}}
+{{/extend}}
+<!--<script defer src="./js/components/badge-cashback.js"></script>-->
+<script>
+  if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
+    $(document).ready(function () {
+      $('.modal').on('scroll', function () {
+        $(':focus').blur();
+      });
+    });
+  }
+
+  $(document).ready(function () {
+
+    $('#info-details').toggleClass('accordion_collapsed');
+    $('#details-content').css('display', 'block');
+
+    $('#open-review').on('click', function () {
+      $('#info-review').toggleClass('accordion_collapsed');
+      $('#review-content').css('display', 'block');
+    })
+  })
+</script>

package/src/scss/components/bloomreach/_bloomreach.scss

@@ -1,3 +1,6 @@
 @import 'complete-your-project';
 @import 'complete-card';
 @import 'complete-card-dropdown';
+@import 'why-not-add';
+@import 'why-not-add-card';
+@import 'reviews';

package/src/scss/components/bloomreach/_complete-card.scss

@@ -92,44 +92,6 @@
     }
   }
 
-  &__reviews {
-    display: flex;
-    align-items: center;
-    font-size: 0.75rem;
-    margin-bottom: 8px;
-
-    &-count {
-      display: inline-block;
-      margin-left: 6px;
-    }
-
-    .rating-bg {
-      color: $gray;
-      position: relative;
-
-      .fa-star {
-        margin-right: 0;
-      }
-    }
-
-    .rating-overlay {
-      color: $yellow;
-      position: absolute;
-      left: 0;
-      top: 0;
-      display: flex;
-    }
-
-    .star-overlay {
-      display: inline-block;
-      overflow: hidden;
-
-      & + .star-overlay {
-        margin-left: 3.3px;
-      }
-    }
-  }
-
   &__count-stepper {
     margin-top: 0;
     margin-bottom: 12px;

package/src/scss/components/bloomreach/_reviews.scss

@@ -0,0 +1,60 @@
+.reviews {
+  display: flex;
+  align-items: center;
+  font-size: 0.75rem;
+  margin-bottom: 8px;
+
+  &-count {
+    @include font-size(12);
+    @include line-height(16);
+    color: $warm-grey;
+    display: inline-block;
+    margin-left: 3px;
+  }
+
+  .rating-bg {
+    color: $gray;
+    position: relative;
+
+    .fa-star {
+      margin-right: 0;
+    }
+  }
+
+  .rating-overlay {
+    color: $yellow;
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+  }
+
+  .star-overlay {
+    display: inline-block;
+    overflow: hidden;
+
+    & + .star-overlay {
+      margin-left: 3.3px;
+    }
+  }
+
+}
+
+.why-not-add {
+
+  .reviews {
+    margin-bottom: 7px;
+
+    .rating-bg {
+      .fa-star {
+        @include font-size(8.4);
+      }
+    }
+
+    .star-overlay {
+      & + .star-overlay {
+        margin-left: 3px;
+      }
+    }
+  }
+}

package/src/scss/components/bloomreach/_why-not-add-card.scss

@@ -0,0 +1,270 @@
+.why-not-add-card {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid $gray-border;
+  border-radius: 4px;
+  background-color: $white;
+  position: relative;
+
+  &__image {
+    display: block;
+    width: 68px;
+    height: 68px;
+    object-fit: cover;
+  }
+
+  &__content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  &__title {
+    @include font-size(14);
+    @include line-height(22);
+
+    display: -webkit-box;
+    overflow: hidden;
+    color: $blue;
+    font-weight: 500;
+    text-decoration: none;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    &:hover {
+      color: $blue-darker;
+      text-decoration: underline;
+    }
+  }
+
+  &__bottom {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  &__price-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    min-width: 0;
+    padding-right: 8px;
+    gap: 4px;
+  }
+
+  &__price {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 5px;
+  }
+
+  &__was-price {
+    @include font-size(14);
+    @include line-height(15);
+
+    color: $warm-grey;
+    font-weight: 500;
+    text-decoration: line-through;
+    white-space: nowrap;
+  }
+
+  &__regular-price,
+  &__sale-price {
+    @include font-size(18);
+    @include line-height(18);
+
+    color: $blue-dark;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  &__sale-price {
+    color: $red;
+  }
+
+  &__vat-label,
+  &__delivery {
+    @include font-size(12);
+    @include line-height(15);
+
+    color: $squant;
+  }
+
+  &__vat-label {
+    color: $blue-dark;
+    font-weight: $headings-font-weight;
+  }
+
+  &__delivery {
+    width: 100%;
+  }
+
+  .btn {
+    display: flex;
+    align-self: flex-end;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    width: 40px;
+    height: 40px;
+    box-sizing: border-box;
+    border: 1px solid $green;
+    border-radius: 3px;
+    background-color: $green;
+    color: $white;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $white;
+      color: $green;
+    }
+
+    &--loading {
+      background-color: $green;
+      color: $white;
+      pointer-events: none;
+    }
+  }
+
+  &__cta-icon {
+    font-size: 18px;
+  }
+
+  &__loader {
+    .loader-path {
+      stroke: $white;
+    }
+  }
+
+  &--skeleton {
+    display: grid;
+    grid-template-columns: 68px minmax(0, 1fr) 40px;
+    grid-template-rows: 14px 14px 12px 18px 15px;
+    gap: 6px 8px;
+    align-items: start;
+
+    .why-not-add-card {
+      &__image {
+        grid-column: 1;
+        grid-row: 1 / 6;
+        width: 68px;
+        height: 68px;
+      }
+
+      &__skeleton {
+        &-title {
+          grid-column: 2 / 4;
+          grid-row: 1;
+          width: 80%;
+          height: 14px;
+        }
+
+        &-title-short {
+          grid-column: 2 / 3;
+          grid-row: 2;
+          width: 55%;
+          height: 14px;
+        }
+
+        &-reviews {
+          grid-column: 2 / 3;
+          grid-row: 3;
+          width: 82px;
+          height: 12px;
+        }
+
+        &-price {
+          grid-column: 2 / 3;
+          grid-row: 4;
+          width: 64px;
+          height: 18px;
+        }
+
+        &-delivery {
+          grid-column: 2 / 3;
+          grid-row: 5;
+          width: 92px;
+          height: 12px;
+        }
+
+        &-cta {
+          grid-column: 3;
+          grid-row: 4 / 6;
+          align-self: end;
+          width: 40px;
+          height: 40px;
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+
+  &__badge {
+    @include font-size(12);
+    @include line-height(16);
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: $label-z-index;
+    max-width: calc(100% - 52px);
+    padding: 4px 10px;
+    border-top-right-radius: 3px;
+    font-weight: 700;
+    text-align: center;
+    white-space: normal;
+  }
+
+  &__error {
+    @include font-size(12);
+    @include line-height(16);
+
+    width: 100%;
+    color: $red;
+  }
+
+  &--added {
+    .btn {
+      opacity: 1;
+      pointer-events: none;
+      cursor: default;
+
+      &:hover {
+        background-color: $green;
+        color: $white;
+      }
+    }
+  }
+
+  &--failed {
+    .btn {
+      opacity: 1;
+      pointer-events: none;
+      cursor: default;
+      background-color: $warm-grey;
+      border-color: $warm-grey;
+      color: $white;
+    }
+  }
+}
+
+.why-not-add--dont-forget {
+  .why-not-add-card {
+    &__badge + .why-not-add-card__image,
+    &__badge ~ .why-not-add-card__content {
+      margin-top: 16px;
+    }
+  }
+}
+
+@media screen and (max-width: 375px) {
+  .why-not-add-card {
+    &__vat-label {
+      width: 100%;
+    }
+  }
+}