SM Listing Tabs 2

View demo
This guide will help you install SM Listing Tabs step by step.
1REQUIREMENT

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

  • Compatible with Magento Community Edition 2.0.x: Please follow Magento 2.0 Installation Guide to install if you do not have one.
  • Composer (latest stable version)
  • Apache 2.2 or late
  • PHP: 5.5.x,5.6.x and Memory_limit no less than 256Mb)

  • In the future if the conditions change, please check the Magento 2 documentation

2INSTALLATION

  • Step 1: Download and extract the extension’s package on your computer and navigate inside the folder.
  • Step 2: Upload the folder named as app from the package to the root of your Magento site on your server
  • Step 3: On your server, right click and select ‘Use composer here’ to open Command Prompt

    • 1. Please type the following command into the dialog to clear the compiled code and cache:
    • 2. After running successfully the first command, type the following command into the dialog to set up fresh static content to deploy on our Magento store
  • Step 4: Go to Administration page to configure the extension

    • Important Note:

    • After installing extension, you should logout first and then login Admin Panel to ensure all functions work normally.
    • You should disable all caches in cache management in the installation and configuration process.

3EXTENSION CONFIGURATION - Back to top

3.1 Layout Module

3.2 Module Configuration

Note:We used the images of module’s installtion on Magento 2.0.x to illustrate

After installing, go to Stores -> Settings -> Configuration and find SM Listing Tabs to configure.
The parameters are divided into the following groups:

    • General settings
    • Source Options
    • Tabs Options
    • Product Options
    • Image Options
    • Effect Options
    • Advanced Options

Let’s look at the parameters in detail:

General Options

  • Enable Extensions - Allow to enable/disable the module.
  • Display Title - Allow to enable/disable the title.
  • Title - Enter the title of the module.
  • Target - Allow to display the target link in Same Window/ New Window/ Popup Window
  • Class Suffix - Allow uses to add suffix for class.
  • Show Type Loadmore Or Slider - to load more product in tab.
  • Column - Set the number of columns for devices:
    • For devices have screen width from 1200px up to greater.
    • For devices have screen width from 992px up to 1199px.
    • For devices have screen width from 768px up to 991px.
    • For devices have screen width from 480px up to 767px.
    • For devices have screen width less than or equal 479px.

Source Options

  • Filter Type - Allow you to Type of Filter.
  • Select Category - Allow you to select Category. The SM Amazing Slideshow is added for showing product
  • Category Preload - Allow to preload category.
  • Child Category Products: Include or Exclude Products from Child Categories.
  • Category Depth: Allow to select the number of child category levels to return.
  • Featured Products: Allow to Show/Hide/Only Featured Products.
  • Product Field to Order By: Set Product Field to Order By.
  • Ordering Direction: Allow to order ascending/descending direction.
  • Product Limitation: Allow to set product limitation.

Tabs Options

  • Tab All Display - Allow you display all tabs or NOT.
  • Category title max length - Allow to set the max length of title.
  • Categories Order By - Set Categories Order By: Name/Position/Random.
  • Categories Ordering Direction - Allow to order ASC(ascending)/ DESC(descending) direction.
  • Display Icon - Allow to display icon or NOT.
  • Order to Get - Allow to order to get image with options such as category_image, category_thumbnail, category_description.
  • Resize - Allow you resize category image or NOT.
  • Image Width - Allow to set image width.
  • Image Height - Allow to set image height.
  • Background Color: Allow to set background color.
  • Placeholder: If items do not have image, it will get image nophoto.

Products Options
Product Title

    • Display - Allow to display title of product OR not.
    • Max Length - Allow to set the max length of title.

Product Description

    • Display - Allow to display title of description OR not.
    • Max Length - Allow to set the max length of description.

Others

    • Display Price - Allow to display price OR not.
    • Display Reviews Summary - Allow to display reviews summary OR not.
    • Display Add To Cart - Allow to display Add To Cart OR not.
    • Display Add Wishlist - Allow to display Wishlist OR not.
    • Display Add Compare - Allow to display Add Compare OR not.
    • Display Readmore Link - Allow to display Readmore link OR not.
    • Readmore Text - Allow to input name of Readmore text. For example: Details.
Image Options
Get Image from Product Image  
  • Get Image from Product Image - Allow to display image of product or NOT.

Get Image from Product Description  

  • Get Image from Product Description - Allow to display Product Description or NOT.
  • Order to Get - Allow to order to get image with options such as “product_image, product_description”.
  • Resize - Allow you resize product image or NOT.
  • Image Width - Allow to set image width.
  • Image Height - Allow to set image height.
  • Background Color: Allow to set background color.
  • Image Replacement: Only when the product has no image, the module will take photos from placeholder to replace.

Effect Options

  • Effect - Allow to select effect.
  • Speed - Allow to set speed of slide.
  • Interval - Allow to set interval timer.

Config When Type Module is Slider  

  • Display Navigation - Allow to Display Navigation OR Not.
  • Display Loop - Allow to Display to Loop OR Not.
  • Margin Item - Allow to set margin of the image.
  • Slide By - Allow to choose the number of products displayed when clicking “Next” button.
  • Auto Play - Allow you to set for slideshow auto play OR NOT.
  • Pause On Hover: Allow to Pause effects when users hover Or not.
  • Auto Play Speed: Allow to set speed of timer (larger = slower).
  • Navigation Speed: Allow to set the speed of Navigation.
  • Start Position Item: Allow to choose the first item by position number.
  • Mouse Drag: Allow to Enable/Disable Mouse Drag.
  • Touch Drag: Allow to Enable/Disable Touch Drag.

Advanced Options

  • Pre-text - The content to show at the top of module.
  • Post-text - The content to show at the end of module.
  • Caching - Allow to choose to cache the content of module.
  • Cache Time - Allow to choose the time (in seconds) before the module is recached.

4SUPPORT

Thank you so much for using this module, your support is truly appreciated. If you have any questions that are beyond the scope of this document, please feel free to contact us via our Support Tickets System