0

I want to move the minicart to an offcanvas sidebar (foundation 6). I was able to move the minicart vial layout.

But it keeps rendering as a dropdown dialog (magento ui) so I would like the cart's items to render without having to klick on the title first.

<?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>
    <?= $block->getChildHtml('minicart.addons') ?>
</div>

This is the code responsible. So far my understanding is that

<!-- ko template: getTemplate() --><!-- /ko -->

will be replaced with the cart's actual content. I do not need or want the dropdown dialog so I removed the mage init part:

<?php if ($block->getIsNeedToDisplaySideBar()): ?>
<div class="block block-minicart empty">
    <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
        <!-- ko template: getTemplate() --><!-- /ko -->
    </div>
    <?= $block->getChildHtml('minicart.addons') ?>
</div>

This way only the top part of the minicart gets rendered and I see a JS error:

TypeError: $(...).find(...).dropdownDialog is not a function

How can I render the minicart "statically"? Or at least so that I can see the entire cart at once.

Actually I don't see the point of knockout js. It makes everything only more complicated. In addition the page renders with delay with items popping up after a while. How on earth can this be considered an advantage?

0

@omsta, you can use below code.

Default it call once click on that show cart link.

<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>
            <?= $block->getChildHtml('minicart.addons') ?>
        </div>

It can auto display once load mini cart content. by using "autoOpen" : true,

<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,
                "autoOpen" : true,
                "triggerClass":"active",
                "parentClass":"active",
                "buttons":[]}}'>
            <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>
            <?= $block->getChildHtml('minicart.addons') ?>
        </div>

OR you can use static display.

<div class="block block-minicart empty" data-bind="attr:{'style':'display:block;'}">
            <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>
            <?= $block->getChildHtml('minicart.addons') ?>
        </div>

You will need to remove close button from : /web/template/minicart/content.html

| improve this answer | |
  • Neither works. Your first suggestion doesn't make a difference at all. The second displays some elements but the actual cart items won't show. In addition I still get this JS error "TypeError: $(...).find(...).dropdownDialog is not a function" – omsta Mar 29 '18 at 8:19
  • have you tried static content deploy command? – kunj Mar 29 '18 at 8:23
  • Store is in dev mode, should not be necessary. But I cleaned all caches available. – omsta Mar 29 '18 at 13:42
  • I think dropdownDialog JS not copied in pub static content folder. That error coming for me while click on close button. – kunj Mar 29 '18 at 16:14
  • Sorry, I don't understand. – omsta Mar 30 '18 at 10:29

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.