Pour vos clients, dans le cadre de la création de template destinés à la vente ou au partage, ou tout simplement pour vous même, vous pouvez considérer que les sélecteurs installés par défaut ne suffisent pas.

Nous allons voir comment installer un sélecteur supplémentaire nous permettant de choisir une police pour un élément précis, dans notre exemple .breadcrumb qui cible le fil d'ariane.

Créer le sélecteur de police dans templateDetails.xml

ouvrez et éditez par ftp le fichier templateDetails.xml.

 

Saviez-vous que vous pouvez également y accéder par le gestionnaire de template ?

Trouvez la zone dans le fichier qui gère les polices, aux alentours de la ligne 260

Copiez et dupliquez un groupe de police : il y a deux instructions clairement lisibles , la première qui fait afficher le bouton d'activation, la seconde qui affiche les champs de selections.

Dans notre cas d'étude, nous copions le groupe « helix body font » et dupliquons en renommant tout ce qui est body en breadcrumb et en veillant bien de respecter la casse !

Ce qui nous donne :

<field type="group" title="HELIX_BREADCRUMB_FONT" subtitle="HELIX_BREADCRUMB_FONT_DESC" />

<field name="enable_breadcrumb_font" class="parent breadcrumb_font" type="radio" default="1" label="HELIX_ENABLE_FONT" description="HELIX_ENABLE_FONT_DESC">

<option value="1">HELIX_YES</option>

<option value="0">HELIX_NO</option>

</field>

<field name="breadcrumb_font" type="typography" class="child breadcrumb_font breadcrumb_font_1" default='{"fontFamily":"Open Sans","fontWeight":"300","fontSubset":"latin","fontSize":""}' label="HELIX_SELECT_FONT" description="HELIX_SELECT_FONT_DESC" />

 

Nous voyons apparaître le sélecteur dans l'onglet typographie du template.

 

Modifier le fichier langue

Les fichiers de langues sont dans le dossier language/votre_langue chez nous, puisque nous avons installé le fichier fr-FR mis à disposition par web54 ce sera langage/fr-FR/fr-Frtpl_shaper_helix3.ini

Nous allons ajouter les deux chaînes et leurs variables :

HELIX_BREADCRUMB_FONT="Police Breadcrumb"
HELIX_BREADCRUMB_FONT_DESC="Cette police google sera appliquée sur la balise <breadcrumb>."

Sauvegardez,vous apercevez maintenant votre texte modifié dans votre préréglage.

 

Appeler le paramètre de police par le fichier index.php

Maintenant que nous avons un sélecteur, il faut envoyer l'information au template, ou du moins que le template aille chercher l'information.

Cela se passe dans le fichier index.php à la racine du site.
Ouvrez le pour l'éditer avec votre éditeur de texte (notepad++ par exemple)

aux alentours de la ligne 53, ajoutez les lignes suivantes :

//Breadcrumb Font

if( $this->params->get('enable_breadcrumb_font') ) {

$webfonts['.breadcrumb'] = $this->params->get('breadcrumb_font');

}

 

Ces lignes envoient l'information à helix de modifier la police à tout ce qui porte la classe .breadcrumb.

La première ligne est un commentaire.
La seconde initie l'instruction par une condition.
La troisième applique la condition (ne pas oublier le point si cela s'applique à une classe, le # pour un ID, et ne rien mettre si cela s'applique à un élément (body, h1)

Sauvegardez, visualisez dans votre template.

Si la police est activée dans votre backend, vous devriez voir le changement s'opérer.