Advertisement
NikolayBezay

Tollmansdot dynamic carousel MOB

Jan 5th, 2022
807
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.16 KB | None | 0 0
  1.  <style>
  2.      .slider-item img {
  3.          display: none;
  4.      }
  5.  
  6.      .slider-item .productImage {
  7.          background-image: url(https://adoric-fonts.s3.amazonaws.com/product_placeholder.svg);
  8.          background-repeat: no-repeat;
  9.          background-position: center;
  10.          background-size: contain;
  11.          left: 0px !important;
  12.          right: 0px !important;
  13.          margin: 0 auto !important;
  14.          top: 10px !important;
  15.          width: 115px !important;
  16.          height: 104px !important;
  17.      }
  18.  
  19.      .productImage,
  20.      .productTitle,
  21.      .productButton {
  22.          left: 0px !important;
  23.          right: 0px !important;
  24.          margin: 0 auto !important;
  25.      }
  26.  
  27.      .slider-item .productPrice {
  28.          width: 50% !important;
  29.          left: 0px !important;
  30.      }
  31.  
  32.      .slider-item .productSalePrice {
  33.          width: 50% !important;
  34.          right: 0px !important;
  35.          left: unset !important;
  36.      }
  37.  
  38.      .slider-item .productTitle {
  39.          top: 123px !important;
  40.          max-height: 47px !important;
  41.          overflow: hidden;
  42.      }
  43.  
  44.      .slider-item .productPrice,
  45.      .slider-item .productSalePrice {
  46.          top: 173px !important;
  47.      }
  48.  
  49.      .slider-item .productButton {
  50.          top: 193px !important;
  51.      }
  52.  
  53.      .slider-item .productSalePrice SPAN {
  54.          color: rgb(0, 0, 0) !important;
  55.          text-decoration: none !important;
  56.      }
  57.  </style>
  58.  <script>
  59.      (function() {
  60.          var productChanel = 'https://feeds.datafeedwatch.com/59896/cb51cb8fa8e7baf35f390bcb4b805559954e6efd.json';
  61.  
  62.          function updateSlideContent(campaignSlide, sourceSlide) {
  63.              var productLink = sourceSlide.link;
  64.              if (productLink) {
  65.                  campaignSlide.querySelector('.productButton a').href = productLink;
  66.              }
  67.              var productTitle = sourceSlide.title;
  68.              if (productTitle) {
  69.                  campaignSlide.querySelector('.productTitle SPAN').textContent = productTitle;
  70.              }
  71.              var productImage = sourceSlide.image_link;
  72.              if (productImage) {
  73.                  campaignSlide.querySelector('.productImage').style.setProperty('background-image', 'url(' + productImage + ')', 'important');
  74.              }
  75.              var productPrice = sourceSlide.price;
  76.              var slidePriceElement = campaignSlide.querySelector('.productPrice SPAN');
  77.              if (productPrice && slidePriceElement) {
  78.                 slidePriceElement.textContent = productPrice.replace('ILS', '') + '₪';
  79.              }
  80.              var productSalePrice = sourceSlide.sale_price;
  81.              var salePriceSlideElement = campaignSlide.querySelector('.productSalePrice SPAN');
  82.              if (productSalePrice && productSalePrice.length > 0) {
  83.                 salePriceSlideElement.textContent = productSalePrice.replace('ILS', '') + '₪';
  84.                  slidePriceElement.style.setProperty('color', 'rgb(244, 67, 54)', 'important');
  85.                  slidePriceElement.style.setProperty('text-decoration', 'line-through', 'important');
  86.                  slidePriceElement.style.setProperty('font-family', '"Open Sans Hebrew", sans-serif', 'important');
  87.              } else {
  88.                  salePriceSlideElement.style.display = 'none';
  89.                  slidePriceElement.parentNode.style.setProperty('left', '0px', 'important');
  90.                  slidePriceElement.parentNode.style.setProperty('right', '0px', 'important');
  91.                  slidePriceElement.parentNode.style.setProperty('margin', '0 auto', 'important');
  92.                  slidePriceElement.style.setProperty('text-align', 'center', 'important');
  93.              }
  94.          }
  95.          var sliderItems = document.querySelectorAll('.' + self.identifier + '.__ADORIC__ [tabindex] .slider-item');
  96.          var sliderWrapper = document.querySelector('.' + self.identifier + '.__ADORIC__ [tabindex] .slider-content');
  97.          try {
  98.              var data = null;
  99.              var xhr = new XMLHttpRequest();
  100.              xhr.withCredentials = true;
  101.              xhr.addEventListener('readystatechange', function() {
  102.                  if (this.readyState === 4) {
  103.                      var responseJson = JSON.parse(this.responseText);
  104.                      var pageProducts = responseJson.products;
  105.                      for (var i = 1; i < sliderItems.length; i++) {
  106.                         var pageItemIndex = i - 1;
  107.                         if (i <= pageProducts.length) {
  108.                             updateSlideContent(sliderItems[i], pageProducts[pageItemIndex]);
  109.                         } else {
  110.                             sliderWrapper.removeChild(sliderItems[i]);
  111.                         }
  112.                         if (i == sliderItems.length - 1 && pageProducts.length >= i) {
  113.                              updateSlideContent(sliderItems[0], pageProducts[i]);
  114.                          }
  115.                      }
  116.                  }
  117.              });
  118.              xhr.open('GET', productChanel);
  119.              xhr.setRequestHeader('cache-control', 'no-cache');
  120.              xhr.send(data);
  121.          } catch (error) {
  122.              console.log(error);
  123.          }
  124.      })();
  125.  </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement