3

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?

3

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 ?>
  • The same properties can be used for closing but the key is named "hide". Example: "hide":{"effect":"slide", "duration":800} – Toms Bugna Mar 22 '17 at 20:42
0

First off let me clear up somethings for you.

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. :)

0

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>

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.