Jump to content

Overlay sur les produits


Recommended Posts

Bonjour,

Je voudrais mettre un overlay blanc transparent avec le nom du produit qui s'affiche au passage de la souris. Est ce que quelqu'un pourrais m'aider. J'ai chercher un peu partout mais je ne trouve rien.

 

Merci d'avance.

Prestashop 1.7.2

Link to comment
Share on other sites

20 hours ago, Performance Agency said:

Bonjour,

Sur ton template product-list, tu peux rajouter une div au dessus de ton champ  "nom du produit".

Puis en CSS tu masques cette div et tu l'affiches au survol.

@Performance Agency Merci pour ta réponse.

Est ce que tu aurais un exemple a me faire?  je patauge un peu la

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

Bonjour ,

Voici ce que ca pourrait donner en simplifié:

<div class="filtre">
    <h5 itemprop="name">
        {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
        <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
            {$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
        </a>
    </h5>
</div>

 

Puis en css :

.filtre{display:none;}

.product-container:hover .filtre{display:block;}

 

 

  • Like 1
Link to comment
Share on other sites

il y a une heure, Performance Agency a dit :

Bonjour ,

Voici ce que ca pourrait donner en simplifié:

<div class="filtre">
    <h5 itemprop="name">
        {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
        <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
            {$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
        </a>
    </h5>
</div>

 

Puis en css :

.filtre{display:none;}

.product-container:hover .filtre{display:block;}

 

 

Super merci @Performance Agency mais ou faut il que j'entre le premier code? 

je pense que le css il faut que je le mette dans le theme.css c'est bien ca?

 

merci pour ton temps

 

 

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

@Performance Agency dans le fichier product list je ne trouve pas de balise H5, je suis desolé je comprend pas pourquoi je trouve pas.

voila le contenu de product list:

{extends file=$layout}

{block name='content'}
  <section id="main">
    <input id="carttoken" name="carttoken" value="{$urls.pages.cart}" type="hidden">
    <input id="tokenid" name="tokenid" value="{$static_token}" type="hidden">
    {block name='product_list_header'}
      <h2 class="h2 tt-innerpagetitle">{$listing.label}</h2>
    {/block}

    <section id="products">
      {if $listing.products|count}

        <div id="">
          {block name='product_list_top'}
            {include file='catalog/_partials/products-top.tpl' listing=$listing}
          {/block}
        </div>

        {block name='product_list_active_filters'}
          <div id="" class="hidden-sm-down">
            {$listing.rendered_active_filters nofilter}
          </div>
        {/block}

        <div id="">
          {block name='product_list'}
            {include file='catalog/_partials/products.tpl' listing=$listing}
          {/block}
        </div>

        <div id="js-product-list-bottom">
          {block name='product_list_bottom'}
            {include file='catalog/_partials/products-bottom.tpl' listing=$listing}
          {/block}
        </div>

      {else}

        {include file='errors/not-found.tpl'}

      {/if}
    </section>

  </section>
{/block}
 

Link to comment
Share on other sites

Désolé c'est de ma faute je n'avais pas vu que c'etait une 1.7 :lol:

Voici le fichier à modifier :

\themes\classic\templates\catalog\_partials\miniatures\product.tpl:

Remplacer ca :
{block name='product_name'}
      <h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></h1>
{/block}

Par :

{block name='product_name'}

      <div class="filtre">
           <h1 class="h3 product-title" itemprop="name"><a href="{$product.url}">{$product.name|truncate:30:'...'}</a></h1>

      </div>
{/block}

 

 

Puis le css :

.filtre{display:none;}

.product-miniature .thumbnail-container:hover .filtre{display:block;}

 

Ca devrait être mieux !

Link to comment
Share on other sites

@Performance Agency merci,

effectivement je trouve ca dans le fichier plus facilement.

Ca ne fonctionne pas corectement. Les nom des produits ne sont plus visible sous la miniature et apparaisse quand je passe la souris dessus. Je voudrais que le nom complet apparaisse sur l image au passage de la souris avec un overlay blanc transparent.

desolé si je me suis mal exprimé.

peut etre est ce plus facile avec un lien vers le site.

hotel-boxcadeau .com

merci

Link to comment
Share on other sites

Supprimez alors le code CSS que je vous ai envoyé et essayez avec ceci :

.thumbnail-container{
    overflow:hidden;
}

.product-miniature .thumbnail-container .filtre{
  display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: red;
    
  -webkit-transition-property: top, bottom;
  -webkit-transition-duration: 0.5s;
}

.product-miniature .thumbnail-container:hover .filtre{
  top: 0;
}

  • Like 1
Link to comment
Share on other sites

@Performance Agency,

Merci beaucoup en tous cas. juste une derniere chose après je pense que je peux me debrouillé. Le filtre se met sur les bouton ajouter au panier et quick view.

J ai essayé de bidouillé avec z-index mais rien y fait.

Si tu peux me donner cette derniere soluce c'est vraiment cool. autrement ben merci quand meme pour tous le reste. j ai appris plein de nouveau truc. ;)

Je suis tous nouveau sur le forum et trouve ca genial qu'on s'aide les un les autre. j espere etre bientot capable d'aider d'autre personnes.

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...