wickes-css2 2.107.0-ripple.2 → 2.107.0-ripple.21

package/src/components/modals/notify-me-modal.hbs

@@ -0,0 +1,76 @@
+{{#extend "modal"
+          id="modal-notify-me"
+          fullWidth=false
+          wide=true
+          backdrop=true
+          title=""
+          showCloseBtn=true
+          classMod=mod
+}}
+  {{#content "header"}}
+    <div class="notify-me__header">
+      <h3 class="modal-title modal-box__title"
+          data-notify-header="form">
+        <span class="icon-wrap">
+          <i class="fas fa-bell icon"></i>
+        </span>
+        Notify me when this product is back in stock
+      </h3>
+
+      <h3 class="modal-title modal-box__title d-none"
+          data-notify-header="success">
+        <i class="fas fa-check-circle text-success icon"></i>
+        You will receive an email when the product is back in stock
+      </h3>
+    </div>
+  {{/content}}
+
+  {{#content "sections"}}
+    {{#extend "modal-body-section"}}
+      {{#content "body"}}
+        <div class="notify-me" data-notify-root>
+          <div class="notify-me__state notify-me__state--form" data-notify-state="form">
+            <form class="notify-me-form" novalidate>
+              {{> form-row type="email" id="notify-me-email" name="email" label="Email address" value="test@test.com" required="true"}}
+
+              <p class="notify-me-form__note">
+                By providing your email address, you agree to receive email notifications until your product is back in
+                stock.
+                Your email will not be stored for any other purpose.
+              </p>
+
+              <div class="notify-me-form__ctas">
+                {{> base/button
+                text="Notify me"
+                modification="btn-primary btn--notify-submit"
+                type="submit"
+                }}
+                <button class="btn btn-outline-primary btn--notify-cancel" type="button" data-dismiss="modal">
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+
+          <div class="notify-me__state notify-me__state--success d-none" data-notify-state="success">
+            <div class="notify-me__success">
+              <div class="notify-me-result">
+                <img
+                  src="./img/tile-buying-guide.jpg"
+                  alt="Wickes General Purpose Claw Hammer - 16oz"
+                  class="notify-me-result__img">
+                <p class="notify-me-result__title">
+                  Wickes General Purpose Claw Hammer - 16oz
+                </p>
+              </div>
+
+              <button class="btn btn-outline-primary btn--notify-close" type="button" data-dismiss="modal">
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      {{/content}}
+    {{/extend}}
+  {{/content}}
+{{/extend}}

package/src/components/order-item.hbs

@@ -37,11 +37,24 @@
                 </div>
             </div>
             {{#if offers}}
-                <div class="order-item__offers">
-                    {{#each offers}}
-                        <div class="order-item__promo">{{this}}</div>
-                    {{/each}}
-                </div>
+                {{#ifCond switch-vat '&&' offersExcVat}}
+                    <div class="order-item__offers including-vat">
+                        {{#each offers}}
+                            <div class="order-item__promo">{{this}}</div>
+                        {{/each}}
+                    </div>
+                    <div class="order-item__offers excluding-vat d-none">
+                        {{#each offersExcVat}}
+                            <div class="order-item__promo">{{this}}</div>
+                        {{/each}}
+                    </div>
+                {{else}}
+                    <div class="order-item__offers">
+                        {{#each offers}}
+                            <div class="order-item__promo">{{this}}</div>
+                        {{/each}}
+                    </div>
+                {{/ifCond}}
             {{/if}}
         </div>
         <div class="order-item__cost">

package/src/components/order-summary.hbs

@@ -3,7 +3,7 @@
   {{> summary-mobile-bar}}
   <div class="collapse summary__aside container" id="checkout-summary-mobile-accordion-{{id}}" data-sticky-element>
 
-    {{> checkout_order-summary-new head=title mod=mod id=(concat id "-mobile") mobile="true"}}
+    {{> checkout_order-summary-new head=title mod=mod id=(concat id "-mobile") mobile="true" hideDeliveryCostMessage=hideDeliveryCostMessage}}
     {{#unless (or basket checkout)}}
       <div class="summary__payment footer-checkout">
         {{#unless merged}}
@@ -47,7 +47,7 @@
     </div>
   {{/if}}
   <div class="summary__aside">
-    {{> checkout_order-summary-new head=title mod=mod id=id}}
+    {{> checkout_order-summary-new head=title mod=mod id=id switch-vat=switch-vat hideDeliveryCostMessage=hideDeliveryCostMessage}}
 
     {{#if klarna-placement}}
       <div class="summary__klarna">

package/src/components/package-card.hbs

@@ -0,0 +1,30 @@
+{{#each cards}}
+    <div class="package-card">
+        <a href="#">
+            <img class="package-card__image" src="{{image.url}}" alt="{{image.altText}}">
+        </a>
+
+        <div class="package-card__content">
+            <h4 class="package-card__title">{{title}}</h4>
+            <ul class="package-card__usp">
+                {{#each usp}}
+                    <li class="package-card__usp-item">
+                        <span class="package-card__icon icon">
+                            <span class="fas fa-check"></span>
+                        </span>
+                        <span>{{this}}</span>
+                    </li>
+                {{/each}}
+            </ul>
+            <div class="package-card__price">
+                {{> kitchen/price price=priceData small=true switch-vat=../switch-vat}}
+            </div>
+            <div class="package-card__stickers">
+                {{#if strip_stickers}}
+                    {{> kitchen/strip-stickers strip-stickers=strip_stickers}}
+                {{/if}}
+            </div>
+            <a href="#" class="package-card__button btn btn-primary btn_full">View Suite</a>
+        </div>
+    </div>
+{{/each}}

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

@@ -84,3 +84,20 @@
   </button>
 </div>
 {{/if}}
+{{#if package}}
+  {{#if postcodeChecker}}
+    {{> postcode-checker modifyClass="postcode-checker--desktop-only"}}
+  {{else}}
+  <div class="pdp-price__bulk-add">
+    {{> button
+      text="Add to basket"
+      full=true
+      action=true
+      type="button"
+      showLoader=true
+      modification="package-bulk-add d-none d-md-block"
+      loaderModifier="postcode-checker__button-loader"
+    }}
+  </div>
+  {{/if}}
+{{/if}}

package/src/components/postcode-checker.hbs

@@ -0,0 +1,24 @@
+<div class="postcode-checker {{modifyClass}}">
+  <p class="postcode-checker__title">Enter your postcode to check delivery stock in your area & add to basket</p>
+  <div class="postcode-checker__field">
+    <input
+      class="tbx postcode-checker__input"
+      type="text"
+      placeholder=""
+      id="postcode-checker" 
+      name="postcode-checker"
+    />
+  </div>
+  <p class="postcode-checker__error">Please enter a valid postcode</p>
+  <div class="postcode-checker__action">
+      {{> button
+          text="Add to basket"
+          full=true
+          action=true
+          type="button"
+          showLoader=true
+          modification="postcode-checker__button"
+          loaderModifier="postcode-checker__button-loader"
+      }}
+  </div>
+</div>

package/src/components/potential-promotion.hbs

@@ -2,9 +2,18 @@
     <div class="p-promotion__icon">
         <i class="icon fas fa-gift"></i>
     </div>
-    <div class="p-promotion__description">
-        {{description}}
-    </div>
+    {{#ifCond switch-vat '&&' descriptionExcVat}}
+        <div class="p-promotion__description including-vat">
+            {{description}}
+        </div>
+        <div class="p-promotion__description excluding-vat d-none">
+            {{descriptionExcVat}}
+        </div>
+    {{else}}
+        <div class="p-promotion__description">
+            {{description}}
+        </div>
+    {{/ifCond}}
     <div class="p-promotion__close">
         <i class="icon fas fa-times"></i>
     </div>

package/src/components/price-badges.hbs

@@ -0,0 +1,14 @@
+<div class="pdp__badges-wrapper">
+    {{#each badges}}
+        <div class="pdp__badges {{#if ../isStaticBadges}}pdp__badges--static{{/if}} pdp-price-container__badges price__badges-v2 price__badges-v2-{{bgcolor}}
+            {{#if text-color}}price__badges-v2-text-{{text-color}}{{/if}}
+            {{#if badge-wide}}price__badges-v2-wide{{/if}}">
+            {{#ifCond ../switch-vat '&&' text-exc}}
+                <div class="pdp__badge including-vat">{{text}}</div>
+                <div class="pdp__badge excluding-vat d-none">{{text-exc}}</div>
+            {{else}}
+                <div class="pdp__badge">{{text}}</div>
+            {{/ifCond}}
+        </div>
+    {{/each}}
+</div>

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

@@ -1,30 +1,31 @@
 <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">
+        {{#if isDiscount}}
+            {{> price-badges}}
+        {{/if}}
         <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>
+                        {{#ifCond price-vat '&&' was_price-vat}}
+                            <div class="pdp-price__old-price"><s>&pound;{{was_price-vat}}</s></div>
+                            <div class="main-price">
+                            <div class="main-price__value pdp-price__new-price">&pound;{{price-vat}}</div>
                             <div class="main-price__vat">Inc.VAT</div>
                         </div>
+                        {{else}}
+                            <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>
+                        {{/ifCond}}
                         {{#if isSQM}}
                             <div class="pdp-price__sqm">&pound;40 per SQM</div>
                         {{/if}}
-                        <div class="pdp-price__remainder">You save &pound;40</div>
+                        {{#unless package}}
+                            <div class="pdp-price__remainder">You save &pound;40</div>
+                        {{/unless}}
                         {{#if isExcludingDelivery}}
                           <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
                         {{/if}}
@@ -48,20 +49,37 @@
                         {{/if}}
 
                     {{else}}
-                        <div class="pdp-price__price">&pound;79.99</div>
+                        {{#if price}}
+                            <div class="pdp-price__price">&pound;{{price}}</div>
+                        {{else}}
+                            <div class="pdp-price__price">&pound;79.99</div>
+                        {{/if}}
+                        {{#ifCond isExcludingDelivery '&&' package}}
+                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
+                        {{/ifCond}}
                     {{/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>
+                        {{#ifCond price '&&' was_price}}
+                            <div class="pdp-price__old-price"><s>&pound;{{was_price}}</s></div>
+                            <div class="main-price">
+                            <div class="main-price__value pdp-price__new-price">&pound;{{price}}</div>
                             <div class="main-price__vat">Exc.VAT</div>
                         </div>
+                        {{else}}
+                            <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>
+                        {{/ifCond}}
                         {{#if isSQM}}
                             <div class="pdp-price__sqm">&pound;39 per SQM</div>
                         {{/if}}
-                        <div class="pdp-price__remainder">You save &pound;39</div>
+                        {{#unless package}}
+                            <div class="pdp-price__remainder">You save &pound;39</div>
+                        {{/unless}}
                         {{#if isExcludingDelivery}}
                           <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
                         {{/if}}
@@ -85,21 +103,39 @@
                         {{/if}}
 
                     {{else}}
-                        <div class="pdp-price__price">&pound;79.99</div>
+                        {{#if price}}
+                            <div class="pdp-price__price">&pound;{{price}}</div>
+                        {{else}}
+                            <div class="pdp-price__price">&pound;79.99</div>
+                        {{/if}}
+                        {{#ifCond isExcludingDelivery '&&' package}}
+                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
+                        {{/ifCond}}
                     {{/if}}
                 </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>
+                        {{#ifCond price '&&' was_price}}
+                            <div class="pdp-price__old-price"><s>&pound;{{was_price}}</s></div>
+                            <div class="pdp-price__new-price">&pound;{{price}}</div>
+                        {{else}}
+                            <div class="pdp-price__old-price"><s>&pound;119.99</s></div>
+                            <div class="pdp-price__new-price">&pound;79.99</div>
+                        {{/ifCond}}
+
                         {{#if isSQM}}
                             <div class="pdp-price__sqm">&pound;40 per SQM</div>
                         {{/if}}
-                        <div class="pdp-price__remainder">You save &pound;40</div>
+
+                        {{#unless package}}
+                            <div class="pdp-price__remainder">You save &pound;40</div>
+                        {{/unless}}
+
                         {{#if isExcludingDelivery}}
                           <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
                         {{/if}}
+
                         {{#if isDescription}}
                             {{#if isCashback}}
                                 <div class="pdp-price__description">
@@ -121,10 +157,32 @@
                             {{/if}}
                         {{/if}}
                     {{else}}
-                        <div class="pdp-price__price">&pound;79.99</div>
+                        {{#if price}}
+                            <div class="pdp-price__price">&pound;{{price}}</div>
+                        {{else}}
+                            <div class="pdp-price__price">&pound;79.99</div>
+                        {{/if}}
+                        {{#ifCond isExcludingDelivery '&&' package}}
+                          <a href="#" class="pdp-price__excluding-delivery">Excluding delivery</a>
+                        {{/ifCond}}
                     {{/if}}
                 </div>
             {{/if}}
+
+            {{#ifCond package '&&' currentlyInStock}}
+                <div class="pdp-price__message-wrapper">
+                    <div>
+                        <span class="pdp-price__delivery-message">Delivery:</span>
+                        <span>Delivery options shown at checkout. Items may be delivered separately. Minimum £4 delivery charge applies.</span>
+                    </div>
+
+                    <div>
+                        <span class="pdp-price__delivery-message">Click & Collect:</span>
+                        <span>Availability shown at checkout.</span>
+                    </div>
+                </div>
+            {{/ifCond}}
+
             {{#if klarna-placement}}
               <div class="pdp-price__klarna-payment">
                 <klarna-placement
@@ -145,12 +203,14 @@
             {{/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>
+            {{#unless package}}
+                <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>
-            </div>
+            {{/unless}}
         {{else if notifyMe}}
             <div class="pdp-price__oos">
                 <a href="#" class="btn btn-action btn_full">

package/src/components/product-main-info-v2.hbs

@@ -49,6 +49,7 @@
             <script id="isitetv_media_loader" src="./js/components/pdp-video.js"></script>
         </div>
     {{/if}}
+    {{#unless hideShareButton}}
     <div class="product-main-info__share">
         <a href="#">
             <button class="btn btn-primary share-button">
@@ -57,6 +58,7 @@
             <span>Share product</span>
         </a>
     </div>
+    {{/unless}}
     {{#unless manualShareTooltip}}
       <div class="a2a_kit a2a_kit_size_32 a2a_default_style product-main-info__share-buttons share-buttons">
         <ul class="share-buttons__list">

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/components/suite-includes.hbs

@@ -15,21 +15,52 @@
             <div>
                 <h6 class="suite-includes__total">Total:</h6>
                 <div class="suite-includes__price-container">
-                    <div class="suite-includes__old-price">
-                        <s>&pound;{{was_price}}</s>
-                    </div>
-                    <div class="suite-includes__new-price">
-                        &pound;{{price}}
-                        {{#if switch-vat}}
-                        <span class="suite-includes__inc-vat including-vat">Inc.VAT</span>
+                    {{#if switch-vat}}
+                        {{#ifCond was_price '&&' was_price-vat}}
+                            <div class="suite-includes__old-price including-vat">
+                                <s>&pound;{{was_price-vat}}</s>
+                            </div>
+                            <div class="suite-includes__old-price excluding-vat d-none">
+                                <s>&pound;{{was_price}}</s>
+                            </div>
+                        {{/ifCond}}
+                        <div class="suite-includes__price{{#if was_price}} suite-includes__price--offer{{/if}}">
+                            <div class="suite-includes__vat including-vat">
+                                <span>&pound;{{price-vat}}</span>
+                                <span class="suite-includes__vat-text">Inc.VAT</span>
+                            </div>
+                            <div class="suite-includes__vat excluding-vat d-none">
+                                <span>&pound;{{price}}</span>
+                                <span class="suite-includes__vat-text">Exc.VAT</span>
+                            </div>
+                        </div>
+                    {{else}}
+                        {{#if was_price}}
+                            <div class="suite-includes__old-price">
+                                <s>&pound;{{was_price}}</s>
+                            </div>
                         {{/if}}
-                    </div>
-                    <a href="#">Excluding delivery</a>
+                        <div class="suite-includes__price {{#if was_price}} suite-includes__price--offer{{/if}}">
+                            &pound;{{price}}
+                        </div>
+                    {{/if}}
+                    <a class="suite-includes__delivery" href="#">Excluding delivery</a>
                 </div>
             </div>
-            <button class="suite-includes__button btn btn-action btn_full">
-                Add to Basket
-            </button>
+            <div class="suite-includes__button">
+                {{#if postcodeChecker}}
+                    {{> postcode-checker modifyClass="postcode-checker--mobile-only"}}
+                {{else}}
+                    {{> button
+                        text="Add to basket"
+                        full=true
+                        action=true
+                        type="button"
+                        showLoader=true
+                        modification="package-bulk-add"
+                    }}
+                {{/if}}
+            </div>
         </div>
     </div>
 </div>

package/src/components/suite-product-card.hbs

@@ -3,23 +3,45 @@
         <img src="{{image.url}}" alt="{{image.altText}}">
         <div class="suite-product-card__info">
             <a class="suite-product-card__title" href="#" title="{{title}}">{{title}}</a>
-            {{#if promotion}}
-                <span class="suite-product-card__promotion">{{promotion}}</span>
-            {{/if}}
-            <div class="suite-product-card__price-qty">
-                {{#if ../switch-vat}}
-                <div>
-                    <span class="suite-product-card__price">&pound;{{price}}</span>
-                    <span class="suite-product-card__inc-vat including-vat">Inc. VAT</span>
+            {{#if ../switch-vat}}
+                {{#ifCond was_price '&&' was_price-vat}}
+                    <div class="suite-product-card__old-price including-vat">
+                        <s>{{was_price-vat}}</s>
+                    </div>
+                    <div class="suite-product-card__old-price excluding-vat d-none">
+                        <s>{{was_price}}</s>
+                    </div>
+                {{/ifCond}}
+
+                <div class="suite-product-card__price-qty">
+                    <div class="suite-product-card__vat including-vat">
+                        <span class="suite-product-card__price{{#if was_price}} suite-product-card__price--red{{/if}}">&pound;{{price-vat}}</span>
+                        <span class="suite-product-card__vat-text">Inc. VAT</span>
+                    </div>
+
+                    <div class="suite-product-card__vat excluding-vat d-none">
+                        <span class="suite-product-card__price{{#if was_price}} suite-product-card__price--red{{/if}}">&pound;{{price}}</span>
+                        <span class="suite-product-card__vat-text">Exc. VAT</span>
+                    </div>
+
+                    <span class="suite-product-card__quantity">
+                        Qty: <span>{{quantity}}</span>
+                    </span>
                 </div>
-                {{else}}
-                <span class="suite-product-card__price">&pound;{{price}}</span>
-                {{/if}}
 
-                <span class="suite-product-card__quantity">
-                    Qty: <span>{{quantity}}</span>
-                </span>
-            </div>
+            {{else}}
+                {{#if was_price}}
+                    <div class="suite-product-card__old-price">
+                        <s>{{was_price}}</s>
+                    </div>
+                {{/if}}
+                <div class="suite-product-card__price-qty">
+                    <span class="suite-product-card__price{{#if was_price}} suite-product-card__price--red{{/if}}">&pound;{{price}}</span>
+                    <span class="suite-product-card__quantity">
+                        Qty: <span>{{quantity}}</span>
+                    </span>
+                </div>
+            {{/if}}
         </div>
     </div>
 {{/each}}

package/src/components/thumb-gallery.hbs

@@ -0,0 +1,23 @@
+<div 
+  class="thumb-gallery"
+  data-length="{{images.length}}"
+>
+  <div class="swiper-container swiper-container-main">
+    <div class="swiper-wrapper"></div>
+    <div class="thumb-gallery__next-btn">
+      <i class="far fa-angle-right"></i>
+    </div>
+    <div class="thumb-gallery__prev-btn">
+      <i class="far fa-angle-left"></i>
+    </div>
+  </div>
+  <div class="component-container swiper-container swiper-container-thumbs">
+    <div class="swiper-wrapper "></div>
+    <div class="swiper-container-thumbs__next-btn">
+      <i class="far fa-angle-right"></i>
+    </div>
+    <div class="swiper-container-thumbs__prev-btn">
+      <i class="far fa-angle-left"></i>
+    </div>
+  </div>
+</div>