So Listing Tabs

View demo More detail

This guide will help you install SO Listing Tabs step by step.

1REQUIREMENT – Back to top

At the basic level, this module will require the following conditions:

Compatible with version OpenCart: OpenCart 2.x
Have responsive

2INSTALLATION – Back to top

2.1 FTP Configuration

There are two ways to configure FTP

Option 1:

Step 1: Please go to System >> Settings >> Your Store >> Click “Edit” button

Step 2: Click FTP tab and enter the FTP username & password…

Option 2:

Step 1:Please go Here to dowload file XML of “Quick Fix”

Step 2: Please go to Extensions >> Extension Installer >> Click Upload and select file XML which you just dowloaded

Then You should see the message Success

Step 3: Go to Extension >> Modifications >> Click “Refresh” button

2.2 Module Installation

Prepare your module package

In your Administrator page, go to Extensions >> Extension Installer >> Click Upload and select file so-listing-tabs.ocmod.zip.
Then You should see the message Success

In this page, choose module “SO Listing Tabs”, click Install button

Please wait for module being installed, usually within several seconds

To Create the name of this module, please go to Extensions >> Modules >> Choose module “SO Listing Tabs” >> Click “Edit” button

Enter the name of the Module and fill the fields in the tabs. Then click “Save” button

To Edit the module you have created, there are two ways

Options 1: Choose the module you have Created >> Then Edit it

Options 2: Please go to Extensions >> Modules >> Choose the module you have Created >> Click “Edit” button

After you have installed and configured a module you can add it to a layout: Please go to Design >> Layouts >> Choose the layout you want to display

For Example: we choose “Home” layout

3MODULE CONFIGURATION – Back to top

3.1 Module Demo

3.2 Module Configuration

SO Listing Tabs are configured in 7 groups of parameters following:

General Options
Source Options
Tabs Options
Items Options
Image Options
Effect Options
Advanced

General Options.

Module Class Suffix – Allow to input class suffix.
Open Link – Allow to set target for links:
- New Window.
- Same Window.
# Column – Allow to set number of column for each device:
- For devices have screen width from 1200px to greater.
- For devices have screen width from 992px up to 1200px.
- For devices have screen width from 768px up to 992px.
- For devices have screen width from 480px up to 768px.
- For devices have screen width less than or equal 480px.
Type Show – Allow to choose type show: Load More/Slider

Source Options.

Type Source – Allow to choose type source: Field Product/Category
Category – Allow to choose categories which you want to show.
Child Category Products – Allow to include or exclude products from child categories.
Category Depth – The number of child category levels to return.
Product Order By – Allow to choose 1 of 7: Name/Model/Price/Quantity/Rating/Sort Order/Date Add.
Ordering Direction – Allow to select ordering direction: Ascending/Descending.
Count – The number of products to display. The default value of “0” will display all products.
If you choose: For Preload, you need to fill param below:
- Category Preload – Allow to select preload category.
- Field Preload – Allow to select preload field.

Tabs Options.

Tab All Display – Allow to display tab All OR not..
Category Title Maxlength – Max length of category title by characters. Enter value 0 if you want to show all. Please enter integer number >= 0..
Display Icon – Allow to display category’s icon OR not.
Category Oder By – Select which field you would like articles to be ordered by.
Width image – Allow to set width of image.
Height image – Allow to set height of image.

Items Options

Display Title – Allow to display title of item OR not.
Title Maxlength – The maxlength of item’s title. Set “0” to show full title.
Display Description – Allow to display description of item OR not.
Description Maxlength – The max length of item’s description can be showed.
Display Price – Allow to display Price OR not..
Display add to cart – Allow to display add to cart or not.
Display Wishlish – Allow to display wishlish or not.
Display Compare – Allow to display Compare or not.
Display Rating – Allow to show/hide Rating.
Display Sale – Allow to show/hide image Sale.
Display New – Allow to display image New or not.
Date day New – Allow to enter number day of product new.
Product Image Number – Allow to show number image for product.

Image Options.

Product Image – Allow to show product image or not.
Get Image From Tab Data – Allow to Get Image From Tab Data or not.
Get Image From Tab Image – Allow to Get Image From Tab image.
Width – Allow to set width of image.
Height – Allow to set height of image.
Placeholder Path (or Url) – The path(or URL) of default image.
Display Banner Image – Allow to display Banner Image or not.

Effect Options

If you choose: For Type Show Load More, you need to fill param below:
- Effect – Allow to select effect of slider in this listbox.
- Duration – Allow to set how long animation will run (Lager = Slower).
- Delay – Allow to set a timer to delay the excution of the next item in the queue (Lager = Slower).
If you choose: For Type Show Slider, you need to fill param below:
- Auto Play – Allow you set for slideshow auto play OR not.
- Display Navigation – Allow to Display Navigation OR Not.
- Display Loop – Allow to Display Loop OR Not.
- Touch Drag – Allow to Enable/Disable Touch Drag.
- Mouse Drag – Allow to Enable/Disable Mouse Drag.
- Pause On Hover – Allow slideshow effect stop when hover OR Not.
- Auto Interval Timeout – Autoplay interval timeout for slider.
- Auto Play Speed – Allow to set speed of timer (larger = slower).

Advanced

Pre-text – Allow to enter intro text of the module.
Post-text – Allow to enter footer text of the module.
Caching – Select whether to cache the content of this module.
Cache Time – The time in seconds before the module is recached.

4SUPPORT – Back to top

Thank you so much for purchasing this module. If you have any questions that are beyond the scope of this help file, please send us via: Submit a Ticket

Thanks so much!