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

Question

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.

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?

Answer 1

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

Answer 2

I don't know exactly the solution I found is standard or not but I would like to share my code which worked fine. I override minicart.phtml file from vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml to my theme and added below code at thee end of file

<script type="text/javascript">
     require(['jquery'], function($){ 
        $(document).ready(function(){
            $("[data-block='minicart']").on("dropdowndialogopen", (e) => {
                $(".block-minicart").hide();
                $(".block-minicart").slideDown("slow");                 
            });
            $("[data-block='minicart']").on("dropdowndialogclose", (e) => {
               $(".mage-dropdown-dialog").show();
               $('.block-minicart').slideUp("slow");
            });
        });
 });
</script>

Answer 3

First off let me clear up somethings for you.

• dropdowndialogopen is an event
• data-mage-init='{"dropdownDialog":{}} passes {...} back to a matching javascript component by config. Ref: http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html
• data-role="dropdownDialog" is $(elem).data('role') -- a way to retrieve embedded data in html markup. Ref: https://api.jquery.com/data/

There is currently no animation involved when using the dropdown dialogue. So the left/right behavior is something you would have to implement yourself. You can override or extend magentos dialogue wrapper here: <mage_root>/lib/web/mage/dropdown.js

Hope this gives you a good starting point. :)