Page 1 sur 2

documentation sur le templating

MessagePublié: 03 Août 2010, 17:13
par Marc
Bonjour à la nouvelle communauté grandissante !

J'étudie actuellement différentes solutions de e-commerce pour la réalisation de 2 projets.
J'ai moi-même réalisé une solution en 2007. Son développement et sa maintenance sont extrêmement "chronophage".
Je souhaite aujourd'hui investir mon temps en intégrant une communauté et en contribuant au développement d'un projet communautaire.

Opencart est intéressant car simple à déployer et plutôt accessible aux petits commerçants (documentation en ligne en français, forum réactif, etc.) Mais surtout il me semble y avoir dans ce projet un esprit respectant la philosophie du logiciel libre et des développements communautaires, ce que je recherche.

Cependant j'ai encore de nombreuses interrogations, notamment sur le templating.
Existe-t-il de la documentation sur la création de thèmes originaux (en français de préférence, en anglais à défaut) :
- fonctions et données disponibles sur chaque template
- ordre de chargement des fichiers
- méthodes de travail pour garder la compatibilités avec les futurs mises à jour
- fonctionnement de la structure (1, 2, 3 colonnes, header, footer,...)

Est-il possible de sortir du fonctionnement 3 colonnes standard ?
Lors de mon test, j'ai désactivé tous les modules de la colonne de droite ou les ai déplacés à gauche. Il en résulte une colonne vide à droite (cf. fichier joint). Mon souhait serait plutôt de voir la colonne du milieu prendre toute sa place...

Dans l'immédiat, je cherche :
- comment sortir du modèle 3 colonnes
- où sont définis les header, colonnes de gauche, de droite et le footer


En vous remerciant par avance du temps consacré à lire ma prose...

opencart_2colonnes.png
vue "2 colonnes"
opencart_2colonnes.png (99.3 Kio) Consulté 20606 fois

Re: documentation sur le templating

MessagePublié: 04 Août 2010, 01:02
par Imaxine
mfrerebeau a écrit:Bonjour à la nouvelle communauté grandissante !
Je souhaite aujourd'hui investir mon temps en intégrant une communauté et en contribuant au développement d'un projet communautaire.
Bonjour et bienvenue à toi,
Nous sommes heureux d'accueillir un nouveau membre susceptible d'apporter à la communauté ses connaissances.
mfrerebeau a écrit:Cependant j'ai encore de nombreuses interrogations, notamment sur le templating.
Existe-t-il de la documentation sur la création de thèmes originaux (en français de préférence, en anglais à défaut) :
- fonctions et données disponibles sur chaque template
- ordre de chargement des fichiers
- méthodes de travail pour garder la compatibilité avec les futurs mises à jour
- fonctionnement de la structure (1, 2, 3 colonnes, header, footer,...)
Il n'existe pas de documentation que je sache, mais la création de template est très simple à appliquer puisque tout se passe dans le répertoire "catalog/view/theme/default".

> default (nom du template)
----------/image (répertoire où se situe les images nécessaires au template)
----------/stylesheet (répertoire contenant la feuille de style du template)
----------/template (répertoire contenant les dossiers des fichiers du template)

Dès que l'on crée un template on le nomme comme on le désire ex. : mobilier, puis l'on modifie les fichiers situés dans les répertoires ci-dessus énoncés pour ce nouveau template et l'on place ceux-ci dans un répertoire que l'on nommera "mobilier" que l'on chargera dans le répertoire "catalog/view/theme/", ce qui donnera ceci comme arborescence :

catalog/view/theme/default (template par défaut)
---------------------------------/image
---------------------------------/stylesheet
---------------------------------/template
catalog/view/theme/mobilier (template que l'on aura créé)
----------------------------------/image (répertoire des images du template que l'on aura créé)
----------------------------------/stylesheet (répertoire de la feuille de style du template que l'on aura créé)
----------------------------------/template (répertoire des fichiers du template que l'on aura modifié)

Il est évident que seul le nom des fichiers doit être identique aux noms des fichiers par défaut.

Ensuite il faudra aller dans le back office > Système > Paramètres > Onglet "Boutique" > Modéle graphique : pour appliquer le template en cliquant sur le menu déroulant où figureront tous les templates que l'on aura chargé sur son serveur.

C'est aussi simple que cela.

De ce fait tu pourras sortir totalement du format standard puisque tu modifies tous les éléments de ton template sans altérer la base initiale qui se situe dans le répertoire "default" ainsi que dans les répertoires parents.

Espérant que mon explication ai été assez explicite et quelle a pu te fournir tous les renseignements que tu désirait.

Re: documentation sur le templating

MessagePublié: 04 Août 2010, 08:27
par Marc
Bonjour

Merci de cet accueil chaleureux.

Imaxine a écrit:De ce fait tu pourras sortir totalement du format standard puisque tu modifies tous les éléments de ton template sans altérer la base initiale qui se situe dans le répertoire "default" ainsi que dans les répertoires parents.

Cette information me donne plein espoir d'obtenir ce que je souhaite. :D

Imaxine a écrit:Espérant que mon explication ai été assez explicite et quelle a pu te fournir tous les renseignements que tu désirait.

En fait, j'ai déjà fait tout ce que tu indiques dans ta réponse. Et jusque là ça va... :)

J'ai cependant bien apprécié le soin que tu as apporté à ta réponse pour qu'elle soit claire et détaillée. Je pense d'ailleurs que cela ne sera pas inutile à d'autres (je n'en ai pas vu de similaires dans le forum).
Aussi, je m'efforcerai de reporter ici, avec le même soin, les solutions que je trouverai ou que d'autres me fournirons.

Pour le moment, je cherche à comprendre son définit les header, footer et les 3 colonnes insérées dans chaque modèles que j'ai ouvert dans le dossier "catalog/view/theme/mon_theme/template".

J'ai aussi remarqué que toutes les références à des images, et divers fichiers ressources, était fait avec un chemin relatif par rapport à la racine web et non par rapport au thème :
Code: Tout sélectionner
<img src="catalog/view/theme/default/image/category.png" alt="" />

Je comprends, dans cet exemple, que ce sont les images du thème par défaut qui sont utilisées, et non celle de mon_thème.
Je suppose qu'il s'agit là d'une sorte de mécanisme de "surcharge" permettant d'avoir un thème "light" lorsque rien ne change par rapport au thème par défaut, non ?

=> Pour valider mon hypothèse, j'ai supprimé les images dans mon_thème : cela confirme mon idée.
Pour aller plus loin, j'ai supprimé aussi certains templates (.../template/module/information.tpl) : tout fonctionne toujours...
Est-ce qu'il existe donc un véritable système de surcharge permettant de faire son thème avec comme base default ?
Si cela est vrai, on retrouve une des forces de magento (surcharge et modification sans risque), la simplicité en plus ! :D

... Mais peut-être n'est-ce qu'un effet du cache ?!
Je n'ai pas encore trouvé :
  • comment le désactiver
  • ni comment le vider

Donc encore un grand merci pour cet accueil et ces réponses rapides !
Je continue à chercher et espère bientôt compléter ce post avec des réponses complémentaires.
A bientôt

Re: documentation sur le templating

MessagePublié: 04 Août 2010, 08:43
par Imaxine
mfrerebeau a écrit:Pour le moment, je cherche à comprendre sont défini les header, footer et les 3 colonnes insérées dans chaque modèles que j'ai ouvert dans le dossier "catalog/view/theme/mon_theme/template".
Le header, colum-left, column_right, home (équivalent de index, chez d'autres) et footer se trouvent dans le dossier : catalog/view/theme/default/template/common.

Sujet intéressant et utile à la compréhension.

Re: documentation sur le templating

MessagePublié: 05 Août 2010, 06:24
par Marc
Bonjour à tous,

Je viens de m'apercevoir que je n'ai pas mis à jour ma page hier et je n'avais pas vu la réponse de Imaxine...
J'ai donc supprimé mon édition post message qui faisait doublons :P
Toutes mes excuses Imaxine, et merci pour ton retour auquel je ne m'attendais pas si rapidement :oops:

En une journée, j'ai réalisé la même avancée sur opencart qu'en 2 semaines sur magento... :D
Le système de surcharge est bien conçu et simple à comprendre !
Je n'ai pas terminé tous les tests (il me reste prestashop à étudier) mais je sais déjà qu'opencart remporte mon adhésion aux précédents tests : c'est bien développé (code propre), bien conçu (logique et intuitif) et donc facile à prendre en main... De plus ça reprend certaines logiques de mes précédents projets (développements spécifiques).
De plus l'accueil et les confirmations apportées par Imaxine m'ont permis de valider ma compréhension globale du projet et d'aller d'autant plus vite.

Il me reste quelques interrogations sur l'évolution des templates (et d'autres ne concernant en rien les templates que je posterai dans une autre salon) :

La logique, que j'ai constatée sur le fonctionnement des template dans la version 1.4.7, est la suivante : "modèles spécifique appelle éléments du layout"
  1. Une URL est demandé par la machine client, le moteur l'interprète
  2. Le modèle spécifique (ce qui doit s'afficher dans la colonne du milieu) correspondant est appelé directement par le moteur
  3. Le modèle central appelle les différents "morceau" de la page (header, footer, colonnes gauches et droites, etc., présents dans le dossier .../template/common)

Pour effectuer des tests et observer comment d'autres faisaient leurs modèles, j'ai téléchargé tous les thèmes présents dans la version française du site opencart, et librement utilisables : aucun ne fonctionne avec la 1.4.7.
J'ai étudié le problème de plus près et j'en ai conclue que c'était un problème de compatibilité avec la structure des modèles. Elle semble fonctionner différemment : "layout appelle modèle spécifique"
  1. Une URL est demandé par la machine client, le moteur l'interprète
  2. Le modèle général (appelé "layout.tpl" dans le dossier common) est chargé
  3. Le modèle layout.tpl appelle les différents "morceau" de la page (header, footer, colonnes gauches et droites, présents dans le dossier common) et le modèle spécifique correspondant à l'URL demandé.
La conséquence sur la 1.4.7 est l'affichage de la page demandé sans le design (header, footer, etc.) qui ne sont appelés dans aucun des "modèles spécifiques".

Mes questions sont les suivantes :
  1. Mon raisonnement est-il juste ? Si non, où est-ce que je me suis trompé ?
  2. A partir de quelle version d'Opencart le système de templating est-il passé de la méthode "layout appelle modèle spécifique" à la méthode "modèles spécifique appelle éléments du layout" ?
  3. Pour convertir un modèle d'opencart 1.x.x en 1.4.7 suffit-il :
    • D'ajouter l'appel aux différents morceaux du layout dans chaque modèle ?
    • Et d'ajouter au header le header HTML et au footer les fermetures de fin du HTML ?

Re: documentation sur le templating

MessagePublié: 05 Août 2010, 06:51
par Imaxine
Ce fil de discussion pourra peut être apporter un verre d'eau à ton moulin.

Re: documentation sur le templating

MessagePublié: 05 Août 2010, 12:10
par Marc
Merci pour tes réponses à toute heure ;)

Mais soit je n'ai pas tout compris, soit ils parlent d'un problème assez spécifique... Cela ne me semble pas trop répondre à mes questions. :roll:

Quelqu'un qui suivrait les évolutions d'opencart et aurait déjà mis à jour sa version (et par conséquent son layout) peut-il me donner une réponse ou une piste à suivre ?

Re: documentation sur le templating

MessagePublié: 28 Août 2010, 14:49
par wotake
Bonjour à tous.
J'aimerai changer les couleurs du thème,suffit-il de reprendre chaque image du fichier "image"?
si oui c'est effectivement assez simple.
Faut-il aussi mettre les mains dans les dossiers de "catalog/view/theme/default/template/ ?
Par contre,que faut-il créer pour mettre une couleur de fond dans l’arrière plan de la boutique? (là, j'imagine qu'il faille mettre les mains dans le code.) :roll:
J'ai bien évidement compris la procédure :
Dès que l'on crée un template on le nomme comme on le désire ex. : mobilier, puis l'on modifie les fichiers situés dans les répertoires ci-dessus énoncés pour ce nouveau template et l'on place ceux-ci dans un répertoire que l'on nommera "mobilier" que l'on chargera dans le répertoire "catalog/view/theme/",


Merci pour vos réponses.

Re: documentation sur le templating

MessagePublié: 28 Août 2010, 15:39
par Imaxine
La modification d'un thème implique différents changements suivants la complexité du thème.

Les principaux changements sont :

- Les couleurs, pour cela est impliqué la feuille de style (stylesheet.css),
- Les images, pour cela il n'y a rien de compliqué puisque les images se trouvent dans un répertoire spécifique, mais parfois celles-ci sont appelées par le feuille de style, ex. : boutons, background, etc..
- les emplacements des variables, ainsi que les comportements (hover, links, etc...) pour cela la feuille de style est la principale impliquée, puisque l'on défini le style relatif à chaque bloc "<div>" (où l'on placera la variable), que l'on crée, ainsi que chaque comportement.

Pour de petites modifications mineures (changement de couleur, changement d'image ou ajout de fond) il n'est pas nécessaire de connaitre le CSS et l'on peut aisément changer les informations de la feuille de style par "défaut".

Pour d'autres modifications plus importantes, il est utile de créer sa feuille de style en fonction de ces changement et de la charger dans un autre thème en la nommant différemment, évidemment.
Dans ce cas la connaissance du CSS est essentielle.

Re: documentation sur le templating

MessagePublié: 16 Oct 2010, 20:04
par dan
Bonsoir à vous tous,

je suis un débutant dans le monde de la programmation je tiens donc à vous prévenir que mes questions peuvent avoir l'air bêtes mais peut-être qu'elle permettrons d'éclairer certains se trouvant dans la même situations que moi. La solution me opencart me paraît vraiment bien, mais je dois avouer que mon principal souci et de créer mon propre template. J'ai donc attentivement lu le poste ici-même, que je trouve déjà très enrichissant, mais il y cependant certaines notions qui me sont restées floues. D'où mes suivantes questions.

C'est la première fois que je vois des fichiers avec l'extension .tpl... après quelques recherches je penses savoir que ce sont des fichiers templates faisant appel à des fonctions php. Déjà là j'ai deux trois question... :?:

Quel est le langage utilisé dans le fichiers tpl? xml?
Si je veux modifier l'apparence d'un fichier tpl je dois intervenir directement dedans? Où bien est-ce que ceci n'est pas très pertinent...j'ai de la peine à me rendre compte en fait... je vois que dans le css il y a pas mal d'élément...mais les seuls éléments appelé par celle-ci me permettent-elle de modifier toute la structure (3colonnes >2 colonnes) du template?

N'existe-t-il pas un tableau ou une illustration permettant de savoir quelle élément de la css reprends quoi sur le visuel de la boutique?

Voilà, c'est déjà un aperçu des questions que je me pose. Vous me direz, "il suffit de tester", je le fait mais j'ai tout de même un peu peur de mettre le bazar un peu partout, c'est pourquoi je viens poster ici.

Je serai très reconnaissant si quelqu'un pouvait m'éclairer un peu sur ces quelques points ;)

Salutations,

Dan.

Re: documentation sur le templating

MessagePublié: 16 Oct 2010, 20:35
par Imaxine
Bonsoir et bienvenue,
dan a écrit:Quel est le langage utilisé dans le fichiers tpl? xml?
Le langage utilisé est principalement du PHP, mais tu vas y rencontrer du HTML avec ses balises <table><tr><td><br><p> et du CSS avec ses balises <div> qui se rapporteront à ta feuille de style (stylesheet.css)
dan a écrit:N'existe-t-il pas un tableau ou une illustration permettant de savoir quelle élément de la css reprends quoi sur le visuel de la boutique?
Non car chaque feuille de style est unique en fonction de la création du template de l'auteur. Par contre si tu as FireFox, tu peux télécharger WebDeveloper qui te permet de voir sur chaque page d'un site, quelles balises sont utilisées pour chaque élément (entre autre, car cet add-on a des quantités de fonctionnalités).

Re: documentation sur le templating

MessagePublié: 16 Oct 2010, 22:52
par dan
ok super merci... je vois un peu mieux qu'est ce qui se réfère à quoi... En revanche j'ai toujours de la peine à capter comment changer la structure du frontend.. N'y a-t-il pas un fichier index où une structure est définie? Tout se passe via les fichiers .tpl qui appellent les fonctions? Autrement dit je dois , par exemple, enlever l'appel d'une fonction dans le fichier columnleft.tpl et la mettre dans le fichier columnright.tpl pour changer l'emplacement d'une fonction de la colonne gauche à celle de droite?

Si c'est ainsi j'ai de la peine à comprendre la structure des fichiers .tpl.

A chaque fois il y a un début comme celui-ci:

<div id="content">
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1><?php echo $heading_title; ?></h1>
</div>
</div>
<div class="middle">
<form action="<?php echo str_replace('&', '&amp;', $action); ?>" method="post" enctype="multipart/form-data" id="address">
<b style="margin-bottom: 2px; display: block;"><?php echo $text_edit_address; ?></b>
<div class="content">
<table>
<tr>
<td width="150">


Cela veut dire que chaque fichier .tpl (qui en gros possède une fonction un peu stylisée... dites moi si je me trompes) possède un div right, un left, et un center? ou est-ce que ces différents div font référence à une structure d'un autre fichier (index.php)?

Encore merci à ceux qui prennent le temps de répondre ;)

Re: documentation sur le templating

MessagePublié: 16 Oct 2010, 23:00
par Imaxine
dan a écrit:Autrement dit je dois , par exemple, enlever l'appel d'une fonction dans le fichier columnleft.tpl et la mettre dans le fichier columnright.tpl pour changer l'emplacement d'une fonction de la colonne gauche à celle de droite?

Je te conseille avant de vouloir modifier un fichier .tpl, de naviguer dans l'admin et de faire des essais, car si tu veux changer un module de colonne, il te suffit seulement de changer les paramètres du module lui-même dans > Admin > Extensions > Module.

Re: documentation sur le templating

MessagePublié: 16 Oct 2010, 23:23
par dan
ah oui en effet...pas fais attention à ça. Mais alors si je veux supprimer une colonne, je peux la désactiver en lui enlevant toutes ses propriété css? où comment dois-je procéder pour modifier la structure des éléments?

Merci

Re: documentation sur le templating

MessagePublié: 16 Oct 2010, 23:28
par Imaxine
dan a écrit:ah oui en effet...pas fais attention à ça. Mais alors si je veux supprimer une colonne, je peux la désactiver en lui enlevant toutes ses propriété css? où comment dois-je procéder pour modifier la structure des éléments?

Merci

Imaxine a écrit:Je te conseille .... de naviguer dans l'admin et de faire des essais.