Hikashop Accordion

Introduction

HikaShop Nested Accordion is a module of Joomla! that displays all the contents (categories and products) as multilevel accordion menu on HikaShop front-end . The accordion effect is written in native mootools javascript which is supported by Joomla! core so that there will be no javascript conflict when you use this module.

HikaShop Nested Accordion is editable from the backend to speed up in expending/collapsing sub menu. Furthermore, the module supports unlimited categories and sub categories, CSS style is fully customizable for design.

Features

  • NEW Modern CSS3 theme.
  • Compatible with Joomla 2.5+ and latest HikaShop version.
  • Support unlimited categories and sub categories.
  • HOT Show preview image on mouse hover in themes list.
  • Sort categories by Name or Ordering.
  • Show/Hide Product Count.
  • Option to add more than one module in a page.
  • Option to input or autodetect Itemid for category link.
  • Right to Left language support.
  • Mouse hover delay control.
  • Change speed of slide.
  • HOT 4 default theme style.
  • Support SEO.
  • Support menu class suffixes can use to create your own CSS files.
  • No Javascript conflict.
  • Work smart on Firefox, IE9, Opera, Safari, Google Chrome...

Click here to see demo.

Installation

  • Download the latest version of Skyline HikaShop Nested Accordion from ExtStore.
  • Go into Administrator site, click Extension → Extension Manager, then Browse the File and Upload and Install.

(HikaShop component is strictly required before installing this module)

Usage

Go to back-end, Choose Extensions → Module Manager, and search for Skyline HikaShop Accordion to manage.

Mod sl hikashop nested accordion module enable j30.png
 

 

Settings for Details

Mod sl hikashop nested accordion details options j30.png
 

 

  • Position: the position you have in a template. For instance: position-7 of Beez20 default template.
  • Status: published, unpublished or trashed.
  • Access: public (for user and guest), registered (for user only).
  • Ordering: The ordering the module will be put with other modules in the same position

Settings for Options

Setting for Options

Mod sl hikashop nested accordion module options j30.png
 

 

  • Menu ID: Option to place more than one module in a page.
  • Module Class Suffix: A suffix applied to the CSS class for individual module style.
  • Menu Theme: Select themes to style the menu. There are 3 themes to choose: Black, Silver and Modern style. Preview images will appear when hovering the mouse to select in the themes list.
  • Right to Left: Choose Yes to enable style for RTL language.
  • Itemid: Item id of categories. Enter a valid value to show the products (leave blank or 0 for autodetection).
  • Included Categories: Enter category ids here, separated by comma, then only those categories will be showed on frontend. If you want to show all categories, just leave it blank.
  • Order by: Order categories by Name or Ordering.
  • Show Product Count: Select Yes/No to Show/Not Show product count at the right side of categoies on menu.
  • Full Product Count: If choose yes, the category's product count will be calculated by sum of product count from all subcategories.
  • Fade Effect: Option to create fade effect when expanding/collapsing sub-menu.
  • Event: If choosing Advanced Click for expanding/collapsing menu, users can just click to icon to show/hide submenus. Unlike Click event, no menu link is removed. Or users can select Hover option and don't need to click anything to expand/collapse menu.
  • Delay: Time-interval for delayed actions in milliseconds.
  • Duration: Time-interval for moved actions in milliseconds.
  • Transition: 30 effect transition for animations.
  • Custom CSS: Add CSS style to customize the template.

Setting for Menu Assignment

Option menu assignment j30.png
 

 

  • Module Assignment: Choose to assign module in selected pages.
  • Menu Selection: Select menu type.

Show on the front-end pages

Mod sl hikashop nested accordion front end.png

Using Itemid for Hikashop Products Layout

Itemid is an option in the module settings which is used in order to diversify ways of displaying products and categories on HikaShop website. But before using this feature, we need to follow these steps:

  • In administrator site, choose Menus → Menu Manager → Add new menu to create a new menu or use an existing menu.
Sl hika accordion itemid menu new j30.png
 

 

  • Next, click in Menus → Hikashop - The menu you've just created to Add New Menu Item. Choose Menu Item Type as Categories listing.

Sl hika accordion itemid menu item new j30.png

  • Click Save and wait until it display the HikaShop Options.

Sl hika accordion itemid hikashop option j30.png

  • Setting for HikaShop Options:
    • Type of content: Choose Product, Category or Brand, depending on which content type you want to show.
    • Type of layout: Choose style to display the contents selected before.

Sl hika accordion itemid hikashop options j30.png

  • You now have one menu with a certain id.
Sl hika accordion itemid id j30.png
 

 

  • Then back setting in the module options to fill this id in Itemid field
Sl hika accordion itemid module option j30.png
 

 

  • Show on Frontend
After set the itemid for the module, you will see the different link as if you hover on the menu.

 

Support

If you have questions regarding specific details or need any help with the product, feel free to contact us and join Extstore forum.

Don't have an account yet? Register Now!

Sign in to your account