Javascript style not overwriting css

Question

I have a simple HTML drawer that contains product recommendations. Javascript is used to toggle it open and close. In the HTML, there are 2 prices, the regular price and the discounted price. Both are visible on load. The JS is supposed to hide the discounted price(current price), if the current price is the same as the old price. Because then it's not necessary to show both(identical prices). But if there is an offer, it's supposed to show both.

The problem is, my javascript for opening and closing the drawer is working, but the code for hiding/showing both prices aren't. And I know the code is fine because it works on another product recommendation template I'm using(which isn't a drawer, but normal on-page element).

I've tried putting the price-code before the drawer-function code, but then the drawer doesn't respond to clicks and does not open anymore. When I use Preview in the software I'm using to inject product recommendations(Dynamic Yield), the prices are shown correctly. It's only when I preview it on the website itself, that it doesn't work. Both prices are shown even if they match.

Here is the JS:

(function() {
    var container = document.querySelectorAll('.dy-sliding-drawer-container')[0];
  var handler = container.querySelector('.dy-sliding-handle');
  function toggle() {
    if (container.className.indexOf('dy-open') > -1) {
      container.className = container.className.replace('dy-open','');
    } else {
      container.className = container.className.trim() + ' dy-open';
    }
  }
  handler.addEventListener('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    toggle();
  });
})();

var mq = window.matchMedia( "(max-width: 599px)" );
var itemPrices = document.querySelectorAll('.price-box');
for(var i=0; i


Is there anything I can do to make both codes work together? I've tried putting them in the same function, with no luck.
Here is the HTML(I guess the only relevant code here is the .price-box div, but I'm gonna paste everything in case you need it):

  
    
      
        ${Title}
      
    

    
      ${#Recommendation}
      
        
        
        ${Item Name}
        
          
            ${product_price_dynamic},-
            ${price},-
          
        

        
        
          
            
              
              
              
              
            
          
        
        
          
            
              
                Les mer
              
            
          
        
        
        
      
      ${/Recommendation}
    
  


And if the CSS is needed, heres is the CSS for the relevant classes(old price and new price:
.price-box{
  display: flex;
  align-items: flex-end;
}

.dynamic-price{
  color:#dd1768;
  font-size:18px;
  font-weight:700;
  letter-spacing:-1.5px !important;
  padding-bottom:0px !important;
  margin-bottom:0px !important;
}

.regular-price{
  font-size:14px;
  letter-spacing:-1px !important;
  padding-bottom:0px !important;
  margin-bottom:0px !important;
  font-weight: 400;
}

Could anybody help me out? Keep in mind that the Javascript works fine for recommendation widgets which loads on-page, but not with this click-to-open drawer. Appreciate any help.

Carsten Massmann · Accepted Answer

Your script does basically work - provided the variables in your template have been replaced by actual values before the markup is rendered into the DOM. I have modified your data a little bit to demonstrate the correct behaviour on some same-price and some differing-price .price-box examples.

I also took the liberty of shortening your very verbose scripts. I have probably gone a bit too far, especially my .reduce() construct is not easy to read. But look at it as an extreme way of avoiding creating variable names.

(function(){
  var container = document.querySelector('.dy-sliding-drawer-container');
  container.querySelector('.dy-sliding-handle').onclick=e=>
   container.classList.toggle("dy-open");
})();

// var mq = window.matchMedia( "(max-width: 599px)" );
document.querySelectorAll('.price-box').forEach(p=>{
 [...p.querySelectorAll("span")].reduce((a,c)=>a.style.display=(a.textContent==c.textContent?"none":""))});

.dy-open {background-color:yellow}
.price-box{
  display: flex;
  align-items: flex-end;
}

.dynamic-price{
  color:#dd1768;
  font-size:18px;
  font-weight:700;
  letter-spacing:-1.5px !important;
  padding-bottom:0px !important;
  margin-bottom:0px !important;
}

.regular-price{
  font-size:14px;
  letter-spacing:-1px !important;
  padding-bottom:0px !important;
  margin-bottom:0px !important;
  font-weight: 400;
}


  

  
    ${Title}
  



  ${#Recommendation}
  
    
    
    ${Item Name}
    
      
        50,-
        50,-
      
    
    ${Item Name}
    
      
       50,-
       60,-
      
    
    ${Item Name}
    
      
       60,-
       60,-
      
    
    
    
      
        
          
          
          
          
        
      
    
    
      
        
          
            Les mer
          
        
      
    
    
    
  
  ${/Recommendation}

Explanation:

The .reduce() over all the s in a .price-box div relies on the fact that the "reduced price" span always comes before the "regular price" one and that you will always have exactly two elements. When reduce() is called without the second (starting value) argument it takes the first array element (the "reduced price" span) as the starting value (a). The (only) "current" value in the iteration (c) will then be the regular price span. When the .textContent of both elements are the same the a span will be hidden, otherwise it will remain visible.

Javascript style not overwriting css

Answers (1)

Related Questions