0

How would you add animation to product tabs in magento2?

i tried following the guide here: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_tabs.html#fedg_tabs_options-animate , but it doesn't include any examples.

The product/view/details.phtml looks like this:

<div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
    <?php foreach ($detailedInfoGroup as $name):?>
        <?php
            $html = $layout->renderElement($name);
            if (!trim($html)) {
                continue;
            }
            $alias = $layout->getElementAlias($name);
            $label = $block->getChildData($alias, 'title');
        ?>
        <div class="data item title"
             aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title"
             data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>">
            <a class="data switch"
               tabindex="-1"
               data-toggle="switch"
               href="#<?php /* @escapeNotVerified */ echo $alias; ?>"
               id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title">
                <?php /* @escapeNotVerified */ echo $label; ?>
            </a>
        </div>
        <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content">
            <?php /* @escapeNotVerified */ echo $html; ?>
        </div>
    <?php endforeach;?>
</div>

I tried adding data-mage-init='{"collapsible":{ "active": false, "animate": {"easing": "easeInOutElastic"}, "collapsible": true}}' but it didn't work (all elements were visible at the same time).

The html is like this:

<div class="data item title active" aria-labeledby="tab-label-product.info.description-title" data-role="collapsible" id="tab-label-product.info.description" role="tab" data-collapsible="true" aria-controls="product.info.description" aria-selected="false" aria-expanded="true" tabindex="0">
                    <a class="data switch" tabindex="-1" data-toggle="switch" href="#product.info.description" id="tab-label-product.info.description-title">
                        Description                    </a>
                </div>

And also is it possible to change the animation depending window size? For mobile you would want it to slide up/down, but for desktop you want a fade in/out effect because the tabs are next to each other.

1

Cannot find a way to do it with the animate attribute, so did it like this. If someone has a solution how to do it natively with data attributes please post an answer.

    $.prototype.addEffectonCollapsible = function(childElementThatIsClicked,closeEffect,showeffect,speed){
        this.on('click',childElementThatIsClicked, function (event) {
            var parentIdOfClickedElement = $(this).parent('.title');
            $('.product.items .title').removeClass("active");
            $(this).parent('.title').siblings('.content').filter(":visible")[closeEffect](speed, function(){
                parentIdOfClickedElement.addClass("active");
                parentIdOfClickedElement.next('.content')[showeffect](speed);
            });
            return false;
        })
    }
    $(window).on('load resize', function() {
        if($(window).width() > 1024){
            $('.product.items [data-role="collapsible"]').addEffectonCollapsible(".switch","fadeOut","fadeToggle","slow")
        }
        else{
            $('.product.items [data-role="collapsible"]').addEffectonCollapsible(".switch","slideUp","slideToggle","slow")
        }
    })
1

In product/view/details.phtml change the tabs initiation to:

<div class="product data items" data-mage-init='{"tabs":{"openedState":"active", "collapsible":"true", "animate":{"easing": "easeOutExpo", "duration":"350"}}}'>
...
</div>

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.