Tutorial Template SobiPro : Modification Template par défaut – VCard.

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

  • Tutorial Template SobiPro : Modification Template par défaut – VCard.

    Utilisateur de SobiPro j’ai cherché lentement des Templates gratuit pour afficher mes entrées, mais en vain. Alors j’ai décidé de me coller à modifier celle par défaut pour mes besoins et de partager mon expérience avec vous.
    Pour commencer il faut crée une copie de la Template par défaut qu’on va modifier :
    Menu SobiPro/Gestionnaire d’application/Gestion des template/default/Info sur le Template
    Cliquez sur l'image pour l'afficher en taille normale

Nom : 1.PNG 
Affichages : 1 
Taille : 14,1 Ko 
ID : 1815833
    Puis on clique sur l’icône Copier en haut à droite.
    Cliquez sur l'image pour l'afficher en taille normale

Nom : 2.PNG 
Affichages : 1 
Taille : 3,5 Ko 
ID : 1815834
    On va maintenant procéder au modification de VCard, pour cela on ouvre le fichier vcard.xsl qui se trouve dans ../default/common/vcard.xsl
    Cliquez sur l'image pour l'afficher en taille normale

Nom : 3.PNG 
Affichages : 1 
Taille : 13,5 Ko 
ID : 1815835
    On étudiant un peu ce fichier on s’aperçoit que le Template prend les champs publiés et les affichent un après l’autre dans les DIV prédéfinies dans css .
    On part de principe que vous avez créé les champs suivant dans votre SobiPro :
    Titre / Logo / Région / Département / Ville / Code Postal / Téléphone
    Et on souhaite les afficher de la façon suivante :
    Cliquez sur l'image pour l'afficher en taille normale

Nom : 4.PNG 
Affichages : 1 
Taille : 13,1 Ko 
ID : 1815836
    Maintenant on repère les alias des champs dans : Configuration de section/ Gestionnaire de champs :
    Cliquez sur l'image pour l'afficher en taille normale

Nom : 5.PNG 
Affichages : 1 
Taille : 2,0 Ko 
ID : 1815837
    Titre= field_name
    Logo= field_logo
    Région = field_region
    Département = field_departement
    Ville = field_ville
    Code Postal = field_code_postal
    Téléphone = field_telephone


    Un peu du code youpiiiiiii : (pour commencer on utilise le style css par défaut, vous pouvez bien sur le modifier ou créer votre propre style)

    Les Template VCard commence toujours par la déclaration du code xml :xlst
    alors notre code ce situe entre:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:php="http://php.net/xsl">
    <xsl:output method="xml" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" encoding="UTF-8"/>
    
      <xsl:template name="vcard">
    
    <!—Notre futur code ici -->
    
    <div style="clear:both;"/>
      </xsl:template>
    </xsl:stylesheet>
    Affichage du Titre cliquable :

    Code:
    ….
    <!-- Titre -->
        <span class="spEntriesListTitle"><!—On utilise le css du titre par défaut -->
          <a>
            <xsl:attribute name="href">
              <xsl:value-of select="url" />
            </xsl:attribute>
            <xsl:value-of select="name" />
          </a>
        </span>
    <!-- fin Titre -->
    ….
    Affichage de bouton d’édition si utilisateur est connecté:

    Code:
    …
    <xsl:if test="edit_url">
          <span class="spEntriesListEditLink">
            <a>
              <xsl:attribute name="href">
                <xsl:value-of select="edit_url" />
              </xsl:attribute>
              <xsl:value-of select="php:function( 'SobiPro::Txt', 'Edit Entry' )" />
            </a>
          </span>
        </xsl:if>
    ...
    Affichage du Logo à droite de notre cadre:

    Si on veut un logo cliquable on doit d’abord définir une variable « url » juste après
    <xsl:template name="vcard">

    Code:
    <xsl:variable name="url">
          <xsl:value-of select="url" />
        </xsl:variable>
    Code:
    …
    <!-- Image Logo -->
        <div style="float:right;"><!-- aligne notre image sur la droite -->
        <a href="{$url}">
          <xsl:copy-of select="fields/field_logo/data/*" />
        </a>
        </div>
        <!-- fin Image Logo-->
    …
    Affichage de champs Région avec son Label (Région : votre Région)

    Code:
    …
    <!-- Region -->
        <div class="spField"><!—On utilise le css du titre par défaut -->
    <!—On affiche le Label suivie de : -->
          <strong><xsl:value-of select="fields/field_region/label" />:<xsl:text> </xsl:text></strong>
    <!—On va chercher la valeur de notre champ -->
          <xsl:value-of select="fields/field_region/data" /> 
        </div>
    <!-- fin Region-->
    …
    Affichage de champ Département avec son Label (Département: votre Département)
    Code:
    …
    <!-- Département-->
        <div class="spField"><!—On utilise le css du titre par défaut -->
    <!—On affiche le Label suivie de : -->
          <strong><xsl:value-of select="fields/field_departement/label" />:<xsl:text> </xsl:text></strong>
    <!—On va chercher la valeur de notre champ -->
          <xsl:value-of select="fields/field_departement/data" /> 
        </div>
        <!-- fin Département-->
    …

    Affichage de Ville avec Label + Code Postal sans Label (Ville : Lille - 59000)


    Code:
    …
    <!-- Ville + Code Postal-->
         <div class="spField"><!—On utilise le css du titre par défaut -->
    <!—On affiche le Label Ville suivie de : -->
           <strong><xsl:value-of select="fields/field_ville/label" />:<xsl:text> </xsl:text></strong>
    <!—On va chercher la valeur de notre champ Ville -->
           <xsl:value-of select="fields/field_ville/data" />
    <!—On affiche » – «  -->
    <xsl:text> - </xsl:text>
    <!—On va chercher la valeur de notre champ Code postal -->
           <xsl:value-of select="fields/field_code_postal/data" />
         </div>
         <!-- fin Ville + Code Postal-->
    ...
    Affichage de numéro de Téléphone avec le Label (Téléphone : 010203040506)

    Code:
    ...
    <!-- Telephone-->
        <div class="spField"><!—On utilise le css du titre par défaut -->
    <!—On affiche le Label Téléphone suivi de : -->
          <strong><xsl:value-of select="fields/field_telephone/label" />:<xsl:text> </xsl:text></strong>
    <!—On va chercher la valeur de notre champ -->
          <xsl:value-of select="fields/field_telephone/data" />
        </div>
    <!-- fin Telephone-->
    ...
    Et voilà notre Template VCard est fini il suffit juste de placer le code entre les balises précisé au début,
    cela donne :
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:php="http://php.net/xsl">
    <xsl:output method="xml" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" encoding="UTF-8"/>
    
      <xsl:template name="vcard">
        <xsl:variable name="url">
          <xsl:value-of select="url" />
        </xsl:variable>
        <!-- Titre -->
        <span class="spEntriesListTitle">
          <a>
            <xsl:attribute name="href">
              <xsl:value-of select="url" />
            </xsl:attribute>
            <xsl:value-of select="name" />
          </a>
        </span>
        <!-- fin Titre -->
        
        <xsl:if test="edit_url">
          <span class="spEntriesListEditLink">
            <a>
              <xsl:attribute name="href">
                <xsl:value-of select="edit_url" />
              </xsl:attribute>
              <xsl:value-of select="php:function( 'SobiPro::Txt', 'Edit Entry' )" />
            </a>
          </span>
        </xsl:if>
        
        <!-- Image Logo -->
        <div style="float:right;">
        <a href="{$url}">
          <xsl:copy-of select="fields/field_logo/data/*" />
        </a>
        </div>
        <!-- fin Image Logo-->
        
        <!-- Region -->
        <div class="spField">
          <strong><xsl:value-of select="fields/field_region/label" />:<xsl:text> </xsl:text></strong>
          <xsl:value-of select="fields/field_region/data" />
        </div>
        <!-- fin Region-->
        
        <!-- Departement-->
        <div class="spField">
          <strong><xsl:value-of select="fields/field_departement/label" />:<xsl:text> </xsl:text></strong>
          <xsl:value-of select="fields/field_departement/data" />
        </div>
        <!-- fin Departement-->
        
        <!-- Ville + Code Postal-->
         <div class="spField">
           <strong><xsl:value-of select="fields/field_ville/label" />:<xsl:text> </xsl:text></strong>
           <xsl:value-of select="fields/field_ville/data" /><xsl:text> - </xsl:text>
           <xsl:value-of select="fields/field_code_postal/data" />
         </div>
         <!-- fin Ville + Code Postal-->
        
        <!-- Telephone-->
        <div class="spField">
          <strong><xsl:value-of select="fields/field_telephone/label" />:<xsl:text> </xsl:text></strong>
          <xsl:value-of select="fields/field_telephone/data" />
        </div>
        <!-- fin Telephone-->
    
    
      <div style="clear:both;"/>
      </xsl:template>
    </xsl:stylesheet>

    Un peu d’explication maintenant sur les fonctions utilisées :


    Affiche un texte :
    <xsl:text> Le Texte de votre choix</xsl:text>

    Affiche le Label de champ
    <xsl:value-of select="fields/ALIAS_DE_VOTRE_CHAMP/label" />

    Affiche la valeur de votre champ
    <xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP /data" />

    Affiche une image
    <xsl:copy-of select="fields/ ALIAS_DE_VOTRE_CHAMP /data" />

    Pour aller plus loins:

    Affichage d’une URL
    Code:
    <a>
        <xsl:attribute name="href">
          <xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP_URL /data/a/@href" />
        </xsl:attribute>
        <xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP _URL/data" />
      </a>
    Affichage avec condition :
    Code:
    <xsl:if test="fields/ ALIAS_DE_VOTRE_CHAMP_URL /data = 'VALEUR_CONDITION'">
        <xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP_URL /data" />
      </xsl:if>
    Pour un nœud de texte généré de sorti sans aucun échappement ajouter :
    disable-output-escaping="yes"
    Par exemple :
    Code:
    <xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP /data" disable-output-escaping="yes"/>
    A vous maintenant de modifier ce code selon vos besoins.
    Pour un effet visuelle plus rendu il faut créer votre propre css.

    Pour une demande de création de template SobiPro contactez moi par MP.

    Je prépare un Tuto pour la modification de "Vu Detail" et "css"
    Dernière édition par rems02 à 03/07/2012, 13h37
    Cotation des pièces et billets
    http://www.argusnumismatique.com

  • #2
    Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

    Je suis impatient de voir la suite... Merci pour le boulot.

    Commentaire


    • #3
      Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

      merci pour ce génial tutorial, je sais que ce n'est pas le lieu de dire ca mais je suis épuisé a force de rechercher la solution : j'ai un problème au niveau du composant review & rates dans sobipro 1.0.6 Template SobiResto .j"ai vu qu'il y avait du code a ajouter dans le vcard et dans le detailed view.
      je crois que ce code est celui la : <?php echo $plugins['reviews']; ?>

      mais j'ai ajouté a mainte reprise toujours pas de solution.
      le plugin est bien activé mais au niveau du front-end ca affiche"desolé ... nous n'avons pas pu traiter votre demande.."

      Commentaire


      • #4
        Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

        Bonjou,
        Possible avoir le lien pour examiner le problème?
        Cotation des pièces et billets
        http://www.argusnumismatique.com

        Commentaire


        • #5
          Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

          Bravo pour cet article!

          Je galère comme pas 2 pour faire évoluer l'aspect d'affichage de sobipro.
          J'ai une question :
          Dans le template par défaut, on a :
          1 - un lien (dans un menu que j'ai ajouté) pour avoir la liste de catégorie
          2 - on clique sur la catégorie et on a la liste des éléments de la catégorie (juste le titre de l'élément)
          3 - on clique sur un élément et on obtient le détail.

          J'aimerai en 2 avoir la liste des articles mais directement avec leur détail.
          Je voudrai en fait modifier l'affichage de cette liste pour y mettre en plus les informations liés à ces éléments.

          Par exemple :
          1 - je clique pour avoir la liste des catégories
          2 - je clique sur Boulangerie
          3 - ici je voudrais toutes mes boulangeries avec leur photo, leur adresse, etc ... Pas uniquement les noms des boulangeries et devoir cliquer dessus pour avoir le détail.

          Avez vous une idée?

          Autre question subsidiaire encore plus fort : sur ma page d'accueil, je serai le roi sir j'avais une combo avec la liste des catégories....
          <select>
          Boulangerie,
          ...
          </select>

          Un rêve accessible?
          Bonne journée à tous

          jerome

          Commentaire


          • #6
            Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

            Bonjour,

            Merci pour ce tuto, ça m'a beaucoup aidée. Est ce que tu as pu avancer sur la suite (modification de "Vu Detail" et "css" ) ?

            hbhf

            Commentaire


            • #7
              Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

              Envoyé par gropapa Voir le message
              Bravo pour cet article!

              Je galère comme pas 2 pour faire évoluer l'aspect d'affichage de sobipro.
              J'ai une question :
              Dans le template par défaut, on a :
              1 - un lien (dans un menu que j'ai ajouté) pour avoir la liste de catégorie
              2 - on clique sur la catégorie et on a la liste des éléments de la catégorie (juste le titre de l'élément)
              3 - on clique sur un élément et on obtient le détail.

              J'aimerai en 2 avoir la liste des articles mais directement avec leur détail.
              Je voudrai en fait modifier l'affichage de cette liste pour y mettre en plus les informations liés à ces éléments.

              Par exemple :
              1 - je clique pour avoir la liste des catégories
              2 - je clique sur Boulangerie
              3 - ici je voudrais toutes mes boulangeries avec leur photo, leur adresse, etc ... Pas uniquement les noms des boulangeries et devoir cliquer dessus pour avoir le détail.

              Avez vous une idée?

              Autre question subsidiaire encore plus fort : sur ma page d'accueil, je serai le roi sir j'avais une combo avec la liste des catégories....
              <select>
              Boulangerie,
              ...
              </select>

              Un rêve accessible?
              Bonne journée à tous

              jerome
              Tous est possible, actuellement je suis un peu surbooké mais envoie moi un lien pour mieux comprendre implantation actuel.
              Cotation des pièces et billets
              http://www.argusnumismatique.com

              Commentaire


              • #8
                Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

                Envoyé par hbhf Voir le message
                Bonjour,

                Merci pour ce tuto, ça m'a beaucoup aidée. Est ce que tu as pu avancer sur la suite (modification de "Vu Detail" et "css" ) ?

                hbhf
                pour le css pas de problème il suffit de respecter le standard css.
                pour la Vu Detaill suit le même tuto mais remplace field/ par entry/field

                exemple pour affiché le libellé:
                VCard
                Code:
                <xsl:value-of select="fields/ALIAS_DE_VOTRE_CHAMP/label" />
                Vu Detail
                Code:
                <xsl:value-of select="entry/fields/ALIAS_DE_VOTRE_CHAMP/label" />
                Désolé mais les prochain tuto prennent un peut de retard
                un peu surbooké en ce moment
                Cotation des pièces et billets
                http://www.argusnumismatique.com

                Commentaire


                • #9
                  Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

                  Bonjour,
                  Toujours disponible pour les templates sobirpo ?
                  Merci

                  Commentaire


                  • #10
                    Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

                    Envoyé par Axpal Voir le message
                    Bonjour,
                    Toujours disponible pour les templates sobirpo ?
                    Merci
                    Ils s'agit de quoi exactement ?
                    Pouvez vs envoyer le cahier des charges
                    Merci
                    Cotation des pièces et billets
                    http://www.argusnumismatique.com

                    Commentaire


                    • #11
                      Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

                      Merci pour ce tutoriel par contre je rencontre un blocage. Dans mon fichier vcard.xsl, j'ai ajouté le code suivant :
                      Code HTML:
                      <div><xsl:copy-of select="fields/field_logo/data/*" /></div>
                      mais le logo de mes entrées ne s'affiche toujours pas. (Je précise mon champ s'appelle bien field_logo)

                      J'ai aussi essayé de boucler sur tous les champs
                      Code HTML:
                      <xsl:for-each select="fields/*">...</xsl:for-each>
                      mais cela n'affiche rien. Il y a peut-être une option à activer?
                      Est-ce que quelqu'un aurait une piste?
                      Création de sites internet et bloggeur web : http://www.titchagcreation.com.
                      Dispo sur twitter aussi : Titchag'Création sur Twitter
                      Et aussi utilisateur de Joomla!

                      Commentaire


                      • #12
                        Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

                        Désolé. Entretemps, j'ai trouvé une réponse. Si ça peut aider quelqu'un, dans les paramètres des champs (dans l'administration du composant Sobipro), il faut indiquer que le champ est disponible dans les vues Détails et VCard.
                        Création de sites internet et bloggeur web : http://www.titchagcreation.com.
                        Dispo sur twitter aussi : Titchag'Création sur Twitter
                        Et aussi utilisateur de Joomla!

                        Commentaire


                        • #13
                          Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

                          Bonjour,

                          de mon coté je souhaiterai que les textes des champs URL soit remplacer par "pour en savoir plus" plutôt que l'url en clair

                          Je supposais qu'il faut modifier cette boucle :
                          <xsl:if test="edit_url">
                          <span class="spEntriesListEditLink">
                          <a>
                          <xsl:attribute name="href">
                          <xsl:value-of select="edit_url" />
                          </xsl:attribute>
                          <xsl:value-of select="php:function('SobiPro::Txt', 'Edit url' )" />

                          </a>
                          </span>
                          </xsl:if>
                          <xsl:for-each select="fields/*">

                          Je pensais remplacer Edit url par mon texte mais aucun changement..

                          merci de me filer un petit coup de pouce

                          Commentaire


                          • #14
                            Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

                            Envoyé par valdevillard Voir le message
                            Bonjour,

                            de mon coté je souhaiterai que les textes des champs URL soit remplacer par "pour en savoir plus" plutôt que l'url en clair

                            Je supposais qu'il faut modifier cette boucle :
                            <xsl:if test="edit_url">
                            <span class="spEntriesListEditLink">
                            <a>
                            <xsl:attribute name="href">
                            <xsl:value-of select="edit_url" />
                            </xsl:attribute>
                            <xsl:value-of select="php:function('SobiPro::Txt', 'Edit url' )" />

                            </a>
                            </span>
                            </xsl:if>
                            <xsl:for-each select="fields/*">

                            Je pensais remplacer Edit url par mon texte mais aucun changement..

                            merci de me filer un petit coup de pouce
                            Je vais regarder ça de plus prêt.
                            en attendant essayez de vides le cache du navigateur et joomla apres la modification
                            merci
                            Cotation des pièces et billets
                            http://www.argusnumismatique.com

                            Commentaire


                            • #15
                              Re : Tutorial Template SobiPro : Modification Template par défaut – VCard.

                              J'ai vidé les deux. Point de changement !

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X