How create tabs in module settings PS 1.7

[IT City]

Hello everyone, I'm interested in how I can make tabs inside the module to go to different sections of the module settings.
 

[4presta]

Hi bootstrap TABS,

public function getContent()
{
    $content = '
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">'.$this->l('Home').'</button>
                <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">'.$this->l('Profile').'</button>
                <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">'.$this->l('Contact').'</button>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">'.$this->configForm1().'</div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">'.$this->configForm2().'</div>
            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">'.$this->configForm3().'</div>
        </div>';

    return $content;
}

public function configForm1()
{
    /* FORM 1 */
}

public function configForm2()
{
    /* FORM 2 */
}

public function configForm3()
{
    /* FORM 3 */
}

 

 

[IT City]

14 minutes ago, 4you.software said:

Hi bootstrap TABS,

public function getContent()
{
    $content = '
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">'.$this->l('Home').'</button>
                <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">'.$this->l('Profile').'</button>
                <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">'.$this->l('Contact').'</button>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">'.$this->configForm1().'</div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">'.$this->configForm2().'</div>
            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">'.$this->configForm3().'</div>
        </div>';

    return $content;
}

public function configForm1()
{
    /* FORM 1 */
}

public function configForm2()
{
    /* FORM 2 */
}

public function configForm3()
{
    /* FORM 3 */
}

 

 

Wow, thank you!

[4presta]

I gladly helped ;-)

[IT City]

7 minutes ago, 4you.software said:

I gladly helped 😉

How i can include bootstrap in backoffice?

[4presta]

construct section add $this->bootstrap = true;

[4presta]

https://devdocs.prestashop-project.org/1.7/modules/creation/tutorial/

[4presta]

Tab with javascript:

public function getContent()
{
    $this->context->controller->addJS(_PS_MODULE_DIR_.$this->name.'/views/js/admin/tabs.js');

    $content = '
        <div id="tab-settings">
            <ul class="nav nav-tabs" id="nav-tab" role="tablist">
                <li class="nav-item-1 active">
                    <a class="nav-link" id="tab-1" data-toggle="tab-1" href="#nav-home" role="tab-1">'.$this->l('Home').'</a>
                </li>
                <li class="nav-item-2">
                    <a class="nav-link" id="tab-2" data-toggle="tab-2" href="#nav-profile" role="tab-2">'.$this->l('Profile').'</a>
                </li>
                <li class="nav-item-3">
                    <a class="nav-link" id="nav-contact-tab" data-toggle="tab-3" href="#nav-contact" role="tab-3">'.$this->l('Contact').'</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="tab-pane active" id="nav-home" role="tabpanel">'.$this->configForm1().'</div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel">'.$this->configForm2().'</div>
            <div class="tab-pane fade" id="nav-contact" role="tabpanel">'.$this->configForm3().'</div>
        </div>';

    return $content;
}

public function configForm1()
{
    /* FORM 1 */
}

public function configForm2()
{
    /* FORM 2 */
}

public function configForm3()
{
    /* FORM 3 */
}

 

Javascript tabs.js

$(document).ready(function() {

    $("#tab-settings a").click(function (e) {
        e.preventDefault();
        $(this).tab("show");
    });
                            
    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

   // on load of the page: switch to the currently selected tab
   var hash = window.location.hash;
   $('#myTab a[href="' + hash + '"]').tab('show');


});