Magento 2 – Changing Minicart Header

cartmagento2mini-cart

I have button in mini cart header with title – "go to checkout". This button currently links to checkout, (which is correct), however I need to change this link to cart page (not the checkout).

<button
    id="top-cart-btn-checkout"
    type="button"
    class="action primary checkout"
    data-bind="attr: {title: $t('Go to Checkout')}">
    <!-- ko i18n: 'Go to Checkout' --><!-- /ko -->
</button>

File location is:

Vender/theme/Magento_Checkout/web/template/minicart/content.html

Its obviously built and controlled through knockoutjs – so I had a look inside of:

Vender/theme/Magento_Checkout/web/js/view/minicart.js

Seems as though there is a function inside of there called, initSidebar this calls the miniCart.sidebar however I can't see where it is generating the url for the button to link through to the checkout.

Any help?

Best Answer

Make it link, instead of a button:

<a class="action viewcart" data-bind="attr: {title: $t('Checkout'), href: shoppingCartUrl}">
    <span><!-- ko i18n: 'Checkout' --><!-- /ko --></span>
</a>

You might need to adjust the styling after making this change.

Related Solutions

Magento 2 – Knockout.js Minicart Implementation Guide

Looks as though inside of your theme default.xml you are calling header.container again.

This will result in the error, you're trying to overwrite a reference block that already exsists - doubling up on the page the knockout that is being called, so what you actually need to do is the following:

add a new folder inside of your magento_theme called page_layout and copy the files from the core into there:

1column.xml

2columns-left.xml

Then you need to change the container for the header to be called something different, for example:

header.container.new

inside of your default.xml like so:

Then you need to add inside of your 1column change:

<container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>

<container name="header.container.new" as="header_container_new" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="page.top"/>

This will result in the error going and the header now working correctly.

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

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 -->

Best Answer

Related Solutions

Magento 2 – Knockout.js Minicart Implementation Guide

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

Related Topic