admin – devfrontend.info

Authoradmin

[javaScript] Quelques expressions régulières (Regex) utiles

15/01/2021 / admin

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):

$('.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"]
    });
});

$('.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"]

});

Résoudre les problèmes d’affichage d’un picto SVG sous Mac et le navigateur Safari

13/01/2021 / admin

Picto SVG qui s’affiche correctement sous Mac et le navigateur Safari:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>①/icons/expand</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g stroke="#34393b">
            <line x1="15.5" y1="8.499" x2="23.5" y2="0.499"></line>
            <line x1="0.5" y1="23.499" x2="8.5" y2="15.499"></line>
            <polyline points="5.5 23.499 0.5 23.499 0.5 18.499"></polyline>
            <polyline points="23.5 5.499 23.5 0.499 18.5 0.499"></polyline>
            <line x1="15.5" y1="15.499" x2="23.5" y2="23.499"></line>
            <line x1="0.5" y1="0.499" x2="8.5" y2="8.499"></line>
            <polyline points="0.5 5.499 0.5 0.499 5.5 0.499"></polyline>
            <polyline points="18.5 23.499 23.5 23.499 23.5 18.499"></polyline>
        </g>
    </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>

<title>①/icons/expand</title>

</g>

</svg>

Le même picto SVG (code source différent) qui ne s’affiche pas sous Mac et le navigateur Safari:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="filter-1">
            <feColorMatrix in="SourceGraphic" type="matrix" values=""></feColorMatrix>
        </filter>
    </defs>
    <g id="——-WS-fiche-produit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g id="fiche-produit-qté---WS" transform="translate(-724.000000, -733.000000)">
            <g id="produit" transform="translate(30.000000, 130.000000)">
                <g id="icons-expand" transform="translate(69.000000, 0.000000)" filter="url(#filter-1)">
                    <g transform="translate(626.000000, 604.000000)" id="expand-1">
                        <line x1="12.9166667" y1="7.0825" x2="19.5833333" y2="0.415833333" id="Shape" stroke="#000000"></line>
                        <line x1="0.416666667" y1="19.5825" x2="7.08333333" y2="12.9158333" id="Shape" stroke="#000000"></line>
                        <polyline id="Shape" stroke="#000000" points="4.58333333 19.5825 0.416666667 19.5825 0.416666667 15.4158333"></polyline>
                        <polyline id="Shape" stroke="#000000" points="19.5833333 4.5825 19.5833333 0.415833333 15.4166667 0.415833333"></polyline>
                        <line x1="12.9166667" y1="12.9158333" x2="19.5833333" y2="19.5825" id="Shape" stroke="#000000"></line>
                        <line x1="0.416666667" y1="0.415833333" x2="7.08333333" y2="7.0825" id="Shape" stroke="#000000"></line>
                        <polyline id="Shape" stroke="#000000" points="0.416666667 4.5825 0.416666667 0.415833333 4.58333333 0.415833333"></polyline>
                        <polyline id="Shape" stroke="#000000" points="15.4166667 19.5825 19.5833333 19.5825 19.5833333 15.4158333"></polyline>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>

<defs>

</filter>

</defs>

</g>

</svg>

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

12/01/2021 / admin

Testé fonctionnel Magento 2.4!

Dans mon exemple, l’ID « narrow-by-list » est présent deux fois dans le DOM (ce qui n’est pas du tout une bonne pratique) car la liste des filtres s’affiche dans deux zones bien distinctes de la page: 1. en mode horizontal au-dessus de la liste des catégories/produits et dans un volet glissant qui ne s’affiche qu’au clic sur un bouton de type « Voir plus de filtres ».

Il faudra donc adapter un peu mon code à votre propre utilisation.

Chemin: app/design/frontend/MyVendor/MyTheme/Magento_LayeredNavigation/templates/layer/view.phtml.

Je désactive la condition PHP <?php if ($block->getLayer()->getState()->getFilters()) : ?> qui sette la visibilité du bouton « Effacer tout », mais uniquement au rechargement de la page.
J’ajoute un ID <div id="filterActions" class="block-actions filter-actions">.

            <?php //if ($block->getLayer()->getState()->getFilters()) : ?>
                <div id="filterActions" class="block-actions filter-actions">
                    <a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear">
                        <span><?= $block->escapeHtml(__('Clear All')) ?></span>
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20"><g><g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M1 6.99v0l3 4.5v0l3.5-4v0"/></g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M13.5 19.5A9.5 9.5 0 1 0 4 10v1.494"/></g></g></g></svg>
                        </span>
                    </a>
                </div>
            <?php //endif; ?>

<?php //if ($block->getLayer()->getState()->getFilters()) : ?>

<a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear">

<span><?= $block->escapeHtml(__('Clear All')) ?></span>

</span>

</a>

</div>

<?php //endif; ?>

Dans le même fichier view.phtml, j’ajoute ce bout de code javaScript (il vous faudra probablement adapter le ciblage du selecteur suivant qui n’existera pas chez vous: let FILTER = $('#narrow-by-list.is-view-top').find('.active');):

<script>
    require([
        'jquery'
    ], function($){
        'use strict';

        // On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml)
        // qu'il y a au moins 1 filtre d'actif.
        function checkForActiveFilter() {
            let FILTER = $('#narrow-by-list.is-view-top').find('.active');

            if (FILTER.length >= 1) {
                return true;
            } else {
                return false;
            }
        }

        // On sette la visibilité du bouton "Effacer tout" en fonction du résultat
        // retourné par la fonction checkForActiveFilter().
        function setFilterActionsVisibility() {
            const $FILTER_ACTIONS = $('#filterActions');

            if ( checkForActiveFilter() == true ){
                $FILTER_ACTIONS.removeClass('no-active-filter');
            } else {
                $FILTER_ACTIONS.addClass('no-active-filter');
            }
        }

        // console.log("is any filter active? " + checkForActiveFilter());
        
        setFilterActionsVisibility();
    });
</script>

require([

'jquery'

], function($){

'use strict';

// On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml)

// qu'il y a au moins 1 filtre d'actif.

function checkForActiveFilter() {

let FILTER = $('#narrow-by-list.is-view-top').find('.active');

if (FILTER.length >= 1) {

return true;

} else {

return false;

}

// On sette la visibilité du bouton "Effacer tout" en fonction du résultat

// retourné par la fonction checkForActiveFilter().

function setFilterActionsVisibility() {

const $FILTER_ACTIONS = $('#filterActions');

if ( checkForActiveFilter() == true ){

$FILTER_ACTIONS.removeClass('no-active-filter');

} else {

$FILTER_ACTIONS.addClass('no-active-filter');

}

// console.log("is any filter active? " + checkForActiveFilter());

setFilterActionsVisibility();

});

</script>

On n’oublie pas le petit CSS qui va bien:

#filterActions.no-active-filter {
    display: none !important;
}

#filterActions.no-active-filter {

display: none !important;

}

[Magento 2] Pour créer un attribut produit custom depuis l’interface d’administration

08/01/2021 / admin

Pour afficher votre nouvel attribut dans un PHTML

getData(‘best_offer’);
$newOffer = $_product->getData(‘new_offer’);
?>

<?php if ($bestOffer && !$newOffer) :?>
    <div class="featured-ribbon"><?php echo __('best offer') ?></div>
<?php endif; ?>

<?php if (($bestOffer && $newOffer) || (!$bestOffer && $newOffer)) :?>
    <div class="featured-ribbon"><?php echo __('new offer') ?></div>
<?php endif; ?>

<?php if ($bestOffer && !$newOffer) :?>

<?php endif; ?>

<?php if (($bestOffer && $newOffer) || (!$bestOffer && $newOffer)) :?>

<?php endif; ?>

Création d’un nouvel attribut:

* BOUTIQUES > Attributs > Produit
* Bouton orange « Ajouter un attribut » (au-dessus du tableau, tout à droite)
* Section « Propriétés de l’attribut »:
* Champ « Libellé par défaut »: mettre « new offer »
* Champ « Type d’entrée catalogue pour le propriétaire de la boutique »: mettre « Yes/No »
* Champ « Valeurs requises »: mettre « Non »
* Bouton orange « Enregistrer l’attribut » (en-haut à droite)

Après enregistrement du nouvel attribut, nous sommes redirigés sur la page qui liste l’ensemble des attributs disponibles.

* Pour retrouver notre nouvel attribut, dans la colonne « Libellé par défaut », renseigner le champ placé immédiatement sous l’en-tête avec le mot-clé « new » et taper la touche Entrée. Le nouvel attribut (« new offer ») est, normalement, dans le résultat du filtrage que nous venos d’effectuer.
* Pour l’éditer, cliquer sur la ligne correspondant à l’attribut « new offer »
* Bloc « INFORMATIONS ATTRIBUTS » en colonne de gauche > cliquer sur « Propriétés du front office »
* Section « Propriétés du front office » (colonne principale):
* Champ « Utiliser dans les listes produits »: mettre « Oui »
* Bouton orange « Enregistrer l’attribut » (en-haut à droite)

Après édition du nouvel attribut, il faut l’ajouter au jeu d’attributs des produits de type « Abonnement ».

* BOUTIQUES > Attributs > Jeu d’attributs
* Dans la liste, cliquer sur « Abonnements »
* Dans la colonne du milieu « Groupes », scroller vers la bas jusqu’à apparition du dossier « Attributes »
* Puis effectuer un glisser-déposer de l’attribut non assigné « new_offer » (colonne de droite « Attributs non assignés ») vers le groupe d’attributs « Attributes » (colonne du milieu « Groupes »)
* ATTENTION: l’attribut « new_offer » doit bien se trouver listé parmi les attributs du dossier « Attributes ». Pour ne pas se tromper, on peut le glisser sous l’attribut existant « best_offer »
* Bouton orange « Enregistrer » (en-haut à droite)

Assignation de l’attribut à un produit:

* CATALOGUE > Produits
* Choisir un produit Abonnement à éditer (colonne « Action », cliquer sur « Modifier »)
* Scroller jusqu’au volet « Attributs » et cliquer dessus pour l’ouvrir
* Passer le champ « new offer » à « Oui »
* Bouton orange « Enregistrer » (en-haut à droite)
* Ne pas oublier de vider les caches

[Magento 2] Etirer de manière homothétique le visuel principal de la fiche produit affiché via Fotorama

05/01/2021 / admin

Testé fonctionnel Magento 2.4. La markup HTML de la fiche produit a cependant été surchargé par rapport au standard. On retrouve la première rangée d’informations sur deux colonnes (gauche: visuel principal et carousel Fotorama; droite: libellé produit, prix, formulaire d’ajout au panier).

<div class="column main">
    <section class="product-top row">
        <div class="product-top-left"></div>
        <div class="product-top-right"></div>
    </section>
</div>

</section>

</div>

Surcharger la largeur et la hauteur max du visuel principal dans le fichier etc/view.xml de votre thème:

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="product_page_image_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>968</width>
                <height>968</height>
            </image>
        </images>
    </media>

<?xml version="1.0"?>

<media>

</image>

</images>

</media>

Le code LESS (qui fait appel à un mixin spécifique permettant d’écrire des boucles FOR qui exploitent des données consignées dans un ARRAY. Il ne faudra donc pas oublier de l’inclure dans votre projet! (Documentation).
Lisez les commentaires dans mon code pour plus de documentation:

.product-top {
    .product-top-left {
        /*
         * @screen-resolutions: un tableau des résolutions d'écran (largeurs) ciblées par le redimensionnement du visuel principal de la fiche produit.
         * C'est LA SEULE VALEUR A MODIFIER! Ajouter ou retirer des résolutions d'écran selon vos besoins de support.
         * Résolutions les plus répandues en Europe (en décembre 2020 pour ce qui est renseigné dans le tableau):
         * https://gs.statcounter.com/screen-resolution-stats/all/europe
         */
        @screen-resolutions: 1280px, 1366px, 1440px, 1536px, 1640px, 1920px;
        /*
         * @global-gutter-width: la largeur des gouttières telle que définie dans :root{ var(--gutter) }.
         * @thumbs-col-width: la largeur (marge à droite comprise) de la colonne des miniatures.
         */
        @global-gutter-width: 3.75rem;
        @thumbs-col-width: 80px;

        // Dépendant de "global/lib/for.less" pour exploiter les données issues d'un tableau dans une boucle FOR avec LESS;
        .for(@screen-resolutions); .-each(@value) {
            /*
             * @parent-row-width: la largeur de l'élément du DOM qui a la classe ".product-top".
             */
            @parent-row-width: @value - (@global-gutter-width * 2);
            @media (min-width: @value) {
                min-height: (@parent-row-width/2) !important;
                flex: 0 0 (@parent-row-width/2) + @thumbs-col-width !important;
            }
        }
    }
}

/*
 * Résolution minimum consignée dans le tableau @screen-resolutions
 */
@media (min-width: 1280px) {
    .product-top .product-top-left {
        max-width: 100% !important;
        .fotorama__stage__frame {
            display: flex;
            background: rgba(231, 231, 231, 0.5);
        }
        .product.media .fotorama__stage img {
            top: unset !important;
            align-self: center;
        }
    }
}

.product-top {

.product-top-left {

* @screen-resolutions: un tableau des résolutions d'écran (largeurs) ciblées par le redimensionnement du visuel principal de la fiche produit.

* C'est LA SEULE VALEUR A MODIFIER! Ajouter ou retirer des résolutions d'écran selon vos besoins de support.

* Résolutions les plus répandues en Europe (en décembre 2020 pour ce qui est renseigné dans le tableau):

* https://gs.statcounter.com/screen-resolution-stats/all/europe

@screen-resolutions: 1280px, 1366px, 1440px, 1536px, 1640px, 1920px;

* @global-gutter-width: la largeur des gouttières telle que définie dans :root{ var(--gutter) }.

* @thumbs-col-width: la largeur (marge à droite comprise) de la colonne des miniatures.

@global-gutter-width: 3.75rem;

@thumbs-col-width: 80px;

// Dépendant de "global/lib/for.less" pour exploiter les données issues d'un tableau dans une boucle FOR avec LESS;

.for(@screen-resolutions); .-each(@value) {

* @parent-row-width: la largeur de l'élément du DOM qui a la classe ".product-top".

@parent-row-width: @value - (@global-gutter-width * 2);

@media (min-width: @value) {

min-height: (@parent-row-width/2) !important;

flex: 0 0 (@parent-row-width/2) + @thumbs-col-width !important;

}

* Résolution minimum consignée dans le tableau @screen-resolutions

@media (min-width: 1280px) {

.product-top .product-top-left {

max-width: 100% !important;

.fotorama__stage__frame {

display: flex;

background: rgba(231, 231, 231, 0.5);

}

.product.media .fotorama__stage img {

top: unset !important;

align-self: center;

}

Version non factorisée (ça fait la même chose en moins bien conceptualisé et en beaucoup plus chiant à maintenir):

.product-top {
    .product_page_image_large(@parent-row-width) {
        /*
         * @parent-row-width: la largeur de l'élément qui a la classe .product-top
         * 80px: la largeur (marge à droite comprise) de la colonne des miniatures
         */
        max-width: 100% !important;
        min-height: (@parent-row-width/2) !important;
        flex: 0 0 (@parent-row-width/2) + 80px !important;
    }
    // Résolutions les plus répandues en Europe en décembre 2020:
    // https://gs.statcounter.com/screen-resolution-stats/all/europe
    @media (min-width: 1280px) {
        // @parent-row-width: 1160px;
        .product-top-left {
            .product_page_image_large(1160px);

            .fotorama__stage__frame {
                display: flex;
                background: rgba(231, 231, 231, 0.5);
            }
            .product.media .fotorama__stage img {
                top: unset !important;
                align-self: center;
            }
        }
    }
    @media (min-width: 1366px) {
        // @parent-row-width: 1246px;
        .product-top-left {
            .product_page_image_large(1246px);
        }
    }
    @media (min-width: 1440px) {
        // @parent-row-width: 1320px;
        .product-top-left {
            .product_page_image_large(1320px);
        }
    }
    @media (min-width: 1536px) {
        // @parent-row-width: 1416px;
        .product-top-left {
            .product_page_image_large(1416px);
        }
    }
    @media (min-width: 1640px) {
        // @parent-row-width: 1775px;
        .product-top-left {
            .product_page_image_large(1775px);
        }
    }
    @media (min-width: 1920px) {
        // @parent-row-width: 1800px;
        .product-top-left {
            .product_page_image_large(1800px);
        }
    }
}

.product-top {

.product_page_image_large(@parent-row-width) {

* @parent-row-width: la largeur de l'élément qui a la classe .product-top

* 80px: la largeur (marge à droite comprise) de la colonne des miniatures

max-width: 100% !important;

min-height: (@parent-row-width/2) !important;

flex: 0 0 (@parent-row-width/2) + 80px !important;

}

// Résolutions les plus répandues en Europe en décembre 2020:

// https://gs.statcounter.com/screen-resolution-stats/all/europe

@media (min-width: 1280px) {

// @parent-row-width: 1160px;

.product-top-left {

.product_page_image_large(1160px);

.fotorama__stage__frame {

display: flex;

background: rgba(231, 231, 231, 0.5);

}

.product.media .fotorama__stage img {

top: unset !important;

align-self: center;

}

@media (min-width: 1366px) {

// @parent-row-width: 1246px;

.product-top-left {

.product_page_image_large(1246px);

}

@media (min-width: 1440px) {

// @parent-row-width: 1320px;

.product-top-left {

.product_page_image_large(1320px);

}

@media (min-width: 1536px) {

// @parent-row-width: 1416px;

.product-top-left {

.product_page_image_large(1416px);

}

@media (min-width: 1640px) {

// @parent-row-width: 1775px;

.product-top-left {

.product_page_image_large(1775px);

}

@media (min-width: 1920px) {

// @parent-row-width: 1800px;

.product-top-left {

.product_page_image_large(1800px);

}

[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
<a href="{{store url="ma-jolie-page"}}">Ma jolie page</a>

1 2	// testé OK Magento 2.3 <a href="{{store url="ma-jolie-page"}}">Ma jolie page</a>

// Avec un ID de catégorie - pas testé
<a href="{{store url="category-url"}}ma-jolie-page">Ma jolie page dans une catégorie donnée</a>

1 2	// Avec un ID de catégorie - pas testé <a href="{{store url="category-url"}}ma-jolie-page">Ma jolie page dans une catégorie donnée</a>

Templates PHTML

nada for now …

Layouts XML

nada for now …

[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');

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

Authoradmin

[javaScript] Quelques expressions régulières (Regex) utiles

[Magento 2] Utiliser une Regex et la méthode Trim de jQuery pour affecter une largeur dynamique aux tooltips

Résoudre les problèmes d’affichage d’un picto SVG sous Mac et le navigateur Safari

Picto SVG qui s’affiche correctement sous Mac et le navigateur Safari:

Le même picto SVG (code source différent) qui ne s’affiche pas sous Mac et le navigateur Safari:

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

[Magento 2] Pour créer un attribut produit custom depuis l’interface d’administration

Pour afficher votre nouvel attribut dans un PHTML

Création d’un nouvel attribut:

Après enregistrement du nouvel attribut, nous sommes redirigés sur la page qui liste l’ensemble des attributs disponibles.

Après édition du nouvel attribut, il faut l’ajouter au jeu d’attributs des produits de type « Abonnement ».

Assignation de l’attribut à un produit:

[Magento 2] Etirer de manière homothétique le visuel principal de la fiche produit affiché via Fotorama

[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

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?