Jump to content

Removing ajax hover

zenatomiser
 Share

Recommended Posts

zenatomiser Newbie

zenatomiser

Posted
Posted

Hi,

 

I'm fairly new to prestashop and still trying to configure it to my liking, one of the things I'd like to do is to remove the product ajax hover, I'd like to always see the product "add to cart" and "more" buttons when displaying the page. It works like this when it's resized to mobile size and I'd like to keep it like that on full-screen too.

 

Hope you can help, thanks!

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

open file:

themes/default-bootstrap/product-list.tpl

 

and change:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price"> 

to:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_pricee">

(i added one "e" in class clause)

 

 

and

<div class="button-container">

to:

<div class="button-containerr">

(i added one "r" in class clause)

 

 

 

then in /themes/default-bootstrap/css/product_list.css

 

remove  min-height: 35px;

 

from

ul.product_list.grid > li .product-container h5 {
padding: 0 15px 7px 15px;
min-height: 35px;
}
  • Like 4
Link to comment
Share on other sites
  • 1 month later...
Guid Newbie

Guid

Posted
Posted

Thanks a lot Vekia for all yours answers.

 

Once again that SOLVED.

 

But how to remove too the black contenair with the price that appears when we are on the product.

(presta 1.6 , theme default)

 

Thanks for reply!

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

Thanks a lot Vekia for all yours answers.

 

Once again that SOLVED.

 

But how to remove too the black contenair with the price that appears when we are on the product.

(presta 1.6 , theme default)

 

Thanks for reply!

 

you just mean that you want to remove whole hover effect?

Link to comment
Share on other sites
Guid Newbie

Guid

Posted
Posted

you just mean that you want to remove whole hover effect?

Hi vekia!
 
I would like to remove the black contenair price that appears when mouse is hover, image below.
 
Thanks for reply!
Link to comment
Share on other sites
  • 2 months later...
ddt81 Newbie

ddt81

Posted
Posted (edited)

 

open file:

themes/default-bootstrap/product-list.tpl

 

and change:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_pricee"> 

to:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_pricee">

(i added one "e" in class clause)

 

 

and

<div class="button-containerr">

to:

<div class="button-container">

(i added one "r" in class clause)

 

 

 

then in /themes/default-bootstrap/css/product_list.css

 

remove  min-height: 35px;

 

from

ul.product_list.grid > li .product-container h5 {
padding: 0 15px 7px 15px;
min-height: 35px;
}

Hi... for me not working!

 

In home page with new products it is all OK but in the category product i not show the "Add to Cart" so for my client it's impossible to buy any product

 

Any idea?

 

I use Prestashop 1.6.09 with default theme

 

 

Edited by ddt81 (see edit history)
Link to comment
Share on other sites
  • 1 month later...
  • 6 months later...
  • 2 months later...
jave.web Newbie

jave.web

Posted
Posted

If you want to remove the "Quick View" functionality completely, you have to do following (Prestashop 1.6)

( taken from http://www.psfever.com/blog/2014/disable-quick-view-prestashop-1-6/ ) :

 

1. Log into your Dashboard
2. In the menu hover over Modules and click on Modules
3. Type “Theme Configurator” into the search box. Once the Theme Configurator module shows up click on Configure.
4. Now you’re inside the settings of Theme Configurator module. Scroll slightly down and look for “Display quick view window on homepage and category pages“. Set this option to No.
5. Hit the Save button in the bottom right corner.
 
This remove ONLY the ajax functionality, but the button itself remains present (though it now acts as a regular link to product) - TO REMOVE THE BUTTON: (on hover) itself you have to add following CSS code at the bottom of the "product_list.css" file , located probably in "/web/shop/themes/default-bootstrap/css/" ::: 

   ul.product_list.grid > li.hovered .product-container .product-image-container .quick-view{
      display: none;
   }

You may have to change  display: none; to  display: none !important; to override some other rules, but it worked for me just without !important...

 

Hope this helps someone :) Have a nice day :) 

 

Link to comment
Share on other sites
  • 4 months later...
GeorgeC Newbie

GeorgeC

Posted
Posted

I have a way to remove hover efect just editing product-list.css file.

On this way i can see to "list view" whitout problems and all efect from products category are removed. I try this metod on Prestashop 1.6.1.1 and it's super!

 

Please let my know if anyone have problems with this modification.

1. Replace “margin-bottom: 14px;”  with "display: block !important;"  (line 209 on prestashop 1.6.1.1)
 
      display: none; }
    ul.product_list.grid > li .product-container .old-price {
      margin-right: 5px; }
    ul.product_list.grid > li .product-container .button-container {
      margin-bottom: 14px;}
      @media (min-width: 1200px) {
        ul.product_list.grid > li .product-container .button-container {
          display: none; } }
 
2.Delete code from line 227-243 (on prestashop 1.6.1.1)
 
  @media (min-width: 1200px) {
    ul.product_list.grid > li.hovered .product-container {
      -moz-box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px;
      -webkit-box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px;
      box-shadow: rgba(0, 0, 0, 0.17) 0 0 13px;
      position: relative;
      z-index: 10; }
      ul.product_list.grid > li.hovered .product-container .content_price {
        display: none; }
      ul.product_list.grid > li.hovered .product-container .product-image-container .content_price {
        display: block; }
      ul.product_list.grid > li.hovered .product-container .product-image-container .quick-view {
        display: block; }
      ul.product_list.grid > li.hovered .product-container .functional-buttons,
      ul.product_list.grid > li.hovered .product-container .button-container,
      ul.product_list.grid > li.hovered .product-container .comments_note {
        display: block; } }
 
3.Delete code from line 250-251 (on prestashop 1.6.1.1)
 
ul.product_list.grid li.hovered h5 {
  min-height: 30px; }

  • Like 2
Link to comment
Share on other sites
  • 2 months later...
steper1978 Newbie

steper1978

Posted
Posted (edited)

Hi,

I've just bought and installed a new theme to my prestashop. I'd like to remove the hover effect in the product listing (inluding the featured list on home page) I've been readning through the earlier comments in this thread. Unfortunately I can't find any hover or ajax code in the files that came with the new theme so I would very much appreciate some help with this.

 

My shop can be found on test.minihome.se and I use Prestashop 1.6.1.4

Edited by steper1978 (see edit history)
Link to comment
Share on other sites
dusticelli Newbie

dusticelli

Posted
Posted

@GeorgC,

 

thx, that solved the jumpin' hover for me like a charm. I'm on 1.6.1.4. Discarding the exact line numbers one should identify the related blocks, even if the line numbers might differ a little bit probably due to some changes already maid.

  • Like 1
Link to comment
Share on other sites
emonerd Newbie

emonerd

Posted
Posted

Hey i was wondering how can i remove the add to cart feature from the homepage .

i dont want it to appear on hover i only want the add to cart to show on product detail page after buyer clicks on the product.

 so how can i complety remove the add to cart button on homepage when you hover and just keep the more button?

Link to comment
Share on other sites
  • 1 month later...
  • 1 month later...
birbal007 Newbie

birbal007

Posted
Posted

 

open file:

themes/default-bootstrap/product-list.tpl

 

and change:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price"> 

to:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_pricee">

(i added one "e" in class clause)

 

 

and

<div class="button-container">

to:

<div class="button-containerr">

(i added one "r" in class clause)

 

 

 

then in /themes/default-bootstrap/css/product_list.css

 

remove  min-height: 35px;

 

from

ul.product_list.grid > li .product-container h5 {
padding: 0 15px 7px 15px;
min-height: 35px;
}

i tried this but hover effect not going. i want to remove hover effect because when i hover on products it disturb my second row. second row product start moving here n there. i'm providing u link also for reference. http://ucodice.com/fashion_point/index.php?id_supplier=1&controller=supplier. please provide a solution

Link to comment
Share on other sites
birbal007 Newbie

birbal007

Posted
Posted (edited)

 

its moving because of

 
.bd-griditem-4:hover {
    background-color: #fff;
    border: 0 solid #8acbe5;
    background-image: none;
}
 
in your global.css
 this effect is not my problem. my problem is my second row element start moving when i move cursor over first row products. i got the reason but not the solution. reason is when i enter long product name then product name appear in two rows and this is the issue. when i hover, div of my product expand and contract at that time & my product in second row try to occupy place in first row and start moving here and there.. i found the problem now provide me solution. thanx

http://ucodice.com/fashion_point/1_fashion-manufacturer

Edited by birbal007 (see edit history)
Link to comment
Share on other sites
  • 2 months later...
miloss Newbie

miloss

Posted
Posted (edited)

One more solution without changing css class names ... is adding 1 simple line in js file : /themes/default-bootstrap/js/global.js

 

Find function blockHover add as first line in function :

return;

This way all code below will be "ignored". Do not try to comment out whole function since this function is called inside another functions and will break some other functionalities i.e. grid / list view when function blockHover does not exist.

 

Please note that this removes ajax hover as requested - "static" buttons will appear on breakpoints less than large device. On large devices you will have to move "add to cart" and "more" button manually in html file like stated above.

Edited by miloss (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...