0

I am creating a new header. It is supposed to look like this:

enter image description here

I need to get the number of items in the cart and write it to a certain place in the header, where the minicart is showing. So I added this code to my layout MY_THEME\Magento_Theme\layout\default.xml

<referenceContainer name="header-wrapper">
    <container name="header-container" htmlTag="div" htmlId="header_container" htmlClass="min768 grid">

        <!-- Logo -->
            <container name="hf_header_logo" htmlTag="div" htmlId="hf_header_logo_container"/>

        <!-- Searchbar -->
            <container name="hf_header_search" htmlTag="div" htmlId="hf_header_search_container">
                ...
            </container>

        <!-- User Area -->
            <container name="hf_header_user" htmlTag="div" htmlId="hf_header_user_container">
                ...
            </container>

        <!-- Cart -->
            <container name="hf_header_cart" htmlTag="div" htmlId="hf_header_cart_container">
                <container name="minicart-row" label="Wrapper" htmlTag="div" htmlClass="minicart-wrapper" htmlId="old_minicart">
                    <container name="mini-wk" label="Mini-Wk" htmlTag="div" htmlClass="mini-wk">
                        <container name="mini-wk-content" label="Minicart-Main" htmlTag="div" htmlClass="mini-wk-content row no-gutters">
                            <block class="Magento\Checkout\Block\Cart\Sidebar"
                                   name="desktop_minicart_block"
                                   template="Magento_Checkout::cart/header_minicart.phtml">
                                <arguments>
                                    <argument name="jsLayout" xsi:type="array">
                                        <item name="types" xsi:type="array"/>
                                        <item name="components" xsi:type="array">
                                            <item name="minicart_content" xsi:type="array">
                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/minicart</item>
                                                <item name="config" xsi:type="array">
                                                    <item name="template" xsi:type="string">Magento_Checkout/minicart/content</item>
                                                </item>
                                                <item name="children" xsi:type="array">
                                                    <item name="subtotal.container" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="config" xsi:type="array">
                                                            <item name="displayArea" xsi:type="string">subtotalContainer</item>
                                                        </item>
                                                        <item name="children" xsi:type="array">
                                                            <item name="subtotal" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="template" xsi:type="string">Magento_Checkout/minicart/subtotal</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                    <item name="extra_info" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="config" xsi:type="array">
                                                            <item name="displayArea" xsi:type="string">extraInfo</item>
                                                        </item>
                                                    </item>
                                                    <item name="promotion" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="config" xsi:type="array">
                                                            <item name="displayArea" xsi:type="string">promotion</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </argument>
                                </arguments>
                            </block>
                        </container>
                    </container>
                </container>
            </container>
    </container>
</referenceContainer>

As you can see I already injected the arguments like seen in the original layout file in vendor\magento\module-checkout\view\frontend\layout\default.xml

This is how I try to get the number of items in the cart in MY_THEME\Magento_Checkout\templates\cart\header_minicart.phtml:

<span class="counter-label" data-bind="html: getCartParam('subtotal')">
<!-- ko if: getCartParam('summary_count') -->
    <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
<!-- /ko -->
</span>

But it does not render the number.

In the browser console I get

Uncaught ReferenceError: Unable to process binding "if: function(){return getCartParam('summary_count') }"
Message: getCartParam is not defined
    at if (eval at createBindingsStringEvaluator (knockout.js:2982), <anonymous>:3:55)
    at ko.computed.disposeWhenNodeIsRemoved (knockout.js:4381)
    at Function.evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173)
    at Function.evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140)
    at Function.evaluateImmediate (knockout.js:2101)
    at Object.ko.computed.ko.dependentObservable (knockout.js:1954)
    at init (knockout.js:4380)
    at knockout.js:3358
    at Object.ignore (knockout.js:1470)
    at knockout.js:3357

Please help.

0

My code works but I had to delete generated files and static content.

I just executed grunt clean and now it works

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.