0

I need to add a new class to a referenceBlock, specifically the nav items in the Account Page.

<referenceBlock name="customer-account-navigation-account-link">
       <arguments>
         <argument name="label" xsi:type="string" translate="true">Account</argument>              
       </arguments>                  
</referenceBlock>

I have tried the following, but this hasn't worked:

<referenceBlock name="customer-account-navigation-account-link">
     <arguments>
           <argument name="label" xsi:type="string" translate="true">Account</argument>
           <argument name="attributes" xsi:type="array">
                <item name="class" xsi:type="string">accountclass</item>
           </argument> 
     </arguments>
</referenceBlock>

Any other suggestions to add a new class to this element?

Note: I am using referenceBlock in a child theme to what may work on the normal block element may not work on referenceBlock.

0

Classes can only be added to containers and not blocks. This is because containers render an element and blocks do not, so what would Magento even add the class to?

You will need to manually get that class in your phtml file:

XML

<argument name="attributes" xsi:type="array">
    <item name="className" xsi:type="string">accountclass</item>
</argument> 

PHTML

<div class="<?= $block->getData('className'); ?>">...</div>
  • Thank you for your reply. I am looking for the phtml file. I have found the containing file for the navigation sidebar (vendor\magento\module-customer\view\frontend\templates\account\navigation.phtml) but not the html for each individual link in that sidebar. It mentions <?= $block->getChildHtml() ?> and no idea where this links to. Any advice on this? – Developer Nov 6 at 16:12
  • That will render all the child blocks so you'll need to review the layout XML to see what getChildHtml will be pulling in. – Ben Crook Nov 7 at 9:33
0

You need to make changes in your template file by fetching the class name you have set in your xml file

<referenceBlock name="customer-account-navigation-account-link">
       <arguments>
         <argument name="css_class" xsi:type="string" translate="true">accountclass</argument>              
       </arguments>                  
</referenceBlock>

PHTML file

<div class ="<?= $block->getCssClass() ?>"></div>

In case of containers you can set class by directly using htmlClass attribute, but this is not the case with the blocks.

Alternative:

Modify layout with plugins (interceptors) Plugins can be also useful, when we need to make some layout updates. Here is an example of how a css class can be added to tag on product view page.

etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Helper\Product\View">
        <plugin name="add_custom_body_class_to_product_page"
                type="OrangeCompany\Learning\Plugin\AddBodyClassToProductPagePlugin"/>
    </type>
</config>

OrangeCompany/Learning/Plugin/AddBodyClassToProductPagePlugin.php

<?php

namespace OrangeCompany\Learning\Plugin;

use Magento\Catalog\Helper\Product\View as ProductViewHelper;
use Magento\Framework\View\Result\Page;

/**
 * Class AddBodyClassToProductPagePlugin
 */
class AddBodyClassToProductPagePlugin
{
    /**
     * Adding a custom class to body
     *
     * @param ProductViewHelper $subject
     * @param Page $resultPage
     * @param $product
     * @param $params
     *
     * @return array
     */
    public function beforeInitProductLayout(
        ProductViewHelper $subject,
        Page $resultPage,
        $product,
        $params
    ): array {
        $pageConfig = $resultPage->getConfig();

        if (/*add your logic here*/) {
            $pageConfig->addBodyClass('my-new-body-class');
        }

        return [$resultPage, $product, $params];
    }
}

As result, the <body> tag has a new my-new-body-class class on all product pages.

Hope this helps you! If yes then kindly upvote it. Thanks!

  • Thank you for your reply. I would rather use the first method, that was suggested. I am looking for the phtml file. I have found the containing file for the navigation sidebar (vendor\magento\module-customer\view\frontend\templates\account\navigation.phtml) but not the html for each individual link in that sidebar. It mentions <?= $block->getChildHtml() ?> and no idea where this links to. Any advice on this? – Developer Nov 6 at 16:14
  • the getChildHtml() declared at /vendor/magento/framework/View/Element/AbstractBlock.php, the function will call all child block of current block and call toHtml() function, suggest use getCssClass($block) to get class name of $block. or find in template xml file where defined customer.phtml and find block class name.. – Chandan Rai Nov 6 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.