SM Listing Tabs 2x

View demoMore detail
SM Listing Tabs is made for showing most popular products like Most selling, Most visited, Most Reviewed, Top rating product or categories of your store according to tabs. In each tab, module supports ajax to show product. Moreover, you can show more products in a category with “Load more” button.

SM Listing Tabs is built fully responsive layout to adapt perfectly all device resolutions. Coming with range of other options in the back-end, this module would be a perfect solution for front-end showcase of products with title, description, price, add to cart, add to wishlist, add to compare…
This guide will help you install SM Listing Tabs.

1COMPATIBLE WITH MAGENTO

This module is fully compatible with Magento Community Edition version 2.x.

2REQUIREMENT

To install this module you must have a working version of Magento already installed. If you need help installing Magento, follow below sites and tutorials from magento.com, hope everything that you need are there.

3INSTALLATION

  • 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: To active SM Listing Tabs, go to root of your site using putty or others.
    • 1. Please type the following command into the dialog to active module: 
      		php bin\magento setup:upgrade

    • 2. After running successfully the first command, type the following command into the dialog to flush cache on our Magento store 
      		php bin/magento cache:flush

  • 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.

4CONFIGURATION

4.1 Layout Demo

You could see the appearance of SM Listing Tabs module as following:

4.2 How to show “SM Listing Tabs” module?

  • If you want to display this module on any page that you want, please go to Content -> Page -> Edit Home page item ->Tab Content, add this code to a position:
{{block class="Sm\ListingTabs\Block\ListingTabs" name="listingtabs.default" as="listingtabs_default" template="Sm_ListingTabs::default.phtml"}}

4.3 Module Configuration

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

In the Administrator Page, navigate to Stores -> Settings -> Configuration and find SM Listing Tabs to configure.

Let’s look at the parameter in detail:

General Options

  • Enabled Extensions: Enable or disable the module displaying on Frontend area.
  • Title: Enter the title of the module.

    • For Example:

  • Type Show: We support 2 types: Slider or Loadmore

    • The interface when you select Loadmore:

    The interface when you select Slider:

  • Type Listing: We support 3 types: All, only deals and under price.
  • Show Countdown Timer: Allow to show countdown timer for special product when you select “Yes”.

    • For Example:

Source Options

  • Filer Type: Allow you to Type of Filter.
  • Select Categories: Allow you to select Category
  • Order By: Set Product Field to Order By.
  • Ordering Direction: Allow to order ascending/descending direction.
  • Product Limitation: Allow to set product limitation.

    • For Example:

4.4 How to override the configuration in backend?

Let’s start override the configuration, go to Content -> Page -> Edit Home page item ->Tab Content

  • How to override “Title” param.
    In tab Content, add this code title="Title of module"

  • How to override “Type Show” param.
    In tab Content, add this code type_show="slider" or type_show="loadmore"

  • How to override “Type Listing” param.
    In tab Content, add this code type_listing="deals" or type_listing="all " or type_listing="under "

  • How to override “Show Countdown Timer” param.
    In tab Content, add this code:
    Yes: display_countdown="1"
    No: display_countdown="0"

  • How to override “Filter Type” param.
    In tab Content, add this code:
    Categories: type_filter="categories"
    Field Products: type_filter="fieldproducts"
  • How to override “Select Categories” param.
    In tab Content, add this code category_tabs="2,3,4"

  • How to override “Select Fields” param (in param “Filter Type” select is “Field Products”)
    In tab Content, add this code:
    Name: field_tabs="name"
    Id: field_tabs="entity_id"
    Price: field_tabs="price"
    New Products: field_tabs="lastest_products"
    Top Rating: field_tabs="num_rating_summary"
    Most Reviews: field_tabs="num_reviews_count"
    Most Viewed: field_tabs="num_view_counts"
    Most Selling: field_tabs="ordered_qty"
  • How to override “Order By” param (in param “Filter Type” select is “Categories”)
    In tab Content, add this code:
    Name: order_by="name"
    Id: order_by="entity_id"
    Date Created: order_by="created_at"
    Price: order_by="price"
    Number Rating: order_by="num_rating_summary"
    Number Reviews: order_by="num_reviews_count"
    Number Views: order_by="num_view_counts"
    Number Ordered: order_by="ordered_qty"

  • How to override “Ordering Direction” param.
    In tab Content, add this code order_dir="ASC" or order_dir="DESC"
  • How to override “Product Limitation” param.
    In tab Content, add this code limitation="6"

    • 5SUPPORT

    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