Étiquette : template

[Magento 2] Utiliser les arguments dans les layouts XML pour afficher/masquer sous condition certaines zones d’un template PHTML

16/03/2023 / admin

Objectif

Utiliser les arguments pour afficher ou masquer une partie de template PHTML dans le DOM qui va être généré (il peut arriver qu’on cherche à afficher certaines parties d’un PHTML et à en masquer d’autres sous condition)
Utiliser $block->hasData() et $block->getData() dans un template PHTML pour interroger les arguments placés dans le layout XML
Utiliser la fonctionnalité de Custom Layout Update pour surcharger un layout XML de page

Ressources en ligne:

Doc officielle: Common layout customization tasks > Create cms-page/product/category-specific selectable layouts
Doc officielle: Common layout customization tasks > Modify block arguments

Layout XML

ATTENTION: j’ai écrit ça un peu vite; se référer plutôt à la doc officielle (lien ci-dessus).

On crée un Custom Layout Update. Le nom du fichier est important:

cms_page_view_selectable_socialmedia_NoSocialFooter.xml: la surcharge sera à appliquer à la main, via le BO, pour n’importe quelle page CMS.
cms_page_view_id_socialmedia.xml: la surcharge sera appliquée automatiquement à la page CMS dont l’URL Key est « socialmedia ».

Fichier: app/design/frontend/Vendor/default/Magento_Cms/layout/cms_page_view_selectable_socialmedia_NoSocialFooter.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="footer.main">
            <arguments>
                <argument name="display_social_footer" xsi:type="boolean">false</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="display_social_footer" xsi:type="boolean">false</argument>

</arguments>

</referenceBlock>

</body>

</page>

Template PHTML

Fichier: app/design/frontend/Vendor/default/Magento_Theme/templates/html/footer/main.phtml

<?php

/**
 * @var \Magento\Framework\View\Element\Template $block
 */

// [1]
$displaySocialFooter = $block->hasData('display_social_footer') ? $block->getData('display_social_footer') : true;
?>

// [2]
<?php if ($displaySocialFooter): ?>
    <p>Lorem ipsum dolor sit amet</p>
<?php endif; ?>

<?php

/**

* @var \Magento\Framework\View\Element\Template $block

// [1]

$displaySocialFooter = $block->hasData('display_social_footer') ? $block->getData('display_social_footer') : true;

// [2]

<?php if ($displaySocialFooter): ?>

<p>Lorem ipsum dolor sit amet</p>

<?php endif; ?>

[1] On interroge le $block pour savoir si l’argument display_social_footer est redéfini dans le layout XML. Mais par défaut, on set la variable $display_social_footer à true.
[2] Si l’argument display_social_footer est redéfini à false dans mon exemple dans le layout XML (pour cela, il faut que le Custom Layout Update « NoSocialFooter » soit sélectionné en BO dans la config de la page CMS « socialmedia »), le <p>Lorem ipsum dolor sit amet</p> n’apparaîtra pas dans le DOM généré. Sinon, il apparaîtra.

En BO:

cache flush de rigueur!

[Magento 2] Utiliser le binding Foreach de Knockout JS pour splitter un tableau en autant d’items que le nombre qu’il contient dans un fichier html

12/05/2022 / admin

Sources:

Exemple pour splitter un tableau contenant une adresse postale sur trois lignes:

Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/js/view/address-renderer-mixin.js

/**
 * @return {string}
 */
formatStreet: function (str) {
    return String(str).replace(/,(?=[^\s])/g, ", ");
},

/**

* @return {string}

formatStreet: function (str) {

return String(str).replace(/,(?=[^\s])/g, ", ");

Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/template/shipping-information/address-renderer/default.html

<text args="formatStreet(address().street)"></text>

1	<text args="formatStreet(address().street)"></text>

Résultat en front:
Street 1,Street 2,Street 3

<each args="data: address().street, as: 'streetLine'">
    <text args="streetLine"></text>
    <br>
</each>

<br>

</each>

Résultat en front:
Street 1
Street 2
Street 3

[Magento 2] Depuis un template PHTML, détecter si la page sur laquelle nous nous trouvons est la homepage, une page produit, une page catégorie

21/01/2021 / admin

Source: How to check IsHomePage in Magento 2? Are we on the homepage?

<?php if ($this->getRequest()->getFullActionName() == 'cms_index_index') : ?>
    <h1>you are on the homepage</h1>
<?php endif; ?>

<?php if ($this->getRequest()->getFullActionName() == 'cms_index_index') : ?>

<h1>you are on the homepage</h1>

<?php endif; ?>

if ($this->getRequest()->getFullActionName() == 'cms_index_index') {
    //you are on the homepage
}
if ($this->getRequest()->getFullActionName() == 'catalog_product_view') {
    //you are on the product page
}
if ($this->getRequest()->getFullActionName() == 'catalog_category_view') {
    //you are on the category page
}

if ($this->getRequest()->getFullActionName() == 'cms_index_index') {

//you are on the homepage

}

if ($this->getRequest()->getFullActionName() == 'catalog_product_view') {

//you are on the product page

}

if ($this->getRequest()->getFullActionName() == 'catalog_category_view') {

//you are on the category page

}

[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] 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"}}

[Magento 2] Email transactionnels – astuces et bonnes pratiques de customisation

26/02/2020 / admin

Testé Magento 2.3 et 2.4

Comment changer, sans passer par l’interface d’administration mais dans le code source, le logo et surcharger le header et le footer des templates d’email transactionnels? Ressources officielles en ligne pour la gestion des emails transactionnels dans Magento 2:

Les bases du développement d’emailings transactionnels sous Magento 2 (surcharge, extension, où et comment?)
RECHERCHER ou cibler un template d’email spécifique dans Magento 2
Changer le logo d’un template d’email dans Magento 2
Afficher une image stockée dans un thème
Une liste complète des variables par défaut exploitables dans les templates d’email transactionnels de Magento 2
Test des emails transactionnels dans Magento 2
Inclure des PHTML ou des layouts XML complets dans un email
Gérer plusieurs headers/footers de mails transactionnels dans Magento 2 – Attention: j’ai testé ce code en 2.4 et moyennant une petite modification par rapport à ce qui est indiqué dans le config.xml, on arrive effectivement à avoir nos templates spés disponibles en BO, mais je ne suis pas parvenu à les lier aux corps des emails via la directive {{template config_path="design/email/footer_invoice_template"}} donnée en exemple…

Guide plus exhaustif que la doc officielle: How to Style Email Templates in Magento 2 et la version PDF.

Extension des styles LESS

L’extension des styles LESS se fait dans le thème. Chemin: app/design/frontend/MyVendor/mytheme/web/css/source/_email-extend.less.

RECHERCHER ou cibler un template d’email spécifique dans Magento 2

Il arrive, dans des projets complexes, que les emails sont éclatés en une multitude de fichiers, eux-mêmes consignés dans une multitude de modules. La méthode la plus simple pour trouver un template est de faire une recherche sur un bout de texte contenu dans l’email dans les fichiers au format CSV du code source.

Changer le logo d’un template d’email dans Magento 2

Préparer l’image qui vous servira de logo

Première étape: voir ici comment préparer un logo pour les emails transactionnels dans Magento 2.

Votre fichier sera, de préférence au format PNG et son libellé sera logo_email.png.

Modifier le fichier `app/etc/config.php`

<?php
return [
    'system' => [
        'default' => [
            'design' => [
                'email' => [
                    'logo_width' => '100',
                    'logo_height' => '100',
                ],

<?php

return [

'system' => [

'default' => [

'design' => [

'email' => [

'logo_width' => '100',

'logo_height' => '100',

Puis exécuter la commande ~~$ n98-magerun2 setup:upgrade~~ $ n98-magerun2 app:config:import.

Surcharger le logo natif de Magento 2 par votre propre logo

Chemin du fichier source: vendor/magento/module-email/view/frontend/web/logo_email.png. Chemin du fichier de destination: app/design/frontend/MyVendor/myTheme/Magento_Email/web/logo_email.png.

Surcharger le header et le footer des templates d’email transactionnels dans Magento 2

Header

Chemin du fichier source: vendor/magento/module-email/view/frontend/email/header.html. Chemin du fichier de destination: app/design/frontend/MyVendor/myTheme/Magento_Email/email/header.html.

Footer

Chemin du fichier source: vendor/magento/module-email/view/frontend/email/footer.html. Chemin du fichier de destination: app/design/frontend/MyVendor/myTheme/Magento_Email/email/footer.html.

Afficher une image stockée dans un thème

Comme d’hab: rien dans la doc à ce sujet à part pour le logo et aucun code fourni sur les forums ne fonctionne… Faire comme ceci:

<img src="{{view url='images/mon-image.jpg'}}" height="" width="" alt="{{trans 'Ma clé de traduction'}}" />

1	<img src="{{view url='images/mon-image.jpg'}}" height="" width="" alt="{{trans 'Ma clé de traduction'}}" />

Une liste complète des variables par défaut exploitables dans les templates d’email transactionnels de Magento 2

edit: source officielle (toujours mieux) Email templates Variable Reference.

Source: A Complete List of Default Variables Used in Magento 2 Email Templates et la version PDF pour la postérité.

ATTENTION: il y a un souci de formattage des double quotes dans la doc officielle. Si cous copiez/collez ceci: {{config path=”general/store_information/name”}} dans votre code source, l’information ne sera pas récupérée. Il faut mettre ceci: {{config path="general/store_information/name"}}.

Bonus: header et footer par défaut pour l’ensemble des gabarits d’email

{{template config_path="design/email/header_template"}}

1	{{template config_path="design/email/header_template"}}

{{template config_path="design/email/footer_template"}}

1	{{template config_path="design/email/footer_template"}}

Test des emails transactionnels dans Magento 2

Dev tips #1: Avant de tester vos changements effectués dans les templates HTML ou les styles CSS/LESS, la seule commande à taper est la suivante (si vous êtes en mode developer):

find pub/static/frontend/MyVendor -type f \( -name '*.css' \) -delete; find var/view_preprocessed/pub/static/frontend/MyVendor -type f \( -name '*.css' -o -name '*.less' \) -delete

1	find pub/static/frontend/MyVendor -type f $ -name '.css' $ -delete; find var/view_preprocessed/pub/static/frontend/MyVendor -type f $ -name '.css' -o -name '*.less' $ -delete

Dev tips #2: La page de réinitialisation du mot de passe (fonctionnalité « mot de passe oublié? ») est une bonne manière de s’envoyer des emails transactionnels de test dans Magento 2.

mailtrap.io – un service de test d’emailings gratuit (50 envois/jour ou 500 envois/mois) qui permet d’afficher les emails en vues smartphones, tablettes et desktops, de voir le code source, etc… Fournit quelques outils pratiques pour le débug.
Supprimer les limites par défaut du nombre maximum d’envoi de requêtes pour changer son mot de passe (5 fois) et du temps minimum à patienter entre deux envois de requête d’un nouveau mot de passe (10 minutes): Magento 2 Forgot Password Says Too many password reset requests et la version PDF

Inclure des PHTML ou des layouts XML complets dans un email

Inclure des templates PHTML complets dans un email transactionnel dans Magento 2

Magento 2 not able to load phtml file in email template .html file. Pas la peine de doubler les slashes (testé fonctionne Magento 2.4).

{{block class='Magento\\Framework\\View\\Element\\Template' area='adminhtml' template='Conversion_Replenish::email/replenish.phtml'}}

1	{{block class='Magento\\Framework\\View\\Element\\Template' area='adminhtml' template='Conversion_Replenish::email/replenish.phtml'}}

Inclure des layouts XML complets dans un email transactionnel dans Magento 2

Un bon exemple dans le code source de Magento 2.

{{layout handle="sales_email_order_items" order_id=$order_id area="frontend"}}

1	{{layout handle="sales_email_order_items" order_id=$order_id area="frontend"}}

[Magento 2] Afficher une liste produits par sous-catégories sur la page principale d’une catégorie

18/02/2020 / admin

Par défaut, Magento 2 utilise un template PHTML unique pour afficher les listes produits d’une catégorie et de ses sous-catégories. Il s’agit du fichier vendor/magento/module-catalog/view/frontend/templates/product/list.phtml.

L’un des problèmes posé par ce mode de fonctionnement réside dans le fait qu’on se retrouve avec une page catégorie principale/main qui affiche, dans une liste unique, tous les produits contenus dans cette catégorie ainsi que ses sous-catégories et ceux sans aucun distingo. Ce qui nous donne, de manière très schématisée:

<h1>Ma catégorie principale</h1>
<ul>
<li>Produit issu de ma sous catégorie #1</li>
<li>Produit issu de ma sous catégorie #1</li>
<li>Produit issu de ma sous catégorie #3</li>
<li>Produit issu de ma sous catégorie #4</li>
<li>Produit issu de ma sous catégorie #1</li>
<li>Produit issu de ma sous catégorie #2</li>
<li>Produit issu de ma sous catégorie #2</li>
</ul>

<h1>Ma catégorie principale</h1>

<ul>

<li>Produit issu de ma sous catégorie #1</li>

<li>Produit issu de ma sous catégorie #3</li>

<li>Produit issu de ma sous catégorie #4</li>

<li>Produit issu de ma sous catégorie #1</li>

<li>Produit issu de ma sous catégorie #2</li>

</ul>

Le code décrit dans ce billet va permettre d’obtenir ceci:

<h1>Ma sous catégorie #1</h1>
<ul>
<li>Produit issu de ma sous catégorie #1</li>
<li>Produit issu de ma sous catégorie #1</li>
<li>Produit issu de ma sous catégorie #1</li>
</ul>
<h1>Ma sous catégorie #2</h1>
<ul>
<li>Produit issu de ma sous catégorie #2</li>
<li>Produit issu de ma sous catégorie #2</li>
</ul>
<h1>Ma sous catégorie #3</h1>
<ul>
<li>Produit issu de ma sous catégorie #3</li>
</ul>
<h1>Ma sous catégorie #4</h1>
<ul>
<li>Produit issu de ma sous catégorie #4</li>
</ul>

<h1>Ma sous catégorie #1</h1>

<ul>

<li>Produit issu de ma sous catégorie #1</li>

</ul>

<h1>Ma sous catégorie #2</h1>

<ul>

<li>Produit issu de ma sous catégorie #2</li>

</ul>

<h1>Ma sous catégorie #3</h1>

<ul>

<li>Produit issu de ma sous catégorie #3</li>

</ul>

<h1>Ma sous catégorie #4</h1>

<ul>

<li>Produit issu de ma sous catégorie #4</li>

</ul>

Création d’un Helper: `app/code/Pdv/Catalog/Helper/Data.php`

Note: j’avais déjà créé ce Helper pour récupérer les Simple Products associés à un Configurable Product. Consulter le billet en question pour de plus amples infos si vous ne souhaitez pas exploiter tout le code ci-dessous. Ce Helper étend vendor/magento/module-catalog/Helper/Data.php.

<?php

namespace Pdv\Catalog\Helper;

use Magento\Framework\Exception\NoSuchEntityException;

/**
 * Catalog data helper
 *
 */
class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
    /**
     * @var \Pdv\Catalog\Model\Layer\Resolver $resolver
     */
    protected $resolver;

    /**
     * @var \Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable
     */
    protected $typeConfigurableResourceModel; // 1. Du nom du model dont je veux injecter la propriété de la classe

    /**
     * @var \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository
     */
    protected $categoryRepository;

    public function __construct(
        \Pdv\Catalog\Model\Layer\Resolver $resolver,
        \Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel, // 2. Demande à Magento une instance de mon configurable ressource model
        \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository
    ) {
        $this->resolver = $resolver;
        $this->typeConfigurableResourceModel = $typeConfigurableResourceModel; // 3. ...et mappe le paramètre du constructeur avec la propriété de la classe
        $this->categoryRepository = $categoryRepository;
    }

    /**
     * @param int $id
     * @return \Magento\Catalog\Api\Data\CategoryInterface | \Magento\Catalog\Model\Category
     *
     * @throws NoSuchEntityException
     */
    public function getCategory($id = null)
    {
        return $id ? $this->categoryRepository->get($id) : $this->resolver->getCurrentCategory();
    }

    /**
     * @param $childId
     * @return string[]
     */
    public function getConfigurableParentIdsByChildId($childId)
    {
        // 4. Je donne accès à ma nouvelle méthode dans le PHTML
        return $this->typeConfigurableResourceModel->getParentIdsByChild($childId);
    }
}

<?php

namespace Pdv\Catalog\Helper;

use Magento\Framework\Exception\NoSuchEntityException;

/**

* Catalog data helper

class Data extends \Magento\Framework\App\Helper\AbstractHelper

{

/**

* @var \Pdv\Catalog\Model\Layer\Resolver $resolver

protected $resolver;

/**

* @var \Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable

protected $typeConfigurableResourceModel; // 1. Du nom du model dont je veux injecter la propriété de la classe

/**

* @var \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository

protected $categoryRepository;

public function __construct(

\Pdv\Catalog\Model\Layer\Resolver $resolver,

\Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel, // 2. Demande à Magento une instance de mon configurable ressource model

\Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository

) {

$this->resolver = $resolver;

$this->typeConfigurableResourceModel = $typeConfigurableResourceModel; // 3. ...et mappe le paramètre du constructeur avec la propriété de la classe

$this->categoryRepository = $categoryRepository;

}

/**

* @param int $id

* @return \Magento\Catalog\Api\Data\CategoryInterface | \Magento\Catalog\Model\Category

* @throws NoSuchEntityException

public function getCategory($id = null)

{

return $id ? $this->categoryRepository->get($id) : $this->resolver->getCurrentCategory();

}

/**

* @param $childId

* @return string[]

public function getConfigurableParentIdsByChildId($childId)

{

// 4. Je donne accès à ma nouvelle méthode dans le PHTML

return $this->typeConfigurableResourceModel->getParentIdsByChild($childId);

}

Rajouts par rapport au Helper existant:

Sous la ligne namespace Pdv\Catalog\Helper;:

use Magento\Framework\Exception\NoSuchEntityException;

1	use Magento\Framework\Exception\NoSuchEntityException;

Sous la ligne protected $typeConfigurableResourceModel; // 1. Du nom du model dont je veux injecter la propriété de la classe:

    /**
     * @var \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository
     */
    protected $categoryRepository;

/**

* @var \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository

protected $categoryRepository;

Dans le constructeur, sous la ligne \Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel // 2. Demande à Magento une instance de mon configurable ressource model (EN RAJOUTANT UNE VIRGULE en fin de la ligne existante):

\Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel, // 2. Demande à Magento une instance de mon configurable ressource model
\Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository

1 2	\Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel, // 2. Demande à Magento une instance de mon configurable ressource model \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository

Sous la ligne $this->typeConfigurableResourceModel = $typeConfigurableResourceModel; // 3. ...et mappe le paramètre du constructeur avec la propriété de la classe:

$this->categoryRepository = $categoryRepository;

1	$this->categoryRepository = $categoryRepository;

Le commentaire:

    /**
     * @return \Magento\Catalog\Model\Category
     */

/**

* @return \Magento\Catalog\Model\Category

…est enrichi comme suit:

    /**
     * @param int $id
     * @return \Magento\Catalog\Api\Data\CategoryInterface | \Magento\Catalog\Model\Category
     *
     * @throws NoSuchEntityException
     */

/**

* @param int $id

* @return \Magento\Catalog\Api\Data\CategoryInterface | \Magento\Catalog\Model\Category

* @throws NoSuchEntityException

Et la fonction getCurrentCategory() qui suit…

    public function getCurrentCategory()
    {
        return $this->resolver->getCurrentCategory();
    }

public function getCurrentCategory()

{

return $this->resolver->getCurrentCategory();

}

…est remaniée en:

    public function getCategory($id = null)
    {
        return $id ? $this->categoryRepository->get($id) : $this->resolver->getCurrentCategory();
    }

public function getCategory($id = null)

{

return $id ? $this->categoryRepository->get($id) : $this->resolver->getCurrentCategory();

}

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml`

Ce template PHTML se contente de boucler, autant de fois qu’il y a de sous-catégories, sur le template Magento_Catalog::product/list_abonnements_subcategory.phtml qui est une version custom du template vendor/magento/module-catalog/view/frontend/templates/product/list.phtml.

<?php
/** @var \Magento\Catalog\Block\Product\ListProduct $block */
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');
$subcats = $category->getChildrenCategories();

$objectManager =  \Magento\Framework\App\ObjectManager::getInstance();
$categoryFactory = $objectManager->get('\Magento\Catalog\Model\CategoryFactory');
?>
<ul class="product details product-item-details">
    <?php
    /** @var \Magento\Catalog\Model\Category $subcat */
    foreach ($subcats as $subcat) {
        if ($subcat->getIsActive()) {
            /** @var \Magento\Catalog\Block\Product\ListProduct $categoryBlock */
            $categoryBlock = $block->getLayout()->createBlock("Magento\Catalog\Block\Product\ListProduct")
                ->setTemplate("Magento_Catalog::product/list_abonnements_subcategory.phtml")
                ->setCategoryId($subcat->getid());

            echo $categoryBlock->toHtml();
        }
    } ?>
</ul>

<?php

/** @var \Magento\Catalog\Block\Product\ListProduct $block */

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

$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');

$subcats = $category->getChildrenCategories();

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

$categoryFactory = $objectManager->get('\Magento\Catalog\Model\CategoryFactory');

<?php

/** @var \Magento\Catalog\Model\Category $subcat */

foreach ($subcats as $subcat) {

if ($subcat->getIsActive()) {

/** @var \Magento\Catalog\Block\Product\ListProduct $categoryBlock */

$categoryBlock = $block->getLayout()->createBlock("Magento\Catalog\Block\Product\ListProduct")

->setTemplate("Magento_Catalog::product/list_abonnements_subcategory.phtml")

->setCategoryId($subcat->getid());

echo $categoryBlock->toHtml();

}

} ?>

</ul>

L’équivalent de ce fichier list_abonnements_subcategory.phtml DOIT exister dans votre projet. Si vous n’avez pas besoin d’en créer un spécifique, vous pouvez boucler sur le template par défaut fourni par Magento 2. Dans le code ci-dessus: ->setTemplate("Magento_Catalog::product/list.phtml"). Edit: il faut en créer un spécifique pour exploiter notre Helper.

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_subcategory.phtml`

Ce template PHTML doit partir de vendor/magento/module-catalog/view/frontend/templates/product/list.phtml. Il est impératif de rajouter les lignes suivantes en haut de fichier, sous la ligne $hoverChange = $themeSettingConfig->getStoreConfig('themesettings/catalog/hover_change');:

/** @var \Pdv\Catalog\Helper\Data $helper */
$helper = $this->helper('Pdv\Catalog\Helper\Data');
/** @var \Magento\Catalog\Model\Category $currentCategory */
$currentCategory = $helper->getCategory($this->getCategoryId());
$currentCategoryProductCount = $currentCategory->getProductCount();

/** @var \Pdv\Catalog\Helper\Data $helper */

$helper = $this->helper('Pdv\Catalog\Helper\Data');

/** @var \Magento\Catalog\Model\Category $currentCategory */

$currentCategory = $helper->getCategory($this->getCategoryId());

$currentCategoryProductCount = $currentCategory->getProductCount();

`app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_category.xml`

Reportez-vous à ce billet pour voir comment afficher un layout différent selon une catégorie spécifique. Cette étape est indispensable pour faire pointer notre catégorie vers notre template PHTML spécifique app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml. Un exemple de code pour ce fichier ci-dessous:

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>

    <referenceContainer name="catalog.leftnav" remove="true" />

    <!--		From: vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml-->
    <referenceContainer name="columns.top">
        <referenceBlock name="category.products.list" template="Magento_Catalog::product/list_abonnements_category.phtml">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Magento_Catalog::product/list_abonnements_category.phtml</argument>
            </action>
        </referenceBlock>
    </referenceContainer>
    <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.file"
               before="-"
               template="Magento_Catalog::product/list_abonnements_js.phtml"
        />
    </referenceContainer>
</layout>

<?xml version="1.0"?>

</referenceContainer>

<argument name="template" xsi:type="string">Magento_Catalog::product/list_abonnements_category.phtml</argument>

</action>

</referenceBlock>

</referenceContainer>

<block class="Magento\Framework\View\Element\Template"

name="custom.file"

before="-"

template="Magento_Catalog::product/list_abonnements_js.phtml"

</referenceContainer>

</layout>

Vous voudrez aussi créer le layout XML `app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml`

…pour fairez pointer les sous-catégories vers le template PHTML .

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>

    <referenceContainer name="catalog.leftnav" remove="true" />

    <!--		From: vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml-->
    <referenceContainer name="columns.top">
        <referenceBlock name="category.products.list" template="Magento_Catalog::product/list_abonnements_subcategory.phtml">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Magento_Catalog::product/list_abonnements_subcategory.phtml</argument>
            </action>
        </referenceBlock>
    </referenceContainer>
    <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.file"
               before="-"
               template="Magento_Catalog::product/list_abonnements_js.phtml"
        />
    </referenceContainer>
</layout>

<?xml version="1.0"?>

</referenceContainer>

<argument name="template" xsi:type="string">Magento_Catalog::product/list_abonnements_subcategory.phtml</argument>

</action>

</referenceBlock>

</referenceContainer>

<block class="Magento\Framework\View\Element\Template"

name="custom.file"

before="-"

template="Magento_Catalog::product/list_abonnements_js.phtml"

</referenceContainer>

</layout>

Externaliser le code JS

Afin que le code JS initialement présent au bas du fichier list.phtml ne soit pas exécuté autant de fois qu’il existe de sous-catégories, il a été externalisé dans un fichier app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml et déclaré de la sorte dans nos layouts XML spécifiques:

    <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.file"
               before="-"
               template="Magento_Catalog::product/list_abonnements_js.phtml"
        />
    </referenceContainer>

<block class="Magento\Framework\View\Element\Template"

name="custom.file"

before="-"

template="Magento_Catalog::product/list_abonnements_js.phtml"

</referenceContainer>

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml`

Le code de ce fichier, sorti de list.phtml:

<script type="text/javascript">
    require([
        'jquery'
    ], function(jQuery){
        (function($) {
            $('.action-filter').click(function(){
                $(this).toggleClass('active');
                $('.filter-content').slideToggle();
            });
        })(jQuery);
    });
</script>

require([

'jquery'

], function(jQuery){

(function($) {

$('.action-filter').click(function(){

$(this).toggleClass('active');

$('.filter-content').slideToggle();

});

})(jQuery);

});

</script>

[Drupal 7.x] Les variables récurrentes dans les templates de page

02/03/2017 / admin

Voir toutes les variables exploitables dans notre page

Via le code source et la méthode kpr() du module Devel:

<?php kpr(get_defined_vars()); ?>

1	<?php kpr(get_defined_vars()); ?>

Via la documentation officielle – page.tpl.php.

[Drupal 7.x] Créer des surcharges de templates pour un type de node/noeud spécifique

02/03/2017 / admin

Ce qu’on veut faire: avoir 2 différents fichiers node.tpl.php pour avoir 2 HTMLs différents (1 pour les articles, l’autre pour les pages basiques).

Documentation officielle sur les possibilités de surcharge: Template (theme hook) suggestions – A theme hook suggestion is an alternate template (.tpl.php) file that you have created to override the base or original template file.

Comment nommer un fichier de surcharge afin que Drupal fasse le lien avec le contexte (types de contenu/content types) dans lequel il doit être utilisé ?

Un fichier node se nomme selon cette règle : node--[type|nodeid].tpl.php.

Pour un node de type article, notre fichier se nommera donc node--article.tpl.php, alors que pour un node de type page, notre fichier se nommera node--page.tpl.php. Le mot clé à utiliser dans le libellé du fichier est le Machine name du content type qu’on cherche à cibler.

Pour connaître la liste des content types disponibles, se rendre en backoffice dans Structure > Content types. Par défaut, il n’y a que Article et Page.

Ordre de priorité pour l’affichage des surcharges de nodes.tpl

Fallback:

node–nodeid.tpl.php
node–type.tpl.php
node.tpl.php

[Drupal 7.x] Ajouter des régions à un template de page

01/03/2017 / admin

Deux fichiers impliqués :

<mon_projet>\sites\all\themes\<mon_theme>\<mon_theme>.info dans lequel nous allons initialiser des régions
<mon_projet>\sites\all\themes\<mon_theme>\page.tpl.php (qui est une surcharge de <mon_projet>\modules\system\page.tpl.php) dans lequel nous allons déclarer les régions précédemment initialisées afin qu’elles affichent du contenu

.info

; Regions
regions[sidebar_first] = First Sidebar

1 2	; Regions regions[sidebar_first] = First Sidebar

\page.tpl.php

<?php if ($page['sidebar_first']): ?> : si il n’y a pas de contenu à afficher…

<!-- left sidebar starts here -->
<?php if ($page['sidebar_first']): ?>
  <div class="grid_4 alpha sidebar-left">
    <?php print render($page['sidebar_first']); ?>
  </div>
<?php endif; ?>
<!-- left sidebar ends here -->

<?php if ($page['sidebar_first']): ?>

<?php print render($page['sidebar_first']); ?>

</div>

<?php endif; ?>

En backoffice

Structure > Blocks: on assigne chaque Block à une Region.

La fonction dpm() du module Devel

Le module Devel fournit une fonction dpm() qui permet d’afficher en front des informations sur les régions disponibles.

Dans un fichier *.tpl.php :

<?php dpm($page); ?>

1	<?php dpm($page); ?>

Objectif

Ressources en ligne:

Layout XML

Template PHTML

En BO:

Exemple pour splitter un tableau contenant une adresse postale sur trois lignes:

Comment afficher un child block en particulier?

Formule générique:

Bloc par défaut:

Extension des styles LESS

RECHERCHER ou cibler un template d’email spécifique dans Magento 2

Changer le logo d’un template d’email dans Magento 2

Préparer l’image qui vous servira de logo

Modifier le fichier app/etc/config.php

Surcharger le logo natif de Magento 2 par votre propre logo

Surcharger le header et le footer des templates d’email transactionnels dans Magento 2

Header

Footer

Afficher une image stockée dans un thème

Une liste complète des variables par défaut exploitables dans les templates d’email transactionnels de Magento 2

Bonus: header et footer par défaut pour l’ensemble des gabarits d’email

Test des emails transactionnels dans Magento 2

Inclure des PHTML ou des layouts XML complets dans un email

Inclure des templates PHTML complets dans un email transactionnel dans Magento 2

Inclure des layouts XML complets dans un email transactionnel dans Magento 2

Création d’un Helper: app/code/Pdv/Catalog/Helper/Data.php

Rajouts par rapport au Helper existant:

app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml

app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_subcategory.phtml

app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_category.xml

Vous voudrez aussi créer le layout XML app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml

Externaliser le code JS

app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml

Voir toutes les variables exploitables dans notre page

Comment nommer un fichier de surcharge afin que Drupal fasse le lien avec le contexte (types de contenu/content types) dans lequel il doit être utilisé ?

Ordre de priorité pour l’affichage des surcharges de nodes.tpl

.info

\page.tpl.php

En backoffice

La fonction dpm() du module Devel

Modifier le fichier `app/etc/config.php`

Création d’un Helper: `app/code/Pdv/Catalog/Helper/Data.php`

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml`

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_subcategory.phtml`

`app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_category.xml`

Vous voudrez aussi créer le layout XML `app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml`

`app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml`