wickes-css2 2.106.0-develop.1 → 2.106.0-develop.10

package/src/js/page/utils/show-hide-input.js

@@ -0,0 +1,31 @@
+export function initializeInputToggle($container) {
+    const $input = $container.find('input');
+    const $toggle = $container.find('.toggle-show');
+
+    if (!$input.length || !$toggle.length) return;
+
+    const handleToggleClick = (e) => {
+        e.preventDefault();
+
+        const isPassword = String($input.attr('type')) === 'password';
+        $input.attr('type', isPassword ? 'text' : 'password');
+        const $icon = $toggle.find('svg, i').first();
+
+        if ($icon.length) {
+            $icon
+                .removeClass('fa-eye fa-eye-slash')
+                .addClass(isPassword ? 'fa-eye' : 'fa-eye-slash');
+        }
+    };
+
+    const updateToggleVisibility = () => {
+        $toggle.toggle(($input.val() || '').length > 0);
+    };
+
+    $toggle
+        .off('click.passwordToggle mousedown.passwordToggle')
+        .on('mousedown.passwordToggle', handleToggleClick);
+
+    $input.off('input.passwordToggle').on('input.passwordToggle', updateToggleVisibility);
+    updateToggleVisibility();
+}

package/src/js/page/utils/validation.js

@@ -1,97 +1,91 @@
 const validationEl = {
-    idsOfInputsWithNoNeedToUpdateDuringTyping: ['address-lookup-query', 'modal-address-lookup-query']
-}
+    idsOfInputsWithNoNeedToUpdateDuringTyping: [
+        'address-lookup-query',
+        'modal-address-lookup-query',
+    ],
+};
 
 const formElements = {
     formInvalid: 'form_invalid',
     fieldRow: '.form-row[data-row-required]',
     rowValidationError: 'form-row_validation-error',
-}
+};
 
 const patterns = {
     guidPattern: /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/i,
     userFriendlyIdPattern: /^[A-Za-z]{2,3}\d{6}$/,
-}
+};
 
 export function addFieldValidation(fieldSelector, validationFunction) {
-    $(fieldSelector).each(function(index, element) {
-        $(element).blur(function() {
+    $(fieldSelector).each(function (index, element) {
+        $(element).blur(function () {
             updateInputValueBeforeValidation(this);
-             validationFunction(this);
-             if (!validationEl.idsOfInputsWithNoNeedToUpdateDuringTyping.includes(element.id)) {
-                $(this).keyup(function() {
+            validationFunction(this);
+            if (!validationEl.idsOfInputsWithNoNeedToUpdateDuringTyping.includes(element.id)) {
+                $(this).keyup(function () {
                     updateInputValueBeforeValidation(this);
                     validationFunction(this);
                 });
-             }
+            }
         });
     });
 }
 
-export function updateInputValueBeforeValidation (element) {
+export function updateInputValueBeforeValidation(element) {
     $(element).val($.trim($(element).val()));
 }
 
 export function validateEmail(element) {
-    updateStylingError(element.id,
-        isValidEmail(element.value),
-        invalidEmailAddress);
-}
-
-export function isValidEmail (value) {
-    const ipAddressPattern = "(?:(?:25[0-5]|2[0-4][\\d]|[01]?[\\d][\\d]?)\\.){3}(?:25[0-5]|2[0-4][\\d]|[01]?[\\d][\\d]?)",
-          emailPattern = new RegExp("^(?=.{1,64}@)[\\w\\+-]+(\\.[\\w\\+-]+)*@(([A-Za-z\\d]+[A-Za-z\\d-]*\\.){1,3}[A-Za-z]{2,16}|" + ipAddressPattern + ")$"),
-          charactersLimit = 254,
-          isCharactersLimitReached = value.length <= charactersLimit;
+    updateStylingError(element.id, isValidEmail(element.value), invalidEmailAddress);
+}
+
+export function isValidEmail(value) {
+    const ipAddressPattern =
+            '(?:(?:25[0-5]|2[0-4][\\d]|[01]?[\\d][\\d]?)\\.){3}(?:25[0-5]|2[0-4][\\d]|[01]?[\\d][\\d]?)',
+        emailPattern = new RegExp(
+            '^(?=.{1,64}@)[\\w\\+-]+(\\.[\\w\\+-]+)*@(([A-Za-z\\d]+[A-Za-z\\d-]*\\.){1,3}[A-Za-z]{2,16}|' +
+                ipAddressPattern +
+                ')$'
+        ),
+        charactersLimit = 254,
+        isCharactersLimitReached = value.length <= charactersLimit;
     return emailPattern.test(value) && isCharactersLimitReached;
 }
 
-export function validatePassword (element) {
-    updateStylingError(element.id,
-        isValidPassword(element.value),
-        invalidPassword);
+export function validatePassword(element) {
+    updateStylingError(element.id, isValidPassword(element.value), invalidPassword);
 }
 
-export function isValidPassword (value) {
+export function isValidPassword(value) {
     return value.length > 0;
 }
 
-export function validateTitle (element) {
-    updateStylingError(element.id,
-        isValidTitle(element.value),
-        invalidTitle);
+export function validateTitle(element) {
+    updateStylingError(element.id, isValidTitle(element.value), invalidTitle);
 }
 
-export function isValidTitle (value) {
+export function isValidTitle(value) {
     return value.length > 0;
 }
 
-export function isValidOrderNumber (value) {
+export function isValidOrderNumber(value) {
     return value.length >= 9;
 }
 
-export function validateFirstName (element) {
-    updateStylingError(element.id,
-        isValidInputTextField(element.value),
-        invalidFirstName);
+export function validateFirstName(element) {
+    updateStylingError(element.id, isValidInputTextField(element.value), invalidFirstName);
 }
 
-export function validateLastName (element) {
-    updateStylingError(element.id,
-        isValidInputTextField(element.value),
-        invalidLastName);
+export function validateLastName(element) {
+    updateStylingError(element.id, isValidInputTextField(element.value), invalidLastName);
 }
 
-export function validateAddress1 (element) {
-    updateStylingError(element.id,
-        isValidInputTextField(element.value),
-        invalidAddressOne);
+export function validateAddress1(element) {
+    updateStylingError(element.id, isValidInputTextField(element.value), invalidAddressOne);
 }
 
 export function validateCity(element) {
-    updateStylingError(element.id,
-        isValidInputTextField(element.value),
-        invalidTownCity);
+    updateStylingError(element.id, isValidInputTextField(element.value), invalidTownCity);
 }
 
 export function isValidFieldSize(value) {
@@ -107,23 +101,27 @@ export function isValidInputTextField(value) {
     return isValidFieldSize(value) && regExp.test(value);
 }
 
-export function validateMobile (element, allowEmptyValue) {
-    updateStylingError(element.id,
+export function validateMobile(element, allowEmptyValue) {
+    updateStylingError(
+        element.id,
         isValidPhoneNumber(element.value, allowEmptyValue),
-        invalidMobile);
+        invalidMobile
+    );
 }
 
 export function validatePhone(element) {
-    updateStylingError(element.id,
-        isValidPhoneNumber(element.value, true),
-        invalidTelephone);
+    updateStylingError(element.id, isValidPhoneNumber(element.value, true), invalidTelephone);
 }
 
-export function isValidPhoneNumber(value,  allowEmptyValue) {
-    value = value.replace(/\s+/g, "");
+export function isValidPhoneNumber(value, allowEmptyValue) {
+    value = value.replace(/\s+/g, '');
 
-    var phonePatterElevenDigit = new RegExp("^0{1}\\d{10}$|^0{1}\\d{5}\\s{1}\\d{5}$|^0{1}\\d{4}\\s{1}\\d{6}$|^0{1}\\d{3}\\s{1}\\d{3}\\s{1}\\d{4}$|^0{1}\\d{2}\\s{1}\\d{4}\\s{1}\\d{4}$|^0{1}\\d{3}\\s{1}\\d{7}$");
-    var phonePatternTenDigit = new RegExp("^0{1}\\d{9}$|^0{1}\\d{5}\\s{1}\\d{4}$|^0{1}\\d{4}\\s{1}\\d{5}$");
+    var phonePatterElevenDigit = new RegExp(
+        '^0{1}\\d{10}$|^0{1}\\d{5}\\s{1}\\d{5}$|^0{1}\\d{4}\\s{1}\\d{6}$|^0{1}\\d{3}\\s{1}\\d{3}\\s{1}\\d{4}$|^0{1}\\d{2}\\s{1}\\d{4}\\s{1}\\d{4}$|^0{1}\\d{3}\\s{1}\\d{7}$'
+    );
+    var phonePatternTenDigit = new RegExp(
+        '^0{1}\\d{9}$|^0{1}\\d{5}\\s{1}\\d{4}$|^0{1}\\d{4}\\s{1}\\d{5}$'
+    );
     var result = phonePatterElevenDigit.test(value) || phonePatternTenDigit.test(value);
 
     if (allowEmptyValue) {
@@ -137,22 +135,26 @@ export function validatePostcode(element, ifConvert) {
     var elementValue = element.value;
     var isValid = isValidPostcodeField(elementValue);
     if (ifConvert && isValid) {
-        elementValue = elementValue.replace(/\s/g, "");
-        $('#' + $.escapeSelector(element.id))
-            .val(elementValue.substr(0, elementValue.length-3) + " " + elementValue.substr(elementValue.length-3));
+        elementValue = elementValue.replace(/\s/g, '');
+        $('#' + $.escapeSelector(element.id)).val(
+            elementValue.substr(0, elementValue.length - 3) +
+                ' ' +
+                elementValue.substr(elementValue.length - 3)
+        );
     }
     updateStylingError(element.id, isValid, invalidPostCode);
 }
 
 export function isValidPostcodeField(value) {
     const transformedValue = value.toUpperCase().replaceAll(' ', '');
-    const regExp = new RegExp("^(GIR 0AA)|((([A-PR-UWYZ][0-9][0-9]?)|([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|([A-PR-UWYZ][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY]))[0-9][A-BD-HJLNP-UW-Z]{2})$");
-    return transformedValue.replace(/\s+/g, "").length > 4 && regExp.test(transformedValue);
+    const regExp = new RegExp(
+        '^(GIR 0AA)|((([A-PR-UWYZ][0-9][0-9]?)|([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|([A-PR-UWYZ][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY]))[0-9][A-BD-HJLNP-UW-Z]{2})$'
+    );
+    return transformedValue.replace(/\s+/g, '').length > 4 && regExp.test(transformedValue);
 }
 
 export function validateHouseName(element) {
     updateStylingError(element.id, isValidHouseName(element.value));
-
 }
 
 export function isValidHouseName(value) {
@@ -161,30 +163,24 @@ export function isValidHouseName(value) {
 }
 
 export function validateAddressSelection(element) {
-    updateStylingError(element.id,
-        isValidAddressSelection(element),
-        selectAddressMessage);
+    updateStylingError(element.id, isValidAddressSelection(element), selectAddressMessage);
 }
 
 export function isValidAddressSelection(element) {
-    return !$('#' + $.escapeSelector(element.id)).is(":visible");
+    return !$('#' + $.escapeSelector(element.id)).is(':visible');
 }
 
 export function validateAddress2(element) {
-    updateStylingError(element.id,
-        isValidAddress2(element.value),
-        invalidAddressTwo);
+    updateStylingError(element.id, isValidAddress2(element.value), invalidAddressTwo);
 }
 
 export function isValidAddress2(value) {
     var regExp = new RegExp("^[\\w ().,'-]+$|^$");
-    return value.length === 0 || regExp.test( value);
+    return value.length === 0 || regExp.test(value);
 }
 
 export function validateVoucher(element) {
-    updateStylingErrorForElement(element,
-        isValidVoucher(element.value),
-        invalidVoucherCode);
+    updateStylingErrorForElement(element, isValidVoucher(element.value), invalidVoucherCode);
 }
 
 export function isValidVoucher(value) {
@@ -198,9 +194,9 @@ export function validateNameOnCard(element) {
     if (fieldSizeIsValid) {
         if (element.value.length > nameOnCardMaxLength) {
             updateStylingError(element.id, false, invalidNameOnCardLength);
-        } else if(isNameOnCardContainsOnly16Digits(element.value)) {
+        } else if (isNameOnCardContainsOnly16Digits(element.value)) {
             updateStylingError(element.id, false, invalidCustomNameOnCard);
-        } else if(isNameOnCardContainsAtLeast14Digits(element.value)) {
+        } else if (isNameOnCardContainsAtLeast14Digits(element.value)) {
             updateStylingError(element.id, false, validationWarnNameOnCard);
         }
     } else {
@@ -208,21 +204,18 @@ export function validateNameOnCard(element) {
     }
 }
 
-
 export function isNameOnCardContainsOnly16Digits(value) {
-    var regExp = new RegExp("^\\d{16}$");
+    var regExp = new RegExp('^\\d{16}$');
     return regExp.test(value);
 }
 
 export function isNameOnCardContainsAtLeast14Digits(value) {
-    var regExp = new RegExp("^(.*\\d){14,}.*$");
+    var regExp = new RegExp('^(.*\\d){14,}.*$');
     return regExp.test(value);
 }
 
 export function validateStoreId(element) {
-    updateStylingError(element.id,
-        isValidStoreId(element.value),
-        invalidStoreId);
+    updateStylingError(element.id, isValidStoreId(element.value), invalidStoreId);
 }
 
 export function isValidStoreId(value) {
@@ -236,13 +229,13 @@ export function updateStylingError(elementId, isValid, errorMessage) {
 
 export function updateStylingErrorForElement(element, isValid, errorMessage) {
     var parentElem = $(element).closest('.form-row');
-    if (!parentElem.is(":visible")) {
+    if (!parentElem.is(':visible')) {
         return;
     }
     removeErrorStyling(parentElem);
     if (!isValid) {
-         wrapWithError(parentElem);
-         addErrorMessage(parentElem, errorMessage);
+        wrapWithError(parentElem);
+        addErrorMessage(parentElem, errorMessage);
     }
 }
 
@@ -251,13 +244,10 @@ export function removeErrorStyling(element) {
     element.find('.form-row__error').remove();
 }
 
-
 export function wrapWithError(element) {
     $(element).addClass('form-row_validation-error');
-
 }
 
-
 export function addErrorMessage(element, errorMessage) {
     if (errorMessage) {
         $(element).append('<div class="form-row__error">' + errorMessage + '</div>');
@@ -268,7 +258,11 @@ export function showValidationErrors(form, errorMsg) {
     var $form = $(form);
     if (!$form.hasClass(formElements.formInvalid)) {
         $form.find('.form-row__error').remove();
-        $form.addClass(formElements.formInvalid).find(formElements.fieldRow).append(validationError(errorMsg)).addClass(formElements.rowValidationError);
+        $form
+            .addClass(formElements.formInvalid)
+            .find(formElements.fieldRow)
+            .append(validationError(errorMsg))
+            .addClass(formElements.rowValidationError);
     } else {
         $form.find(formElements.fieldRow).find('.form-row__error').text(errorMsg);
     }
@@ -279,7 +273,7 @@ export function showValidationErrors(form, errorMsg) {
             $scrollableEl = inModal ? $firstMsg.closest('.modal') : $('html, body'),
             y = inModal ? 0 : $firstMsg.offset().top - 30;
 
-        $scrollableEl.animate({scrollTop: y}, 300);
+        $scrollableEl.animate({ scrollTop: y }, 300);
     }
 }
 
@@ -297,22 +291,78 @@ function isElementInViewport(el) {
 }
 
 function validationError(errorMsg) {
-    return `<div class="form-row__error"> ${errorMsg || 'Error message here'}</div>`
+    return `<div class="form-row__error"> ${errorMsg || 'Error message here'}</div>`;
 }
 
 export function clearValidationErrors(form) {
     const $form = $(form);
     if ($form.hasClass('form_invalid')) {
-        $form.removeClass('form_invalid')
-          .find('.form-row[data-row-required]').removeClass('form-row_validation-error')
-          .find('.form-row__error').remove();
+        $form
+            .removeClass('form_invalid')
+            .find('.form-row[data-row-required]')
+            .removeClass('form-row_validation-error')
+            .find('.form-row__error')
+            .remove();
     }
 }
 
-export function validateGuidPattern (value) {
+export function validateGuidPattern(value) {
     return patterns.guidPattern.test(value);
 }
 
-export function validateUserFriendlyIdPattern (value) {
+export function validateUserFriendlyIdPattern(value) {
     return patterns.userFriendlyIdPattern.test(value);
 }
+
+export function showErrorText(
+    $input,
+    message,
+    fieldSelector,
+    errorTextClass,
+    errorClass,
+    ariaInvalidAttr
+) {
+    const $field = $input.closest(fieldSelector);
+    $field.addClass(errorClass);
+    $input.attr(ariaInvalidAttr, 'true');
+
+    let $err = $field.find(errorTextClass);
+    if (!$err.length) {
+        $err = $(`<div class="${errorTextClass.slice(1)}" />`).appendTo($field);
+    }
+    $err.text(message);
+}
+
+export function clearErrorText($input, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr) {
+    const $field = $input.closest(fieldSelector);
+    $field.removeClass(errorClass);
+    $input.removeAttr(ariaInvalidAttr);
+    $field.find(errorTextClass).remove();
+}
+
+function digitsOnly(value) {
+    return String(value || '').replace(/\D/g, '');
+}
+
+function hasExactDigits(value, n) {
+    return digitsOnly(value).length === Number(n);
+}
+
+function validateByPredicate(
+    $input,
+    predicate,
+    message,
+    { fieldSelector, errorText: errorTextClass, fieldError: errorClass, ariaInvalidAttr }
+) {
+    const ok = !!predicate(String($input.val() || ''));
+    if (!ok) {
+        showErrorText($input, message, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr);
+    } else {
+        clearErrorText($input, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr);
+    }
+    return ok;
+}
+
+export function validateExactDigits($input, n, message, cfg) {
+    return validateByPredicate($input, (v) => hasExactDigits(v, n), message, cfg);
+}

package/src/layouts/checkout.hbs

@@ -22,14 +22,10 @@
     {{/block}}
     <a id="skip-to-content"></a>
     <main {{#if fullWidth}}class="full-width-content"{{/if}}>
-      <div class="globalMessages">
-        <div class="container">
-          {{#block "notification"}}{{/block}}
-        </div>
-      </div>
       <div class="container">
         <div class="row">
           {{#block "steps"}}{{/block}}
+          {{#block "notification"}}{{/block}}
           <div class="content">
             {{#block "main"}}{{/block}}
           </div>

package/src/page_my-account_change-password.html

@@ -62,5 +62,6 @@
     }}
     <script src="./js/pstrength.min.js"></script>
     <script src="./js/change-password.min.js"></script>
+    <script src="./js/toggle-password-visibility.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_payment-details-with-gift-card.html

@@ -8,13 +8,15 @@
 
 <script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
 {{/content}}
-{{#content "notification"}}
-{{> notifications notification-page.error text="Sorry, there are errors on this page. Please review the information you've entered and update sections marked in red."}}
-{{/content}}
 {{#content "steps"}}
 {{> steps-three-steps active-step-index="2"}}
 {{/content}}
 
+{{#content "notification"}}
+<div class="globalMessages container">
+</div>
+{{/content}}
+
 {{#content "aside"}}
 {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true checkout=true}}
 {{/content}}
@@ -46,7 +48,7 @@
 <div class="billing-payment-block">
   <h3 class="billing-payment-block__heading">Billing & Payment</h3>
   <div class="billing-payment-block__wrapper">
-    {{> checkout-payment-details-v2 apple-pay=true google-pay=true clear-pay=true billie=true}}
+    {{> checkout-payment-details-v2 apple-pay=true google-pay=true clear-pay=true klarna-method=true}}
   </div>
 </div>
 
@@ -61,7 +63,8 @@
 <script defer src="./js/page/checkout-payment-details.js"></script>
 <script defer src="./js/page/klarna-modal-scroll-disable.js"></script>
 <script defer src="./js/page/billie-business-type.js"></script>
+<script defer src="./js/gift-cards.min.js"></script>
 {{> checkout-terms-and-conditions-modal }}
-{{> payment-loader hidden=true spinnerTypes=(array "billie-logo" "clearpay-logo" "paypal-logo")}}
+{{> loader hidden=true modifier="page-loader"}}
 {{/content}}
 {{/extend}}

package/src/page_plp-with-paint.html

@@ -63,7 +63,7 @@
 {{/content}}
 {{#content "foot" mode="append"}}
 <script defer src="./js/page/plp.js"></script>
-<script defer src="./js/page/plp-img-v2.js"></script>
+
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/page_plp_v2-energy-efficiency.html

@@ -70,7 +70,7 @@
 
 <script defer src="./js/plp.bundle.min.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
-<script defer src="./js/page/plp-img-v2.js"></script>
+
 <script defer src="./js/page/plp-cards-v2.js"></script>
 <script defer src="./js/search-filter.min.js"></script>
 {{/content}}

package/src/page_plp_v2-favourite-products.html

@@ -69,7 +69,7 @@
     {{/content}}
     {{#content "foot" mode="append"}}
         <script defer src="./js/page/plp.js"></script>
-        <script defer src="./js/page/plp-img-v2.js"></script>
+
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/plp-favourite-product.bundle.min.js"></script>
         <script defer src="./js/plp-filters.min.js"></script>

package/src/page_plp_v2-vat.html

@@ -1,19 +1,20 @@
-{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Products list" pagePlp=true switch-vat=true}}
-    {{#content "head" mode="append" pagePlp=true}}
-        <link type="text/css" rel="stylesheet" href="./css/pages/page_products-list.css">
-    {{/content}}
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page retail-media category-seo-config" title="Products list" globalSearchV2="true" pagePlp=true switch-vat=true bundle="plp"}}
+{{#content "head" mode="append" pagePlp=true}}
+<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
+{{/content}}
+<style></style>
     {{#content "body"}}
         <main>
             <div class="container">
-
                 <div class="page-header page-header_border-all">
                     <h1 class="page-header__title">
                         Fire Doors
                     </h1>
-
                     {{> srp-injected}}
                 </div>
 
+                {{> color-picker-plp }}
+
                 <div class="row">
                     <aside class="left-aside">
                         {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
@@ -21,35 +22,39 @@
 
                     <div class="content">
                         <div class="sort-products-list">
-                            <div class="sort-products-list__section sort-products-list__items-per-page">
-                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
-                            </div>
-                            <div class="sort-products-list__section sort-products-list__pagination">
-                                {{> pagination pagination1="true" }}
-                                {{> pagination pagination2="true" }}
+                            <input id="numberOfPagesPLP" value="3" type="hidden">
+                            <div class="sort-products-list__total">
+                                <span>{{plp_load-more.pagination.totalNumberOfResults}} products</span>
                             </div>
                             <div class="sort-products-list__section sort-products-list__sort-by">
-                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d2" label="Sort by" label-hidden="true" placeholder="Name (descending)"}}
+                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="#sort_form1" label="Sort by" label-hidden="true" placeholder="Name (descending)"}}
                             </div>
                         </div>
 
                         <div class="products-list products-list-v2">
-                            {{#if search-result_v2.product-banner}}
-                                {{>card_product_banner_v2}}
-                            {{/if}}
                             {{#each search-result_v2.products}}
                                 {{>card_product_v2 switch-vat=true}}
                             {{/each}}
+                            {{#if search-result_v2.product-banner}}
+                                {{#each search-result_v2.product-banner}}
+                                    {{>card_product_banner_v2}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-banner}}
+                                {{#each search-result_v2.sponsor-banner}}
+                                    {{>card_sponsor_banner}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-product}}
+                                {{#each search-result_v2.sponsor-product}}
+                                    {{>card_sponsor_product}}
+                                {{/each}}
+                            {{/if}}
                         </div>
-
-                        <div class="sort-products-list">
-                            <div class="sort-products-list__section sort-products-list__items-per-page is-hidden">
-                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-bottom" label="Products per page" label-hidden="true" placeholder="All products per page"}}
-                            </div>
-                            <div class="sort-products-list__section sort-products-list__pagination">
-                                {{> pagination pagination1="true" }}
-                                {{> pagination pagination2="true" }}
-                            </div>
+                        <div class="load-more-wrap">
+                            <button class="btn btn-primary btn_full btn-load-more">
+                                Load more
+                            </button>
                         </div>
                     </div>
                     <!-- ./content -->
@@ -66,8 +71,8 @@
     {{/content}}
     {{#content "foot" mode="append"}}
         <script defer src="./js/page/plp.js"></script>
-        <script defer src="./js/page/plp-img-v2.js"></script>
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/search-filter.min.js"></script>
+        <script defer src="./js/plp-filters.min.js"></script>
     {{/content}}
 {{/extend}}

package/src/page_plp_v2.html

@@ -83,7 +83,7 @@
     {{#content "foot" mode="append"}}
     {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
         <script defer src="./js/plp.bundle.min.js"></script>
-        <script defer src="./js/page/plp-img-v2.js"></script>
+
         <script defer src="./js/page/plp-cards-v2.js"></script>
         <script defer src="./js/search-filter.min.js"></script>
         <script defer src="./js/plp-filters.min.js"></script>

package/src/page_product-details-cnc-success-notification-vat.html

@@ -1,12 +1,13 @@
 {{#extend "base" pageClass="page-product-details" title="Product details page WisDOM VAT"
           isDiscount=true
           isSQM=true
-          isDescription=false
+          isDescription=true
           isCashback=false
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
+          badge-text='2 for £47'
+          badge-text-exc='2 for £46'
           badge-color='yellow'
           badge-text-color='gray'
           currentlyInStock=true