Adding CSS & Target attribute to custom top links in default.xml Magento 2

Question

I've searched all over google and I found a few tutorials that seems straight forward but I can't get it to work in my default.xml.

Majority of the tutorials uses local.xml but I'm not sure where to find that.

Basically, I removed all the top links and added my own. Here is what I have below. This works BUT I need to be able to add a css class and a target of blank.

Any help would be appreciated:

    <referenceBlock name="top.links">
        <!-- add ahern access link -->
        <block class="Magento\Framework\View\Element\Html\Link\Current" name="ahern-access-link" htmlClass="ahern-access">
            <arguments>
                <argument name="label" xsi:type="string">Ahern Access</argument>
                <argument name="path" xsi:type="string">http://ahernaccess.com</argument>
                <argument name="title" xsi:type="string">Log In to Ahern Access</argument>
                <argument name="class" xsi:type="string">ahern-access</argument>
            </arguments>
        </block>

        <!-- remove existing blocks -->
        <referenceBlock name="header" remove="true" />
        <referenceBlock name="register-link" remove="true" />
        <referenceBlock name="authorization-link" remove="true" />
        <referenceBlock name="wish-list-link" remove="true" />
        <referenceBlock name="my-account-link" remove="true" />
    </referenceBlock>

Or if there is a way to reference a CMS block in default.xml?

Answer 1

Try something like this:

<block class="Magento\Framework\View\Element\Html\Links" name="ahern-access-nav">
    <arguments>
        <argument name="css_class" xsi:type="string">{{your css class here}}</argument>
    </arguments>
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="ahern-access-link">
        <arguments>
            <argument name="label" xsi:type="string">Ahern Access</argument>
            <argument name="path" xsi:type="string">http://ahernaccess.com</argument>
            <argument name="target" xsi:type="string">_blank</argument>
            <argument name="title" xsi:type="string">Log In to Ahern Access</argument>
        </arguments>
    </block>
</block>

I'm doing some digging in as i have yet to see the target argument used in the wild. If you look at this file /vendor/magento/framework/View/Element/Html/Link/Current.php you will see the list of possible arguments you can make in the comments at the top

/**
 * Block representing link with two possible states.
 * "Current" state means link leads to URL equivalent to URL of currently displayed page.
 *
 * @method string                          getLabel()
 * @method string                          getPath()
 * @method string                          getTitle()
 * @method null|array                      getAttributes()
 * @method null|bool                       getCurrent()
 * @method \Magento\Framework\View\Element\Html\Link\Current setCurrent(bool $value)
 */

Which target is not in. But looking at a few other default.xml files, i see things like this in /vendor/magento/module-theme/view/frontend/layout/default.xml:

<block class="Magento\Framework\View\Element\Template" name="skip_to_content" template="Magento_Theme::html/skip.phtml">
    <arguments>
        <argument name="target" xsi:type="string">contentarea</argument>
        <argument name="label" translate="true" xsi:type="string">Skip to Content</argument>
    </arguments>
</block>

Which relate back to the Template class. So the concept is there, but i'm not 100% on how M2 is implementing that.

For me I have to play around with XML for a while before i land on the exact solution that i need. So i hope this helps.

Another idea would be to add the link directly to the template file (i think you are needing /vendor/magento/module-theme/view/frontend/templates/html/header.phtml in this case). It's not an elegent solution, but given that the target="_blank" is not a part of the class, you would have to create a class override to get this functionality in the XML's.

<?php case 'other': ?>
    <?php echo $block->getChildHtml(); ?>
    <li>
        <a href="http://ahernaccess.com" target="_blank">Log In to Ahern Access</a>
    </li>
<?php break; ?>

Answer 2

As circlesix mentioned already, in /vendor/magento/framework/View/Element/Html/Link/Current.php you can see that there is another argument called

@method null|array                      getAttributes()

So you can use this to insert a target attribute.

<block class="Magento\Framework\View\Element\Html\Link\Current" name="custom-link">
   <arguments>
      <argument name="label" xsi:type="string" translate="true">YOUR_LABEL</argument>  
      <argument name="attributes" xsi:type="array">
         <item name="target" xsi:type="string">_blank</item>
      </argument>
      <argument name="path" xsi:type="string">YOUR_PATH</argument>
   </arguments>
</block>

Tested in Magento V. 2.1.3

Answer 3

You can find the list of allowed attributes here for reference: https://github.com/magento/magento2/blob/develop/lib/internal/Magento/Framework/View/Element/Html/Link.php

To achieve what you want you need to add the following:

<argument name="class" xsi:type="string">your-css-class</argument>