wickes-css2 2.103.0-IC-976-pre-commit-lint.7 → 2.103.0-IC-976-pre-commit-lint.9

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,92 +49,4 @@
     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/helpers/_colors-semantic.scss

@@ -117,4 +117,4 @@ $checkout-overlay-action-disabled: rgba($green, .6);   // 60% opacity
 $offer-overlay-action-default:     $red;               // #cf000f
 $offer-overlay-action-hover:       rgba($red, .2);     // 20% opacity
 $offer-overlay-action-pressed:     rgba($red, .4);     // 40% opacity
-$offer-overlay-action-disabled:    rgba($red, .6);     // 60% opacity
+$offer-overlay-action-disabled:    rgba($red, .6);     // 60% opacity

package/src/scss/helpers/_variables.scss

@@ -400,3 +400,5 @@ $christine: #ec6608;
 $monza: #e30613;
 $downriver: #0c3153;
 $rose-pink: #ff858d;
+
+@import 'colors-semantic';

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

@@ -47,17 +47,6 @@ $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,14 +37,6 @@
       }
     }
   }
-
-  .sponsor-top-banner {
-    &__image {
-      margin-bottom: 20px;
-      display: block;
-      max-width: 100%;
-    }
-  }
 }
 
 .products-list {

package/src/scss/plp-main.scss

@@ -30,3 +30,4 @@
 
 // Pages
 @import 'pages/page_products-list-combined';
+@import 'pages/facets';

package/src/components/card_sponsor_banner.hbs

@@ -1,8 +0,0 @@
-<div class="card-sponsor-banner {{#unless show}}d-none{{/unless}}"
-  {{#if desktop-position}}data-desktop-position="{{desktop-position}}"{{/if}}
-  {{#if mobile-position}}data-mobile-position="{{mobile-position}}"{{/if}}
->
-  <a class="card-sponsor-banner__link" href="{{href}}">
-    <img class="card-sponsor-banner__image" src="{{src}}" alt="banner">
-  </a>
-</div>

package/src/components/card_sponsor_product.hbs

@@ -1,6 +0,0 @@
-<div class="card-sponsor-product {{#unless show}}d-none{{/unless}}"
-     {{#if desktop-position}}data-desktop-position="{{desktop-position}}"{{/if}}
-  {{#if mobile-position}}data-mobile-position="{{mobile-position}}"{{/if}}
->
-  {{>card_product_v2}}
-</div>

package/src/js/components/banner-placement-manager.js

@@ -1,258 +0,0 @@
-var Wick = Wick || {};
-Wick.BannerPlacementManager = {
-  SPONSOR_BANNERS_DISPLAYED_EVENT: 'sponsorAdsDisplayedEvent',
-  el: {
-    banners: '.card-product-banner',
-    sponsorBanners: '.card-sponsor-banner',
-    sponsorProducts: '.card-sponsor-product',
-    allBanners: '.card-product-banner, .card-sponsor-banner, .card-sponsor-product',
-    productCard: '.product-card',
-    allListSlots: '.product-card, .card-product-banner, .card-sponsor-banner, .card-sponsor-product',
-    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',
-    sponsoredAdvBanners: '.sponsored-ad'
-  },
-  classes: {
-    sponsorBanners: 'card-sponsor-banner',
-    sponsorProducts: 'card-sponsor-product',
-    productBanners: 'card-product-banner',
-    bannerInactiveClass: 'card-product-banner--inactive'
-  },
-  isEventSent: false,
-  currentBreakpoint: null,
-  checkProductsInColumn() {
-    Wick.BannerPlacementManager.addInactiveClasses();
-    Wick.BannerPlacementManager.arrangeBannersInRightOrder();
-    const $allBanners = $(Wick.BannerPlacementManager.el.allBanners);
-    const totalProducts = Wick.BannerPlacementManager.getListLength();
-    const totalSlots = totalProducts + $allBanners.length;
-    $allBanners.each((index, banner) => {
-      const bannerPosition = Wick.BannerPlacementManager.getBannerPosition(banner);
-
-      if ($(banner).hasClass('card-product-banner')) {
-        if (bannerPosition > totalSlots) {
-          Wick.BannerPlacementManager.hideBanner(banner);
-          $(Wick.BannerPlacementManager.el.productsWrap).append(banner);
-          return;
-        }
-      }
-
-      if ($(banner).hasClass(Wick.BannerPlacementManager.classes.sponsorBanners) || $(banner).hasClass(Wick.BannerPlacementManager.classes.sponsorProducts)) {
-        if (bannerPosition > totalProducts) {
-          Wick.BannerPlacementManager.showBanner(banner);
-          Wick.BannerPlacementManager.removeInactiveClass(banner);
-          $(Wick.BannerPlacementManager.el.productsWrap).append(banner);
-          return;
-        }
-      }
-
-      Wick.BannerPlacementManager.hideBannerDueLimit(banner, index);
-      Wick.BannerPlacementManager.moveBannerToSpecifiedPosition(banner);
-    });
-  },
-  moveBannerToSpecifiedPosition(banner) {
-    const $listSlots = Wick.BannerPlacementManager.getListSlots();
-    const bannerPosition = Wick.BannerPlacementManager.getBannerPosition(banner) - 2;
-    const listSlotsLength = $listSlots.length;
-
-    if (Wick.BannerPlacementManager.isBannerVisible(banner)) {
-      if (bannerPosition <= listSlotsLength) {
-        if ($listSlots[bannerPosition]) {
-          Wick.BannerPlacementManager.showBanner(banner);
-          Wick.BannerPlacementManager.removeInactiveClass(banner);
-          Wick.BannerPlacementManager.moveBanner(banner, $listSlots[bannerPosition]);
-        } else {
-          Wick.BannerPlacementManager.hideBanner(banner);
-          Wick.BannerPlacementManager.coverEdgeCases(banner);
-        }
-      } else {
-        if ($(banner).hasClass(Wick.BannerPlacementManager.classes.sponsorBanners) || $(banner).hasClass(Wick.BannerPlacementManager.classes.sponsorProducts)) {
-          Wick.BannerPlacementManager.showBanner(banner);
-          Wick.BannerPlacementManager.removeInactiveClass(banner);
-          $(Wick.BannerPlacementManager.el.productsWrap).append(banner);
-        } else {
-          Wick.BannerPlacementManager.hideBanner(banner);
-        }
-      }
-    }
-  },
-  moveBanner(banner, targetElement) {
-    $(banner).remove();
-    $(targetElement).after(banner);
-  },
-  hideBanner(banner) {
-    $(banner).addClass(Wick.BannerPlacementManager.el.hide);
-  },
-  showBanner(banner) {
-    $(banner).removeClass(Wick.BannerPlacementManager.el.hide);
-  },
-  isBannerVisible(banner) {
-    return !$(banner).hasClass(Wick.BannerPlacementManager.el.hide);
-  },
-  hideBannerDueLimit(banner) {
-    const bannerMinLimit = Wick.BannerPlacementManager.getBannerLimit(banner) - 1;
-    const $listSlots = Wick.BannerPlacementManager.getListSlots();
-    const listProductsLength = $listSlots.length;
-    Wick.BannerPlacementManager.showBanner(banner);
-
-    if (bannerMinLimit > listProductsLength) {
-      Wick.BannerPlacementManager.hideBanner(banner);
-    }
-  },
-  getBannerPosition(banner) {
-    const isMobile = Wick.BannerPlacementManager.isMobileResolution();
-    const positionAttribute = isMobile
-      ?  Wick.BannerPlacementManager.el.attrPositionMobile
-      : Wick.BannerPlacementManager.el.attrPositionDesktop
-
-    return banner.hasAttribute(positionAttribute)
-      ? Number(banner.getAttribute(positionAttribute))
-      : Number(Wick.BannerPlacementManager.getListLength() + Wick.BannerPlacementManager.getBannersAmount());
-  },
-  getBannerLimit(banner) {
-    const isMobile = Wick.BannerPlacementManager.isMobileResolution();
-
-    const limitAttribute = isMobile
-      ? Wick.BannerPlacementManager.el.attrRequiredAmountMobile
-      : Wick.BannerPlacementManager.el.attrRequiredAmountDesktop;
-
-    return banner.hasAttribute(limitAttribute)
-      ? Number(banner.getAttribute(limitAttribute))
-      : 0;
-  },
-  isMobileResolution() {
-    return Wick.Responsive.getCurrentBreakpoint() !== 'up-lg';
-  },
-  getListLength() {
-    const $listItems = $(Wick.BannerPlacementManager.el.productsWrap).children(Wick.BannerPlacementManager.el.productCard);
-    return $listItems.length;
-  },
-  getBannersAmount() {
-    return $(Wick.BannerPlacementManager.el.allBanners).length;
-  },
-  getProductsAmount() {
-    return Wick.BannerPlacementManager.el.$products.length;
-  },
-  arrangeBannersInRightOrder() {
-    const $allBanners = $(Wick.BannerPlacementManager.el.allBanners);
-
-    const sponsorProducts = $allBanners.filter((i, el) =>
-      $(el).hasClass(Wick.BannerPlacementManager.classes.sponsorProducts)
-    );
-    const sponsorBanners = $allBanners.filter((i, el) =>
-      $(el).hasClass(Wick.BannerPlacementManager.classes.sponsorBanners)
-    );
-
-    const firstSponsorProductPos = sponsorProducts.length > 0
-      ? Math.min(...sponsorProducts.map((i, el) => Wick.BannerPlacementManager.getBannerPosition(el)).get())
-      : Infinity;
-    const firstSponsorBannerPos = sponsorBanners.length > 0
-      ? Math.min(...sponsorBanners.map((i, el) => Wick.BannerPlacementManager.getBannerPosition(el)).get())
-      : Infinity;
-
-    let groupOrder;
-    if (firstSponsorProductPos < firstSponsorBannerPos) {
-      groupOrder = [
-        Wick.BannerPlacementManager.classes.sponsorProducts,
-        Wick.BannerPlacementManager.classes.sponsorBanners,
-        Wick.BannerPlacementManager.classes.productBanners
-      ];
-    } else {
-      groupOrder = [
-        Wick.BannerPlacementManager.classes.sponsorBanners,
-        Wick.BannerPlacementManager.classes.sponsorProducts,
-        Wick.BannerPlacementManager.classes.productBanners
-      ];
-    }
-
-    $allBanners.sort((a, b) => {
-      function getGroupIndex(el) {
-        if ($(el).hasClass(groupOrder[0])) return 0;
-        if ($(el).hasClass(groupOrder[1])) return 1;
-        if ($(el).hasClass(groupOrder[2])) return 2;
-        return 3;
-      }
-
-      const groupA = getGroupIndex(a);
-      const groupB = getGroupIndex(b);
-
-      if (groupA !== groupB) {
-        return groupA - groupB;
-      }
-
-      const positionA = Wick.BannerPlacementManager.getBannerPosition(a);
-      const positionB = Wick.BannerPlacementManager.getBannerPosition(b);
-
-      return positionA - positionB;
-    }).appendTo(Wick.BannerPlacementManager.el.productsWrap);
-  },
-  addInactiveClasses() {
-    $(Wick.BannerPlacementManager.el.allBanners).addClass(Wick.BannerPlacementManager.el.hide);
-  },
-  removeInactiveClass(banner) {
-    $(banner).removeClass(Wick.BannerPlacementManager.classes.bannerInactiveClass)
-  },
-  insertFirstBanner(banner) {
-    const bannerPosition = Wick.BannerPlacementManager.getBannerPosition(banner);
-
-    if (bannerPosition === 1) {
-      Wick.BannerPlacementManager.showBanner(banner);
-      Wick.BannerPlacementManager.removeInactiveClass(banner);
-      $(banner).remove();
-      $(Wick.BannerPlacementManager.el.productsWrap).prepend(banner);
-    }
-  },
-  coverEdgeCases(banner) {
-    Wick.BannerPlacementManager.insertFirstBanner(banner);
-  },
-  getListSlots() {
-    return $(Wick.BannerPlacementManager.el.productsWrap)
-      .children(Wick.BannerPlacementManager.el.allListSlots);
-  },
-  getBannerPriority(banner) {
-    if ($(banner).hasClass(Wick.BannerPlacementManager.classes.sponsorProducts)) {
-      return 1;
-    }
-    if ($(banner).hasClass(Wick.BannerPlacementManager.classes.sponsorBanners)) {
-      return 2;
-    }
-    return 3;
-  },
-  dispatchSponsorAdsDisplayedEvent() {
-    return new Promise((resolve, reject) => {
-      const eventDetail = { resolve, reject };
-      const sponsorAdsEvent = createEvent(Wick.BannerPlacementManager.SPONSOR_BANNERS_DISPLAYED_EVENT, { displayed: true }, eventDetail);
-      window.dispatchEvent(sponsorAdsEvent);
-    });
-  },
-  init() {
-    Wick.Responsive.onResize(function () {
-      if(Wick.BannerPlacementManager.currentBreakpoint !== Wick.Responsive.getCurrentBreakpoint()) {
-        Wick.BannerPlacementManager.currentBreakpoint = Wick.Responsive.getCurrentBreakpoint()
-        Wick.BannerPlacementManager.checkProductsInColumn();
-
-        if (
-          !Wick.BannerPlacementManager.isEventSent && $(Wick.BannerPlacementManager.el.sponsoredAdvBanners).length
-        ) {
-          Wick.BannerPlacementManager.dispatchSponsorAdsDisplayedEvent();
-          Wick.BannerPlacementManager.isEventSent = true;
-        }
-
-        $(window).trigger('productBannerPositionChanged');
-      }
-    });
-  }
-};
-
-$(document).ready(function () {
-  if (!Wick.BannerPlacementManager.getBannersAmount() || !Wick.BannerPlacementManager.getProductsAmount()) {
-    return;
-  }
-
-  Wick.BannerPlacementManager.init();
-})

package/src/js/emulation/banner-placement-manager.js

@@ -1,53 +0,0 @@
-// Simulate prompt for input
-function getInputs() {
-  const productBannerPositions = prompt("Enter Product Banner Positions:", "2") || "";
-  const sponsorProductPositions = prompt("Enter Sponsor Product Positions (comma-separated):", "6,7,8") || "";
-  const sponsorBannerPositions = prompt("Enter Sponsor Banner Positions:", "10") || "";
-
-  return {
-    productBannerPositions: productBannerPositions ? productBannerPositions.split(",").map(Number) : [],
-    sponsorProductPositions: sponsorProductPositions ? sponsorProductPositions.split(",").map(Number) : [],
-    sponsorBannerPositions: sponsorBannerPositions ? sponsorBannerPositions.split(",").map(Number) : [],
-  };
-}
-
-function getPositionAttr() {
-  const isMobile = Wick.BannerPlacementManager.isMobileResolution();
-  return isMobile
-    ? 'data-mobile-position'
-    : 'data-desktop-position';
-}
-
-function updatePositions(inputs) {
-  const productBannerElements = document.querySelectorAll(".card-product-banner");
-  productBannerElements.forEach((el, index) => {
-    if (inputs.productBannerPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.productBannerPositions[index]);
-    }
-  });
-
-  const sponsorProductElements = document.querySelectorAll(".card-sponsor-product");
-  sponsorProductElements.forEach((el, index) => {
-    if (inputs.sponsorProductPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.sponsorProductPositions[index]);
-    }
-  });
-
-  const sponsorBannerElements = document.querySelectorAll(".card-sponsor-banner");
-  sponsorBannerElements.forEach((el, index) => {
-    if (inputs.sponsorBannerPositions[index] !== undefined) {
-      el.setAttribute(getPositionAttr(), inputs.sponsorBannerPositions[index]);
-    }
-  });
-}
-
-function init() {
-  const inputs = getInputs();
-  updatePositions(inputs);
-}
-
-$(document).ready(function () {
-  if ($('.retail-media .products-list.products-list-v2').length) {
-    setTimeout(() => init(), 100)
-  }
-});