[RÉGLÉ] Plugin texte sur vignette produit en hover

[-Tony-]

Bonjour
J'ai cherché mais sans succès un plugin permettant, sur les pages catégories virtuemart, d'afficher du texte (pas le prix ou titre mais de la description du produit) au survol de la souris sur la vignette/image du produit, ceci afin d'optimiser le référencement des catégories virtuemart en ajoutant du contenu texte.
En connaissez vous un ? Gratuit de préférence mais pas forcément.
Merci.

[ced1870]

Re : Plugin texte sur vignette produit en hover

salut
tu as regardé sur la JED (extensions.joomla.org) et sur le site d'extensions virtuemart ?
CEd

[-Tony-]

Re : Plugin texte sur vignette produit en hover

Bonjour
Oui j'ai regardé sur les deux, mais peut-être mal, je viens de re regarder mais je ne suis pas tombé dessus.
En tout cas ce que je veux c'est exactement comme sur le JED lorsqu'on survole l'image.

[electrocity]

Re : Plugin texte sur vignette produit en hover

Slaut,

Cela est en général intégré dans les templates. par exemple http://demo.smartaddons.com/#sj-fashion-store en utilisant du CSS.

sinon une demo ici : http://codepen.io/davidleininger/pen/fvemb

http://designshack.net/tutorialexamples/multiplebackgrounds/index.html

une liste avec plusieurs effets sur http://www.cssdesignawards.com/artic...r-effects/101/

Patrick

[-Tony-]

Re : Plugin texte sur vignette produit en hover

Bonjour
Super, merci
Pour le css ca va aller je me débrouille mais je présume que je vais devoir rajouter une classe dans un quelconque fichier php du template ? Et là je ne ne m'y suis pas encore aventuré à faire ca mais c'est l'occasion d'apprendre.
Alors concrètement :

http://www.brundubonsai.fr

Le code pour un bloc produit se compose comme suit :

<div class="product floatleft width25 vertical-separator">
			<div class="spacer">

            <h2 class="center"><a href="/boutique-de-vente-de-bonsai/vente-de-bonsai-shohin/celtis-australis-006-detail">CELTIS australis 006</a></h2>
				<!--<div class="width30 floatleft center">-->

                <div class="floatleft center cat">
				  <a style="display:block; min-height: 90px" title="CELTIS australis 006" href="/boutique-de-vente-de-bonsai/vente-de-bonsai-shohin/celtis-australis-006-detail">
                  
					   <img src="/images/stories/virtuemart/product/xceltis-australis-brundu-bonsai-shohin-micocoulier-006111.jpg.pagespeed.ic.2Up-qmySz5.jpg" alt="Vente Celtis australis brundu bonsai shohin micocoulier de provence 006" class="browseProductImage" pagespeed_url_hash="3067653297" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"/>					 </a>
                    <br>
                    <!-- The "Average Customer Rating" Part -->
					

					
					<div class="product-price marginbottom12" id="productPrice43">
						<div class='noprice'></div><div class="PricesalesPrice" style="display : block;">Prix : <span class="PricesalesPrice">156,70 €</span></div>
					</div>

					<p>
						<a href="/boutique-de-vente-de-bonsai/vente-de-bonsai-shohin/celtis-australis-006-detail" title="CELTIS australis 006" class="btn btn-default btn-xs">Détails du Produit</a>					</p>
				</div>
				<div class="clear"></div>
			</div>
			<!-- end of spacer -->
		</div> <!-- end of product -->

Je dirais qu'il faut que je rajoute la classe p.product-description présente sur la page détail du produit et que je la rajoute sur la page des catégories non ? Intuitivement je dirais avant ou après la balise img. Puis après appliquer les règles css présente dans ton deuxième lien pour la mise en forme.
Ou pas du tout je nage et c'est que du css ?
Merci

[electrocity]

Re : Plugin texte sur vignette produit en hover

Vous avez déjà des fichiers CSS, celui du templates par exemple.

Adaptez le CSS par rapport au classes CSS existantes, si ça suffit pas il faut modifier le fichier qui génère les produits dans la catégorie.

N'ayant pas votre version de virtuemart, je ne pourrez pas vous dire quel fichier est à modifier.

[-Tony-]

Re : Plugin texte sur vignette produit en hover

Olé j'avance
En fait j'ai regardé le default.php du com_virtuemart/category de mon template
Et également zieuté le code d'un autre template du même développeur où là il a implémenté cet effet.
Et il se trouve que j'ai retrouvé exactement la même classe sur mon default.php, à savoir .product_s_desc, vers la fin de l'extrait du code. commenté en product short description. Mais avec firebug ou en affichant le code source je ne retrouve pas cette classe.

// Show Products

		?>


		<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">

			<div class="spacer">


            <h2 class="center"><?php echo JHTML::link ($product->link, $product->product_name); ?></h2>

				<!--<div class="width30 floatleft center">-->


                <div class="floatleft center cat">

				  <a style="display:block; min-height: <?php echo VmConfig::get('img_height').'px';?>" title="<?php echo $product->product_name ?>" href="<?php echo $product->link; ?>">
                  <?php include JPATH_THEMES.'/'.$template->template.'/html/com_virtuemart/vt_badges.php'; // Product Badges ?>


					   <?php

							echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);

						?>

					 </a>

                    <br>
                    <!-- The "Average Customer Rating" Part -->

					<?php // Output: Average Product Rating

					if ($this->showRating) {

						$maxrating = VmConfig::get('vm_maximum_rating_scale', 5);


						if (empty($product->rating)) {

							?>

							<!--<span class="vote"><?php echo JText::_('COM_VIRTUEMART_RATING') . ' ' . JText::_('COM_VIRTUEMART_UNRATED') ?></span>-->

                            <span title=" <?php echo (JText::_("COM_VIRTUEMART_RATING_TITLE") . '0/0') ?>" class="category-ratingbox" style="display:inline-block;">

                              <span class="stars-orange"> </span>

                            </span>

						<?php

						} else {

							$ratingwidth = $product->rating * 12; //I don't use round as percetntage with works perfect, as for me

							?>

							<span class="vote">

                                <?php //echo JText::_('COM_VIRTUEMART_RATING') . ' ' . round($product->rating) . '/' . $maxrating; ?><!--<br/>-->

                                <span title=" <?php echo (JText::_("COM_VIRTUEMART_RATING_TITLE") . round($product->rating) . '/' . $maxrating) ?>" class="category-ratingbox" style="display:inline-block;">

                                    <span class="stars-orange" style="width:<?php echo $ratingwidth.'px'; ?>">

                                    </span>

                                </span>

                            </span>

						<?php

						}

					}

						if ( VmConfig::get ('display_stock', 1)) { ?>

						<!-- if (!VmConfig::get('use_as_catalog') and !(VmConfig::get('stockhandle','none')=='none')){?> -->

						<div class="paddingtop8">

						    <span class="stock-level"><?php echo JText::_ ('COM_VIRTUEMART_STOCK_LEVEL_DISPLAY_TITLE_TIP') ?></span>

							<span class="vmicon vm2-<?php echo $product->stock->stock_level ?>" title="<?php echo $product->stock->stock_tip ?>"></span>

                        </div>

						<?php } ?>



					<?php // Product Short Description

					if (!empty($product->product_s_desc)) {

						?>

						<p class="product_s_desc">

                            <?php echo strip_tags(shopFunctionsF::limitStringByWord ($product->product_s_desc, 40, ' &hellip;')); ?>

						</p>

						<?php } ?>


					<div class="product-price marginbottom12" id="productPrice<?php echo $product->virtuemart_product_id ?>">

						<?php

						if ($this->show_prices == '1') {

[-Tony-]

Re : Plugin texte sur vignette produit en hover

Ok merci, du coup j'en déduit qu'il faut juste que je fasse apparaitre cette classe .product_s_desc qui ne doit pas être renseignée dans les fichiers css.

[electrocity]

Re : Plugin texte sur vignette produit en hover

Pas forcement,
Il faut que vous adapter les classes(ou ciblage de l'element) par raport à votre template, automatiquement le hover fonctionnera si vous avez la même structure niveaux CSS+HTML.
Ajouter une classe sans ajouter l'effet dessus ne changera rien.

[-Tony-]

Re : Plugin texte sur vignette produit en hover

Yes merci
Pour l'instant je n'ai pas eu le temps d'essayer quelque chose de concret, mais j'ai cherché à comprendre ce qui était écrit en php.
Je faisais donc plus ou moins fausse route, .product_s_desc correspond à la courte description que l'on renseigne dans la page produit virtuemart et moi je ne m'en sert pas, elles sont vides, vu que if !empty c'est pour ca que je ne trouvais pas la classe. et j'imagine que 40 est le nombre de caractères. Je vais donc essayer d'ajouter la classe .product-description présente sur la page produit, l'élément que je veux donc, dans le default.php de la page des categories, avec les niveaux de classes et css qui va bien.

[-Tony-]

Re : Plugin texte sur vignette produit en hover

Bon...je galère un peu pour imbriquer
Ma structure est comme ca

<div class="floatleft center cat">
				  <a style="display:block; min-height: <?php echo VmConfig::get('img_height').'px';?>" title="<?php echo $product->product_name ?>" href="<?php echo $product->link; ?>">
                  <?php include JPATH_THEMES.'/'.$template->template.'/html/com_virtuemart/vt_badges.php'; // Product Badges ?>

					   <?php
							echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
						?>
					   <?php // Product Short Description
						if (!empty($product->product_s_desc)) {
							?>
							<p class="product_s_desc">
                            	<?php echo strip_tags(shopFunctionsF::limitStringByWord ($product->product_s_desc, 40, ' &hellip;')); ?>
							</p>
					   <?php } ?>
					 </a>


                    <br>

Avec

.floatleft.center.cat  .product_s_desc{position:absolute;width:100%;} plus le reste

L'élément apparait bien en haut de l'image comme il faut mais je ne comprends pas pourquoi l'élément prends toute la largeur de la page et n'est pas imbriqué dans l'élément parent, ca fais ca uniquement en position absolute mais c'est la position qu'il faut.

Comment faire pour l'imbriquer dans le cadre de l'image et que du coup width:100% corresponde à la largeur de l'image ?

[-Tony-]

Re : Plugin texte sur vignette produit en hover

Ca c'est l'autre template similaire du même développeur sur lequel je me base : http://demos.virtuemarttemplates.eu/#heravm3

sauf que chez lui c'est .grid .product_s_desc
il a imbriqué l'élément dans une grille c'est ca ? (.grid)

[electrocity]

Re : Plugin texte sur vignette produit en hover

houla tony apparemment, tu manques un peu d'expérience en CSS.
le css utilise les élément et la structure de ton document.
le .grid .product_s_desc veut dire : ne ciblé que les éléments enfant de la classe .grid ayant la classe .product_s_desc
si tu enlèves le .grid alors le css aura comme parent tous le document, c'est tout.

dans le site fourni:

.spacer {
  position: relative;
}
.spacer:hover .product_s_desc{
  height: 120px;
  padding: 15px;
  opacity: 1;
  transition: all linear 500ms;
}

.product_s_desc {
  overflow: hidden;
  padding: 15px;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: all linear 500ms;
  width: 100%;
  top: 45px;
  left: 0;
}

sont les css qui font l'animation
.spacer étant le conteneur de référence pour placer correctement le .product_s_desc qui contient votre description produit

[-Tony-]

Re : Plugin texte sur vignette produit en hover

Mais c'est super ca, ca fonctionne au poil, merci beaucoup !
En fait j'ai appris sur le tas depuis un an en customisant mon template, donc beaucoup de lacunes oui.
Je n'arrivais pas justement à trouver le conteneur de référence, après ma dernière réponse j'ai compris ma bêtise et j'ai réussi l'effet mais sur le conteneur .floatleft.center.cat et ca débordait de l'image, j'avais fais ca :
Transformé <p class="product_s_desc"> en <span class="product_s_desc"> dans le default.php
et renseigné ca en css :

span.product_s_desc {
    background-color: #FFF;
    height: 100%;
    margin-top: 0px;
    overflow: hidden;
    padding: 15px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: all 500ms linear 0s;
    width: 100%;
    left: 0px;
    color:#000 !important;
}
div.floatleft.center.cat a{
  position:relative
}
div.floatleft.center.cat a:hover span.product_s_desc{
  opacity: 1;
}

Genial, je vais essayer de voir maintenant si je peux faire apparaitre .product-description à la place de .product_s_desc en modifiant les fichiers php.

[-Tony-]

Re : Plugin texte sur vignette produit en hover

Bon, message final, c'était beaucoup trop compliqué pour moi de remplacer .product_s_desc par .product-description dans la page des catégories, beaucoup plus simple de l'enlever.
Donc j'ai commenté l'appel dans la page de detail des produit. Nickel.
Au final ca sera le même texte mais dans des classes différentes sur les deux pages.
Augmenté le nombre de caractères de .product_s_desc dans la page des categories de 40 à 3000
Et le css final :

.spacer {
  position: relative;
}
.spacer:hover .product_s_desc{
  height: 60%;
  padding: 35px;
  opacity: 1;
  transition: all linear 500ms;
}
.product_s_desc {
  background: rgba(0,0,0,0.5);
  overflow: hidden;
  padding: 35px;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: all linear 500ms;
  width: 100%;
  top: 45px;
  left: 0;
  height:0px;
  text-align:left;
}

Encore quelques détails et je passe ca en prod.
Encore merci.