wickes-css2 2.103.0-0.5.0-icons.3 → 2.103.0-0.5.0-icons.6

package/src/js/page/plp-cards-v2.js

@@ -6,7 +6,9 @@ $(document).ready(function () {
     }
 
     function cardsContent(itemsInRow) {
-        let card = $('.content .product-card, .content .card-product-banner');
+        let card = $('.content .product-card, .content .card-product-banner, .content .card-sponsor-banner, .content .card-sponsor-product').filter(function() {
+            return $(this).parents('.product-card, .card-product-banner, .card-sponsor-banner, .card-sponsor-product').length === 0;
+        });
         let priceSelectors = [
             '.including-vat .product-card__price__old-price',
             '.excluding-vat .product-card__price__old-price',
@@ -17,6 +19,7 @@ $(document).ready(function () {
         revealAll(card, ['.product-card__price__old-price',
                                     '.product-card__price-sqm',
                                     '.product-card__price-value',
+                                    '.product-card__sponsored',
                                     '.energy-efficiency',
                                     '.energy-efficiency__link']);
 
@@ -33,6 +36,8 @@ $(document).ready(function () {
                 hideEmptiness(currentRow, '.product-card__price-sqm');
             }
             hideEmptiness(currentRow, '.product-card__price-value');
+            hideEmptiness(currentRow, '.product-card__sponsored');
+            hideEmptiness(currentRow, '.product-card__price__old-price');
             hideEmptiness(currentRow, '.energy-efficiency');
             hideEmptiness(currentRow, '.energy-efficiency__link');
 
@@ -43,11 +48,15 @@ $(document).ready(function () {
     function hideEmptiness(query, className) {
         let currentQuery = query.find(className);
         let rowContent = currentQuery.text();
-
-        if (className === '.energy-efficiency') {
-            let isEnergyQueryEmpty = isClassPresentInQuery(currentQuery, "energy-efficiency--empty");
-
-            if (isEnergyQueryEmpty) {
+        const classEmptyCheckMap = {
+            '.energy-efficiency': 'energy-efficiency--empty',
+            '.product-card__sponsored': 'product-card__sponsored--empty',
+            '.product-card__price__old-price': 'product-card__price_empty'
+        };
+
+        if (classEmptyCheckMap[className]) {
+            let isClassEmpty = isClassPresentInQuery(currentQuery, classEmptyCheckMap[className]);
+            if (isClassEmpty) {
                 currentQuery.hide();
             }
             return;

package/src/js/page/plp-load-more.js

@@ -43,7 +43,7 @@ Wick.PLPLoadMore = {
       .finally(() => {
         hideLoader(Wick.PLPLoadMore.el.loader);
         Wick.PLPLoadMore.el.$loadMoreBtn.blur();
-        Wick.ProductBanner.checkProductsInColumn();
+        Wick.BannerPlacementManager.checkProductsInColumn();
         $(window).trigger('productBannerPositionChanged');
         Wick.EnergyEfficiency.drawEnergyLabels();
         Wick.PLP?.bindEvents();

package/src/page_plp_v2.html

@@ -1,4 +1,4 @@
-{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page category-seo-config" title="Products list" globalSearchV2="true" pagePlp=true}}
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page retail-media category-seo-config" title="Products list" globalSearchV2="true" pagePlp=true}}
 {{#content "head" mode="append" pagePlp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
 {{/content}}
@@ -33,13 +33,23 @@
                         </div>
 
                         <div class="products-list products-list-v2">
-                            {{#each plp_load-more.results}}
-                            {{>card_product_v2}}
+                            {{#each search-result_v2.products}}
+                                {{>card_product_v2}}
                             {{/each}}
                             {{#if search-result_v2.product-banner}}
-                            {{#each search-result_v2.product-banner}}
-                            {{>card_product_banner_v2}}
-                            {{/each}}
+                                {{#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="load-more-wrap">

package/src/page_search-results.html

@@ -42,9 +42,19 @@
         </div>
 
         <div class="products-list products-list-v2">
-          {{#each plp_energy-efficiency.products}}
-            {{> card_product_v2}}
+          {{#each search-result_v2.products}}
+            {{>card_product_v2}}
           {{/each}}
+          {{#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">

package/src/scss/components/card-product-banner.scss

@@ -4,7 +4,7 @@
   @include make-col(4);
   margin-bottom: 30px;
 
-  @include media-breakpoint-down(md) { 
+  @include media-breakpoint-down(md) {
     @include make-col(6);
   }
 
@@ -39,7 +39,7 @@
     padding: 0 15px;
 
     @include media-breakpoint-down(sm) {
-      display: inline-block; 
+      display: inline-block;
       padding: 0;
       width: 100%;
     }
@@ -49,4 +49,92 @@
     display: inline-block;
     width: 100%;
   }
-} 
+}
+
+.products-list {
+  .card-sponsor-product,
+  .card-sponsor-banner {
+    @include make-col(4);
+    margin-bottom: 0;
+  }
+
+  .card-sponsor-banner {
+    &__link {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      padding: 0 15px;
+    }
+
+    &__image {
+      display: inline-block;
+      width: 100%;
+    }
+  }
+
+  .card-sponsor-product {
+    .product-card {
+      max-width: 100%;
+    }
+  }
+
+  .product-card__sponsored {
+    @include font-size(12);
+    @include line-height(16);
+    color: $squant;
+    font-weight: 400;
+    margin-top: -3px;
+    margin-bottom: 15px;
+    padding: 2px 4px;
+
+    &:not(.product-card__sponsored--empty) {
+      width: max-content;
+      background: $gray-light;
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .products-list {
+    .card-sponsor-product,
+    .card-sponsor-banner {
+      @include make-col(6);
+
+      .card {
+        max-width: 100%;
+      }
+    }
+  }
+
+  .products-list-v2 {
+    .card-sponsor-product:nth-of-type(n+3) {
+      .card {
+        &:before {
+          content: none;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .products-list {
+    .product-card__sponsored {
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    .card-sponsor-banner {
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 20px;
+        left: 5px;
+        width: calc(100% - 10px);
+        border-bottom: 1px solid $gray;
+      }
+    }
+  }
+}

package/src/scss/pages/page_products-list-combined.scss

@@ -47,6 +47,17 @@ $color-bar-radius: 3px;
     }
   }
 
+  .sponsor-top-banner {
+    margin-bottom: 20px;
+    margin-top: 10px;
+
+    &__image {
+      display: block;
+      max-width: 100%;
+      margin-bottom: 20px;
+    }
+  }
+
   .color-pick {
     &__wrap {
       display: none;

package/src/scss/pages/page_products-list.scss

@@ -37,6 +37,14 @@
       }
     }
   }
+
+  .sponsor-top-banner {
+    &__image {
+      margin-bottom: 20px;
+      display: block;
+      max-width: 100%;
+    }
+  }
 }
 
 .products-list {

package/src/js/components/product-banner.js

@@ -1,148 +0,0 @@
-var Wick = Wick || {};
-Wick.ProductBanner = {
-  el: {
-    banners: '.card-product-banner',
-    bannerInactiveClass: 'card-product-banner--inactive',
-    productsWrap: '.products-list-v2',
-    $products: $('.product-card'),
-    attrPositionDesktop: 'data-desktop-position',
-    attrPositionMobile: 'data-mobile-position',
-    attrRequiredAmountDesktop: 'data-required-amount-desktop',
-    attrRequiredAmountMobile: 'data-required-amount-mobile',
-    hide: 'd-none'
-  },
-  currentBreakpoint: null,
-  checkProductsInColumn() {
-    Wick.ProductBanner.addInactiveClasses();
-    Wick.ProductBanner.arrangeBannersInRightOrder();
-    $(Wick.ProductBanner.el.banners).each((index, banner) => {
-      Wick.ProductBanner.hideBannerDueLimit(banner, index);
-      Wick.ProductBanner.moveBannerToSpecifiedPosition(banner);
-    });
-  },
-  moveBannerToSpecifiedPosition(banner) {
-    const $listSlots = Wick.ProductBanner.getListSlots();
-    const bannerPosition = Wick.ProductBanner.getBannerPosition(banner) - 2;
-    const listSlotsLength = $listSlots.length;
-
-    if(Wick.ProductBanner.isBannerVisible(banner)) {
-      if (bannerPosition <= listSlotsLength) {
-        if ($listSlots[bannerPosition]) {
-          Wick.ProductBanner.showBanner(banner);
-          Wick.ProductBanner.removeInactiveClass(banner);
-          Wick.ProductBanner.moveBanner(banner, $listSlots[bannerPosition]);
-        } else {
-          Wick.ProductBanner.hideBanner(banner);
-          Wick.ProductBanner.coverEdgeCases(banner);
-        }
-      } else {
-        Wick.ProductBanner.hideBanner(banner);
-      }
-    }
-  },
-  moveBanner(banner, targetElement) {
-    $(banner).remove();
-    $(targetElement).after(banner);
-  },
-  hideBanner(banner) {
-    $(banner).addClass(Wick.ProductBanner.el.hide);
-  },
-  showBanner(banner) {
-    $(banner).removeClass(Wick.ProductBanner.el.hide);
-  },
-  isBannerVisible(banner) {
-    return !$(banner).hasClass(Wick.ProductBanner.el.hide);
-  },
-  hideBannerDueLimit(banner) {
-    const bannerMinLimit = Wick.ProductBanner.getBannerLimit(banner) - 1;
-    const $listSlots = Wick.ProductBanner.getListSlots();
-    const listProductsLength = $listSlots.length;
-    Wick.ProductBanner.showBanner(banner);
-
-    if (bannerMinLimit > listProductsLength) {
-      Wick.ProductBanner.hideBanner(banner);
-    }
-  },
-  getBannerPosition(banner) {
-    const isMobile = Wick.ProductBanner.isMobileResolution();
-    const positionAttribute = isMobile
-      ?  Wick.ProductBanner.el.attrPositionMobile
-      : Wick.ProductBanner.el.attrPositionDesktop
-
-    return banner.hasAttribute(positionAttribute)
-      ? Number(banner.getAttribute(positionAttribute))
-      : Number(Wick.ProductBanner.getListLength() + Wick.ProductBanner.getBannersAmount());
-  },
-  getBannerLimit(banner) {
-    const isMobile = Wick.ProductBanner.isMobileResolution();
-
-    const limitAttribute = isMobile
-      ? Wick.ProductBanner.el.attrRequiredAmountMobile
-      : Wick.ProductBanner.el.attrRequiredAmountDesktop;
-
-    return banner.hasAttribute(limitAttribute)
-      ? Number(banner.getAttribute(limitAttribute))
-      : 0;
-  },
-  isMobileResolution() {
-    return Wick.Responsive.getCurrentBreakpoint() !== 'up-lg';
-  },
-  getListLength() {
-    const $listItems = $(Wick.ProductBanner.el.productsWrap).find('.product-card');
-    return $listItems.length;
-  },
-  getBannersAmount() {
-    return $(Wick.ProductBanner.el.banners).length;
-  },
-  getProductsAmount() {
-    return Wick.ProductBanner.el.$products.length;
-  },
-  arrangeBannersInRightOrder() {
-    $(Wick.ProductBanner.el.banners).sort((a, b) => {
-      let bannerPositionA = Wick.ProductBanner.getBannerPosition(a);
-      let bannerPositionB = Wick.ProductBanner.getBannerPosition(b);
-
-      return bannerPositionA - bannerPositionB
-    }).appendTo(Wick.ProductBanner.el.productsWrap);
-  },
-  addInactiveClasses() {
-    $(Wick.ProductBanner.el.banners).addClass(Wick.ProductBanner.el.bannerInactiveClass);
-  },
-  removeInactiveClass(banner) {
-    $(banner).removeClass(Wick.ProductBanner.el.bannerInactiveClass)
-  },
-  insertFirstBanner(banner) {
-    const bannerPosition = Wick.ProductBanner.getBannerPosition(banner);
-
-    if (bannerPosition === 1) {
-      Wick.ProductBanner.showBanner(banner);
-      Wick.ProductBanner.removeInactiveClass(banner);
-      $(banner).remove();
-      $(Wick.ProductBanner.el.productsWrap).prepend(banner);
-    }
-  },
-  coverEdgeCases(banner) {
-    Wick.ProductBanner.insertFirstBanner(banner);
-  },
-  getListSlots() {
-    return $(Wick.ProductBanner.el.productsWrap)
-      .find('.product-card, .card-product-banner:not(.card-product-banner--inactive)');
-  },
-  init() {
-    Wick.Responsive.onResize(function () {
-      if(Wick.ProductBanner.currentBreakpoint !== Wick.Responsive.getCurrentBreakpoint()) {
-        Wick.ProductBanner.currentBreakpoint = Wick.Responsive.getCurrentBreakpoint()
-        Wick.ProductBanner.checkProductsInColumn();
-        $(window).trigger('productBannerPositionChanged');
-      }
-    });
-  }
-};
-
-$(document).ready(function () {
-  if (!Wick.ProductBanner.getBannersAmount() || !Wick.ProductBanner.getProductsAmount()) {
-    return;
-  }
-
-  Wick.ProductBanner.init();
-})