Jump to content

Disable Quick View on PS1.7.4


Recommended Posts

I'm trying to remove quick view on PS1.7.4 default template.

To do this i commented these code from file templates/catalog/_partials/miniatures/product.tpl:

      <div class="highlighted-informations{if !$product.main_variants} no-variants{/if} hidden-sm-down">
        {block name='quick_view'}
          <a class="quick-view" href="#" data-link-action="quickview">
            <i class="material-icons search">&#xE8B6;</i> {l s='Quick view' d='Shop.Theme.Actions'}
          </a>
        {/block}

        {block name='product_variants'}
          {if $product.main_variants}
            {include file='catalog/_partials/variant-links.tpl' variants=$product.main_variants}
          {/if}
        {/block}
      </div>

 

This partially worked, in fact the quick view block on product over it's no more showed. But the problem it's that the something that on hover add a ::after on <div class="product-description"> and this cause a small 1px line it's showed.

Do you know how this can be fixed?

Link to comment
Share on other sites

  • 4 months later...

It's a css defintion that is causing the 1px line to be shown. The following style solves your problem. 

<style>

#products .thumbnail-container:focus .product-description:after,
#products .thumbnail-container:hover .product-description:after,
.featured-products .thumbnail-container:focus .product-description:after,
.featured-products .thumbnail-container:hover .product-description:after,
.product-accessories .thumbnail-container:focus .product-description:after,
.product-accessories .thumbnail-container:hover .product-description:after,
.product-miniature .thumbnail-container:focus .product-description:after,
.product-miniature .thumbnail-container:hover .product-description:after {

/* Choose one of the following lines. Both work */
  border-top: none;
  display: none;

}
</style>

 

But removing it makes the product list a bit dull. But won't you reconsider removing the quick view action? I did. The appearing bar while hovering over the images gives some spice and gives a call to action.

I changed the link in to quick_view-block to direct to the product page.

 

BLOCK CHANGE

{block name='quick_view'}
    <a class="showdetails" href="{$product.url}">
      <i class="material-icons search">&#xE8B6;</i> {l s='Quick view' d='Shop.Theme.Actions'}
    </a>
{/block}

 

And the following styles to give make the appearance the same to the quick view look 

<style>

#products .highlighted-informations .showdetails,
.featured-products .highlighted-informations .showdetails,
.product-accessories .highlighted-informations .showdetails,
.product-miniature .highlighted-informations .showdetails {
    color: #7a7a7a;
    font-size: 1rem
}

#products .highlighted-informations .showdetails:hover,
.featured-products .highlighted-informations .showdetails:hover,
.product-accessories .highlighted-informations .showdetails:hover,
.product-miniature .highlighted-informations .showdetails:hover {
    color: #2fb5d2
}

</style>

 

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
×
×
  • Create New...