John Posted April 20, 2018 Share Posted April 20, 2018 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 More sharing options...
Performance Agency Posted April 20, 2018 Share Posted April 20, 2018 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. Link to comment Share on other sites More sharing options...
John Posted April 20, 2018 Author Share Posted April 20, 2018 (edited) 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 April 21, 2018 by John (see edit history) Link to comment Share on other sites More sharing options...
Performance Agency Posted April 23, 2018 Share Posted April 23, 2018 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;} 1 Link to comment Share on other sites More sharing options...
John Posted April 23, 2018 Author Share Posted April 23, 2018 (edited) 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 April 23, 2018 by John (see edit history) Link to comment Share on other sites More sharing options...
Performance Agency Posted April 23, 2018 Share Posted April 23, 2018 Dans product-list.tpl, tu recherche la ligne où il y a : <h5 itemprop="name"> Et tu remplaces toute la balise h5 par le block que je t'ai mis. Oui tu peux mettre ton css dans theme.css 1 Link to comment Share on other sites More sharing options...
John Posted April 23, 2018 Author Share Posted April 23, 2018 @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 More sharing options...
Performance Agency Posted April 23, 2018 Share Posted April 23, 2018 Désolé c'est de ma faute je n'avais pas vu que c'etait une 1.7 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 More sharing options...
John Posted April 23, 2018 Author Share Posted April 23, 2018 @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 More sharing options...
Performance Agency Posted April 23, 2018 Share Posted April 23, 2018 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; } 1 Link to comment Share on other sites More sharing options...
John Posted April 23, 2018 Author Share Posted April 23, 2018 @Performance Agency , ca marche presque. Je sais pas comment t'expliquer le problème alors je t envoi vers la page hotel-boxcadeau.com . j ai essaye quelques truc mais ca marche pas. J me rend compte que j suis vriament un debutant. haha. Merci pour ton aide en tout cas. Link to comment Share on other sites More sharing options...
Performance Agency Posted April 24, 2018 Share Posted April 24, 2018 Bonjour, Sur ton css rajoute ceci dans theme.css ligne 17814: .product-miniature .thumbnail-container .filtre{ top:300px; } Après le fonctionnement y est il reste a styliser comme tu le souhaites, mais je ne pourrais pas tout te faire Link to comment Share on other sites More sharing options...
John Posted April 24, 2018 Author Share Posted April 24, 2018 @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 More sharing options...
Performance Agency Posted April 24, 2018 Share Posted April 24, 2018 Repère le bloc avec la class ttproducthover. Puis tu déplaces ce bloc dans ta partie filtre. Je pense que ça devrait fonctionné. 1 Link to comment Share on other sites More sharing options...
John Posted April 24, 2018 Author Share Posted April 24, 2018 @Performance Agency, merci beaucoup. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now