Fonctionnement des Gabarits de sites

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Synopsis

Afin de donner une grande liberté dans la personnalisation de leur site, PowerBoutique permet aux utilisateurs de construire eux même la structure des templates de leur site. Ainsi, la fonction Import gabarits HTML utilise le gestionnaire de fichiers de PowerBoutique et permet de remplacer les gabarits graphiques (templates) standards PowerBoutique par des templates personnalisés (nécessite des compétences dans les langages HTML et CSS).

Une combinaison d'un ou plusieurs gabarits peut être utilisée pour tout ou partie du site PowerBoutique. Les gabarits sont constitués d'éléments de mise en page et de contenus statiques.

On peut aussi y inclure des "étiquettes" nommées Codes DEV que le serveur remplacera par les contenus dynamiques correspondant (blocs dynamiques). Ces Codes DEV appellent le code nécessaire à la fabrication de blocs de HTML complets généralement paramétrables dans le Back Office (exemple: une liste de produit, un bloc de navigation, un bloc de texte...).

Arborescence et espace de stockage

Chaque site Powerboutique dispose d'un espace de stockage accessible à l'utilisateur. Il s'agit du répertoire /site. Ce répertoire n'est pas la racine du sytème de fichier mais il se situe au premier niveau de l'arborescence de la PowerBoutique. Lors d'une connexion FTP classique sur la PowerBoutique ou lors de l'utilisation du gestionnaire de fichiers intégré au back office, on aura accès uniquement à ce répertoire /site et à son contenu (Historiquement le gestionnaire et/ou les fonctions avancées et l'arborescence de stockage étaient appellés Espace FTP).

Application d'un gabarit

Après avoir été préparés "offline", les gabarits et leurs images associées sont uploadés dans l'espace de stockage /site et appliqués individuellement aux pages choisies du site. Pour appliquer son propre gabarit sur son site, l’utilisateur doit se rendre à la fonction « Intégration gabarits HTML ». Le gabarit doit être ajouté par le bouton « Ajouter ». Pour l’appliquer il suffit ensuite de sélectionner le gabarit dans la liste, de cliquer sur « Appliquer FR » ou « Appliquer US » et de choisir les fichiers du site auxquels le gabarit doit être appliqué.

Attention : l’application de son propre gabarit HTML permet de maîtriser la structure de la page. En ce qui concerne l’apparence, il faut passer par la fonction «Modèles de site » pour avoir la main sur les feuilles de styles.


Fonctionnement technique de l’application d’un gabarit sur une page

Lorsqu’un gabarit HTML est appliqué à une page, un fichier de votre site est créé dans le répertoire boutique ou boutique_us (version angalise). Ce fichier correspond à la structure du gabarit HTML sur lesquels les opérations suivantes sont effectuées :

  • remplacement de chaque code DEV par le code HTML correspondant
  • ajout des appels aux feuilles de styles gérées par le système
  • ajout des balises de référencement gérées par le système (selon niveau de référencement)
  • ajout des appels à des fichiers javascript
  • ajout des codes des ROI (selon ROI paramétrés)
  • ajout de la signature PowerBoutique en bas de page

Ce code généré prend la forme d'une page d’extension .cfm et stockée dans /boutique ou /boutique_us .

Chemins et liens internes

Les fichiers .cfm générés par la commande "Appliquer FR/US" sont placés dans le dossier /boutique de l'arborescence situé au premier niveau (comme le dossier /site). Le dossier /boutique n'est pas accessible depuis la fonction "gestionnaire de fichier".


Arborescence

Racine

/boutique -> ici seront placés les fichiers .cfm générés.

/site -> c'est le répertoire racine pour vos fichiers html, images...

Dans l'exemple suivant, un dossier /img a été créé dans le répertoire /site


Ce changement de chemin lors de "l'application" doit être prévu dans le code du gabarit. Quand normalement les liens relatifs vers les images d'un dossier /img auraient été:

<img src="img/background_image.jpg">

on utilisera :

<img src="../site/img/background_image.jpg">

Il peut être utile d'utiliser l'export des URLs du site généré grâce à la fonction "Base de données URLs". Dans tout les cas il est conseillé de travailler en utilisant des liens relatifs (obligatoire quand le nom de domaine definitif n'est pas encore actif).

Tester le gabarit avant de l'appliquer au site

Vous avez la possibilité de tester votre gabarit en utilisant la fonction fichiers personnels. Cette fonction, présente en bas de la page "Import gabarits Fichiers FR" ou "Import gabarits Fichiers US", vous permet de créer autant de pages que vous le désirez. Elles devront être en .htm ou .html et seront transformées automatiquement en .cfm une fois intégrées en tant que fichiers personnels. Elles peuvent comporter des Codes DEV qui seront remplacés par les modules dynamiques correspondants. Cette fonction vous permet également de tester vos gabarits avant de les appliquer à votre site. Voici la procédure pour créer un fichier personnel :

  1. Créez votre page HTML, chargez la sur sur le serveur PowerBoutique avec ses dossiers medias
  2. Cochez la case à gauche de votre page dans Import gabarits HTML
  3. Cliquez sur Appliquer FR ou Appliquer US (si vous avez une version anglaise).
  4. En bas de page, dans la partie Fichiers personnels, indiquez le nom de votre page, puis cliquez sur ajouter.


Vous pouvez visualiser votre page en cliquant sur le fichier en .cfm ainsi créé. Ce fichier sera stocké dans /boutique/ ou /boutique_us/ et aura une extension .cfm, par exemple si le gabarit est appliqué sur le fichier fiche_produit, le fichier généré pour le site français sera /boutique/fiche_produit.cfm.

Illustration

Gabarit personnel stocké dans /site/mongabarit.html

<html>
<head></head>
<body>
<div>
*nav_horizontale_1*
</div>
<div>
*edito*
</div>
</body>
</html>

Fichier généré lors de l’application du gabarit sur un fichier

<html>
<head>
<!-- entête rempli automatiquement -->
<link rel="stylesheet" href="http://.../boutique/css_dys_pwb/gabarit62.css" type="text/css" />
<link rel="stylesheet" href="http://.../boutique/css_dys_pwb/index62.css" type="text/css" />
<link rel="stylesheet" href="http://.../css_dys_pwb/gabarit-doc.css" type="text/css" />
<base href="http://.../boutique/index.cfm?" />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="Authors" content="Doyousoft">
<script type="text/javascript" src="http://.../js/ajax.js"></script>

</head>
<body>

<div>
<!-- Exemple de code html correspondant au code DEV *nav_horizontale_1* -->
<div id="nav_horizontale_1_pwb">
<div id="nav_hori_contener">
<table cellspacing="0" cellpadding="0" border="0" id="nav_hori_menu">
<tbody><tr>
<td width="14%"><a style="display:block;" target="_self" href="http://.../boutique/liste_rayons.cfm">Accueil</a></td>
<td width="14%"><a style="display:block;" target="_self" href="panier.cfm?code_lg=lg_fr">Votre panier</a></td>
<td width="14%"><a style="display:block;" target="_self" href="sommaire_compte_client.cfm?code_lg=lg_fr">Accedez à votre compte</a></td>
<td width="14%"><a style="display:block;" target="_self" href="../page_5,fr,8,5.cfm">Page sécurité paiement</a></td>
<td width="14%"><a style="display:block;" target="_self" href="../page_1,fr,8,1.cfm">Page d'exemple</a></td>
<td width="14%"><a style="display:block;" target="_self" href="formulaire_perso.cfm?code_lg=lg_fr&amp;num_formulaire=1">Exemple de formulaire</a></td>
</tr>
</tbody></table>
</div>
</div>
<!-- fin du code DEV *nav_horizontale_1* -->
</div>

<div>
<!-- Exemple de code html correspondant au code DEV *edito*: --->
...
<div id="edito_pwb">
<div id="encart_code_dev_edito">
<span id="titre_code_dev_edito">Edito</span>
<div id="image_code_dev_edito"></div>
</div>

<div id="encart_edito">
<span id="date_edito">
....
</span>
<span id="titre_edito">
....
</span>
<p id="texte_edito">
...
</p>
</div>
<!-- fin du code DEV *edito*: --->
</div>

</body>
</html>