Étiquette : classe

[Magento 2] Utiliser l’Argument Attributes et l’Item Class dans un Layout XML pour ajouter une classe spécifique à un élément du menu de navigation du compte client

08/06/2020 / admin

Problématique: ajouter des icônes devant chaque entrée du menu de navigation du compte client. Cette opération s’effectue en plusieurs étapes:

Dans un layout XML

Dans un fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml, nous allons utiliser les attributs <argument name="attributes" et <item name="class pour affecter des classes CSS à l’élément a d’une entrée de menu (dans mon exemple, l’entrée Mon compte apparenant au module Magento_Customer et les classes icon-customer-nav icon-account):

<referenceBlock name="customer_account_navigation">
    <referenceBlock name="customer-account-navigation-account-link" template="Magento_Customer::account/customer-nav-link.phtml">
        <arguments>
            <argument name="sortOrder" xsi:type="number">250</argument>
            <argument name="attributes" xsi:type="array">
                <item name="class" xsi:type="string">icon-customer-nav icon-account</item>
            </argument>
        </arguments>
    </referenceBlock>
</referenceBlock>
</block>

<item name="class" xsi:type="string">icon-customer-nav icon-account</item>

</argument>

</arguments>

</referenceBlock>

</block>

A ce stade nous avons un problème: les classes s’ajoutent sur l’élément a et on voit bien nos icônes, sauf lorsque l’entrée de menu en question est en current et que l’élément a est remplacé par un strong. Il perd alors les classes que nous lui avons affecté.

Dans un template PHTML

Nous allons créer un fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/account/customer-nav-link.phtml qui va venir surcharger le markup généré au départ par le block vendor/magento/framework/View/Element/Html/link/Current.php.

Ce fichier va permettre que les valeurs que nous avons renseigné précédemment pour les attributs <argument name="attributes" et <item name="class dans le fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml puissent être également affectées à l’élément strong lorsqu’il remplace le lien pour signifier la page current.

Notre fichier complet:

<?php
/**
 * @var block \Magento\Framework\View\Element\Html\Link\Current
 */

$attributesHtml = '';
$attributes = $block->getAttributes();
if ($attributes) {
    foreach ($attributes as $attribute => $value) {
        $attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';
    }
}

if ( $block->isCurrent() ) { ?>
    <li class="nav item current">
        <strong <?= $attributesHtml ?>>
            <?= $block->escapeHtml(__($block->getLabel())) ?>
        </strong>
    </li>
<?php } else { ?>
    <li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">
        <a href="<?= $block->escapeHtml($block->getHref()) ?>"
            <?= $block->getTitle() ? ' title="' . $block->escapeHtml(__($block->getTitle())) . '"' : ''; ?>
            <?= $attributesHtml ?>
        >

        <?php if ($block->getIsHighlighted()) : ?>
            <strong>
        <?php endif; ?>
                <?= $block->escapeHtml(__($block->getLabel())); ?>
        <?php if ($block->getIsHighlighted()) : ?>
            </strong>
        <?php endif; ?>

        </a>
    </li>
<?php } ?>

<?php

/**

* @var block \Magento\Framework\View\Element\Html\Link\Current

$attributesHtml = '';

$attributes = $block->getAttributes();

if ($attributes) {

foreach ($attributes as $attribute => $value) {

$attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';

}

if ( $block->isCurrent() ) { ?>

>

<?= $block->escapeHtml(__($block->getLabel())) ?>

</li>

<?php } else { ?>

<li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">

<a href="<?= $block->escapeHtml($block->getHref()) ?>"

<?= $block->getTitle() ? ' title="' . $block->escapeHtml(__($block->getTitle())) . '"' : ''; ?>

<?= $attributesHtml ?>

<?php if ($block->getIsHighlighted()) : ?>

<?php endif; ?>

<?= $block->escapeHtml(__($block->getLabel())); ?>

<?php if ($block->getIsHighlighted()) : ?>

<?php endif; ?>

</a>

</li>

<?php } ?>

Explications (sommaires…)

Ici, toutes les références à $this qu’on peut trouver dans Current.php sont replacées par $block dans customer-nav-link.phtml.

La partie haute:

$attributesHtml = '';
$attributes = $block->getAttributes();
if ($attributes) {
    foreach ($attributes as $attribute => $value) {
        $attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';
    }
}

$attributesHtml = '';

$attributes = $block->getAttributes();

if ($attributes) {

foreach ($attributes as $attribute => $value) {

$attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';

}

…est une référence à la fonction privée getAttributesHtml() dans Current.php. On voit plus bas que l’attribut et ses valeurs sont affectées aux éléments strong et a:

if ( $block->isCurrent() ) { ?>
    <li class="nav item current">
        <strong <?= $attributesHtml ?>>
        [..]
    </li>
<?php } else { ?>
    <li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">
        <a href="<?= $block->escapeHtml($block->getHref()) ?>"
            [...]
            <?= $attributesHtml ?>
        >
            [...]
        </a>
    </li>
<?php } ?>

if ( $block->isCurrent() ) { ?>

>

[..]

</li>

<?php } else { ?>

<li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">

<a href="<?= $block->escapeHtml($block->getHref()) ?>"

[...]

<?= $attributesHtml ?>

[...]

</a>

</li>

<?php } ?>

Faire appel à notre template PHTML dans le layout XML

Afin que notre surcharge PHP soit prise en compte, il faut déclarer notre template app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/account/customer-nav-link.phtml dans le layout app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml, au niveau du bloc référencé (il faut le faire pour chaque bloc):

<referenceBlock name="customer-account-navigation-account-link" template="Magento_Customer::account/customer-nav-link.phtml">

1	<referenceBlock name="customer-account-navigation-account-link" template="Magento_Customer::account/customer-nav-link.phtml">

A savoir: l'argument name="attributes" peut reçevoir des item name="" totalement custom/spécifiques. Exemple:

<referenceBlock name="customer-account-navigation-account-link">
    <arguments>
       <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
       <argument name="path" xsi:type="string">customer/account</argument>
       <argument name="sortOrder" xsi:type="number">250</argument>
       <argument name="attributes" xsi:type="array">
          <item name="mobile" xsi:type="string">hidden</item>
       </argument>
    </arguments>
</referenceBlock>

<argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>

<argument name="path" xsi:type="string">customer/account</argument>

<item name="mobile" xsi:type="string">hidden</item>

</argument>

</arguments>

</referenceBlock>

…et ensuite dans votre CSS:

@media (max-width: 767px) {
   *[mobile="hidden"] {
      display: none !important;
   }
}

@media (max-width: 767px) {

*[mobile="hidden"] {

display: none !important;

}

[Magento 2] Surcharge d’une classe PHP située dans app/code/Vendor/Module/Model/Config/Source via un namespace spécifique

24/12/2019 / admin

La classe Width que nous souhaitons surcharger dans notre exemple définie dans le fichier app/code/MGS/ThemeSettings/Model/Config/Source/Width.php du thème payant Supro. Mais l’exemple est tout-à-fait adaptable à des classes du core code de Magento 2 ou d’autres thèmes open-source.

1. Création d’un nouveau module qui contiendra notre surcharge de classe:

$ n98-magerun2 dev:module:create Sodifrance Pdv

1	$ n98-magerun2 dev:module:create Sodifrance Pdv

2. Modification du fichier app/code/Sodifrance/Pdv/etc/module.xml comme ci-dessous.

Note: le tag sequence déclare que notre nouveau module dépend du module Supro_ThemeSettings.

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Sodifrance_Pdv" setup_version="1.0.0">
        <sequence>
            <module name="MGS_ThemeSettings" />
        </sequence>
    </module>
</config>

<?xml version="1.0" ?>

</sequence>

</module>

</config>

3. Petit upgrade de setup en ligne de commande:

$ n98-magerun2 setup:upgrade

1	$ n98-magerun2 setup:upgrade

4. Modification du fichier app/code/Sodifrance/Pdv/etc/di.xml comme ci-dessous.

Ici, nous procédons à une injection de dépendances: on veut utiliser, à la place de la classe MGS\ThemeSettings\Model\Config\Source\Width, une nouvelle classe Sodifrance\Pdv\Model\Config\Source\Width.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="MGS\ThemeSettings\Model\Config\Source\Width" type="Sodifrance\Pdv\Model\Config\Source\Width" />
</config>

<?xml version="1.0"?>

</config>

5. Créer le dossier Model/Config/Source dans app/code/Sodifrance/Pdv.

6. Créer le fichier app/code/Sodifrance/Pdv/Model/Config/Source/Width.php sur les bases du parent app/code/MGS/ThemeSettings/Model/Config/Source/Width.php.

On va se contenter de ne rendre disponible que la valeur 1200px pour les choix de largeur de page depuis l’interface d’admin.

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * Used in creating options for Yes|No config value selection
 *
 */
namespace Sodifrance\Pdv\Model\Config\Source;

class Width implements \Magento\Framework\Option\ArrayInterface
{
    /**
     * Options getter
     *
     * @return array
     */
    public function toOptionArray()
    {
        return [
//			['value' => 'width1024', 'label' => __('1024px')],
			['value' => 'width1200', 'label' => __('1200px')], 
//			['value' => 'width1366', 'label' => __('1366px')],
//			['value' => 'fullwidth', 'label' => __('Full width')],
//			['value' => 'custom', 'label' => __('Custom')],
		];
    }
}

<?php

/**

* See COPYING.txt for license details.

/**

* Used in creating options for Yes|No config value selection

namespace Sodifrance\Pdv\Model\Config\Source;

class Width implements \Magento\Framework\Option\ArrayInterface

{

/**

* Options getter

* @return array

public function toOptionArray()

{

return [

// ['value' => 'width1024', 'label' => __('1024px')],

['value' => 'width1200', 'label' => __('1200px')],

// ['value' => 'width1366', 'label' => __('1366px')],

// ['value' => 'fullwidth', 'label' => __('Full width')],

// ['value' => 'custom', 'label' => __('Custom')],

];

}

7. On vérifie que le nouveau module Sodifrance_Pdv est bien activé:

$ n98-magerun2 module:status
// List of disabled modules:
// MGS_Amp
// MGS_ExportBlock
// Sodifrance_Pdv

$ n98-magerun2 module:status

// List of disabled modules:

// MGS_Amp

// MGS_ExportBlock

// Sodifrance_Pdv

7b. On l’active si il est présent dans la liste des modules désactivés:

$ n98-magerun2 module:enable Sodifrance_Pdv

1	$ n98-magerun2 module:enable Sodifrance_Pdv

8. On compile le setup:

$ n98-magerun2 setup:di:compile

1	$ n98-magerun2 setup:di:compile

Résultat: depuis l’interface d’admin, dans MGS > [MGS Theme] Theme Setting v1.1.0, accodéron « Général », champ « Largeur ». Le seul choix disponible reste « 1200px ».

Il faut tout-de-même enregistrer la configuration pour que les changements soient pris en compte.

[JSP] Comment ajouter une classe CSS dans une vue en regard d’une condition

26/07/2018 / admin

Source: How to set style class on td based on a condition

Trois possibilités, à la manière d’un if else en javaScript:

<td class="${test eq true ? 'style_class1' : 'style_class2'}">
<td class="${test ? 'style_class1' : 'style_class2'}">
<td class="${test eq true && not empty test2 ? 'style_class1' : 'style_class2'}">

[jQuery] Utiliser Split pour récupérer la valeur contenue dans une classe et les opérateurs de comparaison pour agir en fonction de celle-ci

12/03/2016 / admin

Demo jsFiddle.net

<div class="safari-600"><!-- modifier cette valeur et relancer -->
  <p class="value"></p>
  <p class="result is-less-or-equal">Plus petit ou égal à 600</p>
  <p class="result is-more">Plus grand que 600</p>
</div>

Plus petit ou égal à 600

Plus grand que 600

</div>

jQuery(document).ready(function(){
  var getClassValue = jQuery('*[class^="safari-"]').attr('class').split('safari-')[1];
  
  if (getClassValue <= 600){
  	jQuery('.is-more').hide();
  }
  else{
  	jQuery('.is-less-or-equal').hide();
  }
  
  jQuery('.value').text(getClassValue);
});

// [jQuery] get the class that starts with ...
// https://groups.google.com/forum/#!topic/jquery-en/cSkpulLxh3U

jQuery(document).ready(function(){

var getClassValue = jQuery('*[class^="safari-"]').attr('class').split('safari-')[1];

if (getClassValue <= 600){

jQuery('.is-more').hide();

}

else{

jQuery('.is-less-or-equal').hide();

}

jQuery('.value').text(getClassValue);

});

// [jQuery] get the class that starts with ...

// https://groups.google.com/forum/#!topic/jquery-en/cSkpulLxh3U

[RBS Change 3.x] Dans un template de menu, ajouter une classe avec valeur incrémentée sur un élément contenu dans une boucle.

16/12/2015 / admin

Admettons qu’on souhaite ajouter, dans une boucle, une classe de type color-x (où x correspond à une valeur qui doit s’incrémenter) sur un élément <li> qui se répète en fonction du nombre d’entrées disponibles dans notre menu. Exemple du résultat attendu :

<ul class="level1">
  <li class="color-0">
  <li class="color-1">
  <li class="color-2">
  <li class="color-3">
  <li class="color-4">
  <li class="color-5">
</ul>

</ul>

Commencer par repérer la boucle dans laquelle se trouve l’élément qui se répète sur lequel nous souhaitons agir. Dans un menu Change, les boucles sont mises en place à l’aide de la condition tal:repeat. Exemple :

    <ul tal:condition="parent/hasChildren" class="level${parent/getChildrenLevel}">
        <tal:block tal:repeat="entry parent/getChildren">

1 2	<ul tal:condition="parent/hasChildren" class="level${parent/getChildrenLevel}"> <tal:block tal:repeat="entry parent/getChildren">

Dans note exemple, il est important de repérer ce qu’on souhaite répéter. Ici, il s’agit de la première information déclarée en arguments dans le tal:repeat à savoir entry.

Ensuite, repérer l’élément sur lequel on souhaite ajouter notre classe de type color-x et ajouter la valeur à incrémenter comme suit :

<li class="color-${repeat/entry/index}">

1	<li class="color-${repeat/entry/index}">

Note : on retrouve notre information entry au sein de la chaîne de caractère : ${repeat/entry/index}.

[PHP][CSS] Ajouter un préfixe à une classe existante

16/04/2014 / admin

Dans l’exemple ci-dessous, j’ajoute un préfixe label- à une classe existante :


<div class="label-<?php echo $alert->getIcon() ?>"></div>

Articles récents

Catégories

Archives

Méta

Étiquette : classe

[Magento 2] Utiliser l’Argument Attributes et l’Item Class dans un Layout XML pour ajouter une classe spécifique à un élément du menu de navigation du compte client

Dans un layout XML

Dans un template PHTML

Notre fichier complet:

Explications (sommaires…)

Faire appel à notre template PHTML dans le layout XML

[Magento 2] Surcharge d’une classe PHP située dans app/code/Vendor/Module/Model/Config/Source via un namespace spécifique

[JSP] Comment ajouter une classe CSS dans une vue en regard d’une condition

[jQuery] Utiliser Split pour récupérer la valeur contenue dans une classe et les opérateurs de comparaison pour agir en fonction de celle-ci

[RBS Change 3.x] Dans un template de menu, ajouter une classe avec valeur incrémentée sur un élément contenu dans une boucle.

[PHP][CSS] Ajouter un préfixe à une classe existante