Supro – devfrontend.info

Eviter des conflits d’édition entre le FO et le BO
Après l’import d’une base de données, pour retrouver le paramètrage backoffice et l’aspect visuel frontoffice
Modifier le logo du site sans passer par l’interface d’édition des pages en front
Composer un habillage depuis le code source (et pas depuis l’interface d’admin)
- Fallback héritage CSS dans le thème Supro
Surcharger (override) les valeurs de style par défaut (ou celles définies depuis l’interface d’admin)
- Pattern utilisé par le thème Supro pour la nomenclature de ses variables LESS
Surcharge d’une classe PHP située dans app/code/Vendor/Module/Model/Config/Source via un namespace spécifique
Créer un Source Model custom

Eviter des conflits d’édition entre le FO et le BO

Selon la doc officielle du thème Supro, veiller à bien désactiver le cache « full_page »:

$ n98-magerun2 cache:disable full_page

1	$ n98-magerun2 cache:disable full_page

MAIS en procédant ainsi, les modification appliquées via le BO ne sont pas remontées en FO. Le seule solution semble être de désactiver TOUS LES CACHES:

$ n98-magerun2 cache:disable

1	$ n98-magerun2 cache:disable

Après l’import d’une base de données, pour retrouver le paramètrage backoffice et l’aspect visuel frontoffice

$ n98-magerun2 cache:clean

1	$ n98-magerun2 cache:clean

Puis se rendre en BO > MGS > Theme Setting [MGS Theme] > et cliquer sur le bouton « Save Config » sans faire de modif.

Modifier le logo du site sans passer par l’interface d’édition des pages en front

Fichier à remplacer (en conservant le même libellé et la même extension): Z:\magento2\pdv\pub\static\frontend\Mgs\supro\fr_FR\images\logo.svg

Composer un habillage depuis le code source (et pas depuis l’interface d’admin)

Il est possible de composer un habillage du thème Supro depuis le code source. Supro fournit 2 moyens bien distincts d’agir sur le front:

En remplissant les champs prévus depuis l’interface d’admin
En remplissant les (mêmes) champs prévus depuis l’options « Customize » en front-office

Il y a une différence de fonctionnement très importante entre ces 2 modes (edit: vérifier que l’édition depuis l’admin génère bien uniquement des CSS et l’édition depuis le front uniquement des fichiers XML):

L’édition admin stocke les valeurs saisies en base de données et des fichiers CSS sont générés via le fichier <votre_projet>\app\code\MGS\ThemeSettings\Helper\Config.php.

Les fichiers CSS, générés à partir du contenu renseigné en BO dans le champ MGS > Page Builder Setting [Page Builder] > Font & Style > Custom Style, sont les suivants:
- pub/media/mgs/fbuilder/css/<store_id>/fbuilder_config.css
- pub/media/mgs/fbuilder/css/<store_id>/fbuilder_config.min.css: ce fichier est une copie de celui déclaré juste au-dessus. Le code est probablement sensé être minifié mais ce n’est pas le cas sur l’instance où j’ai effectué mes tests… C’est cependant lui qui est utilisé en front. Il est chargé en tout dernier.
- A noter, dans certains cas, la génération des fichiers pub/media/mgs/fbuilder/css/blocks.css et pub/media/mgs/fbuilder/css/blocks.min.css
L’édition front-office stocke les valeurs saisies dans un fichier <votre_projet>\pub\media\mgs\customize\<store_id>\settings.xml

Note: dans le chemin vers le fichier settings.xml, le store_id vous permet de retrouver à quel store le fichier va s’appliquer. Le store « 1 » (<votre_projet>\pub\media\mgs\customize\1\settings.xml) correspond à la configuration par défaut de votre Magento. Voir ici comment retrouver rapidement des informations comme le store_id dans Magento 2.

Lorsque vous éditez un fichier settings.xml, vos modifications ne seront visibles en front qu’à partir du moment ou vous aurez cliqué sur le bouton « Customize » puis sur le bouton Save for « Vue magasin » (pour une store view donnée) ou « Configuration par défaut » (pour le store par défaut, duquel l’ensemble des stores de votre instance de Magento 2 hérite) et que vous aurez rechargé la page avec un Ctrl + F5.

ATTENTION:

Si vous souhaitez éditer un habillage via ces fichiers settings.xml, n’utilisez pas les fonctionnalités d’habillage proposées dans l’interface d’admin!
(Si vous avez plusieurs stores) lorsque vous procédez à des modifications pour le store par défaut et que vos autres stores doivent en hériter, il faudra ré-effectuer chaque modiifcation à la main dans autant de fichiers settings.xml que vous avez de stores.

Fallback héritage CSS dans le thème Supro

Voici l’ordre de priorité (fallback/héritage) dans lequel les feuilles de styles sont déclarées en front, de la plus prioritaire à la moins prioritaire.
(notez comment procéder si vous souhaitez déclarer une CSS qui prendra le pas sur toutes les autres – cette feuille de style n’est pas listée ci-dessous)

/static/frontend/Mgs/supro/fr_FR/mage/calendar.css »
/static/frontend/Mgs/supro/fr_FR/css/styles-m.css »
/static/frontend/Mgs/supro/fr_FR/MGS_AjaxCart/css/style.css »
/static/frontend/Mgs/supro/fr_FR/mage/gallery/gallery.css »
/static/frontend/Mgs/supro/fr_FR/MGS_ExtraGallery/css/style.css »
/static/frontend/Mgs/supro/fr_FR/MGS_GDPR/css/gdpr.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Lookbook/css/theme.default.min.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Lookbook/css/styles.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Mmegamenu/css/megamenu.css »
/static/frontend/Mgs/supro/fr_FR/MGS_ThemeSettings/css/theme_setting.css »
/static/frontend/Mgs/supro/fr_FR/MGS_InstantSearch/css/styles.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/fontawesome.v4.7.0/fontawesome.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/owl.carousel.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/animate.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/magnific-popup.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/pbanner.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/styles.css »
media= »screen and (min-width: 768px) » /static/frontend/Mgs/supro/fr_FR/css/styles-l.css »
media= »print » /static/frontend/Mgs/supro/fr_FR/css/print.css »
/static/frontend/Mgs/supro/fr_FR/css/mgs_theme_style_guide.css »
/static/frontend/Mgs/supro/fr_FR/css/mgs_theme_fonts.css »
/static/frontend/Mgs/supro/fr_FR/css/mgs_theme.css »
/static/frontend/Mgs/supro/fr_FR/css/mgs_theme_responsive.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Aquickview/css/aquickview.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Brand/css/mgs_brand.css »
media= »all » /media/mgs/fbuilder/css/blocks.min.css »
media= »all » /media/mgs/fbuilder/css/1/fbuilder_config.min.css »

Surcharger (override) les valeurs de style par défaut (ou celles définies depuis l’interface d’admin)

Astuce testée fonctionnelle.

Les fichiers concernés dans votre thème qui doit logiquement être enfant de Supro

<Vendor_name>
    |_ <theme_name>
        |_ MGS_Fbuilder
            |_ templates
                |_ html
                    |_ head.phtml
        |_ MGS_ThemeSettings
            |_ templates
                |_ html
                    |_ head.phtml
        |_ web
            |_ css
                |_ source
                    |_ _extend.less
                    |_ _theme-variables.less
                |_ supro-override.less

<Vendor_name>

|_ <theme_name>

|_ MGS_Fbuilder

|_ templates

|_ html

|_ head.phtml

|_ MGS_ThemeSettings

|_ templates

|_ html

|_ head.phtml

|_ web

|_ css

|_ source

|_ _extend.less

|_ _theme-variables.less

|_ supro-override.less

app/design/frontend/Sodifrance/pdv/MGS_Fbuilder/templates/html/head.phtml

<!--app/design/frontend/Sodifrance/pdv/MGS_Fbuilder/templates/html/head.phtml-->

<link  rel="stylesheet" type="text/css" media="all" href="<?php echo $this->getMediaUrl() ?>mgs/fbuilder/css/blocks.min.css" />
<link  rel="stylesheet" type="text/css" media="all" href="<?php echo $this->getMediaUrl() ?>mgs/fbuilder/css/<?php echo $this->getStoreId() ?>/fbuilder_config.min.css" />

<!-- SUPRO theme style override  -->
<!-- Path to file: app/design/frontend/Sodifrance/pdv/web/css/supro-override.less -->
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('css/supro-override.css')?>" />

app/design/frontend/Sodifrance/pdv/MGS_ThemeSettings/templates/html/head.phtml

<!--app/design/frontend/Sodifrance/pdv/MGS_ThemeSettings/templates/html/head.phtml-->

<link  rel="stylesheet" type="text/css" media="all" href="<?php echo $this->getMediaUrl() ?>mgs/fbuilder/css/blocks.min.css" />
<link  rel="stylesheet" type="text/css" media="all" href="<?php echo $this->getMediaUrl() ?>mgs/fbuilder/css/<?php echo $this->getStoreId() ?>/fbuilder_config.min.css" />
<?php if($this->isCustomize()): ?>
	<style type="text/css" id="themesetting_customize_temp"><?php echo $this->getStyleInline() ?></style>
<?php endif ?>

<!-- SUPRO theme style override  -->
<!-- Path to file: app/design/frontend/Sodifrance/pdv/web/css/supro-override.less -->
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('css/supro-override.css')?>" />

<?php if($this->isCustomize()): ?>

<?php endif ?>

app/design/frontend/Sodifrance/pdv/web/css/source/_extend.less

@import '_theme-variables.less';

// your custom styles here...

@import '_theme-variables.less';

// your custom styles here...

app/design/frontend/Sodifrance/pdv/web/css/source/_theme-variables.less

Dans ce fichier, vos variables LESS. Il n’existe pas de variables LESS parentes dans le thème Supro (la feuille de style étant générée via le fichier app/code/MGS/ThemeSettings/Helper/Config.php). Il ne s’agit donc pas de surcharges et vous pouvez les nommer comme bon vous semble (sachant que Supro fournit quand même un pattern dans le fichier Config.php dont le chemin a été communiqué juste au-dessus).

// DON'T NAME THIS FUCKING FILE '_variables.less' OR IT WILL ERASE MUCH NEEDED PARENT'S THEME '_variables.less'!

@blockMarginBottom: 60px;
@brandColor: #e10f21;
@brandColor-darken: #b10c1a;
@buttonHeight: 45px;

// DON'T NAME THIS FUCKING FILE '_variables.less' OR IT WILL ERASE MUCH NEEDED PARENT'S THEME '_variables.less'!

@blockMarginBottom: 60px;

@brandColor: #e10f21;

@brandColor-darken: #b10c1a;

@buttonHeight: 45px;

Pattern utilisé par le thème Supro pour la nomenclature de ses variables LESS

Le pattern utilisé est $<scope><LibelléDeLaVariable>. Un exemple ci-dessous ou la valeur de $mainPriceColor est directement injectée dans la feuille de style:

/* Price color */
$mainPriceColor = $this->getStoreConfig('themesettings/main/price_color', $storeId);
if($mainPriceColor!=''){
    $html .= '.price-box .price, .price{color:'.$mainPriceColor.'}';
}

/* Price color */

$mainPriceColor = $this->getStoreConfig('themesettings/main/price_color', $storeId);

if($mainPriceColor!=''){

$html .= '.price-box .price, .price{color:'.$mainPriceColor.'}';

}

Ici, $mainPriceColor pourrait devenir, dans vos sources LESS: @mainPriceColor: <valeur>;

app/design/frontend/Sodifrance/pdv/web/css/supro-override.less

/*
 * SUPRO theme style override
 * Path to original PHP generated file: app/code/MGS/Fbuilder/view/frontend/web/css/styles.css
 */

@import 'source/_theme-variables.less';

.btn.btn-primary, .action.primary {
  background: @brandColor;
  border: 2px solid @brandColor;
  &:hover {
    background-color: @brandColor-darken;
    border: 2px solid @brandColor-darken;
  }
}

* SUPRO theme style override

* Path to original PHP generated file: app/code/MGS/Fbuilder/view/frontend/web/css/styles.css

@import 'source/_theme-variables.less';

.btn.btn-primary, .action.primary {

background: @brandColor;

border: 2px solid @brandColor;

&:hover {

background-color: @brandColor-darken;

border: 2px solid @brandColor-darken;

}

Les fichiers concernés hors thème

dev/tools/grunt/configs/local-themes.js

On y déclare la feuille de style supro-override.less.

    <theme_name>: {
        area: 'frontend',
        name: '<Vendor_name>/<theme_name>',
        locale: 'fr_FR',
        files: [
            'css/supro-override'
        ],
        dsl: 'less'
    },

<theme_name>: {

area: 'frontend',

name: '<Vendor_name>/<theme_name>',

locale: 'fr_FR',

files: [

'css/supro-override'

dsl: 'less'

Articles récents

Catégories

Archives

Méta

Étiquette : Supro

[Magento 2] Astuces d’utilisation du thème Supro