Plugin texte sur vignette produit en hover

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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.
    Dernière édition par -Tony- à 16/04/2015, 13h54

  • #2
    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
    Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
    http://www.template-creator.com Outil de création de templates
    Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

    Commentaire


    • #3
      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.

      Commentaire


      • #4
        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
        Design Shack is a daily source of helpful resources, articles, inspiration, tips, and tutorials for the design community.


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

        Patrick
        http://www.st42.fr : Astuce et téléchargement d’extension Joomla! et virtuemart
        http://shop.st42.fr Catalogue extentions gratuit et Pro pour Virtuemart et Joomla

        Commentaire


        • #5
          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 :


          Le code pour un bloc produit se compose comme suit :

          Code:
          <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

          Commentaire


          • #6
            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.
            http://www.st42.fr : Astuce et téléchargement d’extension Joomla! et virtuemart
            http://shop.st42.fr Catalogue extentions gratuit et Pro pour Virtuemart et Joomla

            Commentaire


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

              Code:
              // 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') {

              Commentaire


              • #8
                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.

                Commentaire


                • #9
                  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.
                  http://www.st42.fr : Astuce et téléchargement d’extension Joomla! et virtuemart
                  http://shop.st42.fr Catalogue extentions gratuit et Pro pour Virtuemart et Joomla

                  Commentaire


                  • #10
                    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.

                    Commentaire


                    • #11
                      Re : Plugin texte sur vignette produit en hover

                      Bon...je galère un peu pour imbriquer
                      Ma structure est comme ca
                      Code:
                      <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

                      Code:
                      .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 ?

                      Commentaire


                      • #12
                        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)

                        Commentaire


                        • #13
                          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:
                          Code HTML:
                          .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
                          http://www.st42.fr : Astuce et téléchargement d’extension Joomla! et virtuemart
                          http://shop.st42.fr Catalogue extentions gratuit et Pro pour Virtuemart et Joomla

                          Commentaire


                          • #14
                            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 :
                            Code:
                            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.

                            Commentaire


                            • #15
                              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 :
                              Code:
                              .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.

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X