Catégorie : Intégration

Prestashop est installé avec un thème de base que vous pouvez avoir envie de modifier, de personnaliser. La manière la plus simple et la plus sûre de le faire est de passer par la création d’un thème enfant du thème principal et de ne modifier que les fichiers que vous souhaitez.
Ainsi le thème enfant est en quelque sorte une extension du thème principal. Tous les changements que vous apporterez seront placés dans le répertoire du thème enfant. L’avantage de procéder ainsi est de conserver intactes les pages natives du thème Prestashop par défaut. C’est pratique en cas d’erreur de codage des fichiers que vous modifierez car vous pouvez toujours revenir en arrière. Par ailleurs lorsque vous mettrez à jour votre boutique Prestashop les modifications faites dans le thème enfant seront conservées.
La création d’un thème enfant peut se faire en quelques clics à partir de l’interface d’administration. Seulement, afin de comprendre cette notion de thème enfant, voyons dans un premier temps comment le faire manuellement.

Méthode 1 : création manuelle du thème enfant.

Le thème principal de Prestashop se nomme classic. Il se situe dans le répertoire …/themes, et se compose de 5 dossiers et d’une image.

Pour créer un thème enfant vous aurez besoin de créer à minima un dossier que vous pouvez nommer comme vous le souhaitez. Dans notre exemple il est appelé : theme-enfant.

Dans ce dossier créez un sous-dossier : config et ajoutez une image nommée preview.png. Cette image peut-être une copie de celle du thème classic ou tout autre image de votre choix. Elle sert à prévisualiser votre thème enfant dans l’interface d’administration de Prestashop. Il est simplement conseiller de respecter la taille initiale de 500×746 px et l’extension .png.
Vous avez maintenant une structure de répertoire qui doit correspondre à l’image ci-dessous.

Dans le dossier …/themes/theme-enfant/config créez un fichier qui sera nommé theme.yml et copier le code comme sur l’image ci-dessous.

• Parent : indique le répertoire thème parent.
• Name : indique le nom du répertoire du thème enfant.
• Display_name : indique le nom de votre thème tel qu’il sera affiché dans la partie administration du site.
• Assets : la mention true, indique que ce sont les éléments du thème parent qui sont utilisés (feuille de style, scripts, image et modules).

Une fois ces étapes effectuées, le thème enfant est désormais visible dans la partie administration de votre site Prestashop.
Dans le menu de navigation, cliquez sur le lien Apparence du bloc PERSONNALISER, puis sur le lien Thème et logo. Votre thème enfant apparait, et vous pouvez l’activer sur votre boutique.

Le thème enfant est donc désigné par le nom que vous avez donné, la version, et l’auteur de conception.
Pour modifier l’auteur, il suffira d’ajouter dans le fichier theme.yml les éléments d’auteur : nom, email et url, comme sur l’image ci-dessous.

A noter : il peut être nécessaire de vider le cache de votre navigateur.

Méthode 2 : création automatique du thème enfant.

Il est possible de créer directement un thème enfant à partir de l’interface d’administration. Pour cela, cliquez sur le lien Thème et logo du menu Apparence du bloc PERSONNALISER. Puis cliquez sur le troisième onglet Personnalisation avancée.
Vous pouvez alors télécharger le thème classic. Un fichier zippé nommé child_classic se charge dans le répertoire …/themes.

Extraire le contenu de ce fichier, et le mettre dans le répertoire …/themes. Vous devez avoir une structuration de fichiers comme sur l’image ci-contre. On remarque la création d’un répertoire supplémentaires nommé assets. Il contient un sous-dossier css dans lequel se trouve le fichier custom.css.
C’est dans ce fichier que vous pourrez écrire toutes les règles de mise en forme css que vous souhaitez apporter à votre boutique.

Maintenant que votre thème enfant est crée il est possible d’y apporter toutes les modifications et de l’adapter au rendu que vous souhaitez pour votre boutique. A noter, si vous avez appliqué la méthode 1 pour la création du thème enfant, il faudra rajouter dans le répertoire de votre thème le dossier assets, le sous-dossier css et le fichier custom.css.

Flexbox CSS Layout est un modèle de mise en page permettant d’afficher les éléments de contenu d’une page web en boîtes flexibles. Avec ses diverses propriétés, Flexbox est une alternative intéressante par rapport au modèle de mise en page Float. En effet, le contrôle de l’alignement, la direction, la taille et l’ordre des boîtes de contenu se fait aisément.

Exemple pratique avec un conteneur div et 4 conteneurs enfants div.

Et une feuille de style associée.

Les propriétés du conteneur parent : flex

La direction : flex-direction

La lecture de la page peut se faire en ligne – row ou en colonne – column. Ce sens de lecture définira l’axe principal de votre page.

Par exemple : l’axe principal d’une organisation des éléments enfants en ligne est horizontal, l’axe secondaire est l’axe vertical. C’est l’inverse si les éléments enfants sont organisés en colonne, l’axe secondaire est l’axe horizontal.

• row : les éléments enfants sont affichés en ligne, de gauche à droite. C’est la valeur par défaut. Il n’est pas nécessaire de la renseigner dans la feuille de style.

• row-reverse : les éléments sont affichés en ligne, de droite à gauche

• column : les éléments sont affichés en colonne de haut en bas

• column-reverse : les éléments sont affichés en colonne de bas en haut

Les propriétés d’alignement : justify-content et align-items

Justify-content

Cette propriété s’utilise pour définir l’alignement horizontal et les espaces entre chacun des éléments enfants
répartis sur l’axe principal.

• flex-start : les éléments enfants se placent au début de l’élément parent. C’est la valeur par défaut. Il n’est
  pas nécessaire de la renseigner dans la feuille de style.

• flex-end : les éléments enfants se placent à la fin de l’élément parent.

• center : les éléments enfants se placent au centre de l’élément parent.

• space-between : les éléments enfants sont uniformément répartis avec un espace entre eux. Le premier élément enfant étant situé au début, le dernier à la fin du parent.

• space-around : les éléments enfants sont uniformément répartis et entourés d’un espace.

• space-evenly : les éléments enfants sont uniformément répartis et l’espace qui les séparent est égal.

align-items

Cette propriété d’alignement s’utilise sur l’axe secondaire.

• stretch : les éléments enfants s’étirent pour remplir l’élément parent. C’est la valeur par défaut. Il n’est pas nécessaire de la renseigner dans la feuille de style.

• flex-start : les éléments enfants sont empilés au début de l’élément parent.

• flex-end : les éléments enfants sont empilés à la fin de l’axe secondaire.

• center : les éléments enfants sont empilés au centre de l’axe secondaire.

Gérer les débordements et les aligner : flex-wrap et align-content

flex-wrap

Par défaut, tous les éléments enfants se placent sur une seule ligne. Lorsque ces éléments enfants sont trop larges (espacement intérieur – padding, ou extérieur – margin) pour leur conteneur parent, ils débordent de celui-ci.

La propriété flex-wrap permet de gérer les retours à la ligne, grâce aux valeurs suivantes.

• nowrap : c’est la valeur par défaut, elle n’a donc pas besoin d’être écrite. Il n’y a pas de retour à la ligne, les éléments enfants se serrent sur la même ligne pour tenir dans l’élément parent, quelque soit les valeurs de largeurs affectées aux éléments. La valeur de largeur des éléments enfants n’est pas prise en compte.

• wrap : les éléments enfants passent à la ligne, et les valeurs de largeurs sont prises en compte.

• wrap-reverse : les éléments enfants passent à la ligne et s’affichent dans l’ordre inverse.

align-content

Cette propriété permet d’aligner les éléments enfants sur l’axe secondaire. Son rôle et les valeurs sont les mêmes que pour la propriété justify-content qui affecte l’axe principal.

• stetcht : les lignes des éléments enfants s’étirent pour occuper tout l’espace disponible. C’est la valeur par défaut, elle n’a pas besoin d’être écrite.

• flex-start : les lignes des éléments enfants se placent au début de l’élément parent.

• flex-end : les lignes des éléments enfants se placent à la fin de l’élément parent.

• center : les lignes des éléments enfants se placent au centre de l’élément parent.

• space-between : les lignes éléments enfants sont uniformément réparties dans l’élément parent. La première en début de contenu, la dernière en fin de contenu.

• space-around : les lignes des éléments enfants sont uniformément réparties dans l’élément parent avec un espace autour.

• space-evenly : les lignes des éléments enfants sont uniformément réparties dans l’élément parent, les espaces autour sont égaux.

La propriété flex-flow

Cette propriété permet d’associer les propriétés et les valeurs de flex-direction (axe-principal) et de flex-wrap (axe-secondaire) en une seule ligne de css. Par défaut cette propriété prend les valeurs suivantes : flex-flow : row nowrap . Le flux s’affiche en ligne, sans passage à la ligne.

Les propriétés des éléments enfants

La propriété order

Cette propriété permet d’affecter un ordre d’affichage aux éléments enfant et ce quel que soit leur ordre d’écriture dans le flux html. La valeur par défaut est 0. Les valeurs affectées sont des nombres entiers.

La propriété align-self

Cette propriété permet d’affecter un alignement spécifique sur l’axe secondaire à un ou plusieurs éléments enfants indépendamment de l’alignement défini dans le conteneur parent. Les valeurs prises sont les même que pour align-items (strecth : valeur par défaut, flex-start, flex-end et center).

• Exemple : flex-end

• Exemple : center

La propriété flex-grow

Cette propriété permet d’augmenter la taille relative d’un ou plusieurs éléments par rapport aux entres enfants de l’élément parent.
Exemples :

La propriété flex-shrink

A l’inverse de flex-grow, flex-shrink permet de réduire la taille d’un ou plusieurs éléments enfants.

Exemples :

La propriété flex-basis

Cette propriété définit la taille de base des élément enfants, l’espace disponible restant sera occupé en fonction des facteurs de flexibilité. Si l’axe principal est horizontal (row) cela correspond à une largeur, si l’axe principal est vertical (column) cela correspond à une hauteur.

Comme pour les propriétés css classiques de width ou height, les valeurs acceptées sont de type longueur absolue ou relative (px, %, rem, em). La valeur par défaut étant auto, cette propriété accepte aussi les valeurs de content (selon le contenu), initial et inherit.

Exemple :

La propriété flex

C’est une propriété raccourcie de flex-grow, flex-shrink et flex-basis. Les valeurs automatiques, sans autres précisions sont : flex : 1 1 auto ;

Tester votre mise en page flex avec l’outil : flexbox.help