1. INTRODUCTION
Magento 2 Product Tabs extension allows you to listing your products in tabs by variety criteria, increasing the usability of your business. The Magento 2 extension supports listing product according to tabs by categories or product fields in Slider or Load More style.
TABLE OF CONTENT
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
2. HOW TO INSTALL & REMOVE
This instruction is applied for Magento 2.x.
2.1. Install:
- Extract the package: bzotech-producttabs-magento2.4.x-v1.0.0.zip
- Copy code to folder root magento (Magento installation folder)
- Go to root magento folder, run commands:
php bin/magento setup:upgrade
Then:
php bin/magento setup:static-content:deploy -f
If you are using Magento Production mode, run the command:
php bin/magento setup:di:compile
2.2. Remove:
Go to root magento folder, run commands:
rm -rf app/code/BzoTech/Categories
Then:
php bin/magento setup:upgrade
And:
php bin/magento setup:static-content:deploy -f
If you are using Magento Production mode, run the command:
php bin/magento setup:di:compile
3. MODULE CONFIGURATION
After installing Magento 2 Product Tabs extension, go to Admin Dashboard -> STORES -> Settings -> Configuration -> BZOTECH.COM -> Product Tabs
| Config Name | Value | Description |
| General Option | ||
| Enabled Extensions | Yes/No | Enable/disable the extension |
| Title | Input value | Set the extension’s title |
| Type Show | Loadmore
Slider |
Show the product listing type as load more or slider |
| Type Listing | All
Only Deals Under Price |
Listing products according to: all products, only deals products or under price products |
| Price | Input value | If Type Listing selected as Under Price, then the Price option will appear to input the price |
| Show Countdown Timer | Yes/No | Show or hide the countdown timer for deal products |
| Source Options | ||
| Filter Type | Categories
Field Products |
Show products listing tabs by categories or product fields |
| Select Categories | Multi-options | If select Filter Type as Categories, this option will be available to select the categories you want to show as tabs. |
| Select Fields | Multi-options | If select Filter Type as Field Products, this option will be available to select the fields you want to show as tabs. |
| Select Category | Multi-options | If select Filter Type as Field Products, this option will be available to select the categories you want to get products. |
| Order By | Name
Id Date Created |
Select the order criteria. |
| Ordering Direction | Desc
Asc |
Select the order direction by descending or ascending |
| Product Limitation | Input value | The number of products to show in each tabs |
| Slider Configuration | ||
| Margin | Input value | Set the slider margin |
| Auto Play | Yes/No | Allow slider auto play or not |
| Loop | Yes/No | Allow slider loop or not |
| Navigation | Yes/No | Allow to show navigation or not |
| Dots | Yes/No | Allow to show navigation in dots or not |
| Mouse Drag | Yes/No | Allow to drag by mouse or not |
| Touch Drag | Yes/No | Allow to drag by touch or not |
| Number column on max screen… | 1-8 columns | Allow to set the number of column for each screen size from 1 to 8 columns. |
4. CMS PAGE CONFIGURATION
To add Magento 2 Product Tabs extension to any CMS page on your website, after installing, in Admin Dashboard:
Go to CONTENT -> Pages -> select the page that you want to display this extension -> Edit.
Select Content -> Edit with Page Builder.
Choose edit icon.
Insert Product Tabs block to your CMS page.
IMPORTANT!
If you set the params for the extension in the block on CMS pages, the extension will get these params as configurations. If you do not set params here, the extension will get the setting from Module Configuration. As below:
{{block class="BzoTech\ProductTabs\Block\ProductTabs" template="BzoTech_ProductTabs::default.phtml"}}
{{block class="BzoTech\ProductTabs\Block\ProductTabs" template="BzoTech_ProductTabs::default.phtml" title="Flash Sale" type_show="slider" type_listing="deals" display_countdown="1" type_filter="categories" category_tabs="4,6" order_by="entity_id" order_dir="DESC" limitation="8" margin="30" autoplay="0" loop="0" nav="1" dots="1" mousedrag="1" touchdrag="1" screen_0="2" screen_1="2" screen_2="3" screen_3="3" screen_4="4" screen_5="4" screen_6="4" screen_7="4"}}
{{block class="BzoTech\ProductTabs\Block\ProductTabs" template="BzoTech_ProductTabs::default.phtml" title="Latest Products" type_show="loadmore" type_listing="all" display_countdown="0" type_filter="categories" category_tabs="20,11,4,6" order_by="entity_id" order_dir="DESC" limitation="8" margin="30" autoplay="0" loop="0" nav="1" dots="1" mousedrag="1" touchdrag="1" screen_0="1" screen_1="2" screen_2="3" screen_3="3" screen_4="4" screen_5="4" screen_6="4" screen_7="4"}}
{{block class="BzoTech\ProductTabs\Block\ProductTabs" template="BzoTech_ProductTabs::default.phtml" title="Men & Women" type_show="loadmore" type_listing="all" display_countdown="0" type_filter="fieldproducts" field_tabs="ordered_qty,lastest_products,num_reviews_count" category_select="11,20" order_dir="DESC" limitation="8" margin="30" autoplay="0" loop="0" nav="1" dots="1" mousedrag="1" touchdrag="1" screen_0="2" screen_1="2" screen_2="3" screen_3="3" screen_4="4" screen_5="4" screen_6="4" screen_7="4"}}
{{block class="BzoTech\ProductTabs\Block\ProductTabs" template="BzoTech_ProductTabs::default.phtml" title="Under Price $70" type_show="loadmore" type_listing="under" under_price="70" display_countdown="0" type_filter="categories" category_tabs="4,6,5" order_by="entity_id" order_dir="DESC" limitation="8" margin="30" autoplay="0" loop="0" nav="1" dots="1" mousedrag="1" touchdrag="1" screen_0="1" screen_1="2" screen_2="3" screen_3="3" screen_4="4" screen_5="4" screen_6="4" screen_7="4"}}
| Params | Config Name | Description |
| General Option | ||
title |
Title | Name the title |
type_show |
Type Show | slider
|
type_listing |
Type Listing | all = all product
|
under_price |
Price | If Type Listing set as Under Price, then set Price using this param. Ex: “70“ |
display_countdown |
Show Countdown Timer | 1 = yes
|
| Source Options | ||
type_filter |
Filter Type | categories = Categories
|
category_tabs |
Select Categories | If set Filter Type = Categories, use this param to set the categories you want to show as tabs by using category id. Ex: “20,11,4,6“ |
field_tabs |
Select Fields | If select Filter Type = Field Products, use this param to set the fields you want to show as tabs. Ex “ordered_qty,lastest_products,num_reviews_count“ |
category_select |
Select Category | If select Filter Type = Field Products, use this param to set the categories you want to get products. Ex: “11,20“ |
order_by |
Order By | entity_id
|
order_dir |
Ordering Direction | DESC = descending
|
limitation |
Product Limitation | Limit the number of products to show in each tabs. Ex: “8“ |
| Slider Configuration | ||
margin |
Margin | Set the slider margin. Ex: “30“ |
autoplay |
Auto Play | 1 = yes
|
loop |
Loop | 1 = yes
|
nav |
Navigation | 1 = yes
|
dots |
Dots | 1 = yes
|
mousedrag |
Mouse Drag | 1 = yes
|
touchdrag |
Touch Drag | 1 = yes
|
screen_0 |
Number columns on max screen 480px | Set the number of column for max screen 480px from 1 to 8 columns. Ex: “1“ |
screen_1 |
Number columns on screen 481px -> 767px | Set the number of column for max screen 481px -> 767px from 1 to 8 columns. Ex: “2“ |
screen_2 |
Number columns on screen 768px -> 991px | Set the number of column for max screen 768px -> 991px from 1 to 8 columns. Ex: “3“ |
screen_3 |
Number columns on screen 992px -> 1199px | Set the number of column for max screen 992px -> 1199px from 1 to 8 columns. Ex: “3“ |
screen_4 |
Number columns on screen 1200px -> 1440px | Set the number of column for max screen 1200px -> 1440px from 1 to 8 columns. Ex: “4“ |
screen_5 |
Number columns on screen 1441px -> 1680px | Set the number of column for max screen 1441px -> 1680px from 1 to 8 columns. Ex: “4“ |
screen_6 |
Number columns on screen 1681px -> 1920px | Set the number of column for max screen 1681px -> 1920px from 1 to 8 columns. Ex: “4“ |
screen_7 |
Number columns on screen is greater than 1921px | Set the number of column for max screen greadte than 1920px from 1 to 8 columns. Ex: “4“ |
5. SUPPORT
Knowledge Base
Before filing a new support ticket, please follow the steps below to assist us expedite your request. This is for everyone’s advantage and will assist to make the entire process more efficient. It’s critical, and we ask that everyone to these guidelines.
Read the item documentation first:
The documentation covers all the item setting and configuration. You may find the solution for your issues here.
We support the item in accordance with Envato’s Support Policy:
We will review and respond to the ticket within one business day (except for weekends and holiday). Please review the Envato’s Support Policy to see what is and is not covered by item support. Please keep in mind that only one website should be supported for each item purchase code. If your support license has expired, please renew it to continue receiving technical help.
Important considerations for your website:
- Runs the most recent version of the item and validate all Theme Requirements.
- Disable any other third-party plugins you may be using to see whether this resolves the issue.
- Clear and deactivate all caches, including browser, plugin, and server caches.
To open a support ticket for the item on our HELP CENTER, choose the Department and then provide the theme purchase code in the ticket and submit. Please keep in mind that providing us with information about your website and some screenshots of the problem will make it simpler for us to answer your query and assist you more quickly.
Important!
DO NOT REPLY TO THE TICKET VIA THE EMAIL NOTIFICATION. Any responses sent via this no-reply-email may be overlooked since our support team was unable to view them.
If you have any problems with the ticket system, please contact us at [email protected] for assistance. However, the first option is more convenient and makes it easy for both of us to monitor the problems.
