SM Categories Accordion

View demo
This guide will help you install SM Categories Accordion step by step.

1REQUIREMENT - Back to top

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

  • Support Magento 1.7.x; 1.8.x and 1.9.x

2INSTALLATION - Back to top

2.1 Extension Installation

There are two ways to install extension:

  • Step 1: Download and unzip extension contents on your computer and navigate inside the extracted folder.
  • Step 2: Upload folders skin and app from our download package to your Web server’s document root (from here on, referenced as {docroot}). You should see a directory layout like this:

    {docroot} /magento/

    app/
    index.php
    js/
    lib/
    LICENSE.txt
    media/
    pear/
    skin/
    var/
    • Step 3: Login your Magento Admin
    • Step 4: Navigate to System => Configuration => find SM Categories Accordion module (in the left of column) to configure module

      • Step 5: You will see installed extension, click extension’s name tab to go to extension configuration page.

OR you also install the steps as following:

Step 1: In the Administrator page, Navigate to System >> Magento Connect >> Magento Connect Management

Step 2: Click Browse and Upload package file

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.

2.2 Page Configuration

  • If you want to use this module on a page, for example, Homepage; go to CMS -> Page -> Edit Home page item -> Tab Content, add this code to a position you want:
 

3EXTENSION CONFIGURATION - Back to top

3.1 Below is module layout

3.2 Module Configuration

After installing, go to System -> Configuration and find SM Categories Accordion (in the left of column) to configure.
The parameters are divided into the following groups:

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

Let’s look at the parameters in detail:

General settings

  • Enable/Disable - Allow to enable/disable the module.
  • Title of Module - You can enter title of module here
  • Link target - Target to open links:
    • New window - Open the link in the new window/tab
    • Same window - Open the link in the same window/tab
    • Popup window - Open links in new pop-up window
  • Type Layout - We support 3 type layouts: type 1, type 2 and type 3
  • Border Display - Allow to display border or not
  • Number Column - The amount of Items which you want to show in the columns (for Type1 and Type3 . With Type 2, number of items is (rows x columns))”.
  • Number Row - The amount of Items which you want to show in the columns (for Type1 and Type3 . With Type 2, number of items is (rows x columns))”.

Source Options

  • Select Category - Allow you to select 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
Categories Options  
    • Display Image - Allow to display image of category OR not
    • Tab Active - Allow to set tab active. Set “0″ is close all
    • Tab Event - We support 2 styles for accordion expand/collapse: click or hover
    • Categories Order By - Allow categories to be ordered by: random/position/name
    • Ordering Direction - Allow categories to be ordered direction: ascending/descending
    • Display Title - Allow to display title of product OR not
    • Title Maxlength - Allow to set maximum length of title
    • Display Description - Allow to display description of category OR not
    • Description Maxlength - Allow to set maximum length of description

Image Options
Get Image from Category Image

    • Category Image - Allow to get image from category image or not

Get Image from Category Image Thumbnail

    • Category Image Thumbnail - Allow to get image from category image thumbnail or not

Get Image from Category Description

  • Category Description - Allow to get image from category description or not
  • Order to get - Allow to order to get image from category description: “category_image, category_thumbnail, category_description”
  • Resize - Allow to resize image or not
  • Image Width - Allow to set image width
  • Image Height - Allow to set image height
  • Constrain Only -f the “constrainOnly” parameter is set to true, in this case the images which are smaller than specified value will be not enlarged by Magento. Only border of such images will increase.
  • Keep Aspect Ratio: Allow to keep aspect ratio. If the “keepAspectRatio” parameter is set to true, in this case the proportions of the image will not be modified.
  • Keep Transparency: The “keepTransparency” parameter keep the transparent background of the images.
  • Keep Frame: The “keepFrame” parameter guarantees that the image will be not cropped. When “keepAspectRatio” is false the “keepFrame” will not work
  • Background Color: Allow to set background color
  • Placeholder: If items do not have image, it will get image nophoto
Image Options
Get Image from Product Image 
  • Product Image - Allow to display image of product OR not
  • Product Description - Allow to display description of product 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
  • Constrain Only -f the “constrainOnly” parameter is set to true, in this case the images which are smaller than specified value will be not enlarged by Magento. Only border of such images will increase.
  • Keep Aspect Ratio: Allow to keep aspect ratio. If the “keepAspectRatio” parameter is set to true, in this case the proportions of the image will not be modified.
  • Keep Transparency: The “keepTransparency” parameter keep the transparent background of the images.
  • Keep Frame: The “keepFrame” parameter guarantees that the image will be not cropped. When “keepAspectRatio” is false the “keepFrame” will not work
  • Background Color: Allow to set background color
  • Placeholder: If items do not have image, it will get image nophoto

    • Large Image (for Type2)

  • Image Width - Allow to set image width
  • Image Height - Allow to set image height

    • Normal Image

  • Image Width - Allow to set image width
  • Image Height - Allow to set image height
Product Options
Product Title 
  • Display - Allow to display title of product OR not
  • Max length - Allow to set maximum length of product title

    • Product Description

  • Display - Allow to display product description OR not
  • Max length - Allow to set maximum length of product 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 Wish-list - Allow to display Add Wishlist OR not
  • Display Add Compare - Allow to display Add Compare OR not
  • Display Read-more Link - Allow to display Readmore Link OR not
  • Read-more Text - Allow to input text

Effect Options

  • Start - Allow to set page that is displayed at first when you run slideshow
  • Pause On Hover - Allow to pause effects when users hover
  • Auto Play - Allow to Enable/Disable auto play mode
  • Interval - The duration to change to next slide.
  • Effect - Allow to select effect
  • Swipe - It supports touch navigation with pure swipe gesture
  • Mouse Wheel - Allow to Move the mouse wheel up or down

Advanced Options

  • Include jQuery - Use jQuery from this module or not
  • Pre-text - The content to show at the top of module
  • Post-text - The content to show at the end of module

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: Support Tickets System

Thanks so much!