wickes-css2 2.109.0-develop.1 → 2.109.0-develop.3

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

@@ -1,232 +1,229 @@
 <div class="pdp-price-container">
-    {{#if isDiscount}}
-        <div class="pdp__badges pdp-price-container__badges price__badges-v2 price__badges-v2-{{badge-color}}
-            {{#if badge-text-color}}price__badges-v2-text-{{badge-text-color}}{{/if}}
-            {{#if badge-wide}}price__badges-v2-wide{{/if}}">
-            {{#ifCond switch-vat '&&' badge-text-exc}}
-                <div class="pdp__badge including-vat">{{badge-text}}</div>
-                <div class="pdp__badge excluding-vat d-none">{{badge-text-exc}}</div>
-            {{else}}
-                <div class="pdp__badge">{{badge-text}}</div>
-            {{/ifCond}}
-        </div>
-    {{/if}}
-    <div class="pdp-price">
-        <div class="pdp-price__value">
-            {{#if switch-vat}}
-                <div class="pdp-price-sale__value including-vat">
-                    {{#if isDiscount}}
-                        <div class="pdp-price__old-price"><s>&pound;119.99</s></div>
-                        <div class="main-price">
-                            <div class="main-price__value pdp-price__new-price">&pound;79.99</div>
-                            <div class="main-price__vat">Inc.VAT</div>
-                        </div>
-                        {{#if isSQM}}
-                            <div class="pdp-price__sqm">&pound;40 per SQM</div>
-                        {{/if}}
-                        <div class="pdp-price__remainder">You save &pound;40</div>
-                        {{#if isExcludingDelivery}}
-                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
-                        {{/if}}
-                        {{#if isDescription}}
-                            {{#if isCashback}}
-                                <div class="pdp-price__description">
-                                    *Cashback offer valid until 31st May 2019.
-                                    Claim by 31st July 2019.
-                                    Terms & conditions apply.
-                                </div>
-                                <div class="pdp-price__terms">
-                                    <a href="#">
-                                        Cashback Terms and Conditions
-                                    </a>
-                                </div>
-                            {{else}}
-                                <div class="pdp-price__description">
-                                    Offer price equivalent to &pound;24 per item
-                                </div>
-                            {{/if}}
-                        {{/if}}
-
-                    {{else}}
-                        <div class="pdp-price__price">&pound;79.99</div>
-                    {{/if}}
+  {{#if isDiscount}}
+    <div class="pdp__badges pdp-price-container__badges price__badges-v2 price__badges-v2-{{badge-color}}
+      {{#if badge-text-color}}price__badges-v2-text-{{badge-text-color}}{{/if}}
+      {{#if badge-wide}}price__badges-v2-wide{{/if}}">
+      {{#ifCond switch-vat '&&' badge-text-exc}}
+        <div class="pdp__badge including-vat">{{badge-text}}</div>
+        <div class="pdp__badge excluding-vat d-none">{{badge-text-exc}}</div>
+      {{else}}
+        <div class="pdp__badge">{{badge-text}}</div>
+      {{/ifCond}}
+    </div>
+  {{/if}}
+  <div class="pdp-price">
+    <div class="pdp-price__value">
+      {{#if switch-vat}}
+        <div class="pdp-price-sale__value including-vat">
+          {{#if isDiscount}}
+            <div class="pdp-price__old-price"><s>&pound;119.99</s></div>
+            <div class="main-price">
+              <div class="main-price__value pdp-price__new-price">&pound;79.99</div>
+              <div class="main-price__vat">Inc.VAT</div>
+            </div>
+            {{#if isSQM}}
+              <div class="pdp-price__sqm">&pound;40 per SQM</div>
+            {{/if}}
+            <div class="pdp-price__remainder">You save &pound;40</div>
+            {{#if isExcludingDelivery}}
+              <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
+            {{/if}}
+            {{#if isDescription}}
+              {{#if isCashback}}
+                <div class="pdp-price__description">
+                  *Cashback offer valid until 31st May 2019.
+                  Claim by 31st July 2019.
+                  Terms & conditions apply.
                 </div>
-                <div class="pdp-price-sale__value excluding-vat d-none">
-                    {{#if isDiscount}}
-                        <div class="pdp-price__old-price"><s>&pound;118.99</s></div>
-                        <div class="main-price">
-                            <div class="main-price__value pdp-price__new-price">&pound;78.99</div>
-                            <div class="main-price__vat">Exc.VAT</div>
-                        </div>
-                        {{#if isSQM}}
-                            <div class="pdp-price__sqm">&pound;39 per SQM</div>
-                        {{/if}}
-                        <div class="pdp-price__remainder">You save &pound;39</div>
-                        {{#if isExcludingDelivery}}
-                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
-                        {{/if}}
-                        {{#if isDescription}}
-                            {{#if isCashback}}
-                                <div class="pdp-price__description">
-                                    *Cashback offer valid until 31st May 2019.
-                                    Claim by 31st July 2019.
-                                    Terms & conditions apply.
-                                </div>
-                                <div class="pdp-price__terms">
-                                    <a href="#">
-                                        Cashback Terms and Conditions
-                                    </a>
-                                </div>
-                            {{else}}
-                                <div class="pdp-price__description">
-                                    Offer price equivalent to &pound;23 per item
-                                </div>
-                            {{/if}}
-                        {{/if}}
-
-                    {{else}}
-                        <div class="pdp-price__price">&pound;79.99</div>
-                    {{/if}}
+                <div class="pdp-price__terms">
+                  <a href="#">
+                    Cashback Terms and Conditions
+                  </a>
                 </div>
-            {{else}}
-                <div class="pdp-price-sale__value">
-                    {{#if isDiscount}}
-                        <div class="pdp-price__old-price"><s>&pound;119.99</s></div>
-                        <div class="pdp-price__new-price">&pound;79.99</div>
-                        {{#if isSQM}}
-                            <div class="pdp-price__sqm">&pound;40 per SQM</div>
-                        {{/if}}
-                        <div class="pdp-price__remainder">You save &pound;40</div>
-                        {{#if isExcludingDelivery}}
-                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
-                        {{/if}}
-                        {{#if isDescription}}
-                            {{#if isCashback}}
-                                <div class="pdp-price__description">
-                                    *Cashback offer valid until 31st May 2019.
-                                    Claim by 31st July 2019.
-                                    Terms & conditions apply.
-                                </div>
-                                <div class="pdp-price__terms">
-                                    <a href="#">
-                                        Cashback Terms and Conditions
-                                    </a>
-                                </div>
-                            {{else}}
-                                <div class="pdp-price__description">
-                                    Long offer message Lorem ipsum dolor sit amet,
-                                    consectetur adipiscing elit.
-                                    Aenean euismod bibendum laoreet
-                                </div>
-                            {{/if}}
-                        {{/if}}
-                    {{else}}
-                        <div class="pdp-price__price">&pound;79.99</div>
-                    {{/if}}
+              {{else}}
+                <div class="pdp-price__description">
+                  Offer price equivalent to &pound;24 per item
                 </div>
+              {{/if}}
             {{/if}}
-            {{#if klarna-placement}}
-              <div class="pdp-price__klarna-payment">
-                <klarna-placement
-                    data-key="credit-promotion-badge"
-                    data-locale="en-GB"
-                    data-purchase-amount="12000"
-                    {{#if klarna-method-ids}}data-custom-payment-method-ids="{{klarna-method-ids}}"{{/if}}
-                ></klarna-placement>
-              </div>
-            {{/if}}
-            {{#if billie-placement}}
-            <div class="pdp-price__billie-payment">
-              {{> billie-online-messaging}}
+
+          {{else}}
+            <div class="pdp-price__price">&pound;79.99</div>
+          {{/if}}
+        </div>
+        <div class="pdp-price-sale__value excluding-vat d-none">
+          {{#if isDiscount}}
+            <div class="pdp-price__old-price"><s>&pound;118.99</s></div>
+            <div class="main-price">
+              <div class="main-price__value pdp-price__new-price">&pound;78.99</div>
+              <div class="main-price__vat">Exc.VAT</div>
             </div>
+            {{#if isSQM}}
+              <div class="pdp-price__sqm">&pound;39 per SQM</div>
             {{/if}}
-            {{#if clearpay-placement}}
-              {{> clearpay}}
+            <div class="pdp-price__remainder">You save &pound;39</div>
+            {{#if isExcludingDelivery}}
+              <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
             {{/if}}
-        </div>
-        {{#if currentlyInStock}}
-            <div class="pdp-price__value pdp-price__value_extended">
-                <div class="pdp-price__delivery">
-                    <span class="delivery-link">Delivery</span>
-                    <span class="delivery-info">Available to certain postcodes</span>
+            {{#if isDescription}}
+              {{#if isCashback}}
+                <div class="pdp-price__description">
+                  *Cashback offer valid until 31st May 2019.
+                  Claim by 31st July 2019.
+                  Terms & conditions apply.
                 </div>
-            </div>
-        {{else if notifyMe}}
-            <div class="pdp-price__oos">
-                <a href="#" class="btn btn-action btn_full">
-                    <span class="btn__text">Notify Me</span>
-                </a>
-                <p>Currently out of stock, use our Notify Me button to receive an email when this item is available</p>
-            </div>
-        {{else}}
-            <div class="pdp-price__oos">
-                <strong>Out of Stock</strong>
-                <p>Sorry, this product is out of stock</p>
-            </div>
-            <div class="pdp-price__in-store-only">
-                <p>In Store Only</p>
-            </div>
-        {{/if}}
-        <div class="pdp-price__controls">
-            {{#if isSize}}
-                <div class="pdp-price__size">
-                    {{> form-row row-mod="sort-order-by" dropdown="true" id="d1" placeholder="Please select a size"}}
+                <div class="pdp-price__terms">
+                  <a href="#">
+                    Cashback Terms and Conditions
+                  </a>
                 </div>
+              {{else}}
+                <div class="pdp-price__description">
+                  Offer price equivalent to &pound;23 per item
+                </div>
+              {{/if}}
             {{/if}}
-            <div class="
-                pdp-price__control-holder
-                {{#unless wisdom}}
-                    {{#if big-wins}}
-                        control-holder__big-wins
+
+                    {{else}}
+                        <div class="pdp-price__price">&pound;79.99</div>
                     {{/if}}
-                {{/unless}}
-            ">
-                <p>Minimum order quantity for delivery is 4</p>
-                {{#unless isQuantity}}
-                    <label for="quantity-field" class="quantity-label">Quantity: </label>
-                    <input type="text" inputmode="numeric" required="" pattern="[0-9]*\d" id="quantity-field"
-                           class="tbx tbx_quantity"
-                           value="1">
-                {{/unless}}
-                {{#unless default-store}}
-                    <div class="pdp-price__calculator-wrapper">
-                        <a href="#">
-                        <span class="icon">
-                        <i class="far fa-calculator"></i>
-                        </span>
-                            Calculator
-                        </a>
-                    </div>
-                {{/unless}}
-            </div>
-            {{#if mfeProductCalculator}}
-                <div class="pdp-price__quantity-calculator">MFE Calculator Placeholder</div>
+                </div>
+      {{else}}
+        <div class="pdp-price-sale__value">
+          {{#if isDiscount}}
+            <div class="pdp-price__old-price"><s>&pound;119.99</s></div>
+            <div class="pdp-price__new-price">&pound;79.99</div>
+            {{#if isSQM}}
+              <div class="pdp-price__sqm">&pound;40 per SQM</div>
             {{/if}}
-            {{#if currentlyInStock}}
-                {{> pdp-price-actions
-                        installation=install
-                        order-sample=sample
-                        c-and-c=cc
-                        delivery=delivery
-                        big-wins=big-wins
-                        wisdom=wisdom
-                        mcfc=mcfc
-                        available=available
-                        stock-accordion="stock-accordion"
-                        isUserNonRegistered=isUserNonRegistered
-                        nearest-purchase=nearest-purchase
-                        unhappy=unhappy
-                        nearestAmount=nearestAmount
-                        nearestName=nearestName
-                }}
-                <div class="pdp-price__call-to-actions">
-                    {{#unless default-store}}
-                        <div class="pdp-price__control-holder pdp-price__actions">
-                            <a href="#" class="link-secondary">Check stock in your local store</a>
-                        </div>
-                    {{/unless}}
+            <div class="pdp-price__remainder">You save &pound;40</div>
+            {{#if isExcludingDelivery}}
+              <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
+            {{/if}}
+            {{#if isDescription}}
+              {{#if isCashback}}
+                <div class="pdp-price__description">
+                  *Cashback offer valid until 31st May 2019.
+                  Claim by 31st July 2019.
+                  Terms & conditions apply.
+                </div>
+                <div class="pdp-price__terms">
+                  <a href="#">
+                    Cashback Terms and Conditions
+                  </a>
+                </div>
+              {{else}}
+                <div class="pdp-price__description">
+                  Long offer message Lorem ipsum dolor sit amet,
+                  consectetur adipiscing elit.
+                  Aenean euismod bibendum laoreet
                 </div>
+              {{/if}}
             {{/if}}
+          {{else}}
+            <div class="pdp-price__price">&pound;79.99</div>
+          {{/if}}
+        </div>
+      {{/if}}
+      {{#if currentlyInStock}}
+        <div class="pdp-price__value pdp-price__value_extended">
+          <div class="pdp-price__delivery">
+            <span class="delivery-link">Delivery</span>
+            <span class="delivery-info">Available to certain postcodes</span>
+          </div>
+        </div>
+      {{else if notifyMe}}
+        <div class="pdp-price__oos">
+          <a href="#" class="btn btn-primary btn_full btn--notify-open" data-target="#modal-notify-me">
+            <i class="fas fa-bell"></i>
+            <span class="btn__text">Notify Me</span>
+          </a>
+          <p>Currently out of stock, use our Notify Me button to receive an email when this product is available</p>
+        </div>
+      {{else}}
+        <div class="pdp-price__oos">
+          <strong>Out of Stock</strong>
+          <p>Sorry, this product is out of stock</p>
+        </div>
+        <div class="pdp-price__in-store-only">
+          <p>In Store Only</p>
+        </div>
+      {{/if}}
+      {{#if klarna-placement}}
+        <div class="pdp-price__klarna-payment">
+          <klarna-placement
+          data-key="credit-promotion-badge"
+          data-locale="en-GB"
+          data-purchase-amount="12000"
+          {{#if klarna-method-ids}}data-custom-payment-method-ids="{{klarna-method-ids}}"{{/if}}
+          ></klarna-placement>
+        </div>
+      {{/if}}
+      {{#if billie-placement}}
+        <div class="pdp-price__billie-payment">
+          {{> billie-online-messaging}}
+        </div>
+      {{/if}}
+      {{#if clearpay-placement}}
+        {{> clearpay}}
+      {{/if}}
+    </div>
+    <div class="pdp-price__controls">
+      {{#if isSize}}
+        <div class="pdp-price__size">
+          {{> form-row row-mod="sort-order-by" dropdown="true" id="d1" placeholder="Please select a size"}}
+        </div>
+      {{/if}}
+
+      {{#if (or (not isQuantity) (not default-store))}}
+        <div class="pdp-price__control-holder {{#unless wisdom}}{{#if big-wins}}control-holder__big-wins{{/if}}{{/unless}}">
+          {{#unless isQuantity}}
+            <label for="quantity-field" class="quantity-label">Quantity: </label>
+            <input type="text" inputmode="numeric" pattern="[0-9]*" id="quantity-field"
+                   class="tbx tbx_quantity"
+                   value="1">
+          {{/unless}}
+          {{#unless default-store}}
+            <div class="pdp-price__calculator-wrapper">
+              <a href="#">
+              <span class="icon">
+                <i class="far fa-calculator"></i>
+              </span>
+                Calculator
+              </a>
+            </div>
+          {{/unless}}
+        </div>
+      {{/if}}
+
+      {{#if mfeProductCalculator}}
+        <div class="pdp-price__quantity-calculator">MFE Calculator Placeholder</div>
+      {{/if}}
+      {{#if currentlyInStock}}
+        {{> pdp-price-actions
+        installation=install
+        order-sample=sample
+        c-and-c=cc
+        delivery=delivery
+        big-wins=big-wins
+        wisdom=wisdom
+        mcfc=mcfc
+        available=available
+        stock-accordion="stock-accordion"
+        isUserNonRegistered=isUserNonRegistered
+        nearest-purchase=nearest-purchase
+        unhappy=unhappy
+        nearestAmount=nearestAmount
+        nearestName=nearestName
+        }}
+        <div class="pdp-price__call-to-actions">
+          {{#unless default-store}}
+            <div class="pdp-price__control-holder pdp-price__actions">
+              <a href="#" class="link-secondary">Check stock in your local store</a>
+            </div>
+          {{/unless}}
         </div>
+      {{/if}}
     </div>
+  </div>
 </div>

package/src/components/sponsor-top-banner.hbs

@@ -0,0 +1,10 @@
+{{#if search-result_v2.sponsor-top-banner}}
+<div class="sponsor-top-banner sponsored-ad">
+  <a class="sponsor-top-banner__link" href="{{search-result_v2.sponsor-top-banner.href}}">
+    <picture class="sponsor-top-banner__picture">
+      <source class="sponsor-top-banner__image" srcset="{{#if search-result_v2.sponsor-top-banner.mobile-src}}{{search-result_v2.sponsor-top-banner.mobile-src}}{{else}}{{search-result_v2.sponsor-top-banner.src}}{{/if}}" media="(max-width: 768px)">
+      <img class="sponsor-top-banner__image" src="{{search-result_v2.sponsor-top-banner.src}}" alt="banner">
+    </picture>
+  </a>
+</div>
+{{/if}}

package/src/data/data_delivery-address-v2.json

@@ -19,7 +19,7 @@
         },
         {
           "title": "Delivery:",
-          "value": "applied at Checkout",
+          "value": "£4.00",
           "mod": "delivery"
         },
         {

package/src/data/data_search-results_v2.json

@@ -1,8 +1,14 @@
 {
   "search-result_v2": {
+    "sponsor-top-banner": {
+      "src": "https://placehold.co/1200x200?text=Top+Banner+Desktop",
+      "mobile-src": "https://placehold.co/600x200?text=Top+Banner+Mobile",
+      "href": "/sitemap.html"
+    },
     "product-banner": [
       {
-        "src": "https://placehold.co/912x1426?text=Decorating+Tools\n+\nShop+Now",
+        "src": "https://placehold.co/912x1426?text=Hybris+Banner+Desktop",
+        "mobile-src": "https://placehold.co/600x400?text=Hybris+Banner+Mobile",
         "href": "/sitemap.html",
         "desktop-position": 8,
         "mobile-position": 7,
@@ -64,7 +70,8 @@
     ],
     "sponsor-banner": [
       {
-        "src": "https://placehold.co/912x1426?text=Decorating+Tools\n+\nShop+Now",
+        "src": "https://placehold.co/912x1426?text=Sponsor+Banner+Desktop",
+        "mobile-src": "https://placehold.co/600x400?text=Sponsor+Banner+Mobile",
         "href": "/sitemap.html",
         "desktop-position": 6,
         "mobile-position": 8

package/src/data/data_spr_injected_content.json

@@ -7,6 +7,10 @@
           "name": "Essentials TEST",
           "keyword": "plaster",
           "bannerType": "image_url",
+          "src": "https://placehold.co/1200x200?text=Injected+Banner+Desktop",
+          "mobile-src": "https://placehold.co/600x200?text=Injected+Banner+Mobile",
+          "href": "/sitemap.html",
+          "alt": "Wickes Essentials",
           "htmlText": "<img src=\"https://media.wickes.co.uk/is/image/wickes/28120-Feb-Trade-Essentials-Homepage-Full-Width?&extend=0,0,0,0&fmt=png8\" usemap=\"#hotspot-map-186857\"><map name=\"hotspot-map-186857\"><area shape=\"rect\" coords=\"0,0,1400,400\" href=\"https://www.wickes.co.uk/trade/trade-offers\" alt=\"Wickes Essentials\"></map>",
           "dateEnd": "Fri Jan 12 20:06:43 UTC 1001968",
           "id": "186857"

package/src/js/emulation/checkout-delivery-details.js

@@ -1,35 +1,38 @@
 var Wick = Wick || {};
 Wick.DeliveryDetails = (function () {
-  var $page = $('.page_checkout-delivery-details');
+    var $page = $('.page_checkout-delivery-details');
 
-  function bindEvents () {
-    var dateAlert;
+    function bindEvents() {
+        var dateAlert;
 
-    $page.find('.btn-payment-details, .delivery-details__payment-details, .delivery-details__payment-details_mobile').on('click', function () {
+        $page
+            .find(
+                '.btn-payment-details, .delivery-details__payment-details, .delivery-details__payment-details_mobile'
+            )
+            .on('click', function () {
+                if (navigator.userAgent.match(/TradeProMobile_Android|DIYMobile_Android/i)) {
+                    document.body.scrollTop = 0;
+                    document.documentElement.scrollTop = 0;
+                }
 
-      if (navigator.userAgent.match(/TradeProMobile_Android|DIYMobile_Android/i)) {
-        document.body.scrollTop = 0;
-        document.documentElement.scrollTop = 0;
-      }
+                if (!Wick.DateSelection.isDateSelected()) {
+                    dateAlert = Wick.Notification.show({
+                        text: 'Sorry, please select a delivery date and/or time',
+                        container: '.checkout-heading',
+                        type: 'error',
+                    });
+                    return false;
+                }
+            });
 
-      if (!Wick.DateSelection.isDateSelected()){
-        dateAlert = Wick.Notification.show({
-          text: 'Sorry, please select a delivery date and/or time',
-          container: '.checkout-heading',
-          type: 'error'
+        $('.date-selection').on('selected', function () {
+            dateAlert && dateAlert.hide();
         });
-        return false;
-      }
-    });
+    }
 
-    $('.date-selection').on('selected', function(){
-      dateAlert && dateAlert.hide();
-    });
-  }
+    if (!$page.length) {
+        return;
+    }
 
-  if (!$page.length){
-    return;
-  }
-
-  bindEvents();
+    bindEvents();
 })();

package/src/js/emulation/custom-slider-emulation.js

@@ -3,7 +3,7 @@ function simulateHybrisSendingHtml() {
     const event = new CustomEvent('productAddedToCart', {
         detail: { html: htmlFromHybris },
     });
-    document.dispatchEvent(event);
+    window.dispatchEvent(event);
 }
 
 function bindResolveEvent(events) {