Bienvenue, Invité
Merci de vous identifier ou de vous inscrire.    Mot de passe perdu?

Template tutorial
(1 lecteur(s)) (1) Invité(s)
Aller en basPage: 1
SUJET:

Template tutorial

#82
Geronimo
Platinum Boarder
Messages: 807
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur

Template tutorial

Il y a 8 Années, 11 Mois
Karma: 3  
Bonjour,

Pour la creéation de template, suivre le post suivant sur le forum US, certains membres de ce forum préparent déja un tutorial (wiki et fichier PDF).

www.magentocommerce.com/boards/viewthread/215/
 
L'administrateur a désactivé l'accès public en écriture.
#83
admin
Moderator
Messages: 116
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur

Re:Template tutorial

Il y a 8 Années, 11 Mois
Karma: 12  
Génial ! Dès que ce sera fini, il faudra trouver un traducteur. Je connais déjà quelques personnes qui sont volontaires.
 
Vive le ecommerce open source !
L'administrateur a désactivé l'accès public en écriture.
#84
neurone
Senior Boarder
Messages: 41
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur

Re:Template tutorial

Il y a 8 Années, 11 Mois
Karma: 5  
Traduction du post :

Apres qq temps avec Magento et apres la phase d'euphorie, me voila au boulot : les templates.

Voilà comment je procède :

Pour le moment j'utilise deux applications :
- Adobe Dreamweaver (peut être remplacé par n'importe quelle application avec mode design)
- Firefox + Firefox Web Developer Plugin (Le prendre a l'adresse suivante: chrispederick.com/work/web-developer/).

Etape 1: Lancer Adobe Dreamweaver & Tager le fichier.phtml

/*--------------------------------------------------------------------------------------------------------*/
Note: J'ai trouvé TRES utile d'utiliser le hack de Scott pour Dreamweaver.
Voir le post du wiki a cette adresse: www.magentocommerce.com/wiki/Opening-PHTML-Files-in-Dreamweaver

Cela vous permet d'ouvrire les fichier .phtml en mode design.
/*--------------------------------------------------------------------------------------------------------*/

Ok, cela va être rapide et pas très propre.
Nous avons des tag que nous pouvons facilement identifier à partir de Firefox.
Ouvrez dans dreamweaver les fichiers du répertoire des templates qui se trouve ici :
/app/design/frontend/default/default/template/

Vous trouverez, quasiment, dans ce repertoire tous les fichiers du template par default.
Vous allez avoir bcp de dossier Callouts/Catalog/Checkout/etc...
Ils correspondent tous au template de Magento et de ces modules.
Pour le moment, nous allons juste nous voulons juste "nommer" la première page de façon à identifier les champs sur votre navigateur internet.
Nous allons voir cela dans une minute.

Donc, pour le template général, allons dans le répertoire :
/app/design/frontend/default/default/template/page
Nous allons y trouver les fichiers suivant:
Code :

-1columns.phtml
-2columns-left.phtml
-2columns-right.phtml
-3columns.phtml
-dashboard.phtml
-onecolumn.phtml



* Toutes les pages du système utilisent une de ces page template*

La première page utilise 3columns , les pages catalogue 2columns ou 1column pour la page "Mon pannier (My Cart page)".
Tout ces modules tirent leur structure générale de ces fichiers.
Nous allons maintenant les nommer. Je sais que nous pouvons juste regarder les pages et dire instantanément si l'on voit deux ou trois colonnes. Mais sauvons notre cerveau pour du vrai travail et nommons les pages, vous me remercierez plus tard.
Voila comment j'ai fait :

Juste apres le tag <body> de toutes ces pages, j'ai mis le nom du template dans le tag header.

Exemple:
Dans 2columns-right.phtml
Ligne 51:

Code :

<body>
      <h2>THIS IS 2COLUMNS-left.phtml</h2>
             <!-- [start] header -->
              <div class="header">



Le faire dans toutes les pages du fichier. En nommant toutes ces pages, en surfant simplement sur Magento je peux savoir immediatement, quel template la page où je suis, utilise.
Après avoir nommé toutes les pages générales, vous pouvez faire de même avec les fichiers .phtmls des modules. Il suffit simplement de mettre un tag au debut de chaque page (facile a supprimer par la suite).
Un exemple sur la page:

picasaweb.google.com/nlewisinc/Magento/p...#5106203815382630354

Nous savons donc que la page panier appelle upsells.phtml, shipping.phtml et qq autres.
Elles sont toutes localisées dans ce répertoire :
/app/design/frontend/default/default/template/checkout/cart/

Assez facile

Etape 2: Utiliser FireFox’s Web Developer Plugin pour Identifier les elements CSS.
Vous trouverez le module ici: chrispederick.com/work/web-developer/.

Dans la première étape nous avons nommé chaque .phtmls et nous savons donc quels fichier à éditer. Mais pour vraiment changer le design selon vos besoins nous devons aussi identifier les divs, classes, etc ... CSS.
Une fois le module firefox installé, cliquer sur “Information button” --> Display Id & Class Details et le pluggin vous dira la classe et l'id de chaque élément de la page.

Voir le screenshot:
picasaweb.google.com/nlewisinc/Magento/p...#5106214050289696786

Nous n'avons plus qu'à utiliser la barre de nouveau en cliquant sur Click CSS->View Style Information.
En cliquand sur chaque element de la page nous aurons les éléments CSS de l'endroit cliquez.
Voir le screen:
picasaweb.google.com/nlewisinc/Magento/p...#5106214041699762178

Le cadre rouge porte sur l'élément sélectionné. cool, non ?

Maintenant, au point ou j'en suis, j'ai remarqué que la plupart des CSS sont dans le dossier /skin/frontend/default/default/css/
Le squelette du site se trouve dans boxes.css et tout les éléments CSS se trouvent dans des petits groupes identifiés dans styles.css et listés dans boxes.css.
J'expliquerais cela dans un deuxième temps.

En espérant vous avoir aidé à mieux comprendre pour le moment.nnMessage édité par : fredquie, à : 04 09 2007 21:27:40
 
L'administrateur a désactivé l'accès public en écriture.
#88
Geronimo
Platinum Boarder
Messages: 807
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur

Re:Template tutorial

Il y a 8 Années, 11 Mois
Karma: 3  
Bonjour,

Il y a aussi le wiki : www.magentocommerce.com/wiki/Designing-for-Magento/
par A.Piotrowski (Lento.pl)

Sur un autre post il exlique (j'ai pas essayé) l'installation de lightbox :
www.magentocommerce.com/boards/viewthread/95/nnMessage édité par : Allande, à : 05 09 2007 13:26:16
 
L'administrateur a désactivé l'accès public en écriture.
#98
neurone
Senior Boarder
Messages: 41
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur

Re:Template tutorial

Il y a 8 Années, 11 Mois
Karma: 5  
Tous ceci étant encore en cours de réalisation, je pense qu'il serait opportun une fois les docs finies de les traduire ou de s'en servir pour faire notre propre tuto en francais.
Pour ma part j'ai bien étudié le système des templates, je dirais que c'est déroutant au premier abord mais qu'on s'y fait et qu'une fois l'habitude prise, ça peux être trés puissant.
Un conseil pour le moment, faites du CSS

PS : merci fredquie pour la mise en page et la retouche de ma traduction

Message édité par : neurone, à : 06 09 2007 14:03:00nnMessage édité par : fredquie, à : 06 09 2007 17:00:55
 
L'administrateur a désactivé l'accès public en écriture.
#102
neurone
Senior Boarder
Messages: 41
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur

Re:Template tutorial

Il y a 8 Années, 11 Mois
Karma: 5  
Nouveau post, nouvelle traduction ;):

Salut a tous, une mise a jour rapide de mon dernier post pour vous expliquer mes progrès avec les template de Magento.
Ca commence à venir. Je mettrais ces notes sur un Wiki et ferrait une documentation plus détaillée. Je suis actuellement au boulot (Note de neurone : moi aussi ;) )Donc je serrais bref. J'en dirais plus bientôt ...

LAYOUT / STRUCTURE DE LA PAGE

Le squelette est définit par Default.XML. qui se trouve dans
/app/design/frontend/default/layout/core/

Cela nous dit deux choses:
1.) C'est définitivement le squelette par défaut de votre boutique.
Par défaut Magento utilise 3 colonnes, donc il y est définit 3columns.phtml (que vous trouverez dans le répertoire template/page/):

Code :

<layoutUpdate>

    <block type="page/html" name="root" output="toHtml">
        <action method="setTemplate"><template>page/3columns.phtml</template></action

>

si vous voulez changer votre boutique en deux colonne, vous devez juste changer la ligne ci dessus pour y mettre le .phtml que vous voulez utiliser.
Par exemple, si je change la boutique en 2 colonne, je vais changer cette la ligne ci dessus par celle la :

Code :

<action method="setTemplate"><template>page/2columns-right.phtml</template></action>


2.) Default.xml créer les blocks de contenue remplis par des applications/modules pour afficher votre .phtmls.

Commençons par regarder notre fichier 3column.phtml. Nous y découvrirons une multitude de “ChildHtml”:

Code :

<?=$this->getChildHtml('header')?>
        </div><!-- [end] header --><!-- [start] middle --><div class="main-container">
        <div id="main" class="col-3-layout">
       
        <?=$this->getChildHtml('breadcrumbs')?>
            <!-- [start] left -->
            <div class="col-left side-col">
        
                <?=$this->getChildHtml('store')?>
                <?=$this->getChildHtml('left')?>
            </div>
            <!-- [end] left -->



Chacune de ces références ramène vers les block de contenue définit votre Default.xml et par conséquent le fichier Module.xml . Vous y apercevrez un « containers » pour la colonne droite, la colonne gauche ou encore d’autre zone standard. Regardez ça :
/app/design/frontend/default/core/default.xml


Code :

<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>

        <block type="core/text_list" name="left" as="left"/>

        <block type="core/messages" name="global_messages" as="global_messages"/>
        <block type="core/messages" name="messages" as="messages"/>

        <block type="core/text_list" name="content" as="content"/>

        <block type="core/text_list" name="right" as="right">



Donc basiquement, votre Defaukt.xml créer des blocks de données, votre .Phtml affiche ces données ou vous le voulez.

Même par la suite vos modules peuvent mettre a jour vos block de contenue avec du contenue spécifique. Par exemple, vous remarquerez que si vous allez sur la page d’accueil et cliquer sur catégorie, le block de comparaison apparaît …

Ces block sont disponible a partir de leurs fichiers initLayout.xml specifique.
Ces initLayout.xml mettent a jour votre squelette par défaut par des block plus specifique.
Pour que la box de comparaison apparaisse, il est définit un code dans la page de la boutique que l’on trouve donc ici : layout/catalog/initLayout.xml

En voici le code
Code :


<layoutUpdate>
    <reference name="top.menu">
        <block type="catalog/navigation" name="catalog.topnav">
            <action method="setTemplate"><template>catalog/navigation/top.phtml</template></action>
        </block>
    </reference>
  
    <reference name="right">
        <block type="catalog/product_compare_sidebar" name="catalog.compare.sidebar">
            <action method="setTemplate"><template>catalog/product/compare/sidebar.phtml</template></action>
        </block>
    </reference>


On comprend bien cela en lisant le code. <layoutUpdate> met a jour votre code avec de nouveau block.

Comment sait il ou mettre les nouveaux blocks ?
Rappeler vous donc que vous avez définit dans votre fichier default.xml les block pour la colonne de droite, de gauche, etc …
Donc quand vous faite codé <reference name = “right">, vous donnez a votre système l’ordre d’insérer le block dans la colonne de droite que vous apercevez dans votre boutique.
Ca donne aussi le template (l’apparence) de ce nouveau block, dans l’exemple au dessus le système compare la nouvelle box avec celle de son propre template (que vous trouvez je vous le rappel dans votre répertoire de template : catalog/product/compare/sidebar.phtml ).

Je vais essayé de mieux vous définir cela par al suite. Juste pour aider ceux qui veulent essayer, cela donne basiquement qq chose comme ca :

core/Default.xml ---> Defines “Block containers” (left, right, content, footer) pleine de vos donnée que le .phtmls utilise

Les fichiers Module .xml’s ----> Met a jour votre boutique avec le nouveau blocks

Template .phtmls ---> créer le désigne de l’application et définit la place exacte ou vous voulez placer ce block

En espérant que cela aide.
 
L'administrateur a désactivé l'accès public en écriture.
#103
admin
Moderator
Messages: 116
graphgraph
Personne n'est hors ligne Cliquez ici pour voir le profil de cet utilisateur

Re:Template tutorial

Il y a 8 Années, 11 Mois
Karma: 12  
Salut Neuron,
Bravo pour ton premier retour sur les tutos.
J'ai déjà prévu de mettre en place un wiki pour ce type d'info, mais le temps me manque pour avancer là dessus.
 
Vive le ecommerce open source !
L'administrateur a désactivé l'accès public en écriture.
Revenir en hautPage: 1
Modérateur: admin, Gabriiiel, ILOA, zuiko