Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Hover To Open? Rate Topic   - - - - -

 
  • ghostrider
  • Junior Member
  • Members
  • Join Date: 05-Jan 11
  • 175 posts

Posted 10 December 2014 - 05:06 AM #1

Hi guys,

How to make "Cart is empty" button and "My Account" menu Hover to open, instead of click to open?

 
  • Cart-Power
  • Senior Member
  • Authorized Reseller
  • Join Date: 12-May 14
  • 1540 posts

Posted 10 December 2014 - 07:18 AM #2

Hello,

You need to perform the following actions:
1. In admin panel go to "Layout manager", find "Cart content" and "My account" blocks. Click edit and add "hover-open" custom class to these blocks.
2. Then on your server go to: design/themes/[YOUR_THEME_NAME]/templates/addons/my_changes (if there is no such a folder you need to create it).
3. Create there hooks/index folders and in this folder create scripts.post.tpl file.
4. Paste the following code into the scripts.post.tpl file:
{literal}
<script>
$( document ).ready(function() {
  $('.hover-open').hover(function(){
   $(this).find( "div.ty-dropdown-box__content" ).css('display', 'block');
   $(this).find( "div.ty-dropdown-box__content" ).removeClass('hidden');
   $(this).find( ".cm-combination" ).addClass('open');
  
  }, function(){
   $(this).find( "div.ty-dropdown-box__content" ).css('display', 'none');
   $(this).find( "div.ty-dropdown-box__content" ).addClass('hidden');
   $(this).find( ".cm-combination" ).removeClass('open');
  });
});
  $( document ).ajaxComplete(function() {
  $('.hover-open').hover(function(){
   $(this).find( "div.ty-dropdown-box__content" ).css('display', 'block');
   $(this).find( "div.ty-dropdown-box__content" ).removeClass('hidden');
   $(this).find( ".cm-combination" ).addClass('open');
  
  }, function(){
   $(this).find( "div.ty-dropdown-box__content" ).css('display', 'none');
   $(this).find( "div.ty-dropdown-box__content" ).addClass('hidden');
   $(this).find( ".cm-combination" ).removeClass('open');
  });
});
</script>
{/literal}

5. Make sure that "My changes" add-on is enabled.

Best wishes,
Ruslan Khanbikov
Cart-Power.com / Cart-Power.ru (sales@cart-power.com) offers you:
CS-Cart add-ons :: CS-Cart themes :: CS-Cart development :: CS-Cart license
Работаем с англоязычными и русскоязычными клиентами (work with English-speaking and Russian-speaking customers)

 
  • ghostrider
  • Junior Member
  • Members
  • Join Date: 05-Jan 11
  • 175 posts

Posted 10 December 2014 - 11:23 AM #3

Hi Ruslan,

Thank you so much for help, as always!

 
  • Cart-Power
  • Senior Member
  • Authorized Reseller
  • Join Date: 12-May 14
  • 1540 posts

Posted 10 December 2014 - 11:34 AM #4

Thank you so much for help, as always!


Always happy to help you!

Best wishes
Cart-Power.com / Cart-Power.ru (sales@cart-power.com) offers you:
CS-Cart add-ons :: CS-Cart themes :: CS-Cart development :: CS-Cart license
Работаем с англоязычными и русскоязычными клиентами (work with English-speaking and Russian-speaking customers)

 
  • mumbomedia
  • Member
  • Members
  • Join Date: 13-Jan 17
  • 24 posts

Posted 13 January 2017 - 08:15 PM #5

I've followed these steps on 4.4.2. but it ain't working.

Anyone has an idea to get this to work on 4.4.2?

 

Thanks!



 
  • markhedley
  • Advanced Member
  • Trial users
  • Join Date: 19-Nov 16
  • 129 posts

Posted 15 January 2017 - 08:39 AM #6

I've followed these steps on 4.4.2. but it ain't working.

Anyone has an idea to get this to work on 4.4.2?

 

Thanks!

Class names have changed but the function is OK, just change the find elements to reference the class containing the content block you want to hover..

 

e.g. 

   $(this).find( "div.ty-dropdown-box__content" ).css('display', 'block');
   $(this).find( "div.ty-dropdown-box__content" ).removeClass('hidden');

ty-dropdown-box__title would be a place to start :-)



 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3176 posts

Posted 15 January 2017 - 11:49 AM #7

Or you can use this free addon to change icons and have hover to open..

https://themehills.c...t/font-awesome/

 

Hi guys,

How to make "Cart is empty" button and "My Account" menu Hover to open, instead of click to open?



 
  • mumbomedia
  • Member
  • Members
  • Join Date: 13-Jan 17
  • 24 posts

Posted 15 January 2017 - 08:08 PM #8

Wow. Great support here on the forum. Fresh CS Cart user here. ;)

Went for Themehills' free solution, works like a charm and integrates Font Awesome!



 
  • mumbomedia
  • Member
  • Members
  • Join Date: 13-Jan 17
  • 24 posts

Posted 18 January 2017 - 08:53 AM #9

Class names have changed but the function is OK, just change the find elements to reference the class containing the content block you want to hover..

 

e.g. 

   $(this).find( "div.ty-dropdown-box__content" ).css('display', 'block');
   $(this).find( "div.ty-dropdown-box__content" ).removeClass('hidden');

ty-dropdown-box__title would be a place to start :-)

 

 

Little update:

The plugin Darius is mentioning is working, however it is generating some css errors and causing at least a 10% pagespeed drop.

 

I've tried using the function as posted, but can't get it to work for some reason. We are using the Bright Theme



 
  • vasilisdmr
  • Newbie
  • Trial users
  • Join Date: 06-Apr 15
  • 8 posts

Posted 01 February 2018 - 03:39 PM #10

Little update:

The plugin Darius is mentioning is working, however it is generating some css errors and causing at least a 10% pagespeed drop.

 

I've tried using the function as posted, but can't get it to work for some reason. We are using the Bright Theme

Did you find any solution?



 
  • vasilisdmr
  • Newbie
  • Trial users
  • Join Date: 06-Apr 15
  • 8 posts

Posted 16 February 2018 - 09:27 AM #11

Did you find any solution?

I Found the solution, I had to insert in the scripts.post.tpl file the path to the js file with the code to open the dropdown box of the account on hover, and everything worked out.