wickes-css2 2.99.0-develop.2 → 2.99.0-develop.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.99.0-develop.2",
+  "version": "2.99.0-develop.3",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/data/data_tradePro_cards.json

@@ -193,6 +193,36 @@
         "btnUrl": "#"
       }
     ],
+    "reward_cards4": [
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro Active 15% off",
+        "description": "Short description",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      },
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro wit short description and long title that takes more lines",
+        "description": "Short description",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      },
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro with short description",
+        "description": "Short description that long and takes two lines of content",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      },
+      {
+        "imgSrc": "./img/placeholders/img-placeholder-rewards.png",
+        "title": "TradePro without short description",
+        "description": "",
+        "btnText": "Learn more",
+        "btnUrl": "#"
+      }
+    ],
     "reward_card": [
       {
         "imgSrc": "./img/placeholders/img-placeholder-rewards.png",

package/src/js/components/cards-slider.js

@@ -1,11 +1,15 @@
-function isElementInHorizontalViewport(el) {
-  if (typeof jQuery === 'function' && el instanceof jQuery) {
-      el = el[0];
-  }
-  var rect = el.getBoundingClientRect();
+function isElementInHorizontalContainer(el, container) {
+  if (el instanceof jQuery) el = el[0];
+  if (container instanceof jQuery) container = container[0];
+
+  if (!el || !container) return false;
+
+  const elRect = el.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+
   return (
-      rect.left >= 0 &&
-      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    elRect.left >= containerRect.left &&
+    elRect.right <= containerRect.right
   );
 }
 
@@ -39,9 +43,14 @@ $(document).ready(function () {
       },
     });
 
+    function isXLScreen() {
+      return 1200 <= (window.innerWidth || document.documentElement.clientWidth);
+    }
+
     function isEverySlideVisible() {
+      const visibleContainer = isXLScreen() ? $container : $slider.closest('.cards-slider-boundary');
       var $slides = $slider.find('.cards-swiper-wrapper .swiper-slide');
-      return $slides.filter((index, slide) => isElementInHorizontalViewport($(slide))).length === $slides.length;
+      return $slides.filter((index, slide) => isElementInHorizontalContainer($(slide), visibleContainer)).length === $slides.length;
     }
 
     function updateUI() {

package/src/page_tradePro_rewards_home_4_el.html

@@ -0,0 +1,46 @@
+{{#extend "my-account-v2"
+  pageClass="page_tradePro-rewards"
+  title="TradePro Rewards 4 Elements"
+  logo-tp=true
+  tradepro-nav=true
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="pt-0"
+  dataBreadcrumbs=my_account.tradeProRewards.breadcrumbsHomePage
+}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-rewards.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=my_account.tradepro.menu
+          active-index=4
+          page-name=my_account.tradepro.menu.[4].title
+      }}
+    </div>
+  </div>
+</div>
+
+{{#extend "cards-slider"
+  title="TradePro Rewards"
+}}
+  {{#content "cards"}}
+    {{#each page_tradePro_cards.reward_cards4}}
+      {{> reward_card
+        modificator="swiper-slide"
+        imgSrc=imgSrc
+        title=title
+        description=description
+        btnText=btnText
+        btnUrl=btnUrl
+      }}
+    {{/each}}
+  {{/content}}
+{{/extend}}
+
+{{/content}}
+{{/extend}}

package/src/sitemap.html

@@ -689,6 +689,10 @@
                             <span class="page-id">10.12</span>
                             <a href="page_tradePro_rewards_home.html" target="_blank">TradePro Rewards Home</a>
                         </li>
+                        <li>
+                            <span class="page-id"></span>
+                            <a href="page_tradePro_rewards_home_4_el.html" target="_blank">TradePro Rewards Home 4 Elements</a>
+                        </li>
                         <li>
                             <span class="page-id">10.13</span>
                             <a href="page_tradePro_rewards_home_single.html" target="_blank">TradePro Rewards Home Single Carousel Element</a>