Magento 2.1 – Make ‘View and Edit Cart’ a Button on Mini Cart

magento-2.1mini-cart

I'm trying to make the "view and edit cart" link at the bottom of the mini cart a button.

Magento 2.1.10 MiniCart View and Edit Cart Link

I have copied content.html to my child theme

app/design/frontend/Mytheme/Mytheme/Magento_Checkout/web/template/minicart/content.html

Within content.html the "View and edit cart" link is generated from 

    <div class="actions">
    <div class="secondary">
        <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
            <span><!-- ko i18n: 'View and Edit Cart' --><!-- /ko --></span>
        </a>
    </div>
</div>

I have changed it to 

    <div class="actions">
       <div class="secondary">
                 <button
                    id="lower-cart-btn-checkout"
                    type="button"
                    class="action viewcart"
                    data-bind="attr: {href: shoppingCartUrl}">
                <!-- ko i18n: 'View and Edit Cart' --><!-- /ko -->
            </button>
    </div>
</div>

The button is generated. However, when you click the button nothing happens.
Magento 2.1.10 MiniCart View and Edit Cart Button

Does anyone know what I'm doing wrong here?

Best Answer

It should always be <a> tag (link). Add whatever class you want and convert that link into Button using CSS

data-bind="attr: {href: shoppingCartUrl}" attribute will NOT work with <button> Tag

<!-- ko if: getCartParam('summary_count') -->
<div class="actions">
    <div class="secondary">
        <a id="minicart-to-editcart" class="button action viewcart" data-bind="attr: {href: shoppingCartUrl}">
            <span><!-- ko i18n: 'View and edit cart' --><!-- /ko --></span>
        </a>
    </div>
</div>
<!-- /ko -->
Related Topic