1

I am stuck in using tabs widget in Magento2. I have not found any resource that teaches about this. The only resource is this: DevDocs But this is useless. It is only a reference of options and methods, but not how to use it.

I have this in attributes.phtml of my custom theme:

<div id="Tabs1">
    <ul>
        <?php $count = 0 ?>
        <?php foreach ($_additional as $_data): ?>
            <li data-role="title"><a href="#tabs-<?php echo ++$count ?>"><?php echo $block->escapeHtml(__($_data['label'])) ?></a></li>
        <?php endforeach; ?>
    </ul>
    <?php $count = 0 ?>
    <?php foreach ($_additional as $_data): ?>
        <div id="tabs-<?php echo ++$count ?>" data-role="content">
            <p><?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></p>
        </div>
    <?php endforeach; ?>
</div>

<script type="text/javascript">
require([
    'jquery',
    'jquery/ui'
], function($){
    $(function () {
        $("#Tabs1").tabs();
    });        
});
</script>

But that does not work. Can you show me where is the error, please?

Thanks Jaime

3

You have error on the page because you miss your tabs widget in dependencies list (at list if you want to use Magento's tabs widget).

Correct:

require([
    'jquery',
    'mage/tabs'
], function($){

But I can suggest more convenient way:

<div data-mage-init='{"mage/tabs":{}}'>
    <ul>
        <?php foreach ($_additional as $_key => $_data): ?>
            <li data-role="title"><a href="#tabs-<?php echo $_key ?>">...
        <?php endforeach; ?>
    </ul>
    <?php foreach ($_additional as $_key => $_data): ?>
        <div id="tabs-<?php echo $_key ?>" data-role="content">
            ...
        </div>
    <?php endforeach; ?>
</div>

mage/tabs.js will be loaded by Magento's App and initialized on needed element.

|improve this answer|||||
  • Thanks but it did not work. It does simply nothing. By the way, jquery/ui includes tabs widget as I have checked in jquery-ui.js. But i tested both ways. After page is loaded, the data-mage-init attribute is removed which indicates something is happening, but that is the only behaviour. I tried also what appears in this page: github.com/magento/magento2/blob/c58d2d/app/code/Magento/…. But it did not work either. Not even errors are shown in console output. – jstuardo Feb 23 '16 at 20:18
  • 1
    The problem was that I have not included default css styles. I included them and it looks pretty now :-) – jstuardo Feb 24 '16 at 20:49
  • How do you include those styles? – simonthesorcerer Aug 8 '17 at 10:27
1

Works for me if I remove the second $(function () {}) wrap like so:

<script type="text/javascript">
    require([
        'jquery',
        'jquery/ui'
    ], function($){
        $("#Tabs1").tabs();
    });
</script>
|improve this answer|||||

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.