Mois : décembre 2020

[Magento 2] Afficher de manière dynamique la base URL d’un store dans un bloc statique, un template PHTML, un layout XML

10/12/2020 / admin

Note: billet amené à être enrichi au gré de mes besoins.

Doc officielle: Using Markup Tags in Links

Blocs CMS statiques

// testé OK Magento 2.3 CE
<a href="{{store url="clé-d_URL-de-la-page"}}">Ma jolie page</a>

1 2	// testé OK Magento 2.3 CE <a href="{{store url="clé-d_URL-de-la-page"}}">Ma jolie page</a>

// Avec un ID de catégorie - testé OK Magento 2.4 CE
// Note: si on supprime les attributs "anchor_text" et "title", ils sont renseignés automatiquement
{{widget type="Magento\Catalog\Block\Category\Widget\Link" anchor_text="My custom category" title="Custom category" template="category/widget/link/link_block.phtml" id_path="category/12"}}

// Avec un ID de catégorie - testé OK Magento 2.4 CE

// Note: si on supprime les attributs "anchor_text" et "title", ils sont renseignés automatiquement

{{widget type="Magento\Catalog\Block\Category\Widget\Link" anchor_text="My custom category" title="Custom category" template="category/widget/link/link_block.phtml" id_path="category/12"}}

Documentation

<!--
* CONTENU > Elements > Blocs
* Cliquer sur le bouton orange "Ajouter un nouveau bloc" (en haut à droite)
* Activer le bloc: Oui
* Titre du bloc: [header] desktop static nav
* Identifiant: desktop-static-nav
* Vue magasin: Toutes les vues magasin
* Cliquer sur le bouton "Affiche/masquer l'éditeur" pour passer en vue "code HTML"
* Copier/coller le contenu ci-dessous
* Cliquer sur le bouton orange "Enregistrer" (en haut à droite)


= Code pour une page (hors catalogue) =
* Renseigner la clé d'URL de la page cible en tant que valeur de l'attribut "url"
* Renseigner un libellé pour votre lien

<li class="nav-list-item">
    <a href="{{store url="clé-d_URL-de-la-page"}}">Libellé pour votre lien</a>
</li>


= Code pour une catégorie du catalogue =
* Renseigner l'ID de la catégorie en tant que valeur de l'attribut "id_path"
* Le reste se fait tout seul

<li class="nav-list-item">
    {{widget
        type="Magento\Catalog\Block\Category\Widget\Link"
        template="category/widget/link/link_block.phtml"
        id_path="category/17"}}
</li>
-->

<ul class="nav-list">
    <li class="nav-list-item">
        <a href="{{store url="clé-d_URL-de-la-page"}}">Libellé de votre lien</a>
    </li>
    <li class="nav-list-item">
        {{widget
            type="Magento\Catalog\Block\Category\Widget\Link"
            template="category/widget/link/link_block.phtml"
            id_path="category/17"}}
    </li>
</ul>

<!--

* CONTENU > Elements > Blocs

* Cliquer sur le bouton orange "Ajouter un nouveau bloc" (en haut à droite)

* Activer le bloc: Oui

* Titre du bloc: [header] desktop static nav

* Identifiant: desktop-static-nav

* Vue magasin: Toutes les vues magasin

* Cliquer sur le bouton "Affiche/masquer l'éditeur" pour passer en vue "code HTML"

* Copier/coller le contenu ci-dessous

* Cliquer sur le bouton orange "Enregistrer" (en haut à droite)

= Code pour une page (hors catalogue) =

* Renseigner la clé d'URL de la page cible en tant que valeur de l'attribut "url"

* Renseigner un libellé pour votre lien

<a href="{{store url="clé-d_URL-de-la-page"}}">Libellé pour votre lien</a>

</li>

= Code pour une catégorie du catalogue =

* Renseigner l'ID de la catégorie en tant que valeur de l'attribut "id_path"

* Le reste se fait tout seul

{{widget

type="Magento\Catalog\Block\Category\Widget\Link"

template="category/widget/link/link_block.phtml"

id_path="category/17"}}

</li>

-->

<a href="{{store url="clé-d_URL-de-la-page"}}">Libellé de votre lien</a>

</li>

{{widget

type="Magento\Catalog\Block\Category\Widget\Link"

template="category/widget/link/link_block.phtml"

id_path="category/17"}}

</li>

</ul>

Templates PHTML

Testé fonctionnel Magento 2.4:

<?php
echo $this->getLayout()
->createBlock('Magento\Cms\Block\Block')
->setBlockId('your_block_ID')
->toHtml();
?>

<?php

echo $this->getLayout()

->createBlock('Magento\Cms\Block\Block')

->setBlockId('your_block_ID')

->toHtml();

Layouts XML

Pas testé:

{{block class="Magento\\Cms\\Block\\Block" block_id="block_ID"}}

1	{{block class="Magento\\Cms\\Block\\Block" block_id="block_ID"}}

[jQuery] Utiliser la méthode .contents() pour supprimer un élément parent du DOM, mais conserver tous ses enfants

10/12/2020 / admin

Cette méthode fait écho à tous les posts dans différents blogs et forums qui incitent à utiliser la méthode .unwrap() de jQuery. La méthode .contents() récupère absolument tout ce que contient l’élément parent qu’on souhaite supprimer alors qu'.unwrap() se montre plus sélective, ce qui peut entrainer quelques désagréments (perte de contenu, etc…).

Source: How to remove only the parent element and not its child elements in JavaScript?

HTML:

<div>
  pre text
  <div class="remove-just-this">
    <p>child foo</p>
    <p>child bar</p>
    nested text
  </div>
  post text
</div>

<div>

pre text

<p>child foo</p>

<p>child bar</p>

nested text

</div>

post text

</div>

jQuery:

var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);

1 2	var cnt = $(".remove-just-this").contents(); $(".remove-just-this").replaceWith(cnt);

Résultat dans le DOM:

<div>
  pre text
  <p>child foo</p>
  <p>child bar</p>
  nested text
  post text
</div>

<div>

pre text

<p>child foo</p>

<p>child bar</p>

nested text

post text

</div>

[Magento 2] Changer la valeur de l’attribut Colspan dans les tableaux des commandes du compte client

08/12/2020 / admin

Vous allez trouver des valeurs pour l’attribut colspan dans certains Layouts. Exemple ici: /Magento/Sales/view/frontend/layout/sales_order_view.xml#L32 pour les tableaux ayant la classe .sales-order-view.

<argument name="label_properties" xsi:type="string">colspan="4" class="mark"</argument>

1	<argument name="label_properties" xsi:type="string">colspan="4" class="mark"</argument>

[Magento 2] Ajouter des blocs enfants via les layouts XML et la fonction getChildHtml dans un template PHTML

08/12/2020 / admin

Note: voir ici pour les méthodes communément disponibles pour la variable $block. Elles vous permettront de récupérer pas mal d’infos disponibles dans n’importe quel template PHTML.

Fonctionnel Magento 2.4. Sources:

Layout XML sales_order_view.xml qui imbrique plusieurs informations additionnelles (Statut, date de la commande et l'action-toolbar) dans l’élément <div class="page-title-wrapper">.
Add custom attribute below title in Magento 2.1 – La meilleure réponse résume parfaitement et de manière concise la problématique.

app/code/Magento/Sales/view/frontend/layout/sales_order_view.xml

        <referenceContainer name="page.main.title">
            <block class="Magento\Sales\Block\Order\Info" name="order.status" template="Magento_Sales::order/order_status.phtml"/>
            <block class="Magento\Sales\Block\Order\Info" name="order.date" template="Magento_Sales::order/order_date.phtml"/>
            <container name="order.actions.container" htmlTag="div" htmlClass="actions-toolbar order-actions-toolbar">
                <block class="Magento\Sales\Block\Order\Info\Buttons" as="buttons" name="sales.order.info.buttons" cacheable="false"/>
            </container>
        </referenceContainer>

</container>

</referenceContainer>

Dans le DOM, les block imbriqués seront inclus à l’endroit où se trouve déclarée la fonction dans le PHTML du referenceContainer:

<?= $block->getChildHtml() ?>

1	<?= $block->getChildHtml() ?>

Comment afficher un child block en particulier?

$block->getChildHtml('child-name');

1	$block->getChildHtml('child-name');

[Magento 2] Etendre un composant JS natif

07/12/2020 / admin

Testé fonctionnel Magento 2.4. Source: Extending Magento 2 default JS components. Version PDF – inchoo.net-Extending Magento 2 default JS components.

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

app/design/frontend/MyVendor/mytheme/web/js/tabs-custom.js

define([
        'jquery',
        'jquery-ui-modules/widget',
        'jquery-ui-modules/core',
        'mage/mage',
        'mage/collapsible'],
    function($){
        $.widget('custom.tabs', $.mage.tabs, {
            options: {
                indicator: false
            },
            _create: function () {
                // IF NO options ARE POSSIBLE:
                // if ( $(".items.has-indicator").length > 0 ){
                //     this._addIndicator();
                // }
                if (this.options.indicator) {
                    this._addIndicator();
                }
            },
            _addIndicator: function () {
                var $menu = $(".items.has-indicator"),
                    indicator = $('<span class="indicator"></span>');

                $menu.append(indicator);

                position_indicator($menu.find("li.current"));

                setTimeout(function(){indicator.css("opacity", 1);}, 500);
                $menu.find("li").mouseenter(function(){
                    position_indicator($(this));
                });
                $menu.find("li").mouseleave(function(){
                    position_indicator($menu.find("li.current"));
                });

                $(window).on('resize', function(){
                    position_indicator($menu.find("li.current"));
                });

                function position_indicator(ele){
                    var left   = ele.position().left,
                        width  = ele.outerWidth(),
                        top    = ele.position().top,
                        height = ele.outerHeight();

                    if(window.matchMedia("(max-width:890px)").matches){
                        indicator.stop().animate({
                            top: top,
                            height: height,
                            width: 3,
                            left: 0
                        });
                    }
                    else{
                        indicator.stop().animate({
                            left: left,
                            width: width,
                            height: 3,
                            top: "100%"
                        });
                    }
                }
            }
        });
        return $.custom.tabs;
    });

define([

'jquery',

'jquery-ui-modules/widget',

'jquery-ui-modules/core',

'mage/mage',

'mage/collapsible'],

function($){

$.widget('custom.tabs', $.mage.tabs, {

options: {

indicator: false

_create: function () {

// IF NO options ARE POSSIBLE:

// if ( $(".items.has-indicator").length > 0 ){

// this._addIndicator();

// }

if (this.options.indicator) {

this._addIndicator();

}

_addIndicator: function () {

var $menu = $(".items.has-indicator"),

indicator = $('<span class="indicator"></span>');

$menu.append(indicator);

position_indicator($menu.find("li.current"));

setTimeout(function(){indicator.css("opacity", 1);}, 500);

$menu.find("li").mouseenter(function(){

position_indicator($(this));

});

$menu.find("li").mouseleave(function(){

position_indicator($menu.find("li.current"));

});

$(window).on('resize', function(){

position_indicator($menu.find("li.current"));

});

function position_indicator(ele){

var left = ele.position().left,

width = ele.outerWidth(),

top = ele.position().top,

height = ele.outerHeight();

if(window.matchMedia("(max-width:890px)").matches){

indicator.stop().animate({

top: top,

height: height,

width: 3,

left: 0

});

}

else{

indicator.stop().animate({

left: left,

width: width,

height: 3,

top: "100%"

});

}

});

return $.custom.tabs;

});

app/design/frontend/MyVendor/mytheme/requirejs-config.js

var config = {
    map: {
        '*' : {
            'tabs': 'js/tabs-custom'
        }
    }
};

var config = {

map: {

'*' : {

'tabs': 'js/tabs-custom'

}

};

app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/html/sections.phtml

<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items"
     data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

1 2	<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items" data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

app/design/frontend/MyVendor/mytheme/web/css/source/tabs.less

@tab-item-height: 50px;
@tab-item-border-width: 3px;

.items:not(.nav) {
    border-bottom: none 0;
    display: flex;
    .nav.item {
        margin: 0;
        display: flex;
        > a,
        &.current > strong {
            padding: 0 @tab-item-height / 2.25;
            position: relative;
            display: flex;
            align-items: center;
        }
        &.current > strong {
            font-weight: 500;
            &:hover {
                color: @red;
            }
        }
    }
    &.has-indicator {
        position: relative;
        .indicator{
            left: 0;
            height: 3px;
            position: absolute;
            bottom: 0;
            width: 0;
            opacity: 0;
            background: @red;
            overflow: visible !important;

            &:before{
                content:"";
                position: absolute;
                bottom: 0;
                background-color: @red;
            }
        }
    }
}



//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: column;
        background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);
        .nav.item {
            height: @tab-item-height;
        }
        &.has-indicator {
            .indicator {
                &:before{
                    width: 13px;
                    height: 2px;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%) translateX(0);
                }
            }
        }
    }
}



//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: row;
        background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);
        .nav.item {
            // total height: @tab-item-height + @tab-item-border-width;
            height: @tab-item-height + @tab-item-border-width;
        }
        &.has-indicator {
            .indicator {
                transform: translateY(-3px);
                &:before{
                    width: 2px;
                    height: 13px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
}

@tab-item-height: 50px;

@tab-item-border-width: 3px;

.items:not(.nav) {

border-bottom: none 0;

display: flex;

.nav.item {

margin: 0;

display: flex;

> a,

&.current > strong {

padding: 0 @tab-item-height / 2.25;

position: relative;

display: flex;

align-items: center;

}

&.current > strong {

font-weight: 500;

&:hover {

color: @red;

}

&.has-indicator {

position: relative;

.indicator{

left: 0;

height: 3px;

position: absolute;

bottom: 0;

width: 0;

opacity: 0;

background: @red;

overflow: visible !important;

&:before{

content:"";

position: absolute;

bottom: 0;

background-color: @red;

}

// Mobile

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

.items:not(.nav) {

flex-direction: column;

background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);

.nav.item {

height: @tab-item-height;

}

&.has-indicator {

.indicator {

&:before{

width: 13px;

height: 2px;

left: 0;

top: 50%;

transform: translateY(-50%) translateX(0);

}

// Desktop

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

.items:not(.nav) {

flex-direction: row;

background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);

.nav.item {

// total height: @tab-item-height + @tab-item-border-width;

height: @tab-item-height + @tab-item-border-width;

}

&.has-indicator {

.indicator {

transform: translateY(-3px);

&:before{

width: 2px;

height: 13px;

left: 50%;

transform: translateX(-50%);

}

app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_info_links.xml et app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_guest_info_links.xml

<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Html\Links" as="links" name="sales.order.info.links" before="-">
            <arguments>
                <argument name="css_class" xsi:type="string">items order-links has-indicator</argument>
            </arguments>

<body>

<argument name="css_class" xsi:type="string">items order-links has-indicator</argument>

</arguments>

[Magento 2] Utiliser .addMethod() pour remplacer un libellé de message d’erreur de saisie dans un champ de formulaire (via la librairie jQuery Validate)

07/12/2020 / admin

Testé fonctionnele Magento 2.4. Sources:

jQuery.validator.addMethod() dans la documentation officielle de jQuery Validate
Magento 2: How to set custom validation message?
Peut également être utile: changer le libellé des messages d’erreurs du champ mot de passe (password field)

require([
    'jquery',
    'jquery/ui',
    'jquery/validate',
    'mage/translate'
], function($){
    $("div#product-options-wrapper select").addClass("product-custom-option-required").removeClass("required");

    $.validator.addMethod(
        'product-custom-option-required', function (value) {
            if(value) return true;
            else return false;
        }, $.mage.__('Please select a variant!'));
});

require([

'jquery',

'jquery/ui',

'jquery/validate',

'mage/translate'

], function($){

$("div#product-options-wrapper select").addClass("product-custom-option-required").removeClass("required");

$.validator.addMethod(

'product-custom-option-required', function (value) {

if(value) return true;

else return false;

}, $.mage.__('Please select a variant!'));

});

[Magento 2] Récupérer les données d’un client via son customer ID

03/12/2020 / admin

Testé fonctionnel Magento 2.4! Source: How to get customer data by customer id in magento 2? (Version PDF – rakeshjesadiya.com-How to get customer data by customer id in magento 2).

ATTENTION: cet article ne traite pas de la manière de récupérer dynamiquement le customer ID. Il sera indispensable de le connaître afin que le code ci-dessous fonctionne correctement! Voici une manière rapide de récupérer le customer ID dans un template PHTML via l’Object Manager de Magento 2 (mais il s’agit d’une mauvaise pratique, alors servez-vous en uniquement pour tester le code ci-dessous; ensuite, faites ça proprement).

Liste des données client récupérées:

ATTENTION: bien que présent, le champ Prefix n’aura pas de valeur récupérée, même si vous avez activé la fonctionnalité d’affichage d’un champ « préfixe » (Madame, Monsieur, …) dans le formulaire de création d’un compte client et que l’utilisateur l’a renseigné lors de son inscription!

Vous pourrez afficher les valeurs récupérées dans un template PHTML en ajoutant la ligne suivante:

<?= "<pre>";print_r($customer->__toArray()); ?>

1	<?= "<pre>";print_r($customer->__toArray()); ?>

Valeurs récupérées:

Array
(
    [website_id] => 1
    [email] => roni_cost@example.com
    [group_id] => 1
    [store_id] => 1
    [created_at] => 2017-11-10 13:09:03
    [updated_at] => 2017-11-23 12:48:29
    [disable_auto_group_change] => 0
    [created_in] => Default Store View
    [prefix] => 
    [firstname] => Veronica
    [middlename] => 
    [lastname] => Costello
    [suffix] => 
    [dob] => 1973-12-15
    [default_billing] => 1
    [default_shipping] => 1
    [taxvat] => 
    [confirmation] => 
    [gender] => 2
    [addresses] => Array
        (
            [0] => Array
                (
                    [firstname] => Veronica
                    [lastname] => Costello
                    [street] => Array
                        (
                            [0] => 6146 Honey Bluff Parkway
                        )

                    [city] => Calder
                    [country_id] => US
                    [region] => Array
                        (
                            [region] => Michigan
                            [region_code] => MI
                            [region_id] => 33
                        )

                    [region_id] => 33
                    [postcode] => 49628-7978
                    [telephone] => (555) 229-3326
                    [id] => 1
                    [customer_id] => 1
                    [default_billing] => 1
                    [default_shipping] => 1
                )

        )

    [id] => 1
    [extension_attributes] => Array
        (
            [is_subscribed] => 
        )

)

Array

(

[website_id] => 1

[email] => roni_cost@example.com

[group_id] => 1

[store_id] => 1

[created_at] => 2017-11-10 13:09:03

[updated_at] => 2017-11-23 12:48:29

[disable_auto_group_change] => 0

[created_in] => Default Store View

[prefix] =>

[firstname] => Veronica

[middlename] =>

[lastname] => Costello

[suffix] =>

[dob] => 1973-12-15

[default_billing] => 1

[default_shipping] => 1

[taxvat] =>

[confirmation] =>

[gender] => 2

[addresses] => Array

(

[0] => Array

(

[firstname] => Veronica

[lastname] => Costello

[street] => Array

(

[0] => 6146 Honey Bluff Parkway

)

[city] => Calder

[country_id] => US

[region] => Array

(

[region] => Michigan

[region_code] => MI

[region_id] => 33

)

[region_id] => 33

[postcode] => 49628-7978

[telephone] => (555) 229-3326

[id] => 1

[customer_id] => 1

[default_billing] => 1

[default_shipping] => 1

)

[id] => 1

[extension_attributes] => Array

(

[is_subscribed] =>

)

Code:

Il faudra créer un nouveau module app/code/MyVendor/Customer et y surcharger le Block vendor/magento/module-customer/Block/CustomerData.php.

app/code/MyVendor/Customer/Block/CustomerData.php

<?php

namespace MyVendor\Customer\Block;

class Customer extends \Magento\Framework\View\Element\Template
{
    /**
     * Constructor
     *
     * @param \Magento\Framework\View\Element\Template\Context  $context
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Customer\Api\CustomerRepositoryInterface $customerRepository,
        array $data = []
    ) {
        $this->customerRepository = $customerRepository;
        parent::__construct($context, $data);
    }

    /* Pass customer id $id*/
    public function getCustomer($id)
    {   
        return $this->customerRepository->getById($id);
    }
}

<?php

namespace MyVendor\Customer\Block;

class Customer extends \Magento\Framework\View\Element\Template

{

/**

* Constructor

* @param \Magento\Framework\View\Element\Template\Context $context

* @param array $data

public function __construct(

\Magento\Framework\View\Element\Template\Context $context,

\Magento\Customer\Api\CustomerRepositoryInterface $customerRepository,

array $data = []

) {

$this->customerRepository = $customerRepository;

parent::__construct($context, $data);

}

/* Pass customer id $id*/

public function getCustomer($id)

{

return $this->customerRepository->getById($id);

}

Dans votre template PHTML:

$customerId = 1; //pass customer id
$customer = $block->getCustomer($customerId);
echo $customer->getFirstname();  // result customer first name
echo $customer->getEmail(); // result as customer email 
echo $customer->getLastname(); // customer lastname

$customerId = 1; //pass customer id

$customer = $block->getCustomer($customerId);

echo $customer->getFirstname(); // result customer first name

echo $customer->getEmail(); // result as customer email

echo $customer->getLastname(); // customer lastname

Les autres fichiers standard que doit comporter un module Magento 2

app/code/MyVendor/Customer/registration.php

app/code/MyVendor/Customer/etc/di.xml

app/code/MyVendor/Customer/etc/module.xml

Les commandes a exécuter pour rendre votre module disponible

magerun2 module:enable MyVendor_Customer

1	magerun2 module:enable MyVendor_Customer

magerun2 setup:upgrade

1	magerun2 setup:upgrade

magerun2 setup:di:compile

1	magerun2 setup:di:compile

magerun2 cache:clean

1	magerun2 cache:clean

Voici une manière rapide de récupérer le customer ID dans un template PHTML via l’Object Manager de Magento 2

Source: Magento 2 Get Current Customer Id. (Version PDF – tutorialsplane.com-Magento 2 Get Current Customer Id)

A savoir: l’article donne également une manière propre de faire.

 $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
 $customerSession = $objectManager->get('Magento\Customer\Model\Session');
    if($customerSession->isLoggedIn()) {
        echo   $customerSession->getCustomer()->getId()."<br/>";  // get Customer Id
        echo   $customerSession->getCustomer()->getName()."<br/>";  // get  Full Name
        echo   $customerSession->getCustomer()->getEmail()."<br/>"; // get Email Name
        echo   $customerSession->getCustomer()->getGroupId()."<br/>";  // get Customer Group Id
      }

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$customerSession = $objectManager->get('Magento\Customer\Model\Session');

if($customerSession->isLoggedIn()) {

echo $customerSession->getCustomer()->getId()."<br/>"; // get Customer Id

echo $customerSession->getCustomer()->getName()."<br/>"; // get Full Name

echo $customerSession->getCustomer()->getEmail()."<br/>"; // get Email Name

echo $customerSession->getCustomer()->getGroupId()."<br/>"; // get Customer Group Id

}

[Magento 2] Déplacer un éléments existant dans un layout XML avec la balise Move

03/12/2020 / admin

Déplacer le titre de page `element="page.main.title"` dans les pages du compte client

Par défaut dans Magento 2 (version 2.4 lors de mes tests) le titre de page n’est pas posé au même endroit dans le DOM/layout de l’ensemble des pages du compte client.

Exemple pour la page « Modifier les informations du compte »

Pour cette page, on va surcharger le fichier vendor/magento/module-customer/view/frontend/layout/customer_account_edit.xml pour y ajouter la ligne de code suivante:

<move element="page.main.title" destination="content" before="-" />

1	<move element="page.main.title" destination="content" before="-" />

Problème: avec cette surcharge, nous avons impacté uniquement la page de modification des informations du compte. Si je me rends, par exemple, dans la page « Carnet d’adresses » le titre de page n’est logiquement pas posé au même endroit que dans la page que nous venons de surcharger.

Exemple pour homogénéïser la position du titre sur l’ensemble des pages du compte client

Procéder de la même manière que pour la page « Modifier les informations du compte », mais placer la balise move dans une surcharge du fichier vendor/magento/module-customer/view/frontend/layout/default.xml:

<move element="page.main.title" destination="content" before="-" />

1	<move element="page.main.title" destination="content" before="-" />

Déplacer les notifications `element="page.messages"` dans les pages du compte client

Note: en général, cette modification va de pair avec le déplacement du titre de page.

Ces notifications apparaissent lorsque l’utilisateur enregistre des actions de modification via l’un des formulaires de son compte client.

On va surcharger (si ce n’est pas déjà fait) le fichier vendor/magento/module-customer/view/frontend/layout/customer_account_edit.xml pour y ajouter la ligne de code suivante:

<move element="page.messages" destination="content" before="page.main.title" />

1	<move element="page.messages" destination="content" before="page.main.title" />

Ici, modifier la valeur de before="" si besoin.

Articles récents

Catégories

Archives

Méta

Mois : décembre 2020

[Magento 2] Afficher de manière dynamique la base URL d’un store dans un bloc statique, un template PHTML, un layout XML

Blocs CMS statiques

Documentation

Templates PHTML

Layouts XML

[jQuery] Utiliser la méthode .contents() pour supprimer un élément parent du DOM, mais conserver tous ses enfants

HTML:

jQuery:

Résultat dans le DOM:

[Magento 2] Changer la valeur de l’attribut Colspan dans les tableaux des commandes du compte client

[Magento 2] Ajouter des blocs enfants via les layouts XML et la fonction getChildHtml dans un template PHTML

Comment afficher un child block en particulier?

[Magento 2] Etendre un composant JS natif

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

[Magento 2] Utiliser .addMethod() pour remplacer un libellé de message d’erreur de saisie dans un champ de formulaire (via la librairie jQuery Validate)

[Magento 2] Récupérer les données d’un client via son customer ID

Liste des données client récupérées:

Code:

app/code/MyVendor/Customer/Block/CustomerData.php

Dans votre template PHTML:

Les autres fichiers standard que doit comporter un module Magento 2

app/code/MyVendor/Customer/registration.php

app/code/MyVendor/Customer/etc/di.xml

app/code/MyVendor/Customer/etc/module.xml

Les commandes a exécuter pour rendre votre module disponible

Voici une manière rapide de récupérer le customer ID dans un template PHTML via l’Object Manager de Magento 2

[Magento 2] Déplacer un éléments existant dans un layout XML avec la balise Move

Déplacer le titre de page `element="page.main.title"` dans les pages du compte client

Exemple pour la page « Modifier les informations du compte »

Exemple pour homogénéïser la position du titre sur l’ensemble des pages du compte client

Déplacer les notifications `element="page.messages"` dans les pages du compte client

Blocs CMS statiques

Documentation

Templates PHTML

Layouts XML

HTML:

jQuery:

Résultat dans le DOM:

Comment afficher un child block en particulier?

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

Liste des données client récupérées:

Code:

app/code/MyVendor/Customer/Block/CustomerData.php

Dans votre template PHTML:

Les autres fichiers standard que doit comporter un module Magento 2

app/code/MyVendor/Customer/registration.php

app/code/MyVendor/Customer/etc/di.xml

app/code/MyVendor/Customer/etc/module.xml

Les commandes a exécuter pour rendre votre module disponible

Voici une manière rapide de récupérer le customer ID dans un template PHTML via l’Object Manager de Magento 2

Déplacer le titre de page element="page.main.title" dans les pages du compte client

Exemple pour la page « Modifier les informations du compte »

Exemple pour homogénéïser la position du titre sur l’ensemble des pages du compte client

Déplacer les notifications element="page.messages" dans les pages du compte client

Déplacer le titre de page `element="page.main.title"` dans les pages du compte client

Déplacer les notifications `element="page.messages"` dans les pages du compte client