Magento – Change Header Minicart container effect from dropdown to slide(right to left) in magento2

knockoutjsmagento-2.1

After added any product to cart we can see that item in minicart header. So when we click on minicart then it's show product with dropdown effect. I want to change this dropdown effect to slider from right to left.

I have attached image and effect showing in image is dropdown.

enter image description here

And one more thing is this minicart dropdown effect work using Knockout.js I have found .js file that is responsible for dropdown effect but now I want to change this effect to slide from right to left.

Below is part of minicart.phtml file.

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

In above code if we show I'm sure data-role="dropdownDialog" and data-mage-init='{"dropdownDialog":{}} coming from knockout.Js.

So I go to app/design/frontend/package_name/theme_name/Magento_Checkout/web/js/view/minicart.js file and I found below code.

miniCart.on('dropdowndialogopen', function () {
    initSidebar();
});

closeSidebar: function () {
        var minicart = $('[data-block="minicart"]');
        minicart.on('click', '[data-action="close"]', function (event) {
            event.stopPropagation();
            minicart.find('[data-role="dropdownDialog"]').dropdownDialog('close');
        });

        return true;
    }

SO I thought if I'll change dropdownDialog to SlideRight/SlideLeft then my issue will solve but after done this minicart dropdown stop working.

So can anyone help me to change minicart dropdown effect to sliderRight to Left? How can I do this?

Best Answer

You can add jQuery UI options "show" to do animate effect:

    <?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",

            "show":{"effect":"slide", "duration":800},

            "buttons":[]}}'>
        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>
        <?php echo $block->getChildHtml('minicart.addons'); ?>
    </div>
<?php endif ?>
Related Topic