avril 2020 – devfrontend.info

Monthavril 2020

[Magento 2] Appeler un template PHTML depuis une page CMS

22/04/2020 / admin

Source: How to call a PHTML file within a CMS page Magento 2?

Formule générique:

{{block class="[BlockClassFullName]" template="[VendorName]_[ModuleName]::[YourTemplateFileLocation].phtml"}}

1	{{block class="[BlockClassFullName]" template="[VendorName]_[ModuleName]::[YourTemplateFileLocation].phtml"}}

Bloc par défaut:

{{block class="Magento\Framework\View\Element\Template" template="[VendorName]_[ModuleName]::[YourTemplateFileLocation].phtml"}}

1	{{block class="Magento\Framework\View\Element\Template" template="[VendorName]_[ModuleName]::[YourTemplateFileLocation].phtml"}}

[Docker] Faire un dump d’une table spécifique dans une base de données et récupérer le contenu dans un fichier txt hors container

17/04/2020 / admin

Note: pour faire la même chose, mais via mysql: Dump a specific table or few rows (MySQL). $ mysqldump -u username -ppassword database_name table_name > single_table_dump.sql

Faire un dump d’une table spécifique via un container db Docker:

Log toi dans le container db

après : $ mysqldump -uroot -proot magento core_config_data --tab="/tmp" --fields-enclosed-by='"' --fields-terminated-by=,

ce qui nous intéresse, c’est le fichier /tmp/core_config_data.txt qui sera généré. tu le copie via docker cp.

ça doit te donner un rendu qui ressemble à ça (sample):

"1","default","0","yotpo/module_info/yotpo_installation_date","2020-02-12","2020-02-28 11:06:07"

1	"1","default","0","yotpo/module_info/yotpo_installation_date","2020-02-12","2020-02-28 11:06:07"

Récupérer le contenu du dump dans un fichier TXT avec la commande `docker cp`:

Sortir du container db. On se retrouve à la racine de notre projet.

$ docker cp vitalconcept_db_1:/tmp/core_config_data.txt .

1	$ docker cp vitalconcept_db_1:/tmp/core_config_data.txt .

en décomposant : $ docker cp nom_du_container:path_dans_le_container path_local (. == l'endroit où tu es)

Le fichier core_config_data.txt devrait être disponible à la racine de notre projet (où à l’endroit depuis lequel la commande ci-dessus a été exécutée).

[Foundation 6] Exploiter le composant Drilldown et jQuery pour créer un product finder wizard

08/04/2020 / admin

Un product finder wizard qui pose une série de questions pour aider l’utilisateur à trouver le bon produit en fonction de ses besoins. La fonctionnalité est constituée de:

le Drilldown de Foundation 6 pour la mise en place du wizard <ul class="vertical menu drilldown product-finder-tree">
des boutons de navigation Précédent, Réinitialiser et Suivant <div class="product-finder-actions">
un fil d’Ariane qui se constitue à la volée en fonction des choix précédents de l’utilisateur <div id="productFinderBreadcrumb" class="product-finder-breadcrumb"></div>

Partie PHTML

Le code HTML qui constitue le menu n’est autre qu’une liste non-ordonnée d’éléments imbriqués. Il est conforme au markup générique fourni par Zurb pour la démo du composant Drilldown aux exceptions près que:

les éléments <a> portent une classe .question
les éléments <li> ont un ID questionID_ (généré via PHP dans notre exemple)

<?php
/** @var  \Vital\OptiChoix\Block\Index $block */

$tree = $block->getTree();

function displayLeaf($question) {
    ?>
    <li class="optioignons-leaf" id="questionID_<?=$question["id"];?>" data-category-id="<?=$question["id"];?>">
        <a class="question" href="#">
            <?=$question["label"];?>
        </a>
        <ul>
            <li>
                <div id="optioignos-product-list-<?=$question["id"];?>"></div>
            </li>
        </ul>
    </li>
    <?php
}

function displayQuestion($question) {
    if (!$question['children']) {
        displayLeaf($question);
        return;
    }
    ?>
    <li id="questionID_<?=$question["id"];?>">
        <a class="question" href="#">
            <?=$question["label"];?>
        </a>
        <?php if(count($question["children"])): ?>
            <ul id="<?=$question["id"];?>">
                <?php foreach ($question["children"] as $child): displayQuestion($child); endforeach; ?>
            </ul>
        <?php endif; ?>
    </li>
    <?php
}

?>
<h2>Contenu des catégories et sous catégories</h2>

<div id="productFinderBreadcrumb" class="product-finder-breadcrumb"></div>

<div class="product-finder-actions">
    <button id="productFinderActionPrevious" class="primary" role="button" disabled>Précédent</button>
    <button id="productFinderActionReset" class="primary" role="button" disabled>Résumer</button>
    <button id="productFinderActionNext" class="primary" role="button" disabled>Suivant</button>
</div>

<nav id="productFinder" class="product-finder">
    <ul class="vertical menu drilldown product-finder-tree">
        <?php displayQuestion($tree); ?>
    </ul>
</nav>

<?php

/** @var \Vital\OptiChoix\Block\Index $block */

$tree = $block->getTree();

function displayLeaf($question) {

<li class="optioignons-leaf" id="questionID_<?=$question["id"];?>" data-category-id="<?=$question["id"];?>">

<?=$question["label"];?>

</a>

<ul>

<li>

</li>

</ul>

</li>

<?php

}

function displayQuestion($question) {

if (!$question['children']) {

displayLeaf($question);

return;

}

<?=$question["label"];?>

</a>

<?php if(count($question["children"])): ?>

<?php foreach ($question["children"] as $child): displayQuestion($child); endforeach; ?>

</ul>

<?php endif; ?>

</li>

<?php

}

<h2>Contenu des catégories et sous catégories</h2>

<button id="productFinderActionPrevious" class="primary" role="button" disabled>Précédent</button>

<button id="productFinderActionReset" class="primary" role="button" disabled>Résumer</button>

<button id="productFinderActionNext" class="primary" role="button" disabled>Suivant</button>

</div>

<?php displayQuestion($tree); ?>

</ul>

</nav>

Partie jQuery

Nous utilisons plusieurs méthodes natives du composant Drilldown de Foundation 6:

_hideAll pour réinitialiser le menu à son état initial.

Attention: cette méthode semble bugguée. Je l’ai peut-être aussi mal exploitée, mais j’ai dû écrire un fix; voir ci-dessous:

$productFinder.foundation('_hideAll');

// FIX d'un bug du composant Drilldown de Foundation:
// à l'utilisation de la méthode _hideAll, les aria-expanded restent à true
$('[aria-expanded="true"]', $productFinder).each(function(){
    $(this).attr('aria-expanded', false);
});

$productFinder.foundation('_hideAll');

// FIX d'un bug du composant Drilldown de Foundation:

// à l'utilisation de la méthode _hideAll, les aria-expanded restent à true

$('[aria-expanded="true"]', $productFinder).each(function(){

$(this).attr('aria-expanded', false);

});

_showMenu pour rediriger l’utilisateur vers un choix précédent dans le DOM du menu (lorsqu’il clique sur le bouton Précédent).

Attention: il est important de pointer un élément UL (dans mon exemple, sur la classe .submenu) pour que cette méthode fonctionne!

$productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);

1

$productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);
_show pour rediriger l’utilisateur plus en avant dans ses choix dans le DOM du menu (lorsqu’il clique sur le bouton Suivant).

Attention: il est important de pointer un élément LI (dans mon exemple, sur l’ID questionID_ se trouvant sur les LI) pour que cette méthode fonctionne!

$productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

1

$productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

<script type="text/javascript">
    require([
        "jquery",
        "foundation",
        "domReady!"
    ], function ($, Foundation) {
        'use strict';

        $(".optichoix-leaf").on("click", function () {
            optiChoixLoadProducts(this.getAttribute("data-category-id"));
        });
        function optiChoixLoadProducts (id) {
            $("#optichoix-product-list-"+id).load(
                "/expertise/productlist",
                "categoryId=" + id
            );
        }

        // Product Finder
        // https://get.foundation/sites/docs/drilldown-menu.html

        let $productFinder = $("#productFinder"),
            $productFinderDrilldown = new Foundation.Drilldown($productFinder),
            $productFinderBreadcrumb = $('#productFinderBreadcrumb'),
            $productFinderActionPrevious = $('#productFinderActionPrevious'),
            $productFinderActionReset = $('#productFinderActionReset'),
            $productFinderActionNext = $('#productFinderActionNext'),
            navHistory = [],
            currentPositionInNavHistory = -1; // "-1" car avec "0" (valeur du 1er index dans un array), nous aurions déjà répondu à une 1ère question

        // On réinitialise la totale
        function resetAll(){
            // On referme le menu
            $productFinder.foundation('_hideAll');

            // FIX d'un bug du composant Drilldown de Foundation:
            // à l'utilisation de la méthode _hideAll, les aria-expanded restent à true
            $('[aria-expanded="true"]', $productFinder).each(function(){
                $(this).attr('aria-expanded', false);
            });

            // On désactive les boutons Previous, Reset et Next
            $productFinderActionPrevious.prop('disabled', true);
            $productFinderActionReset.prop('disabled', true);
            $productFinderActionNext.prop('disabled', true);

            // On réinitialise l'historique de navigation
            navHistory = [];

            // On réinitialise la position courante dans l'historique de navigation
            currentPositionInNavHistory = -1;

            // On met à jour le breadcrumb
            updateBreadcrumb();
        }

        // On génère le breadcrumb
        function updateBreadcrumb(){
            $productFinderBreadcrumb.empty();
            $('[aria-expanded="true"]', $productFinder).each(function(){
                $('<p class="product-finder-breadcrumb-element">'+$(this).attr('aria-label')+'</p>').appendTo($productFinderBreadcrumb);
            });
        }

        // Au clic sur un choix proposé dans l'arbre des questions
        $('.product-finder-tree', $productFinder).on('click', '.question', function(){
            let $this = $(this);
            let $closestExpanded = $this.closest('[aria-expanded="true"]');

            // On pousse l'ID de la question cliquée dans le tableau navHistory
            navHistory.push({
               questionID: $closestExpanded.attr('id')
            });

            // On met à jour la position courante dans l'historique de navigation
            currentPositionInNavHistory = navHistory.length -1;

            // On met à jour le breadcrumb
            updateBreadcrumb();

            // On active les boutons Previous et Reset
            $productFinderActionPrevious.prop('disabled', false);
            $productFinderActionReset.prop('disabled', false);
        });

        // Au clic sur Reset button
        // ...on invoque la fonction resetAll
        $productFinderActionReset.on('click', resetAll);

        // Au clic sur Previous button
        $productFinderActionPrevious.on('click', function(){
            // On récupère l'ID de la question correspondant à la currentPositionInNavHistory dans le tableau navHistory
            let currentPositionInNavHistoryQuestionID = $('#'+navHistory[currentPositionInNavHistory].questionID);

            // On met à jour le menu
            // (dans le DOM, on remonte d'un cran dans l'arbre des questions)
            let $theTargetSubMenuUlTag = currentPositionInNavHistoryQuestionID.closest('.submenu');
            $productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);

            // -1 sur la valeur de currentPositionInNavHistory
            currentPositionInNavHistory = currentPositionInNavHistory -1;

            // Si la valeur de la position précédente est "-1", on réinitialise tout
            if(currentPositionInNavHistory == "-1"){
                resetAll();
            // Sinon...
            } else {
                // On met à jour le breadcrumb
                updateBreadcrumb();

                // On active le bouton Next
                $productFinderActionNext.prop('disabled', false);
            }
        });

        // Au clic sur Next button
        $productFinderActionNext.on('click', function(){
            // +1 sur la valeur de currentPositionInNavHistory
            currentPositionInNavHistory = currentPositionInNavHistory +1;

            // On met à jour le menu
            // (dans le DOM, on descend d'un cran dans l'arbre des questions)
            let $theCurrentElementWithASubmenuToOpen = $('#'+navHistory[currentPositionInNavHistory].questionID);
            $productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

            // On met à jour le breadcrumb
            updateBreadcrumb();

            // Si la valeur de la position suivante correspond au dernier index du tableau navHistory
            // (l'utilisateur n'est jamais allé plus loin dans l'arbre des questions)
            let navHistoryLastIndex = navHistory.length -1;

            if(navHistoryLastIndex == currentPositionInNavHistory){
                // On désactive le button Next
                $productFinderActionNext.prop('disabled', true);
            } else {
                // Nada...
                return false;
            }
        });

    })
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

require([

"jquery",

"foundation",

"domReady!"

], function ($, Foundation) {

'use strict';

$(".optichoix-leaf").on("click", function () {

optiChoixLoadProducts(this.getAttribute("data-category-id"));

});

function optiChoixLoadProducts (id) {

$("#optichoix-product-list-"+id).load(

"/expertise/productlist",

"categoryId=" + id

);

}

// Product Finder

// https://get.foundation/sites/docs/drilldown-menu.html

let $productFinder = $("#productFinder"),

$productFinderDrilldown = new Foundation.Drilldown($productFinder),

$productFinderBreadcrumb = $('#productFinderBreadcrumb'),

$productFinderActionPrevious = $('#productFinderActionPrevious'),

$productFinderActionReset = $('#productFinderActionReset'),

$productFinderActionNext = $('#productFinderActionNext'),

navHistory = [],

currentPositionInNavHistory = -1; // "-1" car avec "0" (valeur du 1er index dans un array), nous aurions déjà répondu à une 1ère question

// On réinitialise la totale

function resetAll(){

// On referme le menu

$productFinder.foundation('_hideAll');

// FIX d'un bug du composant Drilldown de Foundation:

// à l'utilisation de la méthode _hideAll, les aria-expanded restent à true

$('[aria-expanded="true"]', $productFinder).each(function(){

$(this).attr('aria-expanded', false);

});

// On désactive les boutons Previous, Reset et Next

$productFinderActionPrevious.prop('disabled', true);

$productFinderActionReset.prop('disabled', true);

$productFinderActionNext.prop('disabled', true);

// On réinitialise l'historique de navigation

navHistory = [];

// On réinitialise la position courante dans l'historique de navigation

currentPositionInNavHistory = -1;

// On met à jour le breadcrumb

updateBreadcrumb();

}

// On génère le breadcrumb

function updateBreadcrumb(){

$productFinderBreadcrumb.empty();

$('[aria-expanded="true"]', $productFinder).each(function(){

$('<p class="product-finder-breadcrumb-element">'+$(this).attr('aria-label')+'</p>').appendTo($productFinderBreadcrumb);

});

}

// Au clic sur un choix proposé dans l'arbre des questions

$('.product-finder-tree', $productFinder).on('click', '.question', function(){

let $this = $(this);

let $closestExpanded = $this.closest('[aria-expanded="true"]');

// On pousse l'ID de la question cliquée dans le tableau navHistory

navHistory.push({

questionID: $closestExpanded.attr('id')

});

// On met à jour la position courante dans l'historique de navigation

currentPositionInNavHistory = navHistory.length -1;

// On met à jour le breadcrumb

updateBreadcrumb();

// On active les boutons Previous et Reset

$productFinderActionPrevious.prop('disabled', false);

$productFinderActionReset.prop('disabled', false);

});

// Au clic sur Reset button

// ...on invoque la fonction resetAll

$productFinderActionReset.on('click', resetAll);

// Au clic sur Previous button

$productFinderActionPrevious.on('click', function(){

// On récupère l'ID de la question correspondant à la currentPositionInNavHistory dans le tableau navHistory

let currentPositionInNavHistoryQuestionID = $('#'+navHistory[currentPositionInNavHistory].questionID);

// On met à jour le menu

// (dans le DOM, on remonte d'un cran dans l'arbre des questions)

let $theTargetSubMenuUlTag = currentPositionInNavHistoryQuestionID.closest('.submenu');

$productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);

// -1 sur la valeur de currentPositionInNavHistory

currentPositionInNavHistory = currentPositionInNavHistory -1;

// Si la valeur de la position précédente est "-1", on réinitialise tout

if(currentPositionInNavHistory == "-1"){

resetAll();

// Sinon...

} else {

// On met à jour le breadcrumb

updateBreadcrumb();

// On active le bouton Next

$productFinderActionNext.prop('disabled', false);

}

});

// Au clic sur Next button

$productFinderActionNext.on('click', function(){

// +1 sur la valeur de currentPositionInNavHistory

currentPositionInNavHistory = currentPositionInNavHistory +1;

// On met à jour le menu

// (dans le DOM, on descend d'un cran dans l'arbre des questions)

let $theCurrentElementWithASubmenuToOpen = $('#'+navHistory[currentPositionInNavHistory].questionID);

$productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

// On met à jour le breadcrumb

updateBreadcrumb();

// Si la valeur de la position suivante correspond au dernier index du tableau navHistory

// (l'utilisateur n'est jamais allé plus loin dans l'arbre des questions)

let navHistoryLastIndex = navHistory.length -1;

if(navHistoryLastIndex == currentPositionInNavHistory){

// On désactive le button Next

$productFinderActionNext.prop('disabled', true);

} else {

// Nada...

return false;

}

});

})

</script>

[Foundation 6] Un lien parent cliquable qui renvoie vers une page dans le menu Drilldown

07/04/2020 / admin

Source: Foundation 6 Drilldown clickable parent link with sub-menu

HTML

<!--
Demo Header
-->
<div class="row collapse expanded">
  <div class="column">
    <h1 class="text-center">
      <span>Drilldown</span>Click
      <a target="_blank"
         href="https://foundation.zurb.com/sites/docs/drilldown-menu.html">
        { Docs 6.3.1 }
      </a>
    </h1>
  </div>
</div>



<!--
DRILLDOWN MENU TEST
-->
<div class="row demo-text">
  <div class="columns small-12 text-center">
    <p>{ Its now posible click on parent menu items that have a sub menu }</p>
  </div>
</div>

<nav>
  <ul class="vertical menu" data-drilldown data-auto-height="true" data-animate-height="true"
      data-close-on-click="true" data-back-button='<li class="js-drilldown-back"><a tabindex="0">Ok, bring me back!</a></li>'>
    <li class="has-submenu">
      <a href="https://www.google.com" target="_blank">Item 1</a>
      <ul class="vertical menu">
        <li><a href="#item-1A">Item 1A</a></li>
        <li><a href="#Item-1B">Item 2A</a></li>
        <li><a href="#Item-1C">Item 3A</a></li>
      </ul>
    </li>
    <li><a href="#Item-2">Item 2</a></li>
    <li><a href="#Item-3">Item 3</a></li>
    <li><a href="#Item-4">Item 4</a></li>
    <li><a href="#Item-5">Item 5</a></li>
  </ul>
</nav>

<!--

Demo Header

-->

<span>Drilldown</span>Click

<a target="_blank"

href="https://foundation.zurb.com/sites/docs/drilldown-menu.html">

{ Docs 6.3.1 }

</a>

</h1>

</div>

<!--

DRILLDOWN MENU TEST

-->

<p>{ Its now posible click on parent menu items that have a sub menu }</p>

</div>

<nav>

<ul class="vertical menu" data-drilldown data-auto-height="true" data-animate-height="true"

data-close-on-click="true" data-back-button='<li class="js-drilldown-back"><a tabindex="0">Ok, bring me back!</a></li>'>

</ul>

</li>

</ul>

</nav>

CSS

/*** <-- Foundation Palette & Setup --> ***/
$primary: #1779ba;
$secondary: #767676;
$success: #3adb76;
$warning: #ffae00;
$alert: #CC4B35;

$back-col: #ffffff;
$font-col: #666;
$base-font: 16px;


/*** <-- Layout Styles --> ***/
body{
  background: $back-col;
  color: $font-col;
  font-size: $base-font;
}

/*** <-- Demo Header --> ***/
h1{
  margin-bottom: 4rem;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 2em;
  font-weight: 300;
  border-bottom: 1px dashed #e2e2e2;
  span{ color: $primary; }
  a{
    display: block;
    margin-top: .5rem;
    font-weight: normal;
    font-size: .5em;
    text-transform: uppercase;
    color: #888;
    transition: color .4s;
    &:hover{
      color: $primary;
    }
  }
}
.demo-text{
  margin-bottom: 1rem;
}

/*** <-- DRILDOWN CLICKABLE PARENT STYLES --> ***/
nav{
  width: 30rem;
  max-width: 100%;
  margin: 0 auto 4rem;
  background: #333;
  .is-drilldown-submenu {
    background: #333;
  }
  .has-submenu{
    position: relative;
    .parent-lab{
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      a{
        display: inline-block;
        padding: .7rem 1rem;   //same as menu links
        line-height: 1;        //same as menu links
        color: red;
      }
    }
  }
}

/*** <-- Foundation Palette & Setup --> ***/

$primary: #1779ba;

$secondary: #767676;

$success: #3adb76;

$warning: #ffae00;

$alert: #CC4B35;

$back-col: #ffffff;

$font-col: #666;

$base-font: 16px;

/*** <-- Layout Styles --> ***/

body{

background: $back-col;

color: $font-col;

font-size: $base-font;

}

/*** <-- Demo Header --> ***/

h1{

margin-bottom: 4rem;

padding: 1rem;

text-transform: uppercase;

font-size: 2em;

font-weight: 300;

border-bottom: 1px dashed #e2e2e2;

span{ color: $primary; }

display: block;

margin-top: .5rem;

font-weight: normal;

font-size: .5em;

text-transform: uppercase;

color: #888;

transition: color .4s;

&:hover{

color: $primary;

}

.demo-text{

margin-bottom: 1rem;

}

/*** <-- DRILDOWN CLICKABLE PARENT STYLES --> ***/

nav{

width: 30rem;

max-width: 100%;

margin: 0 auto 4rem;

background: #333;

.is-drilldown-submenu {

background: #333;

}

.has-submenu{

position: relative;

.parent-lab{

z-index: 1;

position: absolute;

top: 0;

left: 0;

display: inline-block;

padding: .7rem 1rem; //same as menu links

line-height: 1; //same as menu links

color: red;

}

JS

/**
 * Clickable Parent Link with sub-menu
 *
 * NB: must be placed BEFORE foundation's plugins initialisation.
 */
$('.has-submenu > a').each(function(){
    $(this).clone().prependTo($(this).parent('li')).wrap('<span class="parent-lab"></span>');
});

/**
 * Initialise Foundation's plugins
 */
$(document).foundation();

/**

* Clickable Parent Link with sub-menu

* NB: must be placed BEFORE foundation's plugins initialisation.

$('.has-submenu > a').each(function(){

$(this).clone().prependTo($(this).parent('li')).wrap('<span class="parent-lab"></span>');

});

/**

* Initialise Foundation's plugins

$(document).foundation();

[Magento 2] Erreur grunt exec « In SourceThemeDeployCommand.php line 179 » à la compilation des thèmes

02/04/2020 / admin

J’ai un projet dans lequel j’utilise plusieurs thèmes qui héritent entre-eux. J’exécute la commande grunt exec pour compiler les assets front, mais l’erreur In SourceThemeDeployCommand.php line 179 apparaît également lorsque j’utilise la commande Magento setup:static-content:deploy:

Processed Area: frontend, Locale: en_US, Theme: Sm/venuse, File type: less.
>>
>> In SourceThemeDeployCommand.php line 179:
>>
>> Verify entered values of the argument and options. Unable to get content fo
>> r 'frontend/Sm/venuse/en_US/css/source/jquery.fancybox/_jquery.fancybox.les
>> s'
>> dev:source-theme:deploy [--type TYPE] [--locale LOCALE] [--area AREA] [--theme THEME] [--] [<file>...]
>> Exited with code: 1.
>> Error executing child process: Error: Process exited with code 1.
Warning: Task "exec:venuse" failed. Use --force to continue.

Aborted due to warnings.

Processed Area: frontend, Locale: en_US, Theme: Sm/venuse, File type: less.

>> In SourceThemeDeployCommand.php line 179:

>> Verify entered values of the argument and options. Unable to get content fo

>> r 'frontend/Sm/venuse/en_US/css/source/jquery.fancybox/_jquery.fancybox.les

>> s'

>> dev:source-theme:deploy [--type TYPE] [--locale LOCALE] [--area AREA] [--theme THEME] [--] [<file>...]

>> Exited with code: 1.

>> Error executing child process: Error: Process exited with code 1.

Warning: Task "exec:venuse" failed. Use --force to continue.

Aborted due to warnings.

Fil de discussion m’ayant aidé pour la résolution: Error when run command grunt:exec in Magento 2.2.0 #12271.

Les éléments à vérifier:

Les libellés/noms de vos thèmes ne contiennent ni chiffres, ni caractères en majuscules
Vos thèmes ont tous le type égal à 0 dans la table theme en base de données
Regarder également dans les fichiers app/etc/config.php et app/etc/env.php si le type n’est pas seté à 1 pour vos thèmes et corriger le cas échéant.
Vérifier votre version de node et l’upgrader/downgrader au besoin
Utiliser @magento_import à la place de @import dans vos sources LESS pour importer les fichiers que Grunt ne trouve pas
Si certaines configuration en admin genèrent des CSS pour le front (typiquement les focntionnalités d’habillage du front en BO proposées par certains thèmes (Venuse, Supro…)), n’oubliez pas de vous rendre en BO et de cliquer sur le bouton « Save Config » (même sans rien changer) afin que les champs d’habillage soient pris en compte
…en dernier lieu, suppression du dossier vendor, ré-installation fraîche via la commande composer install et exécution de la commande Magento setup:upgrade (mais j’y crois moyennement pour résoudre notre problème…)

Vos thèmes ont tous le `type` égal à `0` dans la table `theme` en base de données

Source. Un theme avec un type de 1 a été automatiquement paramétré comme « virtuel » par Magento 2!

This error happens for multiple reasons, but probably the most annoying and most frequent relates to the fact that Magento2 attempts to validate themes.

Explanation

If a theme exists in the database, but is not physically available in the filesystem at the time the magento setup:install command is run, Magento2 will set it as a « virtual » theme. Once a theme is set as virtual, it is never unset by Magento2. It will forever be virtual until it is manually reset in the database. To reset the theme, go to the theme table, and set the type field to 0, and re-associate the theme with any parent_id. A theme with a type of 1 has been set to virtual.

This problem will provide a stack trace like the following:

Fatal error: Uncaught Error: Call to a member function getId() on null in /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/lib/internal/Magento/Framework/View/Model/Layout/Merge.php:751 Stack trace: #0 /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/lib/internal/Magento/Framework/View/Model/Layout/Merge.php(684): Magento\Framework\View\Model\Layout\Merge->_getPhysicalTheme(Object(Magento\Theme\Model\Theme)) #1 /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/lib/internal/Magento/Framework/View/Model/Layout/Merge.php(633): Magento\Framework\View\Model\Layout\Merge->_loadFileLayoutUpdatesXml() #2 /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/var/generation/LinusShops/Common/Model/Layout/Merge/Interceptor.php(245): Magento\Framework\View\Model\Layout\Merge->getFileLayoutUpdatesXml() #3 /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/lib/internal/Magento/Framework/View/Model/Layout/Merge.php(527): LinusShops\Common\Model\Layout\Merge\Intercep in /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/lib/internal/Magento/Framework/View/Model/Layout/Merge.php on line 751

1
2
3
4
5

Fatal error: Uncaught Error: Call to a member function getId() on null in /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/lib/internal/Magento/Framework/View/Model/Layout/Merge.php:751 Stack trace:
#0 /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/lib/internal/Magento/Framework/View/Model/Layout/Merge.php(684): Magento\Framework\View\Model\Layout\Merge->_getPhysicalTheme(Object(Magento\Theme\Model\Theme))
#1 /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/lib/internal/Magento/Framework/View/Model/Layout/Merge.php(633): Magento\Framework\View\Model\Layout\Merge->_loadFileLayoutUpdatesXml()
#2 /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/var/generation/LinusShops/Common/Model/Layout/Merge/Interceptor.php(245): Magento\Framework\View\Model\Layout\Merge->getFileLayoutUpdatesXml()
#3 /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/lib/internal/Magento/Framework/View/Model/Layout/Merge.php(527): LinusShops\Common\Model\Layout\Merge\Intercep in /vagrant/sites/phoenix.vagrant.dev/releases/20171206165245359550/lib/internal/Magento/Framework/View/Model/Layout/Merge.php on line 751

This can all be traced through the _getPhysicalTheme method. It’s ridiculous that this even occurs. The physical presence of a theme should just break the site in a very expected way: that is, the frontend just doesn’t appear. Don’t try to be clever and modify the DB. Magento design decisions never cease to amaze me.

You can imagine what this means for anyone migrating their databases to a new host. For example, you import your DB dump to a new host. Once the DB is migrated, you then issue the standard magento setup:install command. Guess what? Now your theme will never build. Why? Because the theme itself did not physically exist on the filesystem at the time of the install. What is supposed to come first, Magento–the chicken or the egg?

Lorsque j’ai rencontré le problème, j’avais effectivement des thèmes dont le type était seté à 1 dans la table theme de ma base de données. J’ai dû, à la main:

les repasser à 0
vérifier (et reconfigurer si besoin) leur parenté

Avant modification:

Après modification:

Fichiers `app/etc/config.php` et `app/etc/env.php`

ATTENTION: vérifier également dans les fichiers app/etc/config.php et app/etc/env.php si le type n’est pas seté à 1 pour vos thèmes et corriger le cas échéant.

    'themes' => [
        'frontend/Sm/themecore' => [
            'parent_id' => 'Magento/blank',
            'theme_path' => 'Sm/themecore',
            'theme_title' => 'Sm Theme Core',
            'is_featured' => '0',
            'area' => 'frontend',
            'type' => '1',
            'code' => 'Sm/themecore'
        ],
        'frontend/Sm/venuse' => [
            'parent_id' => 'Sm/themecore',
            'theme_path' => 'Sm/venuse',
            'theme_title' => 'Sm Venuse',
            'is_featured' => '0',
            'area' => 'frontend',
            'type' => '1',
            'code' => 'Sm/venuse'
        ],

'themes' => [

'frontend/Sm/themecore' => [

'parent_id' => 'Magento/blank',

'theme_path' => 'Sm/themecore',

'theme_title' => 'Sm Theme Core',

'is_featured' => '0',

'area' => 'frontend',

'type' => '1',

'code' => 'Sm/themecore'

'frontend/Sm/venuse' => [

'parent_id' => 'Sm/themecore',

'theme_path' => 'Sm/venuse',

'theme_title' => 'Sm Venuse',

'is_featured' => '0',

'area' => 'frontend',

'type' => '1',

'code' => 'Sm/venuse'

Vérifier votre version de node et l’upgrader/downgrader au besoin

La version de node qui fonctionne est la 8.12.0. Perso, mon Dockerfile était configuré sur latest.

Maintenant, tout dépend de la manière dont vous utilisez node. Voici comment mettre à jour Node et NPM proprement sous Ubuntu (ligne de commande) si la dépendance est installée en local sur votre machine.

Si vous utilisez Docker, il faut utiliser l’image node:8.12.0 au lieu de (pour moi) node:latest dans votre fichier Dockerfile.

Puis lancer un docker-compose build (pas besoin de down vos containers au préalable).

Puis docker-compose down et docker-compose up -d --force-recreate <nom_du_container> (exemple: docker-compose up -d --force-recreate node).

Si vous avez un script bash à sourcer (. ./docker/set-env.sh par exemple…) qui initialise un environnement de développement (avec des aliases pour accéder aux containers ou à certaines commandes, ou autre…), il faut également le ré-exécuter.

Attention: une fois la mise à jour de Node effectuée, il convient de repartir d’une installation fraîche du dossier node_modules (suppression du dossier et npm install.

Utiliser `@magento_import` à la place de `@import` dans vos sources LESS pour importer les fichiers que Grunt ne trouve pas

Le @magento_import est pour chercher tous les fichiers qui correspondent au path. par exemple:

//@magento_import 'source/_module.less';

1	//@magento_import 'source/_module.less';

va chercher tous les fichiers _module.less dans les sous dossier du thème.

Dans mon cas, les erreurs se trouvaient dans la section Theme Core des fichiers styles-m.less de vos thèmes parent et enfant, remplacer @import par @magento_import pour charger les fichiers que Grunt ne trouve pas.

ATTENTION: il est impératif de laisse les lignes @magento_import en commentaire //!

Exemple:

//  Theme Core
//  ---------------------------------------------
//@import 'source/jquery.fancybox/_jquery.fancybox.less';
//@import 'source/owlcarousel/_owl.carousel.less';
//@import 'source/owlcarousel/_owl.theme.default.less';
//@import 'source/owlcarousel/_animate.less';
//@import 'source/core_styles/_theme_core_layout.less';
//@import 'source/core_styles/detail/_tab.less';
//@import 'source/core_styles/_styles.less';

//@magento_import 'source/jquery.fancybox/_jquery.fancybox.less';
//@magento_import 'source/owlcarousel/_owl.carousel.less';
//@magento_import 'source/owlcarousel/_owl.theme.default.less';
//@magento_import 'source/owlcarousel/_animate.less';
//@magento_import 'source/core_styles/_theme_core_layout.less';
//@magento_import 'source/core_styles/detail/_tab.less';
//@magento_import 'source/core_styles/_styles.less';

// Theme Core

// ---------------------------------------------

//@import 'source/jquery.fancybox/_jquery.fancybox.less';

//@import 'source/owlcarousel/_owl.carousel.less';

//@import 'source/owlcarousel/_owl.theme.default.less';

//@import 'source/owlcarousel/_animate.less';

//@import 'source/core_styles/_theme_core_layout.less';

//@import 'source/core_styles/detail/_tab.less';

//@import 'source/core_styles/_styles.less';

//@magento_import 'source/jquery.fancybox/_jquery.fancybox.less';

//@magento_import 'source/owlcarousel/_owl.carousel.less';

//@magento_import 'source/owlcarousel/_owl.theme.default.less';

//@magento_import 'source/owlcarousel/_animate.less';

//@magento_import 'source/core_styles/_theme_core_layout.less';

//@magento_import 'source/core_styles/detail/_tab.less';

//@magento_import 'source/core_styles/_styles.less';

[Magento 2] Ajouter des paramètres de configuration des thèmes de la table core_config_data au fichier config.php

01/04/2020 / admin

Dans le cas d’un site qui dispose de plusieurs store views (un Magento 2 multi-sites) la commande app:config:dump ne réalise pas un dump complet de la configuration faite en Admin de l’ensemble de vos sites. Le fichier config.php généré ne contient que les informations du scope Default Config (mon exemple ci-dessous):

<?php
return [
    'system' => [
        'default' => [
            'themecore' => [
                'general' => [
                    'primary_color' => [
                        'theme_color' => 'ED8B00',
                        'text_on_theme_color' => 'FFFFFF',
                        'link_on_theme_color' => 'FFFFFF',
                        'linkhover_on_theme_color' => 'FFFFFF',
                    ],
                ],
            ],
        ],
    ]
];

<?php

return [

'system' => [

'default' => [

'themecore' => [

'general' => [

'primary_color' => [

'theme_color' => 'ED8B00',

'text_on_theme_color' => 'FFFFFF',

'link_on_theme_color' => 'FFFFFF',

'linkhover_on_theme_color' => 'FFFFFF',

]

];

La valeur de la clé theme_color est pourtant redéfinie pour chacun de mes store view!

Nous pouvons compléter ce fichier config.php à la main en allant récupérer les informations manquantes en base de données, dans la table core_config_data.

Dans l’illustration ci-dessus, j’ai par exemple effectué une recherche sur une valeur de la clé theme_color (qui représente un champ en BO) qui n’a pas été dumpée via la commande app:config:dump.

Pour répercuter ces informations dans le fichier app/etc/config.php, je me suis servi du scope (stores) et du path (themecore/general/primary_color/theme_color) stockés dans la table pour reconstituer le chemin au bon endroit:

<?php
return [
    'system' => [
        'stores' => [
            'fr_paysage' => [
                'design' => [
                    'theme' => [
                        'theme_id' => 'frontend/Vendor/themetwo',
                    ],
                ],
                'themecore' => [
                    'general' => [
                        'primary_color' => [
                            'theme_color' => '99cc00',
                        ],
                    ],
                ],
            ],
            'default' => [
                'design' => [
                    'theme' => [
                        'theme_id' => 'frontend/Vendor/themethree',
                    ],
                ],
                'themecore' => [
                    'general' => [
                        'primary_color' => [
                            'theme_color' => '936037',
                        ],
                    ],
                ],
            ],
        ]
    ]
];

<?php

return [

'system' => [

'stores' => [

'fr_paysage' => [

'design' => [

'theme' => [

'theme_id' => 'frontend/Vendor/themetwo',

'themecore' => [

'general' => [

'primary_color' => [

'theme_color' => '99cc00',

'default' => [

'design' => [

'theme' => [

'theme_id' => 'frontend/Vendor/themethree',

'themecore' => [

'general' => [

'primary_color' => [

'theme_color' => '936037',

]

];

Theme by Anders Norén — Up ↑

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Monthavril 2020

[Magento 2] Appeler un template PHTML depuis une page CMS

Formule générique:

Bloc par défaut:

[Docker] Faire un dump d’une table spécifique dans une base de données et récupérer le contenu dans un fichier txt hors container

Faire un dump d’une table spécifique via un container db Docker:

Récupérer le contenu du dump dans un fichier TXT avec la commande `docker cp`:

[Foundation 6] Exploiter le composant Drilldown et jQuery pour créer un product finder wizard

Partie PHTML

Partie jQuery

[Foundation 6] Un lien parent cliquable qui renvoie vers une page dans le menu Drilldown

HTML

CSS

JS

[Magento 2] Erreur grunt exec « In SourceThemeDeployCommand.php line 179 » à la compilation des thèmes

Les éléments à vérifier:

Vos thèmes ont tous le `type` égal à `0` dans la table `theme` en base de données

Explanation

Fichiers `app/etc/config.php` et `app/etc/env.php`

Vérifier votre version de node et l’upgrader/downgrader au besoin

Utiliser `@magento_import` à la place de `@import` dans vos sources LESS pour importer les fichiers que Grunt ne trouve pas

[Magento 2] Ajouter des paramètres de configuration des thèmes de la table core_config_data au fichier config.php

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Monthavril 2020

[Magento 2] Appeler un template PHTML depuis une page CMS

Formule générique:

Bloc par défaut:

[Docker] Faire un dump d’une table spécifique dans une base de données et récupérer le contenu dans un fichier txt hors container

Faire un dump d’une table spécifique via un container db Docker:

Récupérer le contenu du dump dans un fichier TXT avec la commande docker cp:

[Foundation 6] Exploiter le composant Drilldown et jQuery pour créer un product finder wizard

Partie PHTML

Partie jQuery

[Foundation 6] Un lien parent cliquable qui renvoie vers une page dans le menu Drilldown

HTML

CSS

JS

[Magento 2] Erreur grunt exec « In SourceThemeDeployCommand.php line 179 » à la compilation des thèmes

Les éléments à vérifier:

Vos thèmes ont tous le type égal à 0 dans la table theme en base de données

Explanation

Fichiers app/etc/config.php et app/etc/env.php

Vérifier votre version de node et l’upgrader/downgrader au besoin

Utiliser @magento_import à la place de @import dans vos sources LESS pour importer les fichiers que Grunt ne trouve pas

[Magento 2] Ajouter des paramètres de configuration des thèmes de la table core_config_data au fichier config.php

Récupérer le contenu du dump dans un fichier TXT avec la commande `docker cp`:

Vos thèmes ont tous le `type` égal à `0` dans la table `theme` en base de données

Fichiers `app/etc/config.php` et `app/etc/env.php`

Utiliser `@magento_import` à la place de `@import` dans vos sources LESS pour importer les fichiers que Grunt ne trouve pas