Joomladay francophone 2018 à Paris 18 et 19 mai

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
        http://designshack.net/tutorialexamp...nds/index.html

        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 :
          http://www.brundubonsai.fr

          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
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X