Magento 2.1 – Add ‘My Cart’ Link to Top Links

magento-2.1mini-cart

I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.

I want to add a My cart link to the top links:

enter image description here

Clicking this link should make the Ajax cart visible. I have displayed on the page this way: 

<referenceBlock name="top.links">
    <block class="Magento\Framework\View\Element\Html\Link" name="mycart.link" after="register-link">
        <arguments>
        <argument name="label" xsi:type="string" translate="false">My Cart</argument>
        <argument name="path" xsi:type="string" translate="false">checkout/cart</argument>
        <argument name="class" xsi:type="string" translate="false">my-cart-link</argument>
        </arguments>
    </block>
</referenceBlock>

I have only kept the My Wish List link inside the top links block:

<referenceBlock name="catalog.compare.link" remove="true" />
<referenceBlock name="header" remove="true" />
<referenceBlock name="authorization-link" remove="true" />
<move element="wish-list-link" destination="panel.top.links" />

A pastebin with the full default.xml file can be seen HERE.

  1. Is there a piece of XML code that would put the My cart link near the Wishlist?
  2. Also, how can I put a "pipe" separator between them?

Best Answer

Add this section in default.xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="header.links">
            <block class="Magento\Framework\View\Element\Html\Link" name="mycart.link" after="wish-list-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="false">My Cart</argument>
                    <argument name="path" xsi:type="string" translate="false">checkout/cart</argument>
                    <argument name="class" xsi:type="string" translate="false">my-cart-link</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

And after this, the link with class my-cart-link will be added. Now use this JS:

require(['jquery'], function($) {
    $('.my-cart-link').click(function(e){
        e.preventDefault();
        $('.minicart-wrapper .action.showcart').click();
    });
});

This will do the job.

Related Topic