Testé fonctionnel Magento 2.4. Source: Add Google Fonts using Google’s new URL format.
Source: How to check IsHomePage in Magento 2? Are we on the homepage?
1 2 3 |
<?php if ($this->getRequest()->getFullActionName() == 'cms_index_index') : ?> <h1>you are on the homepage</h1> <?php endif; ?> |
1 2 3 4 5 6 7 8 9 |
if ($this->getRequest()->getFullActionName() == 'cms_index_index') { //you are on the homepage } if ($this->getRequest()->getFullActionName() == 'catalog_product_view') { //you are on the product page } if ($this->getRequest()->getFullActionName() == 'catalog_category_view') { //you are on the category page } |
ATTENTION: cette solution testée fonctionnelle est plus simple à mettre en place que les solutions précédemment citées sur ce blog:
- [jQuery] Bloquer le scroll dans la page quand un élément en position absolue est scrollable
- [jQuery] Eviter le scroll de la page lorsqu’on touche un élément en position absolute en sur-impression
Source: Disable Scrolling on Body
1 2 3 4 5 6 7 8 9 |
// Bloquer le scroll de la page lorsqu'un élément en position absolute (off-canvas, modale...) est ouvert: function handlePageScrollState() { const $_HTML = $('html'); if ($_HTML.hasClass('is-disabled-page-scroll')) { $_HTML.removeClass('is-disabled-page-scroll'); } else { $_HTML.addClass('is-disabled-page-scroll'); } } |
1 2 3 4 5 |
.is-disabled-page-scroll { margin: 0 !important; height: 100% !important; overflow: hidden !important; } |
Astuces éprouvées sur un Magento 2 CE, version 2.4.
Billet qui sera probablement encore mis à jour.
Architecture de votre thème
Architecture globale d’un thème Magento 2 enfant de Blank
A partir de app/code/design/frontend/Vendor/theme/
- composer.json
- registration.php
- requirejs-config.js
- theme.xml
composer.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "name": "Vendor/theme", "description": "N/A", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/theme-frontend-blank": "*", "magento/framework": "100.0.*" }, "type": "magento2-theme", "version": "1.0.0", "license": [ ], "autoload": { "files": [ "registration.php" ] } } |
registration.php
1 2 3 4 5 6 7 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Vendor/theme', __DIR__ ); |
requirejs-config.js
theme.xml
1 2 3 4 5 |
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Mon thème enfant de Blank</title> <parent>Magento/blank</parent> </theme> |
Les styles/fichiers LESS
Dans les thèmes Magento 2, certains fichiers LESS (_extend.less, _theme.less, critical.css, …),ont des noms/libellés et des fonctions prédéfinies qu’il convient de conserver. Le développeur de thèmes n’est pas obligé de tous les avoir dans son thème. Mais dès qu’il à recours à l’une ou l’autre des fonctionnalités que ces fichiers couvrent, il faut utiliser ces derniers.
A partir de app/code/design/frontend/Vendor/theme/web/css/
- source/
- _extend.less Doit contenir tous les
@import
vers les fichiers LESS spécifiques au thème que vous allez créer. Vous pouvez organiser ces fichiers comme bon vous semble. - _theme.less Doit contenir uniquement des surcharges de variables déjà déclarées précédemment dans les thèmes parent ou dans le dossier lib de Magento.
- global/ Nom de dossier purement indicatif.
- _vars.less Nom de fichier purement indicatif. Il doit contenir les variables que vous allez créer spécifiquement pour votre thème. Autrement dit, ces dernières ne doivent PAS se trouver dans les fichiers pré-existants _theme.less et _variables.less, mais dans un fichier custom que vous créerez exprès pour l’occasion et que vous
@import
-erez depuis le fichier _extend.less.
- _vars.less Nom de fichier purement indicatif. Il doit contenir les variables que vous allez créer spécifiquement pour votre thème. Autrement dit, ces dernières ne doivent PAS se trouver dans les fichiers pré-existants _theme.less et _variables.less, mais dans un fichier custom que vous créerez exprès pour l’occasion et que vous
- _extend.less Doit contenir tous les
Mediaqueries
Pour des recettes qui fonctionnent: [Magento 2] Mediaqueries LESS avec les mixins du core.
- Pour utiliser
min-width
etmax-width
dans la même déclaration, voir l’exemple donné pour Tablet - Pour soustraire 1px à une valeur déclarée dans une variable du core (
@screen__xl
par exemple), se référer à l’exemple donné pour Tablet. L’utilisation decalc()
est obligatoire car les valeurs des variables du core incluent l’unité (@screen__xl: 1440px
par exemple) et que, contrairement à ce qu’indique la documentation officielle (dont l’exemple est FAUX!!!), il ne faut pas déclarer(max-width: @screen__xl - 1)
mais bien(max-width: calc(@screen__xl ~"- 1px"))
. Merci les gars pour le mal de tête, hein.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
/* * Out-of-the-box MEDIAQUERIES * https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/responsive-web-design/rwd_css.html * Responsive mixins usage documentation: lib/web/css/docs/source/_responsive.less */ // # Consider out-of-the-box Magento 2 responsive breakpoints // In Magento UI library there are predefined variables for breakpoints. // ```css // @screen__xxs: 320px; // @screen__xs: 480px; // @screen__s: 640px; // @screen__m: 768px; // @screen__l: 1024px; // @screen__xl: 1440px; // // Common (styles-m.css) // _____________________________________________ & when (@media-common = true) { // your code } // // Mobile (styles-m.css) // _____________________________________________ // From 0px to 640px .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { // your code } // From 0px to 768px .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { // your code } // // Mobile + Tablet // _____________________________________________ // From 0px to 1439px & when (@media-target = 'mobile'), (@media-target = 'all') { @media only screen and (max-width: calc(@screen__xl ~"- 1px")) { // your code } } // // Tablet + Desktop // _____________________________________________ // From 768px to ∞ (overrides ALL Tablet!) .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { // your code } // From 1024px to ∞ (overrides big Tablet only!) .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) { // your code } // // Tablet ONLY // _____________________________________________ // This will add styles for tablet devices. When using native media-queries, we recommend wrapping your media-queries with media-width Magento mixins or media-target // Between 768px and 1439px & when (@media-target = 'desktop'), (@media-target = 'all') { @media only screen and (min-width: @screen__m) and (max-width: calc(@screen__xl ~"- 1px")) { // your code } } // // Desktop (style-l.css) // _____________________________________________ // From 1440px to ∞ .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) { // your code } /* * End: Out-of-the-box MEDIAQUERIES */ |
Quelques trucs à vérifier:
Le problème que j’ai rencontré:
Magento 2 ne parvient pas à me générer « styles-m.css » par exemple; j’ai ce message d’erreur lorsque j’essaye d’afficher dans le navigateur, la source du fichier http://mon-site.local/static/version1611129694/frontend/MyVendor/mytheme/fr_FR/css/styles-m.css
1 2 3 4 5 6 7 8 9 10 |
Notice: Trying to access array offset on value of type null in /home/mike/www/project/vendor/wikimedia/less.php/lib/Less/Tree/Variable.php on line 49 #1 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->processContent() called at [vendor/magento/framework/View/Asset/PreProcessor/AlternativeSource.php:114] #2 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->process() called at [vendor/magento/module-developer/Model/View/Asset/PreProcessor/PreprocessorStrategy.php:78] #3 Magento\Developer\Model\View\Asset\PreProcessor\PreprocessorStrategy->process() called at [vendor/magento/framework/View/Asset/PreProcessor/Pool.php:77] #4 Magento\Framework\View\Asset\PreProcessor\Pool->process() called at [vendor/magento/framework/View/Asset/Source.php:152] #5 Magento\Framework\View\Asset\Source->preProcess() called at [vendor/magento/framework/View/Asset/Source.php:105] #6 Magento\Framework\View\Asset\Source->getFile() called at [vendor/magento/framework/View/Asset/File.php:158] #7 Magento\Framework\View\Asset\File->getSourceFile() called at [vendor/magento/framework/App/StaticResource.php:146] #8 Magento\Framework\App\StaticResource->launch() called at [vendor/magento/framework/App/Bootstrap.php:263] #9 Magento\Framework\App\Bootstrap->run() called at [pub/static.php:13] |
Vérifier l’héritage des thèmes via l’interface d’admin
CONTENU > Design > Configuration.
La première rangée doit être renseigner avec le thème dont vous héritez (si vous décidez d’hériter d’un thème). Ce n’est qu’à partir de la seconde rangée que vous assignerez votre ou vos thème(s) custom.
Exemple: première rangée du tableau (« Par défaut: Global », « Nom du thème: »), assigner le thème « Magento Blank » (ou Luma, selon celui duquel votre thème custom hérite).
A partir de la seconde rangée seulement, assignez votre ou vos thème(s) custom.
On n’oublie pas de vider tous les caches suite à cette modification!
Désactiver les caches Front-End
Via la commande bin/magento cache:disable full_page block_html layout
Désactiver le versionning des statiques
Via la commande bin/magento config:set dev/static/sign 0
Assigner les droits sur tous les fichiers de l’instance (sur tout le projet)
Deux commandes à saisir l’une après l’autre:
1 2 3 4 |
// pour le user et le groupe: chmown -R user_www:groupe_www dossier_du_site // pour donner à user et group (ug) les droits de lecture/écriture (+rw) chmod -R ug+rw dossier_du_site |
Vérifier l’arbo et les noms des fichiers dans votre thème custom
Ces derniers doivent correspondre au modèle Magento 2 afin que l’héritage se fasse correctement.
Exemple: lorsque vous héritez de Blank, un fichier web/css/source/_extend.less (ATTENTION pas de « s » à la fin de « extend »!!! doit vous servir à importer vos fichiers LESS spécifiques.
Source: Regex match string until whitespace Javascript.
Une regex qui extrait, à partir d’une chaîne de caractères de type level1 nav-1-1 category-item first active parent is-submenu-item is-drilldown-submenu-item
la classe qui commence par nav-
et se termine au prochain espacement (whitespace):
1 2 3 4 5 6 7 8 9 |
$('.level1', '#megaMenu').on('click', function(e){ e.preventDefault(); let $_THIS = $(this); $_THIS.removeClass(function () { // Select the element divs which has class that starts with "nav-" var className = this.className.match(/(nav-)[^\s]+/gi); // Get a match to match the pattern "Starts with nav- and until next whitespace" and extract that classname console.log(className); // ["nav-1-1"] }); }); |
En fait on ne va pas utiliser de regex comme annoncé dans le titre, car la méthode trim()
de jQuery fait le boulot attendu de supprimer tous les espaces au début et à la fin d’une chaîne de caractères.
Le code ci-dessous vérifie si il y a au moins un tooltip dans la page. Si « oui », il récupère le contenu de chaque tooltip présent, retire les espaces blancs (white spaces) au début et à la fin de la chaîne de caractères récupérée, compte le nombre de caractères restant et attribue une largeur fixe en pixels au tooltip en fonction de la formule nombre de caractères * 2.25.
1 2 3 4 5 6 7 8 9 10 |
// Set tooltip dynamic width regarding its content if ( $('.field-tooltip-content').length ) { $('.field-tooltip-content').each(function(){ let $_THIS = $(this), TOOLTIP_CONTENT = $_THIS.html(), TOOLTIP_CHARACTER_COUNT = $.trim(TOOLTIP_CONTENT).length; $_THIS.css('width', TOOLTIP_CHARACTER_COUNT *2.25 + 'px'); }); } |
© 2021 devfrontend.info
Theme by Anders Norén — Up ↑