0

I have 3 blocks that are in the cms block and displayed on the cms page. How to place each block in a separate custom tab

Tabs stretched to full page enter image description here

3 templates:

app/code/Qqq/Wwwww/view/frontend/templates/template1.phtml
app/code/Qqq/Wwwww/view/frontend/templates/template2.phtml
app/code/Qqq/Wwwww/view/frontend/templates/template3.phtml

cms block install script:

app/code/Qqq/Wwwww/Setup/InstallData.php
 $block = <<<BLOCK_CONTENT
   <div class="block-1">block 1</div>
   {{block class="Qqq\Wwwww\Block\Qw" name="block_1" template="Qqq_Wwww::template1.phtml"}}
   <div class="block-2">block 2</div>
   {{block class="Qqq\Wwwww\Block\Qw" name="block_2" template="Qq_Wwww::template2.phtml"}}
   <div class="block-3">block 3</div>
   {{block class="Qqq\Wwwww\Block\Qw" name="block_3" template="Qq_Wwww::template3.phtml"}}
BLOCK_CONTENT;

 $cmsBlock = [
     'title' => 'Block 1',
     'identifier' => 'blocks',
     'stores' => [0],
     'is_active' => 1,
     'content' => $block
 ];

 $this->blockFactory->create()->setData($cmsBlock)->save();

cms page install script:

$pageContent = <<<PAGE_CONTENT
    {{block class="Magento\Cms\Block\Block" block_id="blocks"}}
PAGE_CONTENT;

        $cmsPageData = [
            'title' => 'Blocks Page', // cms page title
            'page_layout' => '1column', // cms page layout
            'meta_keywords' => 'Blocks Page', // cms page meta keywords
            'meta_description' => 'Blocks Page', // cms page description
            'identifier' => 'blocks-page', // cms page url identifier
            'content_heading' => '', // Page heading
            'content' => $pageContent, // page content
            'is_active' => 1, // define active status
            'stores' => [0], // assign to stores
            'sort_order' => 0 // page sort order
        ];
0
For HTML custom tab using below link:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_full_page_tabs
According to me you no need to create CMS block, direct create one CMS page with below code:
<button id="defaultOpen" class="tablink">Block1</button>
<button class="tablink">Block2</button> 
<button class="tablink">Block3</button>
<div id="Block1" class="tabcontent">
<h3>Block1</h3>
{{block class="Solwin\Module4\Block\Qw" name="block_1" template="Solwin_Module4::template1.phtml"}}</div>
<div id="Block2" class="tabcontent">
<h3>Block2</h3>
{{block class="Solwin\Module4\Block\Qw" name="block_1" template="Solwin_Module4::template2.phtml"}}</div>
<div id="Block3" class="tabcontent">
<h3>Block3</h3>
{{block class="Solwin\Module4\Block\Qw" name="block_1" template="Solwin_Module4::template3.phtml"}}</div>
Don't forget to add CSS style and Javascript code from above given link.
Image: custom_tab.png
|improve this answer|||||
0

Try this code

$block = <<<BLOCK_CONTENT

<div class="product data items"
     data-mage-init='{"mage/tabs": {"openedState": "active", "animate": {"duration": 100}, "active": 1, "disabled": [2], "disabledState": "disabled"}}'>
    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-block-1">Block - 1</a>
    </div>
    <div id="tab-block-1" class="item content" data-role="content">
        {{block class="Qqq\Wwwww\Block\Qw" name="block_1" template="Qqq_Wwww::template1.phtml"}}
    </div>

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-block-2">Block - 2</a>
    </div>
    <div id="tab-block-2" class="item content" data-role="content">
        {{block class="Qqq\Wwwww\Block\Qw" name="block_2" template="Qq_Wwww::template2.phtml"}}
    </div>

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-block-3">Block - 3</a>
    </div>
    <div id="tab-block-3" class="item content" data-role="content">
        {{block class="Qqq\Wwwww\Block\Qw" name="block_3" template="Qq_Wwww::template3.phtml"}}
    </div>
</div>

BLOCK_CONTENT;

 $cmsBlock = [
     'title' => 'Block 1',
     'identifier' => 'blocks',
     'stores' => [0],
     'is_active' => 1,
     'content' => $block
 ];

 $this->blockFactory->create()->setData($cmsBlock)->save();
|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.