Généralités

Personnaliser un thème

Kiubi permet de personnaliser à 100% un site, grâce à son accès aux templates de mise en page. Vous pourrez donc personnaliser le design d'un site. Aucune limitation graphique particulière n'est imposée !

Kiubi vous permettent d'intégrer une ligne graphique réalisée sur mesure pour un site Internet. Cependant, comme tout système destiné à créer des sites professionnels et respectueux des standards du Web, concevoir un thème graphique sur mesure requiert la maîtrise du HTM, des CSS et du Javascript, un thème graphique personnalisé est donc réservé aux utilisateurs expérimentés !

Activer le thème graphique personnalisé

Pour créer un thème graphique personnalisé, rendez-vous dans la rubrique Thèmes graphiques de la Console d'administration. Par défaut, un des thèmes graphiques fournis en standard par Kiubi (appelé thème graphique par défaut) est utilisé. Il suffit de cliquer sur le bouton Passer en thème personnalisé et de compléter et valider le formulaire. Dès cet instant, le thème graphique personnalisé a été créé et initialisé à partir du thème par défaut choisi.

Vous pouvez vous connecter à votre espace FTP avec les informations fournis dans la rubrique Thèmes graphiques pour accéder à l'intégralité des fichiers du thème graphique. Une fois connecté à votre espace FTP, deux répertoires sont disponibles :

  • le répertoire mediatheque : nécessaire à la Médiathèque pour y publier des fichiers de plus de 7Mo.
  • le répertoire theme : contenant les fichiers de votre thème graphique personnalisé

Déclarer un thème graphique

Afin de déclarer un thème graphique personnalisé, il est indispensable de bien configurer les fichiers suivants :

  • illustration.jpg : Image d'illustration du thème graphique personnalisé destinée à être affichée dans la gestion des thèmes afin d'identifier plus facilement le thème en question. Il est recommandé d'utiliser une image de 300px par 225px.
  • theme.xml : Ce fichier contient des informations descriptives du thème graphique. Il est indispensable pour déclarer le thème graphique personnalisé.

Le fichier theme.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<theme img="illustration.jpg" intitule="Thème d'exemple" javascripts="none">
    <auteur nom="Exemple" contact="contact@example.org" site="www.example.org" />
</theme>

Ce fichier contient une seule balise principale <theme> qui possède 5 attributs :

  • img : nom du fichier image qui est utilisé dans la console d'administration pour représenter ce modèle (correspond au fichier image nommé ci-dessus),
  • intitule : intitule du thème qui est affiché dans la console d'administration,
  • style : le style du thème (moderne, classique, etc...),
  • version : la version du thème qui est affiché dans la console d'administration,
  • date : la date de la dernière mise à jour du thème.
  • javascripts : contrôle l'inclusion par défaut de bibliothèques javascript dans les templates. Indiquer kiubi pour inclure les scripts utilisés par les thèmes par défaut ou none pour désactiver cette fonctionnalité.

A l'intérieur, nous avons une seule balise <auteur> qui permet d'ajouter des informations sur l'auteur du thème. Cette balise contient les attributs suivants :

  • nom : le nom de l'auteur qui est affiché dans la console d'administration,
  • contact : l'email de l'auteur,
  • site : l'adresse du site internet de l'auteur.

L'arborescence des fichiers

L'arborescence d'un thème graphique personnalisé contenu dans le répertoire theme de votre espace FTP est organisée de la sorte :

fr/                                       Répertoire de langue
├── assets/                               Répertoire des ressources
│   ├── css/                              Chaque répertoire correspond à un type, de ressources 
│   ├── fonts/                            hors contenu de la médiathèque
│   ├── img/
│   ├── js/
├── billets/                              Répertoire des types de billets
│   ├── image/                            Chaque répertoire correspond à un type de billet et
│   ├── jumbotron/                        contient ses propres fichiers                   
│   └── simple/
│       ├── config.xml 
│       └── index.html 
│   │   └── styles.css
├── billets_blog/                         Répertoire des types de billets du blog
│   └── simple/
│       └── config.xml
├── includes/                             Répertoire des fichiers includes
├── layouts/                              Répertoire des layouts
│       ├── 4_4_4.html
│       ├── 4_8.html
│       ├── 6_6.html
│       ├── 8_4.html
├── modules/                              Répertoire des modules
│   ├── 404/                              Chaque répertoire correspond à un module et contient 
│   ├── chemin/                           ses propres fichiers
│   └── fermeture/              
├── produits/                             Répertoire des types de produits
│   └── simple/                           Chaque répertoire (ici simple) correspond à un
│       ├── config.xml                    type de produit et contient ses propres fichiers
│       ├── index.html
├── templates/                            Répertoire des templates principaux
│   ├── barre_laterale/                   Chaque répertoire correspondant à un template principal  
│   ├── sans_barre_lateral/               du thème et contient ses propres fichiers           
│   │   ├── desc.xml                      
│   │   ├── illustration.gif
│   │   ├── index.html
│   │   ├── structure.xhtml
│   │   └── styles.css
│   ├── print.css
│   └── styles.css
└── widgets/                              Répertoire de tous les widgets
    ├── blog/                             Répertoire des widgets du service Blog
    │   ├── archives/                     Chaque widget à son propre répertoire principal et 
    │   ├── categories                    contient ses propres fichiers.
    │   ├── derniers_billets_postes/
    │   ├── detail_billet/
    │   ├── les_plus_commentes/
    │   ├── liens/
    │   ├── liste_billets/
    │   ├── listes_commentaires/
    │   └── poster_commentaires/
    ├── catalogue/                        Répertoire des widgets du service Catalogue
    │   ├── categories/                   Chaque widget à son propre répertoire principal et 
    │   ├── liste_categories/             contient ses propres fichiers.
    │   ├── listes_commentaires/
    │   ├── listes_produits/
    │   ├── poster_commentaire/
    │   ├── produits_associes/
    │   ├── produits_egalement_achetes/
    │   ├── produits_plus/
    │   ├── produits_vedettes/
    │   └── tags/
    ├── commandes/                        Répertoire des widgets du service Commandes
    │   ├── livraison/                    Chaque widget à son propre répertoire principal et 
    │   ├── paiement/                     contient ses propres fichiers.
    │   ├── panier/
    │   └── panier_detail/
    ├── communication/                    Répertoire des widgets du service Communication
    │   ├── contact/                      Chaque widget à son propre répertoire principal et 
    │   ├── formulaires/                  contient ses propres fichiers.
    │   ├── newsletter/
    │   └── syndication_blog/
    ├── compte/                           Répertoire des widgets du service Compte
    │   ├── identification/               Chaque widget à son propre répertoire principal et 
    │   ├── identification_rapide/        contient ses propres fichiers.
    │   ├── inscription/
    │   └── tableau_bord/
    ├── recherche/                        Répertoire des widgets du service Recherche
    │   └── simple/                       Chaque widget à son propre répertoire principal et 
    │                                     contient ses propres fichiers.
    └── site_web/                         Répertoire des widgets du service Site Web
        ├── bloc_extrait/                 Chaque widget à son propre répertoire principal et  
        │   ├── avec_lien_vers_page/      contient ses propres fichiers.
        │   ├── sans_image/
        │   ├── slideshow/                Chaque widget peut avoir plusieurs templates secondaires
        │   ├── index.html                différents (ici : avec_lien_vers_page, sans_image et
        │   └── styles.css                slideshow) contenant leurs propres fichiers correspondant 
        ├── contenu_page_libre/           chacun à un sous-répertoire du répertoire principal 
        ├── menu_h/                       du widget
        └── menu_v/
illustration.jpg                          Fichier de description et de déclaration du thème
theme.xml                                 Ces fichiers définissent les informations affichées dans la 
                                          gestion des thèmes de la console d'administration.

Templates principaux

Les templates principaux constituent les squelettes du site dans lesquels vont s'intégrer les Widgets. Chaque template contient une structure HTML complète qui lui est propre, des feuilles de styles, des codes javascripts, etc. et également la position de chaque zone où vont se placer les Widgets.

Chaque template peut être utilisé pour configurer une page type dans la rubrique Mises en page de la console d'administration. Il est donc possible d'utiliser plusieurs templates différents pour personnaliser un site Internet et cela page par page, si nécessaire.

Si vous utilisez un thème graphique personnalisé, vous pouvez modifier et créer de nouveaux templates.

Paramètres d'un template

Une fois connecté à votre espace FTP, tous les templates sont regroupés dans le répertoire theme/fr/templates/. Chacun de ces sous- répertoires est un template. Un template contient les fichiers suivants :

  • desc.xml : permet de décrire le template et déclarer les zones. Ce fichier est obligatoire
  • illustration.gif : image qui illustre le template dans la console d'administration. Ce fichier est facultatif à partir de la version 4.x de Kiubi
  • index.html : contient le code HTML du template. Ce fichier est obligatoire
  • structure.xhtml : permet de définir la structure du template utilisée dans l'édition d'une page type. Ce fichier n'a aucun lien avec le rendu du site internet et n'est utilisé que pour la console d'administration. Ce fichier est obligatoire

D'autres fichier facultatifs peuvent être présents dans le répertoire theme/fr/templates/, comme par exemples :

  • apple-touch-icon.png
  • favicon.ico
  • favicon.png

Le fichier desc.xml

Ce fichier contient des informations descriptives du template. Il permet principalement de déclarer les zones du template dans lesquelles pourront être insérés des Widgets.

Exemple de code source

<?xml version="1.0" encoding="iso-8859-1"?>
<modele img="illustration.gif" intitule="Modèle par défaut">
  <zones>
    <zone id="entete" colmax="1" intitule="Entete" defaut="1"/>
    <zone id="menu" colmax="1" intitule="Menu" defaut="1"/>
    <zone id="sidebar" colmax="1" intitule="Barre latérale" defaut="1"/>
    <zone id="contenu" colmax="3" intitule="Contenu" defaut="1" />
    <zone id="piedepage" colmax="3" intitule="Pied de page" defaut="1"/>
  </zones>
</modele>

Description

Ce fichier contient une seule balise principale <modele> qui possède 2 attributs :

  • img : nom du fichier image qui est utilisé dans la console d'administration pour représenter ce template.
  • intitule : intitule du template qui est utilisé dans la console d'administration

A l'intérieur, nous avons une seule balise <zones> qui contient tout un ensemble de balises <zone>. La balise <zone> sert à déclarer une zone où vont pouvoir être inséré les Widgets. L'id des zones devra être repris dans les fichiers structure.xhtml et index.html.

Elles contiennent les attributs suivants :

  • id : code alphanumérique qui sera réutilisé pour identifié la zone dans les fichiers index.html et structure.xhtml.
  • colmax : nombre maximum de colonnes des blocs de présentation qui peuvent être insérés dans cette zone (de 1 à 3). Les colonnes correspondant sont gérées via les fichiers du répertoire theme/fr/layouts/
  • intitule : intitulé de la zone qui sera repris dans la console d'administration dans l'édition d'une page type.
  • defaut : nombre de colonnes des blocs de présentation insérées par défaut dans la zone.

Le fichier structure.xhml

Ce fichier est une représentation schématique de la disposition des zones dans le template (les zones déclarées dans le fichier desc.xml). Il est utilisé pour générer la page d'édition d'une page type dans la console d'administration. Il n'est en aucun cas utilisé pour effectuer un rendu du site Internet.

Exemple de code source

<table>
  <tr>
    <td colspan="2">{entete}</td>
  </tr>
  <tr>
    <td colspan="2">{menu}</td>
  </tr>
  <tr>
    <td width="30%">{sidebar}</td>
    <td>{contenu}</td>
  </tr>
  <tr>
    <td colspan="2">{piedepage}</td>
  </tr>
</table>

Description

Les zones sont appelées directement en mettant leurs ID entre accolade.

Il est obligatoire d'utiliser un code HTML simple, sans script ni style. Seules les balises TABLE, TD et TR sont autorisées.

Le fichier index.html

Alors que le fichier structure.xhtml est une vue abstraite de la page utilisée seulement dans la console d'administration, le fichier index.html contient le code HTML concret du template qui sera affiché dans le site Internet.

Exemple de code source

<!-- BEGIN:main -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>{title}</title>
  <meta name="description" content="{metaDescription}" />
  <meta name="keywords" content="{metaKeywords}" />
  {metaRobots}
  {metaCanonical}
  <!-- Charges les scripts des Options avancées du Back-office -->
  {js_head}
</head>
<body>

<!-- BEGIN:logo_site -->
<h1>
  <a href="{racine}/" title="{accroche_site} - Retour &agrave; l'accueil">
    <img src="{racine}/media/{logo_site}" alt="{accroche_site}" />
  </a>
</h1>
<!-- END:logo_site --> 

<!-- BEGIN:accroche_site-->
<h2><a href="{racine}/" title="{accroche_site}">{accroche_site}</a></h2>
<!-- END:accroche_site--> 

<!-- BEGIN:desc_site-->
<h3>{desc_site}</h3>
<!-- END:desc_site--> 

<div>{ZONE.menu}</div>
<div>{ZONE.contenu}</div>
<div>{ZONE.piedepage}</div>

<!-- Charges les scripts des Options avancées du Back-office --> 
{js_body}
</body>
</html>
<!-- END:main -->

Description

Les balises {ZONE.*} servent à indiquer où insérer les Widgets. Les noms des zones sont déclarés dans le fichier desc.xml.

Balises disponibles

metaCanonical

Insère la balise <meta name="canonical"> correspondant à l'url canonique de la page courante

metaRobots

Insère la balise de désindexation automatique des pages sans valeur sémantique comme les résultats de recherche ou les paginations <meta name="robots" content="noindex, follow">.

title

Insère le titre de la page <title>. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page.

metaKeywords

Insère les mots clés de la page <meta keywords>. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page.

metaDescription

Insère la description de la page <meta description>. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page.

modele

Affiche le nom du répertoire du modèle de mise en page utilisé.

service

Affiche le code du service en cours. Cette balise sert, par exemple, au moteur de recherche pour qu'il fasse des recherches dans le service en cours. Affiche cms si le service en cours est le Site web, Contact et Gestion de compte. Affiche blog si le service en cours est le Blog. Affiche catalogue si le service en cours est le Catalogue et E-commerce (Commandes).

js_head

Insère du javascript destiné à être exécuté dans la balise <head> de la page. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page.

js_body

Insère du javascript destiné à être exécuté juste avant la fermeture de la balise <body> de la page. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page.

Stylesheet

Insère les feuilles de styles des Widgets et des modules, si besoin.

Javascripts

Insère les javascripts nécessaires au bon fonctionnement de Kiubi avec d'anciens thèmes par défaut de Kiubi

ZONE.xxx

Insère les Widgets de la zone "xxx" telle qu'ils ont été configurés dans l'édition d'une page type. Les noms (identifiants) des zones sont définis dans le fichier "structure.xhtml" propre au modèle de mise en page.

<!-- BEGIN:accroche_site--> <!-- END:accroche_site-->

Le bloc s'affiche si l'option "Afficher le nom" est activée dans le Bloc-marque des Préférences du site.

<!-- BEGIN:desc_site--> <!-- END:desc_site-->

Le bloc s'affiche si l'option "Afficher la signature" est activée dans le Bloc-marque des Préférences du site.

<!-- BEGIN:logo_site--> <!-- END:logo_site-->

Le bloc s'affiche si l'option "Afficher le logo" est activée dans le Bloc-marque des Préférences du site.

Ajouter un nouveau template

Pour ajouter un nouveau template, il suffit de créer un nouveau sous-répertoire au répertoire theme/fr/templates/ et d'y copier tous les fichiers correspondant à votre nouveau template. Le nouveau template sera alors automatiquement proposé dans l'édition d'une page type de la console d'administration.

Widgets

Les Widgets de Kiubi forment la base des différents modules fonctionnels qui composent le site Internet. Dans la gestion de la Mise en page, chaque Widget peut être glissé/déposé dans une zone d'une page type et configuré selon un certain nombre de paramètres qui lui sont propres. Afficher un menu, une liste de produits ou même un formulaire de contact, tout ceci est possible grâce aux Widgets.

Le guide du Webdesigner décrit et explique en détail les différents paramètres et configurations possibles pour tous les Widgets. De plus, vous y trouverez toutes les balises disponibles dans les templates des Widgets et dans quelles conditions les utiliser. La compréhension de ces différentes informations (template + balise + paramètre + configuration) vous permettra de personnaliser l'intégralité des Widgets de Kiubi.

Listes des Widgets

Les widgets sont classés selon leur service et leur type :

Site Web
Blog
Catalogue
Commandes
Gestion de compte
Modules (Communication)
Recherche
Boite à outils

Ces Widgets permettent de faire de l'inclusion de code et n'ont donc ni de configuration, ni de modèle graphique qui leurs sont propres.

  • Fragment de code : le code (HTML, CSS, JS, etc.) est éditable dans les paramètres du widget et directement ajouté dans une mise en page, à la position du widget
  • Fragment de template : le widget liste les fichiers includes disponibles dans le répertoire theme/fr/includes/ et sont directement ajoutés dans une mise en page, à la position du widget

Personnalisé un Widget

Chaque Widget de Kiubi peut être personnalisé de deux manières différentes :

  • Dans tous les cas, en modifiant ses paramètres et sa configuration, directement dans la console d'administration lors de l'édition du Widget dans la gestion de la mise en page
  • Dans le cas de l'utilisation d'un thème graphique personnalisé, en modifiant le template qui le compose.

Si vous utilisez un thème graphique personnalisé, vous pouvez éditer et modifier le template, c'est-à-dire les fichiers HTML qui composent et définissent l'apparence d'un Widget. Le paramétrage et la configuration d'un Widget seront cependant toujours à faire lors de l'édition du Widget dans la gestion de la mise en page de la console d'administration de Kiubi.

Dans votre espace FTP, tous les Widgets sont regroupés dans le répertoire theme/fr/widgets/ et classés dans leur propre répertoire, selon leur service (un répertoire par Widget classé dans un répertoire par service).

Chaque répertoire principal d'un Widget contient :

  • un fichier index.html structuré de manière différente en fonction du Widget. Ce fichier index.html est obligatoire.
  • un fichier styles.css peut être ajouté au Widget afin de contrôler sa mise en forme. Ce fichier est automatiquement chargé dans la balise <head> si le widget est présent dans la page. Ce fichier styles.css n'est pas obligatoire.

Ajouter des templates supplémentaires à un Widget

Un même Widget peut avoir plusieurs templates, c'est-à-dire qu'il peut avoir plusieurs apparences différentes.

Pour ajouter un templates à un Widget, il suffit de créer un sous- répertoire au répertoire principal du Widget et d'y copier/coller le fichier index.html (et styles.css) correspondant au Widget.

Si les deux fichiers sont présents, ce nouveau modèle graphique utilisera les deux fichiers.

Si un seul des deux fichiers est présent, ce nouveau modèle graphique utilisera le fichier présent et complètera par celui présent à la racine du répertoire principal du Widget.

Il suffit de choisir ensuite le modèle graphique correspondant lors de l'édition d'un Widget dans la gestion de la mise en page de la console d'administration de Kiubi.

Il est donc possible, avec le même Widget, d'avoir non seulement plusieurs paramétrages possibles mais en plus, chaque Widget peut avoir une infinité d'apparences différentes. En fonction de son template et de ses paramètres, un même Widget peut répondre à des usages complètement différents et donc s'adapter parfaitement à vos besoins.

Blocs

Les blocs sont des portions de HTML encadrés par des codes spécifiques qui vont pouvoir être affichés ou masqués selon le besoin, et même dupliqués. Ils se présentent toujours de cette façon :

<!-- BEGIN:bloc --> <!-- END:bloc -->

Les blocs sont pour la plupart du temps imbriqués dans d'autres blocs. La documentation ci-après précise toujours dans quel bloc placer tel autre bloc (ou telle balise). Si rien n'est précisé c'est qu'il faut au moins placer le bloc dans le bloc <!-- BEGIN:main --> <!-- END:main -->.

Voici un exemple de blocs correctement imbriqués :

<!-- BEGIN:main -->
    <!-- BEGIN:bloc -->
        <!-- BEGIN:bloc2 -->
        <!-- END:bloc2 -->
        <!-- BEGIN:bloc3 -->
        <!-- END:bloc3 -->
    <!-- END:bloc -->
<!-- END:main -->

L'exemple suivant est faux et amènera à des comportements imprévisibles. Les blocs bloc2 et bloc3 sont mélangés l'un dans l'autre, ce qui est incorrect :

<!-- BEGIN:main -->
    <!-- BEGIN:bloc2 -->
        <!-- BEGIN:bloc3 -->
        <!-- END:bloc2 -->
    <!-- END:bloc3 --> // cette fermeture de bloc ne devrait pas se trouver ici !!!
<!-- END:main -->

Certaines balises ne sont accessibles qu'à l'intérieur de blocs spécifiques. Si c'est le cas, cette documentation le précisera.

Avertissements :

  • un même bloc ne peut pas être répété deux fois dans le même fichier
  • un bloc qui est utilisé dans un widget, n'est pas forcément utilisable dans un autre ou dans tous les widgets, à chaque widget ses blocs
  • tous les modèles graphiques doivent commencer par <!-- BEGIN:main --> et se terminer par <!--END:main --> oublier ce bloc est une erreur très courante, pensez à vérifier ce bloc si rien ne s'affiche dans votre site
  • tout ce qui est en dehors du bloc <!-- BEGIN:main --> <!-- END:main --> est ignoré par Kiubi

Balises

Les balises de Kiubi sont de petits codes que vous pouvez inclure un peu partout et qui servent à afficher toutes les informations que vous avez saisies à l'aide de votre console d'administration dans les pages de votre site. On reconnaît facilement ces balises car elles sont composées d'un mot entouré d'accolades : {titre}.

Kiubi utilise des ensembles de fichiers HTML (des templates) pour mettre en forme votre site. Ils composent le squelette du site. Les balises servent à donner vie au squelette en indiquant à Kiubi où injecter exactement le titre de la page, le contenu des billets, la date de création du dernier billet de votre blog, etc. Elles sont pour ainsi dire omniprésentes. Tous les templates ont besoin de balises pour fonctionner et vous pouvez également saisir certaines balises dans les éditeurs de texte visuels (éditeurs "Wysiwyg").

Il existe trois grandes familles de balises :

  • les balises globales sont utilisables partout (modèles graphiques, éditeurs de texte visuels, champs d'information, etc.)
  • les balises des modèles de mise en pages qui ne fonctionnent que dans les templates principaux
  • les balises des widgets qui ne fonctionnent que dans leur widget

Exemple d'utilisation d'une balise

Prenons un exemple d'un template tel qu'on pourrait en trouver dans les sous-répertoires de /fr/template/.

<head>
    <meta name="keywords" content="{metaKeywords}" />
    <meta name="description" content="{metaDescription}" />
    <title>{title}</title>
</head>

On voit ici que le titre de la page, la description et les mots clés de l'entête du fichier HTML sont définis à l'aide de balises et seront remplis automatiquement avec les valeurs configurées dans la console d'administration.

Balises globales

Les balises globales sont disponibles et utilisables partout dans Kiubi (modèles graphiques, éditeurs de texte visuels, champs d'information, ...).

Balises de base

racine

Indique le chemin relatif vers la racine du site où que l'on soit situé dans l'arborescence.

lg

Indique le code langue courant (toujours fr pour l'instant). Cette balise est également disponible dans les templates d'email

baseLangue

Indique le chemin relatif vers la racine du site dans la langue courante.

lien_pagecourante

URL de la page courante.

intitule_pagecourante

Intitulé de la page courante.

optim_pagecourante

Affiche le nom optimisé de la page courante. Affiche par exmple le nom optimisé du billet dans la page de détail de billet du blog, ou le nom optimisé de la catégorie dans la page de détail d'une catégorie du catalogue.

contexte_pagecourante

Affiche le contexte de la page courante sous forme d'une liste qui reprends le service, le type et les informations permettant d'identifer l'objet principal de la page. Plus de détails dans la section "Contexte" ci-dessous.

lien_pageparente

URL de la page parente (niveau hiérarchique supérieur dans l'arborescence).

intitule_pageparente

Indique l'intitulé de la page parente.

accroche_site

Affiche l'accroche du site figurant dans "Mon site / Apparence / Bloc-marque". Cette balise est également disponible dans les templates d'email

desc_site

Affiche la description du site figurant dans "Mon site / Apparence / Bloc-marque". Cette balise est également disponible dans les templates d'email

logo_site

Affiche l'identifiant du logo du site figurant dans "Mon site / Apparence / Bloc-marque". Cette balise est également disponible dans les templates d'email

url_logo_site

Affiche l'url du logo du site figurant dans "Mon site / Apparence / Bloc-marque". Cette balise est également disponible dans les templates d'email

domaine

Affiche le nom du domaine courant du site.

schema

Affiche le schéma du site (http ou https).

site_nom

Affiche le nom du site figurant dans "Mon compte / Préférences". Cette balise est également disponible dans les templates d'email

g_vignette_l

Largeur en pixels des grandes vignettes de la médiathèque.

vignette_l

Largeur en pixels des vignettes de la médiathèque.

g_vignette_h

Hauteur en pixels des grandes vignettes de la médiathèque.

vignette_h

Hauteur en pixels des vignettes de la médiathèque.

g_miniature_l

Largeur en pixels des grandes miniatures de la médiathèque.

miniature_l

Largeur en pixels des miniatures de la médiathèque.

g_miniature_h

Hauteur en pixels des grandes miniatures de la médiathèque.

miniature_h

Hauteur en pixels des miniatures de la médiathèque.

balise

Affiche le code d'un balise sans qu'elle ne soit interpretée. Exemple : {site_nom} affiche "Aide et Documentation".

cdn

URL du CDN des ressources statiques de la Plateforme.

referer

Affiche le referer du navigateur, remplacée par REQUEST.referer

devise

Affiche le devise du site. Cette balise est également disponible dans les templates d'email

devise_iso

Affiche le code iso (3 lettres) de la devise du site. Cette balise est également disponible dans les templates d'email

theme

Affiche le code du thème graphique du site. Le code pour les thèmes graphiques personnalisés est "theme". Cette balise est également disponible dans les templates d'email

canonical

Affiche le chemin canonique de la page en cours

liste_domaines

Liste de tout les noms de domaines du site.

FILE "fichier.html"

Cette balise est très spéciale car elle permet d'inclure un modèle graphique dans le modèle graphique courant. Il suffit pour cela d'indiquer le chemin du modèle graphique que vous voulez inclure. Ce fichier doit se trouver dans le thème courant.

Cette balise est souvent utilisée pour inclure à différents endroits des bouts de page qui reviennent de manière récurrente. Par exemple, dans les thèmes Kiubi, le copyright en bas de page est inclus dans toutes les pages grâce à la balise : {FILE "/fr/includes/copyright.html"}

Cette balise est également disponible dans les templates d'email Attention : cette balise n'est pas disponible dans les contenus WYSIWYG.

illustration_pagecourante

Affiche le chemin vers l'illustration de le page courante. N'affiche rien si aucune illustration n'est disponible.

illustration_pagecourante_miniature

Affiche le chemin vers la miniature de l'illustration de le page courante. N'affiche rien si aucune illustration n'est disponible.

illustration_pagecourante_vignette

Affiche le chemin vers la vignette de l'illustration de le page courante. N'affiche rien si aucune illustration n'est disponible.

illustration_pagecourante_g_vignette

Affiche le chemin vers la grande vignette de l'illustration de le page courante. N'affiche rien si aucune illustration n'est disponible.

illustration_pagecourante_g_miniature

Affiche le chemin vers la grande miniature de l'illustration de le page courante. N'affiche rien si aucune illustration n'est disponible.

Détail de la balise contexte_pagecourante

La balise contexte_pagecourante affiche des valeurs spécifique à la page dans laquelle est utlisée. Son utlisation est particulièrement appréciable avec certains frameworks CSS et Javascript.

/

cms cms-accueil

/[page].html

cms cms-page cms-page-[page]

/blog/

blog blog-accueil

/blog/[categorie]/

blog blog-categorie blog-categorie-[categorie]

/blog/[categorie]/[yyyy]/[mm]/[dd]/

blog blog-categorie blog-categorie-[categorie] blog-y-[yyyy] blog-m-[mm] blog-d-[dd]

/blog/[categorie]/[yyyy]/[mm]/[dd]/[billet].html

blog blog-billet blog-billet-[billet] blog-categorie-[categorie] blog-a-[yyyy] blog-m-[mm] blog-j-[dd]

/catalogue/

catalogue catalogue-accueil

/catalogue/[categorie]/

catalogue catalogue-categorie catalogue-categorie-[categorie]

/catalogue/[categorie]/[tags:]/

catalogue catalogue-categorie catalogue-categorie-[categorie] catalogue-tag catalogue-tag-[tag1] catalogue-tag-[tag-2]....

/catalogue/[categorie]/[produit].html

catalogue catalogue-produit catalogue-produit-[produit] catalogue-categorie-[categorie]

/compte/[page].html

compte compte-[page]

/contact/

contact

/ecommerce/[page].html

ecommerce ecommerce-[page]

/recherche/[service]/

recherche recherche-[service]

Informations société

Les balises ci-dessous sont utilisables dans tous les templates, widgets, contenu wysiwyg et templates d'email.

SOCIETE.contact_nom

Affiche le nom du contact principal du site internet figurant dans "Mon compte / Préférences".

SOCIETE.contact_prenom

Affiche le prénom du contact principal du site internet figurant dans "Mon compte / Préférences".

SOCIETE.contact_email

Affiche l'e-mail du contact principal du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_nom

Affiche le nom de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_adresse

Affiche l'adresse de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_cp

Affiche le code postal de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_ville

Affiche la ville de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_pays

Affiche le pays de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_tel

Affiche le numéro de téléphone de la société responsable du site internet figurant dans "Mon compte /Préférences".

SOCIETE.societe_mobile

Affiche le numéro de mobile de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_fax

Affiche le numéro de fax de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_cnil

Affiche le numéro de déclaration CNIL du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_capital

Affiche le capital de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_siret

Affiche le numéro siret de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_rcs

Affiche le RCS de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_ape

Affiche le code APE (ou NAF) de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_tva

Affiche le numéro de TVA intracommunautaire de la société responsable du site internet figurant dans "Mon compte / Préférences".

SOCIETE.societe_forme

Affiche la forme juridique de la société responsable du site internet figurant dans "Mon compte / Préférences".

Horodatage

Les balises ci-dessous sont utilisables dans tous les templates, widgets, contenu wysiwyg et templates d'email.

num_jour_maintenant

Affiche le numéro du jour courant (01 - 31).

jour_semaine_maintenant

Affiche le jour de la semaine courant (lundi - dimanche).

num_mois_maintenant

Affiche le numéro du mois courant (01 - 12).

mois_maintenant

Affiche le mois courant (janvier - décembre).

mois_abrev_maintenant

Affiche le mois courant abrégé (jan - déc). Il vaut mieux utiliser août que aoû car la découpe se fait plus intelligemment pour les mois en quatre lettres.

annee_maintenant

Affiche l'année courante (2007).

heure_maintenant

Affiche l'heure courante (00-23).

minute_maintenant

Affiche les minutes courantes (00-59).

seconde_maintenant

Affiche les secondes courantes (00-59).

timestamp_maintenant

Affiche le timestamp courant

Informations client

Les balises ci-dessous sont utilisables dans tous les templates / widgets et contenu wysiwyg

CLIENT.client_id

Affiche l'identifiant interne du client. Requiert que le client soit connecté

CLIENT.num

Affiche le numéro du client. Requiert que le client soit connecté

CLIENT.nom

Affiche le nom du client. Requiert que le client soit connecté

CLIENT.prenom

Affiche le prénom du client. Requiert que le client soit connecté

CLIENT.genre

Affiche le genre ("H" ou "F") du client. Requiert que le client soit connecté

CLIENT.email

Affiche l'email du client. Requiert que le client soit connecté

CLIENT.pseudo

Affiche le pseudo du client. Requiert que le client soit connecté

CLIENT.web

Affiche le site web du client. Requiert que le client soit connecté

CLIENT.avatar

Affiche l'URL de l'avatar du client

CLIENT.groupe_extranet

Affiche le groupe extranet du client

CLIENT.groupe_extranet_id

Affiche l'identifiant numérique du groupe extranet du client

CLIENT.page_extranet

Affiche la page du groupe extranet du client

Balises POST/GET

Les balises ci-dessous sont utilisables dans tous les templates / widgets et contenu wysiwyg

GET.*

Affiche la valeur d'un paramètre GET de la page. Exemple : affiche la valeur du paramètre GET "id".

POST.*

Affiche la valeur d'un paramètre POST de la page. Exemple : affiche la valeur du paramètre POST "id".

REQUEST.page

Affiche le nom de page de l'url courante

REQUEST.repertoire

Affiche le chemin de l'url courante

REQUEST.url

Affiche l'url courante

REQUEST.domaine

Affiche le domaine courant

REQUEST.referer

Affiche le referer du navigateur

API

Les balises ci-dessous fournissent des informations sur l'API Front-office

API.actif

Renvoie la chaine "true" si l'api du site est active. "false" dans le cas contraire.

Filtres de balises

Kiubi supporte un ensemble de filtres qui peuvent être appliqués aux balises. Ces filtres ont pour but de changer la valeur de la balise pour mieux répondre à un besoin précis.

On utilise ces filtres en ajoutant une barre verticale | dans la balise. Exemple : {balise|filtre}.

Certains filtres peuvent prendre des arguments, ils seront alors séparés par une autre barre. Exemple : {balise|filtre|argument}.

FiltreDescription
ucfirst

Met en majuscule la première lettre du texte

strtoupper

Met en majuscule tout le texte

strtolower

Met en minuscule tout le texte

rawurlencode

Encode une chaîne en URL selon la RFC 3986. Supporte un argument "utf8" pour encode le résultat en UTF-8.

htmlentities

Convertit tous les caractères éligibles en entités HTML. Supporte un argument "utf8" pour encode le résultat en UTF-8

left|x

Tronque le texte à gauche à strictement X caractères.

stripText|x

Supprime les balises HTML puis tronque le texte à gauche sur X caractères au plus en conservant les mots entiers

mot|x

Affiche le Xème mot du texte

mapValue|x|y

Compare la valeur de la balise avec valeurs de références. Affiche X si la valeur est "1", "actif", "checked", "selected" ou "erreur". Affiche Y dans le cas contraire. Exemple si le contenu de la balise {texte10} est "actif", {texte10|mapValue|active} affiche "active".

sanitize

Passe en minuscule,enlève tous les accents d'une chaine de caractères et convertis les espaces en tirets. Les tirets consécutifs sont fusionnés et les tirets finaux sont supprimés. Seuls les lettres, les chiffres et le tiret sont préservés. Exemple si le contenu de la balise {titre} est "C'est fin, c'est très fin, ça se mange sans faim !", alors {titre|sanitize} affichera "c-est-fin-c-est-tres-fin-ca-se-mange-sans-faim". Ce filtre fonctionne sur des chaines de texte jusqu'à 120 caractères.

Ainsi {intitule_pagecourante|strtoupper} affichera le nom de la page courante en majuscule. Tandis que {SOCIETE.societe_cp|left|2} affichera le numéro de département extrait du code postal du contact principal du site.

Balises des Widgets

Un certain nombre de widgets possèdent des fonctionnalités et des balises communes.

{alterne}

La balise {alterne} est utilisée dans les widgets qui génèrent des listings comme par exemple le widget du Blog / Liste des Billets. La balise affichera alternativement 1 ou 2 si on la place dans le bloc qui est répété dans le widget.

Exemple : le widget Blog / Liste des Billets :

<!--BEGIN:main -->
<ul>
<!--BEGIN:billet -->
<li class="color_{alterne}">{alterne}, {titre}</li>
<!-- END:billet -->
</ul>
<!-- END:main -->

Si on a 5 billets dans son blog, le résultat sera :

1, Titre du premier billet
2, Titre du deuxième billet
1, Titre du troisième billet
2, Titre du quatrième billet
1, Titre du cinquième billet

Cela vous permet, par exemple, d'appeler alternativement l'un ou l'autre style pour changer la couleur de fond et rendre ainsi vos listings plus lisibles.

Les balises {alterne_3}, {alterne_4} et {alterne_5} sont également disponibles et renvoient respectivement les valeurs :

1, 2, 3
1, 2, 3, 4
1, 2, 3, 4, 5

{compteur}

La balise {compteur} est utilisée dans les widgets qui génèrent des listings comme par exemple le widget du Blog / Liste des commentaires. La balise affichera un compteur commençant à 1 et qui sera incrémenté de 1 à chaque fois.

Exemple : le widget Blog / Liste des Billets :

<!-- BEGIN:main -->
<ul>
<!-- BEGIN:commentaire-->
  <li>{compteur}. {commentaire}</li>
<!-- END:commentaire-->
</ul>
<!-- END:main -->

Si on a 3 commentaires pour un billet de son blog, le résultat sera :

1. Premier commentaire
2. Deuxième commentaire
3. Troisième commentaire

Chaque ligne est numérotée automatiquement.

{intitule}

Cette fonctionnalité est une association entre un bloc et une balise. Les widgets pouvant utiliser la fonctionnalité "Intitulé" ont un bloc supplémentaire à placer dans le bloc main :

<!-- BEGIN:main -->
  <!-- BEGIN:intitule -->{intitule}<!-- END:intitule -->
<!-- END:main -->

Le bloc <!-- BEGIN:intitule --> <!-- END:intitule --> ne s'affiche que si l'intitulé du widget est rempli. Cet intitulé est paramétrable lors de l'édition d'un widget dans la gestion de l'Apparence de la Console d'administration de Kiubi.

{ctl}

La balise {ctl} est présente dans certain widgets qui utilisent un formulaire. Elle n'a qu'une utilité technique et est présente sous la forme :

<input type="hidden" name="ctl" value="{ctl}">

Il ne faut pas la supprimer, sinon le formulaire ne fonctionnera plus !

La navigation

La navigation est une fonctionnalité que l'on retrouve dans les widgets qui génèrent des listings et dont la configuration permet l'affichage. C'est un ensemble de blocs qui permet d'afficher des barres de navigations complètes. Les résultats sont affichés sur plusieurs pages et la navigation permet de passer d'une page à l'autre.

Les options de navigation (nombre d'élément par page, afficher ou cacher la navigation) sont toujours configurables dans le widget correspondant.

La barre de navigation comprend :

  • des liens vers les pages suivantes et précédentes,
  • des liens vers la première et dernière page,
  • une liste de numéro de page comprenant un lien pour arriver directement sur la page en question.

Pour plus de souplesse, il est possible de mettre deux barres de navigation dans un même widget (une barre en haut et une en bas du listing, par exemple). Les balises et blocs ci-dessous fonctionnent dans les blocs <!-- BEGIN: nav1 --> <!-- END: nav1 --> et <!-- BEGIN: nav2 --> <!-- END: nav2 -->.

Voici un exemple de ce que cela peux donner en HTML :

<!-- BEGIN: nav1 -->

<!-- BEGIN: premier -->

<a href="{lien_premier}">premiere page</a> |

<!-- END: premier -->

<!-- BEGIN: precedent -->

<a href="{lien_precedent}">page precedente</a> |

<!-- END: precedent -->

<!-- BEGIN: pages -->

<a href="{lien_page}" class="{selected}">{page}</a>

<!-- END: pages -->

<!-- BEGIN: suivant -->

| <a href="{lien_suivant}">page suivante</a>

<!-- END: suivant -->

<!-- BEGIN: dernier -->

| <a href="{lien_dernier}">derniere page</a>

<!-- END: dernier -->

<!-- END: nav1 -->

<br />

<br />

page {num_page} sur {nb_pages} ({nb_resultats} billets trouvés)<br />

<br />

[listing ....]<br />

<br />

<!-- BEGIN: nav2 -->

<!-- BEGIN: premier -->

<a href="{lien_premier}">premiere page</a> |

<!-- END: premier -->

<!-- BEGIN: precedent -->

<a href="{lien_precedent}">page precedente</a> |

<!-- END: precedent -->

<!-- BEGIN: pages -->

<a href="{lien_page}" class="{selected}">{page}</a>

<!-- END: pages -->

<!-- BEGIN: suivant -->

| <a href="{lien_suivant}">page suivante</a>

<!-- END: suivant -->

<!-- BEGIN: dernier -->

| <a href="{lien_dernier}">derniere page</a>

<!-- END: dernier -->

<!-- END: nav2 -->

Ce qui donnera cela :

premiere page | page precedente | 1 2 3 4 5 | page suivante | derniere page

page 2 sur 5 (53 billets trouvés)

[listing ...]

premiere page | page precedente | 1 2 3 4 5 | page suivante | derniere page

Balises disponibles

Bloc nav1 ou nav2

La liste ci-dessous présente les différentes balises disponibles au sein du bloc <!-- BEGIN:pages -->

lien_premier

URL vers la première page.

lien_dernier

URL vers la dernière page.

nb_pages

Nombre de page du listing.

nb_resultats

Nombre d'élément dans le listing.

num_page

Numéro de la page courante.

Bloc nav1.pages ou nav2.pages

Le contenu du bloc s'affiche pour chaque page.

La liste ci-dessous présente les différentes balises disponibles au sein du bloc <!-- BEGIN:precedent -->

lien_page

URL vers la page

page

Numéro de la page.

selected

Affiche "selected" si la page est la page courante. Sinon n'affiche rien.

Bloc nav1.precedent ou nav2.precedent

Le contenu du bloc s'affiche si on n'est pas sur la première page du listing.

La liste ci-dessous présente les différentes balises disponibles au sein du bloc <!-- BEGIN:suivant -->

lien_precedent

URL vers la page précédente.

Bloc nav1.suivant ou nav2.suivant

Le contenu du bloc s'affiche si on n'est pas sur la dernière page du listing.

La liste ci-dessous présente les différentes balises disponibles au sein du bloc <!-- BEGIN: -->

lien_suivant

URL vers la page suivante.

Types de billets

Un billet permet d'ajouter du contenu à une page libre du Site web. Chaque billet peut être considéré comme un paragraphe, un bloc de contenu, pouvant contenir du texte, des images, des liens, des vidéos, du code HTML, etc. Lors de l'ouverture d'un site, Kiubi propose plusieurs types de billets différents en exemple.

Chaque type de billet peut être structuré de manière différente et permet d'intégrer et de présenter du contenu suivant ses besoins.

Si vous utilisez un thème graphique personnalisé, vous pouvez modifier les types de billets par défaut et créer autant de types de billet que souhaité.

Principe de fonctionnement

Le principe de fonctionnement d'un type billet du Site web est très simple. Tous les types de billets de votre site sont regroupés dans le répertoire theme/fr/billets/ de votre espace FTP. Chaque sous-répertoire correspond à un type de billet.

Un billet est composé, en plus d'une structure HTML de votre choix, d'un maximum de 17 champs d'information :

  • titre
  • sstitre
  • texte1 à texte15

Chaque champ peut contenir n'importe quel type de donnée. Par convention (mais ce n'est pas obligatoire), les champs texte10 à texte15 sont utilisés pour stocker des éléments de la médiathèque (image, fichier, etc.), plus précisément l'identifiant faisant référence à l'élément de la médiathèque.

Ces champs sont à définir dans le fichier config.xml de chaque type de billet, ce qui permet de générer automatiquement le formulaire de saisie utilisé dans la console d'administration. Ce fichier est obligatoire.

Chaque champ pourrait être par la suite affiché dans le fichier index.html de chaque type de billet ou dans chaque widget affichant des billets, en fonction de ses besoins. Ce fichier est obligatoire.

Comme tous les éléments de Kiubi, un billet (ou plutôt une liste de billet) est affiché grâce à un widget. C'est principalement les widgets "Contenu de la page libre" et "Bloc d'extrait" qui sont utilisés pour afficher les billets dans votre site internet.

Le fichier config.xml

Ce fichier contient des informations descriptives du type de billet qui seront utilisée à la fois dans la console d'administration et le site Internet. Il indique à Kiubi de quels champs est composé le type de billet.

Exemple de code source

<?xml version="1.0" encoding="iso-8859-1"?>
<type tri="2">
    <desc>Titres, texte et image (à gauche)</desc>
    <listechamps>
        <champ champ="titre" type="text" intitule="Titre"/>
        <champ champ="sstitre" type="text" intitule="Sous-titre" />
        <champ champ="texte10" type="image" intitule="Image" />
        <champ champ="texte1" type="wysiwyg" intitule="Contenu" />
    </listechamps>
</type>

Description

Ce fichier contient une seule balise principale <type> qui possède un seul attribut :

  • tri : nombre qui sert à définir l'ordre dans le quel vont apparaître les types de billet dans les listes déroulantes de la console d'administration.

A l'intérieur, une seule balise <desc> qui contient la description du type de billet qui sera repris dans la console d'administration.

La balise <listechamps> sert à déclarer tous les champs qui seront utilisés dans ce type de billet.

Il existe alors une balise <champ> par champ qui contient les attributs suivants :

  • champ : code du champ qui sera aussi utilisé dans les templates : titre, sstitre, texte1 à texte15.
  • type : le type du champ indique quelle sorte d'information est stockée dans le champ.
  • intitule : intitulé du champ qui va être repris dans la console d'administration dans le formulaire de saisie d'un billet.

Il existe six types de champ :

  • text : champ de saisie simple
  • textarea : champ de saisie multiligne
  • wysiwyg : éditeur de texte visuel
  • image : fichier image de la médiathèque
  • fichier : fichier quelconque de la médiathèque
  • select : champ de liste déroulante

Le champ liste est de type select se comporte comme une liste déroulante classique. Il est construit de la manière suivante :

<champ champ="texte2" type="select" intitule="Liste">
   <option value="Valeur1">Label1</option>
   <option value="Valeur2">Label2</option>
   <option value="Valeur3">Label3</option>
</champ>

Dans cet exemple, le contenu de l'attribut value est stocké dans le champ texte2. L'attribut value doit obligatoirement avoir une valeur (un simple espace value=" " est possible). Le label n'est affiché que dans le détail du billet dans la console d'administration.

Template d'un type de billet

Le fonctionnement détaillé du template d'un type de billet ainsi que la liste exhaustives de ses balises sont accessibles dans la documentation des balises du service CMS.

Ajouter un nouveau type de billet

Pour ajouter un type de billet, il suffit de créer un nouveau sous-répertoire au répertoire theme/fr/billets/ et d'y copier les fichiers config.xml et index.html correspondant à votre nouveau type de billet. Le nouveau type de billet sera alors automatiquement proposé dans le service Site web de la console d'administration.

Types de billets du Blog

Les types de billet du blog fonctionnent selon le même principe que les billets du Site web mais uniquement pour ajouter des informations complémentaires aux billets du Blog.

Contrairement aux types de billets du Site web, les types de billets du blog ne déterminent pas le template du billet, mais seulement si des champs texte1 et texte15 sont ajoutés au billet.

Le principe de configuration des types de billets du Blog est le même que pour les billets du Site web, mais avec les différences suivantes :

  • les types de billets du blog sont regroupés dans le répertoire theme/fr/billets_blog/
  • il n'y a pas de champs titre et sstitre, seuls les champs texte1 et texte15 sont disponibles
  • seul le fichier config.xml est disponible, les templates sont dans le répertoire theme/fr/widgets/blog/, en fonction des widgets utilisés

Types des produits

Un type de produit fonctionne comme un type de billet mais est adapté à votre catalogue produit. Lors de l'ouverture d'un site, Kiubi vous propose par défaut un seul type de produit.

Chaque type de produit peut être structuré de manière différente et permet d'intégrer et de présenter du contenu suivant ses besoins. Contrairement aux différents types de billet nécessaires au Site Web, il est plus rarement utile de multiplier les types de produit, un seul type (proposé par défaut) étant bien souvent suffisant.

Si vous utilisez un thème graphique personnalisé, vous pouvez modifier le type de produit par défaut et créer des nouveaux types de produit.

Principe de fonctionnement

Le principe de fonctionnement d'un type de produit du Catalogue est très simple. Tous les types de produits de votre site sont regroupés dans le répertoire theme/fr/produits/ de votre espace FTP. Chaque sous-répertoire correspond à un type de produit.

Un produit peut être composé, en plus d'une structure HTML de votre choix et des informations spécifiques à un produit (intitulé, chapô, description, variantes, illustration, ...), d'un maximum de 15 champs d'information supplémentaires (qui ne sont pas utilisés dans le type de produit par défaut proposé par Kiubi) :

  • texte1 à texte15

Chaque champ peut contenir n'importe quel type de donnée. Par convention (mais ce n'est pas obligatoire), les champs texte10 à texte15 sont utilisés pour stocker des éléments de la médiathèque (image, fichier, etc.), plus précisément l'identifiant faisant référence à l'élément de la médiathèque.

Ces champs sont à définir, au besoin, dans le fichier config.xml de chaque type de produit, ce qui permet de générer et d'ajouter automatiquement le formulaire de saisie correspondant lors de l'édition d'un produit dans la console d'administration. Ce fichier est obligatoire.

Chaque champ pourrait être par la suite affiché dans le fichier index.html de chaque type produit ou dans chaque widget affichant des produits, en fonction de ses besoins. Ce fichier est obligatoire.

Un fichier styles.css peut être ajouté afin de contrôler la mise en forme du widget Détail d'un produit. Ce fichier est automatiquement chargé dans la balise <head> si le widget est présent dans la page. Ce fichier n'est pas obligatoire.

Comme tous les éléments de Kiubi, un produit (ou une liste de produit) est affiché grâce à un widget. Ce sont principalement certains widgets du service Catalogue qui sont utilisés pour afficher des produits.

Le fichier config.xml

Ce fichier contient des informations descriptives du type de produit qui seront utilisée à la fois dans la console d'administration et le site Internet. Il indique à Kiubi de quels champs d'information supplémentaires est composé le type de produit. Ces champs d'information supplémentaires sont facultatifs.

Le fichier config.xml d'un type de produit fonctionne de la même manière que le fichier config.xml d'un type de billet.

Template d'un type de produit

Le fonctionnement détaillé du template d'un type de produit ainsi que la liste exhaustives de ses balises sont accessibles dans la documentation des balises du service Catalogue.

Ajouter un nouveau type de produit

Pour ajouter un type de produit, il suffit de créer un nouveau sous-répertoire au répertoire theme/fr/produits et d'y copier les fichiers config.xml et index.html (et styles.css) correspondant à votre nouveau type de produit. Le nouveau type de produit sera alors automatiquement proposé dans le service Catalogue de la console d'administration.

Médiathèque

La Médiathèque de Kiubi permet de gérer les fichiers (images, documents textes, pdf, sons, vidéos...) que vous allez utiliser pour enrichir le contenu d'un site. Vous pouvez publier des fichiers de moins de 7Mo directement dans la Médiathèque en passant par la console d'administration. Pour des fichiers de plus de 7Mo, vous devez les publier dans votre espace FTP, dans le répertoire mediatheque.

Accéder à un fichier de la Médiathèque

Tous les fichiers publiés dans la Médiathèque sont stockés dans le répertoire virtuel media et sont identifiés par un numéro identifiant qui leur est propre. Un fichier de la Médiathèque sera donc accessible à l'adresse :

http://nom_de_domaine/media/numero_identifiant

Généralement, le numéro identifiant est ajouté automatiquement si le fichier est inséré directement via la Médiathèque dans une zone de mise en forme de texte ("Wysisyg") ou dans un champ d'information de type image ou fichier.

L'adresse d'un fichier est cependant toujours redirigée vers :

http://nom_de_domaine/media/numero_identifiant/nom_du_fichier.extention_du_fichier

Sauf si elle est de la forme :

http://nom_de_domaine/media/numero_identifiant.extention_du_fichier

Exemple de redirection

L'adresse d'un fichier :

http://nom_de_domaine/media/402

Sera redirigée vers :

http://nom_de_domaine/media/402/mon_fichier.pdf

Mais il n'y aura pas de redirection si elle est de la forme :

http://nom_de_domaine/media/402.pdf

Traitement automatique des images

Kiubi permet de générer automatiquement 4 tailles différentes en plus de la taille d'origine d'une image publiée dans la Médiathèque. Ces tailles sont configurables dans les Paramètres de la médiathèque des Préférences de la console d'administration :

  • grande vignette, par défaut configurée en 1140px par 1140px
  • vignette, par défaut configurée en 480px par 480px
  • grande miniature, par défaut configurée en 240px par 240px
  • miniature, par défaut configurée en 120px par 120px

Ces différentes tailles d'images sont accessibles aux adresses :

http://nom_de_domaine/media/g_vignette/numero_identifiant
http://nom_de_domaine/media/vignette/numero_identifiant
http://nom_de_domaine/media/g_miniature/numero_identifiant
http://nom_de_domaine/media/miniature/numero_identifiant

La taille d'origine de l'image restant accessible à l'adresse :

http://nom_de_domaine/media/numero_identifiant

Includes

Un include permet d'inclure le contenu d'un fichier HTML dans n'importe quel autre tempalte.

Principe de fonctionnement

Pour utiliser un include, il suffit d'indiquer le chemin du fichier que vous voulez inclure sous la forme :

{FILE "/fr/includes/date.html"}

Tous les includes de Kiubi sont regroupés dans le répertoire /theme/fr/includes/. Un include est généralement utilisé pour inclure à différents endroits des bouts de code qui reviennent de manière récurrente.

Par exemple, dans les modèles de mise en pages de Kiubi, le copyright en bas de page est inclus grâce à la balise :

{FILE "/fr/includes/copyright.html"}

Le widget Fragment de template permet d'ajouter des includes directement via la gestion de la mise en page de la console d'administration de Kiubi, sans passer par l'édition d'un template principal.

Page d'erreur 404

La page d'erreur 404 est la page qui est affichée si une adresse erronée de votre site est demandée.

Répertoire

theme/fr/modules/404/404.html

Exemple du code source

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta name="keywords" content="{metaKeywords}">
   <title>{site_nom} | Erreur 404, cette page n'existe pas !</title>
</head>
<body>
   <h1>Erreur 404, cette page n'existe pas !
   <br />
   <a href="{racine}/" title="Retour au site">Retour au site</a></h1>
</body>
</html>

Balises disponibles

Toutes les balises globales sont disponibles.

Fil d'Ariane

Le chemin de navigation, ou fil d'Ariane, est une aide à la navigation sous forme de signalisation de la localisation de l'internaute dans le site Internet. Il se présente généralement sous la forme :

Accueil / Catalogue / Nom de la catégorie / Nom du produit

Le chemin de navigation est construit automatiquement par Kiubi, les intitulés des éléments qu'il affiche ne sont donc pas tous personnalisables. Chaque service aura son propre intitulé :

  • Site web : Accueil / Nom de la page
  • Blog : Accueil / Blog / Nom de la catégorie
  • Catalogue : Accueil / Catalogue / Nom de la catégorie / Nom du produit
  • E-commerce : Accueil / Etape de la commande
  • Gestion de comptes : Accueil / Gestion de comptes
  • Contact : Accueil / Contact

L'intitulé et l'adresse du Blog et du Catalogue dans le fil d'arianne sont personnalisables dans les Préférences de la console d'administration.

Par défaut, ce module est affiché via l'include {FILE "/fr/includes/chemin.html"} dans les templates principaux du site.

Cet include contient la balise {MODULE.cms/chemin} utilisée pour appeler le module.

Répertoire

theme/fr/modules/chemin/index.html

Exemple du code source

<a href="{baseLangue}/" title="Accueil">Accueil</a> /
<!-- BEGIN:page -->
<a href="{lien}" title="{page}" target="{cible}">{page}</a>
<!-- BEGIN:separateur --> / <!-- END:separateur -->
<!-- END:page-->

Balises disponibles

Bloc main.page

Le contenu du bloc s'affiche pour chaque page du chemin.

La liste ci-dessous présente les différentes balises disponibles au sein du bloc <!-- BEGIN:separateur -->

page

Intitulé de la page.

cible

Cible du lien (attribut target).

lien

URL du lien vers la page correspondante.

type

Type de la page. Affiche page pour une page libre, lien_ext pour un lien externe, lien_int pour un lien interne et ne renvoie aucune valeur pour un séparateur.

compteur

La balise affiche un compteur commençant à 1 et qui est incrémenté de 1 à chaque page.

Bloc main.page.separateur

Le contenu du bloc s'affiche tout le temps sauf pour la dernière page du chemin

Page de fermeture

La page de fermeture est la page qui est affichée si le site est fermé :

  • par manque de crédit
  • volontairement via les Préférences de la console d'administration
  • pendant les périodes de maintenance de la plateforme

Répertoire

theme/fr/modules/fermeture/fermeture.html

Exemple du code source

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="keywords" content="{metaKeywords}">
 <title>{site_nom} est actuellement ferm&eacute; !</title>
</head>
<body>
  <h1>{site_nom} est actuellement fermé !</h1>
  <a href="{acces_front}">Acc&eacute;der au site</a>
</body>
</html>

Balises disponibles

Toutes les balises globales sont disponibles, en plus de la balise {acces_front} qui affiche le lien vers le formulaire d'identification permettant l'accès aux sites de démonstrations ou protégés par login/mot de passe.

Moteur de recherche

Il est possible d'intégrer un moteur de recherche dans un template principal (ou via un include).

<div id="search">
  <form action="{baseLangue}/recherche/{service}/" method="get">
    <table border="0" cellspacing="0" cellpadding="0"><tr>
      <td><input type="text"></td>
      <td><input type="submit" value=""></td>
    </tr></table>
  </form>
</div>

Le moteur de recherche, à ne pas confondre avec les résultats d'une recherche (le Widget Recherche simple), permet d'effectuer une recherche dans le service en cours dans le site Internet. En effet, Kiubi étant multiservices, le moteur de recherche ne peut pas faire de recherche dans l'intégralité du site Internet (contenu rédactionnel, blog et catalogue simultanément). La recherche ne s'effectuera que dans le service actuellement visité par l'internaute.

Exemple : si l'internaute visite le blog et qu'il effectue une recherche, la recherche ne sera effectuée que dans le contenu du blog. Il en va de même pour le catalogue de produit et pour le contenu rédactionnel.

La balise {service} permet de définir automatiquement le service en cours. Il est cependant possible de forcer une recherche dans un service particulier en remplaçant la balise {service} par le service concerné :

  • cms pour le Site web.
  • blog pour le Blog.
  • catalogue pour le Catalogue.

Le paramètre name du champ de recherche doit impérativement avoir r pour valeur.