Magento 2 | Minicart does not work after template override

Question

I have changed the minicart styling etc. But now i get a javascript error when i click the "Add to cart" button. When i click on the Minicart icon in the header, the content area of the minicart does open however, it is empty...

This is the Javascript error i get when i click the "Add to cart" button:

'Uncaught TypeError: Cannot read property '*' of undefined' -> section-config.js:33

This is the header section of my default.xml in my own theme:

<referenceContainer name="header.container">
        <container name="header-wrapper" label="Page Header" as="header-wrapper">
            <block class="Customod\Test\Block\Html\Header\Logo" name="logo">
                <arguments>
                    <argument name="logo_img_width" xsi:type="number">189</argument>
                    <argument name="logo_img_height" xsi:type="number">64</argument>
                </arguments>
            </block>
            <block class="Magento\Framework\View\Element\Html\Links" name="top.links">
                <arguments>
                    <argument name="css_class" xsi:type="string">header links</argument>
                </arguments>
            </block>
            <block class="Magento\Checkout\Block\Cart\Sidebar" name="winkelwagen" template="Customod_Test::html/shopping_cart.phtml"/>
        </container>
    </referenceContainer>

And this is my shopping_cart.phtml template:

<div data-block="minicart" class="minicart-wrapper">
<a class="action showcart" href="<?php /* @escapeNotVerified */ echo $block->getShoppingCartUrl(); ?>"
   data-bind="scope: 'minicart_content'">
    <span class="text"><?php /* @escapeNotVerified */ echo __('My Cart'); ?></span>
    <span class="counter qty empty"
          data-bind="css: { empty: cart().summary_count == 0 }, blockLoader: isLoading">
        <span class="counter-number"><!-- ko text: cart().summary_count --><!-- /ko --></span>
        <span class="counter-label">
        <!-- ko if: cart().summary_count -->
            <!-- ko text: cart().summary_count --><!-- /ko -->
            <!-- ko i18n: 'items' --><!-- /ko -->
        <!-- /ko -->
        </span>
    </span>
</a>
<?php if ($block->getIsNeedToDisplaySideBar()): ?>
    <div class="block block-minicart empty"
         data-role="dropdownDialog"
         data-mage-init='{"dropdownDialog":{
            "appendTo":"[data-block=minicart]",
            "triggerTarget":".showcart",
            "timeout": "2000",
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "triggerClass":"active",
            "parentClass":"active",
            "buttons":[]}}'>
        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>
    </div>
<?php endif ?>
<script>
    window.checkout = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
</script>
<script type="text/x-magento-init">
{
    "[data-block='minicart']": {
        "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
    },
    "*": {
        "Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
    }
}
</script>

Thanks in advance!

Answer 1

You should try to make your changes in layout directly to the block or container you are changing.

In your layout, you are referencing the header.container and add all blocks additionally to the blocks already present. I think this could cause your problem.

To add the winkelwagen block, remove the original logo block and add your custom logo block. For example, try the following:

<referenceBlock name="logo" remove="true"/>
<referenceContainer name="header-wrapper">
    <block class="Customod\Test\Block\Html\Header\Logo" name="customlogo">
        <arguments>
            <argument name="logo_img_width" xsi:type="number">189</argument>
            <argument name="logo_img_height" xsi:type="number">64</argument>
        </arguments>
    </block>
    <block class="Magento\Checkout\Block\Cart\Sidebar" name="winkelwagen" template="Customod_Test::html/shopping_cart.phtml"/>
</referenceContainer>