Q - How to add tabs buttons in Joomla 5 custom module and assign modules in that tabs ?

Moderator: mindphp

Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Q - How to add tabs buttons in Joomla 5 custom module and assign modules in that tabs ?

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

In Joomla 5 , I want to show modules when click on tabs, so, I created custom module (from Content>Site Modules > New > Custom) and add the following line, but it is show as the same texts, not showing the tabs

โค้ด: เลือกทั้งหมด

[tab id="tab" class="tab_btn" button="nav-pills"] [tab_item title="New Products"] {loadposition tab1} [/tab_item] [tab_item title="Top Hits"] {loadposition tab2} [/tab_item] [tab_item title="Best Seller"] {loadposition tab3} [/tab_item] [/tab]
How to add tabs buttons ?
MindPHP Assistant

Re: Q - How to add tabs buttons in Joomla 5 custom module and assign modules in that tabs ?

โพสต์ที่ยังไม่ได้อ่าน โดย MindPHP Assistant »

To create tabs in Joomla and display modules within them, simply adding text with custom tags won't automatically render them as tabs. You need a plugin or an extension that can interpret those custom tags and render them as actual tabs with the desired functionality. Here’s a general approach on how you can achieve this:

1. **Ensure you have a Tabs Plugin Installed**: Joomla doesn't natively interpret custom tab tags. You need a plugin that can convert those tags into functional tabs. Extensions like Regular Labs' "Tabs" or "SP Tab" by JoomShaper are popular choices.

2. **Install and Enable the Plugin**:
- Go to the Joomla Extensions Directory and search for a Tabs plugin.
- Download and install the plugin via the Joomla admin panel (`Extensions > Manage > Install`).
- Once installed, ensure the plugin is enabled (`Extensions > Plugins`).

3. **Structure Your Content Properly**:
- Use the syntax provided by the plugin you’ve installed. The syntax might be different from one plugin to another. For example, using Regular Labs Tabs, the structure would be:

โค้ด: เลือกทั้งหมด

html
     {tab New Products}
     {loadposition tab1}
     {tab Top Hits}
     {loadposition tab2}
     {tab Best Seller}
     {loadposition tab3}
     {/tabs}
     
4. **Assign Modules to the Right Positions**:
- Make sure that the modules you want to display (e.g., New Products, Top Hits, Best Seller) are assigned to the custom module positions `tab1`, `tab2`, and `tab3`.

5. **Add the Content to a Custom Module or Article**:
- Create a new custom module or article where you want the tabs to appear.
- Insert the tab syntax within that module/article.

6. **Clear Cache**: After making changes, clear Joomla's cache to ensure the changes take effect. (`System > Clear Cache`).

7. **Test on Frontend**: Navigate to the frontend to see if the tabs are rendered correctly and the modules are displayed.

By following these steps, you should be able to display modules within tabs on your Joomla site. Remember to refer to the documentation of the specific plugin you choose for any additional features or settings it might offer.
Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Re: Q - How to add tabs buttons in Joomla 5 custom module and assign modules in that tabs ?

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

I solved this by using bootstrap nav nav-tabs and
to load other modules, we can call with position

โค้ด: เลือกทั้งหมด

{loadposition position_name}
and we have to enable "Prepare Content" under "Options" tab in Content > Site Modules > New > Custom Module

So, by enabling the Prepare Content and by calling the module position name in loadpostion, we can display other module in custom module
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 1