Jump to content

[Product list] Grid - How to disable "Mouse Over" and let users have "add to cart"?


Recommended Posts

Hi guys,


I have been reading the Product-list.tpl, Global.js and Global.css files and I could not understand how to disable the mouse-over and show directly the "Add to Cart" button in the Product-list grid mode.


I mean, to disable the mouse-over, one can just comment the code in Global.js, line ~166

blockHover(status){ $(document).off('mouseenter').on('mouseenter', 
'.product_list.grid li.ajax_block_product .product-container', function(e){
  if ($('body').find('.container').width() == 
1170)  {   var pcHeight = 
$(this).parent().outerHeight();   var pcPHeight = 
$(this).parent().find('.button-container').outerHeight()    + 
$(this).parent().find('.comments_note').outerHeight()    + 
$(this).parent().find('.functional-buttons').outerHeight();   $(this).parent().addClass('hovered').css({'height':pcHeight 
+ pcPHeight, 'margin-bottom':pcPHeight * 
(-1)});  } });
 $(document).off('mouseleave').on('mouseleave', '.product_list.grid 
li.ajax_block_product .product-container', function(e){  if 
($('body').find('.container').width() == 
1170)   $(this).parent().removeClass('hovered').css({'height':'auto', 
'margin-bottom':'0'}); });

The thing that i cannot understand, yet, is how adding the class "hovered" to the '.product_list.grid li.ajax_block_product .product-container' element make all those visual changes? (1, show left block price; 2, show price, 3, hide right block price).





By the way, I used Google Inspector mode to achieve these test results.


  • Like 1
Link to comment
Share on other sites

  • Create New...