Tutorial d'installation de jQZoom Evolution sur Virtuemart

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

  • [Astuce] Tutorial d'installation de jQZoom Evolution sur Virtuemart

    jQZoom étant un peu plus complexe à installer sur joomla qu'un composant, voici un petit tuto.

    Pré-requis: avoir son propre template Virtuemart. Il vous suffit de copier/coller le repertoire components/com_virtuemart/themes/default/ et de le renommer sous un nom différent. Ensuite dans la partie admin de joomla, vous irez sur Virtuemart > configuration > Site > Choisir le thème de sa boutique > Configuration > choisir son template.

    Cela permettra en cas de fausse manip de garder un template propre.

    Installation de jQZoom:
    • Extraire les répertoires:
      • js et images dans votre dossier de template joomla (templates/montemplate/
      • Inserer le contenu du css téléchargé dans le pack et l'insérer dans le css de votre template joomla ou Virtuemart. (templates/montemplate/template/css/moncss.css par exemple)

    • Ouvrir le fichier Virtuemart qui se charge d'organiser votre page d'affichage des produit: il s'agit de browse1.php (components/com_virtuemart/themes/montemplates/templates/browse/)
    • Insérer sur la ligne 4 le code suivant (juste avant <div class="browseProductContainer">)
      Code:
       <script type='text/javascript' src='templates/montemplate/js/jquery-1.3.2.min.js'></script>
       <script type='text/javascript' src='templates/montemplate/js/jquery.jqzoom1.0.1.js'></script>
       <script type="text/javascript">
      
      $(function() {
      	$(".jqzoom").jqzoom();
      });
      </script>

    • Juste après <div class="browseProductImageContainer"> (vers la ligne 24), effacer le code contenu entre les balises <script type="text/javascript"></script>
    • Remplacer le contenu éffacé par le code suivant:
      Code:
       <a href="<?php echo $product_full_image ?>" class="jqzoom"  title="<?php echo $product_name ?>">
                      <?php echo ps_product::image_tag( $product_thumb_image, '" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>
                      </a>


    Voilà, le tour est joué!
    Pensez bien évidement à changer dans les urls dont je fais référence "montemplate" par le votre.
    Dernière édition par thom689808 à 24/07/2009, 12h51
    Webmaster du site http://www.les-authentiques.fr
    Vetements accessoires pour loisirs de plein air

  • #2
    Bonjour
    C possible d'avoir un apperçu comme nous avons pour le module magiczoom?

    @+

    Edit : L'apperçu est sur le lien excusses
    Dernière édition par LeMalouin à 24/07/2009, 12h48
    SVP pas de MP pour de l'aide, le forum est l’outil idéal

    Commentaire


    • #3
      merci pour l'astuce, c'est testé et ca marche bien
      AA

      Commentaire


      • #4
        Mon site n'étant pas en ligne, je ne peux pas vous donner de lien pour voir ce que ça fait.

        En gros on a l'apercu de l'image dans lequel est insérée une zone de zoom que l'on déplace à la souris. Sur la droite, le zoom suit le mouvement de la souris.

        Le mieux est de tester la demo en la téléchargeant sur : http://www.mind-projects.it/projects...x.php#download

        Sinon voici une image du résultat (image du site officiel)
        Webmaster du site http://www.les-authentiques.fr
        Vetements accessoires pour loisirs de plein air

        Commentaire


        • #5
          oui masi pour le mettre sur la fenetre det'ail produit.... ??

          merci pour le tuto tres pratique.. par contre j'essaye desesperement de le mettre dans la fenetre suivante detai produit... et sur les autre iamges du produit ...

          dans le fichier flypage.tpl.php..

          mais je javascript ne fonctionne pas... en gros ca me laisse les dv grisé avec la petite roue de chargement et rien ne se passe... le css est pris en compte mais pas je java script.. et je ne sais pas ou le mettre ..

          merci de votre aide !!

          eric

          cf le code du fameux fichier :


          <?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
          mm_showMyFileName(__FILE__);
          ?>


          <script type='text/javascript' src='templates/templatka11/js/jquery-1.3.2.min.js'></script>
          <script type='text/javascript' src='templates/templatka11/js/jquery.jqzoom1.0.1.js'></script>
          <script type="text/javascript">

          $(function() {
          $(".jqzoom").jqzoom();
          });
          </script>


          <?php echo $buttons_header // The PDF, Email and Print buttons ?>

          <?php
          if( $this->get_cfg( 'showPathway' )) {
          echo "<div class=\"pathway\">$navigation_pathway</div>";
          }
          if( $this->get_cfg( 'product_navigation', 1 )) {
          if( !empty( $previous_product )) {
          echo '<a class="previous_page" href="'.$previous_product_url.'">'.shopMakeHtmlSaf e($previous_product['product_name']).'</a>';
          }
          if( !empty( $next_product )) {
          echo '<a class="next_page" href="'.$next_product_url.'">'.shopMakeHtmlSafe($n ext_product['product_name']).'</a>';
          }
          }
          ?>



          <br style="clear:both;" />
          <table border="0" style="width: 100%;">
          <tbody>
          <tr>
          <?php if( $this->get_cfg('showManufacturerLink') ) { $rowspan = 5; } else { $rowspan = 4; } ?>
          <td width="33%" rowspan="<?php echo $rowspan; ?>" valign="top"><br/>

          <!--je suis ici pour modifier l'apercu zoomm de l'image.. en cour...-->
          <a href="<?php echo $product_full_image ?>" class="jqzoom" title="<?php echo $product_name ?>">
          <?php echo ps_product::image_tag( $product_thumb_image, '" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>
          </a>
          <!--je suis ici pour modifier l'apercu zoomm de l'image.. en cour...-->


          <?//php echo $product_image ?><br/><br/><?//php echo $this->vmlistAdditionalImages( $product_id, $images ) ?></td>
          <td rowspan="1" colspan="2">
          <h1><?php echo $product_name ?> <?php echo $edit_link ?></h1>
          </td>
          </tr>
          <?php if( $this->get_cfg('showManufacturerLink')) { ?>
          <tr>
          <td rowspan="1" colspan="2"><?php echo $manufacturer_link ?><br /></td>
          </tr>
          <?php } ?>
          <tr>
          <td width="33%" valign="top" align="left">
          <?php echo $product_price_lbl ?>
          <?php echo $product_price ?><br /></td>
          <td valign="top"><?php echo $product_packaging ?><br /></td>
          </tr>
          <tr>
          <td colspan="2"><?php echo $ask_seller ?></td>
          </tr>
          <tr>
          <td rowspan="1" colspan="2"><hr />
          <?php echo $product_description ?><br/>
          <span style="font-style: italic;"><?php echo $file_list ?></span>
          </td>
          </tr>
          <tr>
          <td><?php
          if( $this->get_cfg( 'showAvailability' )) {
          echo $product_availability;
          }
          ?><br />
          </td>
          <td colspan="2"><br /><?php echo $addtocart ?></td>
          </tr>
          <tr>
          <td colspan="3"><?php echo $product_type ?></td>
          </tr>
          <tr>
          <td colspan="3"><hr /><?php echo $product_reviews ?></td>
          </tr>
          <tr>
          <td colspan="3"><?php echo $product_reviewform ?><br /></td>
          </tr>
          <tr>
          <td colspan="3"><?php echo $related_products ?><br />
          </td>
          </tr>
          <?php if( $this->get_cfg('showVendorLink')) { ?>
          <tr>
          <td colspan="3"><div style="text-align: center;"><?php echo $vendor_link ?><br /></div><br /></td>
          </tr>
          <?php } ?>
          </tbody>
          </table>
          <?php
          if( !empty( $recent_products )) { ?>
          <div class="vmRecent">
          <?php echo $recent_products; ?>
          </div>
          <?php
          }
          if( !empty( $navigation_childlist )) { ?>
          <?php echo $VM_LANG->_('PHPSHOP_MORE_CATEGORIES') ?><br />
          <?php echo $navigation_childlist ?><br style="clear:both"/>
          <?php
          } ?>
          datagenesis.fr

          Commentaire


          • #6
            Salut à tous,

            Alors j'ai galéré à le mettre en place,
            mais j'ai réussi, je vais donc éclairer les changements que j'ai apporté pour le fonctionnement :


            J'ai insérer le code :

            <script type='text/javascript' src='templates/montemplate/js/jquery-1.3.2.min.js'></script>
            <script type='text/javascript' src='templates/montemplate/js/jquery.jqzoom1.0.1.js'></script>
            <script type="text/javascript">

            $(function() {
            $(".jqzoom").jqzoom();
            });
            </script>

            sur la page HTML de mon template de joomla.



            Au niveau de browse_1.php:

            Au niveau de la balise <div class="browseProductImageContainer">
            j'ai tout supprimer même le <no script>
            et j'ai mis :

            <a href="<?php echo $product_full_image ?>" class="jqzoom" title="<?php echo $product_name ?>">
            <?php echo ps_product::image_tag( $product_thumb_image, '" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>
            </a>

            celà marche.

            Donc si vous avez une solution alternative à ma manipulation, c'est la seule voie que j'ai trouvé pour faire fonctionner le tout. Merci de la poster.

            Commentaire


            • #7
              Re : Tutorial d'installation de jQZoom Evolution sur Virtuemart

              Bonjour,
              J'en suis au même point que datagenesis ; ça ne marche pas sur le flypage (pour ma part, le flypage2).

              De plus, j'utilise le browse3 et il n' y a pas de browseProductImageContainer...??

              Quelqu'un a-t-il trouvé la solutions ?

              Merci

              Commentaire


              • #8
                Re : Tutorial d'installation de jQZoom Evolution sur Virtuemart

                Quelque soit la methode jquery utilisée pour le zoom, elle fait appel a une class ou une id sur un href basé sur une image.
                Il y a plusieurs scripts de zoom possible, en mettre un en place n'est pas trop complexe, dis moi celui que tu veux installé, je peux t aider à en mettre un en place.
                regarde les browse sur ce lien
                sur les deux premieres categories. ( attention c est une demo de theme vm)
                Création, personnalisation, synchronisation de gestion commerciale selige.fr:http://www.selige.fr
                "Avant de critiquer un produit gratuit, pense à ce que tu aurais pu dire si tu l'avais payé"

                Commentaire


                • #9
                  Re : Tutorial d'installation de jQZoom Evolution sur Virtuemart

                  Merci pour ta réponse, selige.
                  C'est ce que je voudrais obtenir (peut-être un peu plus gros, les zooms...)

                  Je suis un peu perdue car le tuto ci-dessus parle du browse1 mais je ne peux pas faire la même chose sur la browse3... ni sur le flypage2.
                  J'aimerais seulement avoir des zooms sur les photos (page produit et non catégorie) et garder aussi "agrandir l'image" si c'est possible.
                  J'èspère être clair...

                  Commentaire


                  • #10
                    Re : Tutorial d'installation de jQZoom Evolution sur Virtuemart

                    Les images sont de la même taille sur le lien que je t ai donné.
                    pour ce que tu veux ici

                    je te fais les fichiers vite fait
                    components.zip
                    Fichiers joints
                    Dernière édition par selige à 10/02/2011, 12h50
                    Création, personnalisation, synchronisation de gestion commerciale selige.fr:http://www.selige.fr
                    "Avant de critiquer un produit gratuit, pense à ce que tu aurais pu dire si tu l'avais payé"

                    Commentaire


                    • #11
                      Re : Tutorial d'installation de jQZoom Evolution sur Virtuemart

                      Trop difficile pour moi ; malgré tes explications, je ne sais pas où mettre le script.
                      De plus dois-je faire seulement ce que tu proposes ou cela en plus du tuto ???

                      Commentaire


                      • #12
                        Re : Tutorial d'installation de jQZoom Evolution sur Virtuemart

                        Ben tu le dezippe
                        tu as donc un dossier qui s appel component, ensuite dedans tu as un dossier com_virtuemart suivi de themes...comme sur ton site.....

                        On va faire point par point
                        dans l index de ton template joomla tu mets dans le head :
                        <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\"></script>
                        <script type='text/javascript' src='templates/montemplate/js/jquery.jqzoom1.0.1.js'></script>
                        <script type="text/javascript">

                        $(function() {
                        $(".jqzoom").jqzoom();
                        });
                        </script>
                        entre les balise <head> et </head>
                        c est pour le chargement de la librairie jquery et aussi du script zoom. Attention
                        Mets le bon chemin pour le ;
                        <script type='text/javascript' src='templates/montemplate/js/jquery.jqzoom1.0.1.js'>

                        Ensuite dans le zip que je t ai donné, tu as un browse qui s appel browse_3 2-jqzoom.php
                        mais tu peux le renomer en browse_3.php
                        voilà le code :
                        <?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
                        mm_showMyFileName(__FILE__);
                        ?>

                        <div class="browseProductContainer">
                        <h2>
                        <a style="font-size:16px; font-weight:bold;" href="<?php echo $product_flypage ?>"><?php echo $product_name ?></a>
                        </h2>
                        <p ><?php echo $product_price ?></p>
                        <div style="float:left;width:90%" >
                        <div class="browseProductImage">
                        <a class="MYCLASS" href='<?php echo $product_full_image ?>' >
                        <?php echo ps_product::image_tag( urldecode($product_thumb_image), ' border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>


                        </a>

                        </div>
                        </div>

                        <br style="clear:both;" />

                        <div style="float:left;width:90%"><?php echo $product_s_desc ?></div>

                        <a href="<?php echo $product_flypage ?>">[<?php echo $product_details ?>...]</a>
                        <br style="clear:both;" />
                        <div style="float:left;width:90%;margin-top: 3px;">
                        <?php echo $product_rating ?>
                        </div>
                        <div style="float:left;width:90%;margin-top: 3px;"><?php echo $form_addtocart ?>
                        </div>
                        <br style="clear:both;" />
                        </div>


                        Ca marche simplement
                        Création, personnalisation, synchronisation de gestion commerciale selige.fr:http://www.selige.fr
                        "Avant de critiquer un produit gratuit, pense à ce que tu aurais pu dire si tu l'avais payé"

                        Commentaire


                        • #13
                          Re : Tutorial d'installation de jQZoom Evolution sur Virtuemart

                          Il va enore te falloir beaucoup de patience.
                          J'ai fait exactement ta méthode : j'ai maintenant 2 fois la même image mais pas de zoom. J'ai du râter qqchose...
                          Est-ce que je garde le css du pack jQZoom dans le css du template et à quelle place ?

                          Par contre, ce qui m'intéresse c'est d'avoir un zoom sur la page produit et non sur les images de catégories.

                          Commentaire


                          • #14
                            Re : Tutorial d'installation de jQZoom Evolution sur Virtuemart

                            Ce ne sont pas les categories mais les browse, donc la liste des produits par categorie.
                            Si tu veux afficher le zoom dans le detail des produits on parle de flypage (template/product_detail)
                            Oui le css de jqzoom doit etre integré dans ton template (joomla)
                            donc il te faut une insertion css

                            Si tu as un lien pour le site ça serait bien, car un double affichage du produit....hummmm
                            Création, personnalisation, synchronisation de gestion commerciale selige.fr:http://www.selige.fr
                            "Avant de critiquer un produit gratuit, pense à ce que tu aurais pu dire si tu l'avais payé"

                            Commentaire


                            • #15
                              Re: Tutorial d'installation de jQZoom Evolution sur Virtuemart

                              Pour une compatibilté accrue de jQuery il faut utiliser cette syntaxe

                              Code:
                              jQuery.noConflict();
                              
                               jQuery(document).ready(function(){
                              	
                                jQuery(".jqzoom").jqzoom();
                              	
                              })(jQuery);
                              Et si le script ne marche pas, il faut aussi remplacer les $ par jQuery devant les parenthése dans le javascript externe /jquery.jqzoom1.0.1.js.

                              Cordialement
                              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

                              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