Formation Magento 2 : Chapitre 6 – Partie C

Nous allons désormais voir comment ajouter du CSS à notre template. Notez que le CSS que nous allons créer est situé dans le module. Il ne s’agit pas ici de la création d’un thème Magento. Cette partie de création de thème sera abordée par la suite dans cette formation.

Layout, et ajout du CSS

Notre CSS doit-être appelé uniquement sur la page d’affichage des jobs, nous allons donc mettre l’instruction d’ajout du CSS dans le layout :
app/code/Maxime/Jobs/view/frontend/layout/jobs_job_index.xml

Modifiez votre layout de la sorte :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="2columns-right">
    <head>
        <css src="Maxime_Jobs::jobs.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Maxime\Jobs\Block\Job\ListJob" name="jobs_list" template="jobs/list.phtml" />
        </referenceContainer>
    </body>
</page>

Si vous désirez ajouter un CSS à toutes les pages de votre site, vous pouvez créer le fichier suivant :
app/code/Maxime/Jobs/view/frontend/layout/default.xml

Le layout serait le suivant :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="2columns-right">
    <head>
        <css src="Maxime_Jobs::jobs.css"/>
    </head>
</page>

Notez que si je veux ajouter mon CSS à mon module Helloworld, je peux le faire via le layout app/code/Maxime/Jobs/view/frontend/layout/helloworld_say_hello.xml ! Globalement vous pouvez cibler vos pages via l’ajout d’un layout. Sachez que c’est possible mais dans ce cas, il vaut mieux mettre le layout et le CSS dans le module Helloworld 😉

Nous déclarons dans le layout un fichier CSS nommé « jobs.css », nous allons le créer (avec l’extension less !) :
app/code/Maxime/Jobs/view/frontend/web/jobs.less

Vous pouvez insérer le CSS suivant (au format Less) :

ol.jobs {
  list-style-type: none;
  padding: 0;
  margin : 0;

  .item {
    border-bottom : 1px solid black;
    margin-bottom : 2rem;
    padding-bottom : 2rem;

    .title {
      font-size: 1.3em;
      margin-bottom: 1rem;
    }
  }

  .item.last {
    border-bottom : none;
  }
}

Voici le rendu que vous devriez avoir :

rendupagecss

Less et Magento

Pourquoi défini-t-on un fichier .less ?
C’est une nouveauté dans Magento 2, l’implémentation de Less. Je ne ferai pas de tutoriel là dessus, car il en existe des tonnes sur la toile. Je ne peux vous conseiller de lire cet article simple et efficace sur OpenClassRooms : Simplifiez-vous la vie avec LESS

Magento va tout d’abord chercher un fichier CSS, s’il n’en trouve pas il cherchera un fichier Less. Globalement, il vaut mieux utiliser du less tout le temps.

Si vous affichez votre page, la première fois vous risquez de voir vos changements. Si vous éditez le CSS et que vous actualisez la page, cette-ci rien ne sera pris en compte, même si nos caches sont désactivés.

En effet, Magento « pré-compile » ses fichiers CSS et les stocke dans deux endroits :
var/view_preprocessed
pub/static/frontend/Magento/luma/fr_FR/Maxime_Jobs

Vous pouvez supprimer ces deux dossiers et actualiser. Vos changements apparaîtront alors.

Il est possible d’effectuer une manipulation dans le backoffice Magento pour « contourner » le problème.
Cette configuration est possible uniquement si vous êtes en mode « développeur » (cf. Chapitre 1-C), et donc non disponible en production. Elle permet de gérer l’intégration de less côté client, et non côté serveur. De ce fait votre page apparaît un court instant sans CSS, puis le CSS est calculé quelques dixièmes de secondes après :

lessconfig

Cette configuration se trouve dans Stores > Configuration > Advanced > Developer

Avec cette manipulation, il vous faudra quand même supprimer le dossier
pub/static/frontend/Magento/luma/fr_FR/Maxime_Jobs

Et lors de la mise en production ?

Magento a prévu une commande pour déployer ce genre de modifications sur vos serveurs de production. Il vous faudra lancer la commande suivante :

php bin/magento setup:static-content:deploy

Vous savez désormais comment ajouter du CSS à votre module, prochaine étape, nous allons créer nos fichiers de traductions !

Continuer la formation
Revenir à la partie précédente
Mise en place du CSS dans un module avec Magento 2
Taggé sur :    

2 thoughts on “Mise en place du CSS dans un module avec Magento 2

  • 17/03/2016 à 14:15
    Permalink

    Dans l’extrait :
    « Vous remarquez ici que l’on ajoute un CSS qui sera nommé jobs.css, nous allons maintenant le créer :
    app/code/Maxime/Jobs/view/frontend/web/jobs.less »

    Le fichier a créer est-il un fichier jobs.less ou jobs.css ? 🙂

    Répondre
    • 17/03/2016 à 14:22
      Permalink

      Oui en effet c’est pas clair. Du coup, j’ai repris ce que j’avais mis en anglais qui était plus facilement compréhensible 😉

      Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous utilisons des cookies afin de nous assurer de vous proposer la meilleure expérience sur ce site.
Ok