SJ Scroller for VirtueMart

View demoMore detail
This guide will help you install SJ Scroller for VitueMart step by step.

 

1REQUIREMENT – Back to top

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

  • Compatible with version Joomla: Joomla!2.5, Joomla! 3.x and Responsive layout.
  • Compatible with Virtuemart Version 3.0.0 Component. Download Here

2INSTALLATION – Back to top

Prepare your module package

  • Firstly, you need to UNZIP file that you have downloaded. Please note that you should choose module package that are suitable with each Joomla version which you have just downloaded.
  • Secondly, install main module (extracted mod_ file):
  • In your Administrator page, go to Extensions -> Extension Manager. In this page, click Browse, select module package.
  • Then click Upload & Install

  • Please wait for module being installed, usually within several seconds.
  • Now go to Extensions -> Module Manager, click Select Type box and choose the module you have installed.

  • Prepare to perform Module Configuration

3MODULE CONFIGURATION – Back to top

3.1 Below is module layout

3.2 Module Configuration

Note:We used the images of module’s installation on Joomla 3.x to illustrate.

After installing, go to Extensions -> Module Manager and find SJ Scroller for VitueMart to configure.

SJ Scroller for VitueMart module is configured in 6 main groups of parameters as following:

  • Module
  • Source Options
  • Product Options
  • Image Options
  • Effect Options
  • Advanced

Let’s look at the parameters in detail:

Module. 

  • Module Class Suffix – Allow you to choose another CSS class that suits your template. Please refer more here
  • Link Target – Allow to set target for links:
    • New Window
    • Same Window
    • Popup Window

Source Options.

  • 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.
  • Featured Products – Allow to Show/Hide or Show only featured products.
  • Product Order By – Allow to choose 1 of 7
    • Product Name
    • ID
    • Best Sales
    • Latest
    • Ordering
    • Product Price
    • Random
  • Ordering Direction – Select the direction you would like products to be ordered by.
  • Limitation – Maximum number of products to display. Enter “0” for unlimited.

Product Options.

  • Price Options
    • Display Price – Allow to display Price of product or not.
  • Title Options
    • Display Title – Allow to display Title of product or not.
    • Title Maxlength – The maxlength of product’s title. Set “0″ to show full title.
    • Position Top – Set position top for title
    • Position Left – Set position left for title
    • Transition – Allow you to choose the transition for title of product
  • Description Options
    • Display Description – Allow to display description of product or not.
    • Description Maxlength – The maxlength of product’s description. Set “0″ to show full description.
    • Position Top – Set position top for description
    • Position Left – Set position left for description
    • Transition – Allow you to choose the transition for description of product
  • Readmore Options
    • Display Readmore Link – Allow to show/hide link for readmore
    • Read More Text – Allow to insert the text for readmore link.
    • Position Top – Set position top for readmore
    • Position Left – Set position left for readmore
    • Transition – Allow you to choose the transition for readmore link
    • Display Add To Cart – Allow to show/hide add to cart button.
    • Position Top – Set position top for add to cart button
    • Position Left – Set position left for add to cart button

Image Options.

  • Get Images From Product Image
    • Product Image – Allow to show/hide Product Image.
  • Get Images From Product Description
    • Description – Allow to show/hide images from product’s description.
  • Get Images From Extend Folder
    • Extend Folder – Allow to show/hide Extend Folder.
    • Order to Get – Order to Get image.
    • Extend Folder – Set path to external image folder used by option above.
    • User Default Image – Use default image if article have not image.
    • Place holder Path (or Url) – The path or URL of Default Image.
  • Big Image Options
    • Resize mode – Allow you to choose the mode of image resizing
      • None
      • Center
      • Fill
      • Fit
      • Strech
    • Output Format – Allow to set format for image output file:
      • Default
      • GIF
      • JPEG
      • PNG
    • Keep Transparency – Allow to keep images transparent, for PNG and GIF format
    • Width – Allow you to set the width of the big image
    • Height – Allow you to set the height of the big image
    • Background – Allow to set the color of image background
  • Small Image Options
    • Resize mode – Allow you to choose the mode of image resizing
      • None
      • Center
      • Fill
      • Fit
      • Strech
    • Output Format – Allow to set format for image output file:
      • Default
      • GIF
      • JPEG
      • PNG
    • Keep Transparency – Allow to keep images transparent, for PNG and GIF format
    • Width – Allow you to set the width of the small image
    • Height – Allow you to set the height of the small image
    • Background – Allow to set the color of image background

Effect Options.

  • Effect – Allow you to select effect for sliding
  • Auto Play – Allow you to set autoplay for slideshow or not
  • Pause when Hover – Allow slideshow effect stop when hover or not
  • Keyboard Navigation – Allow you to use arrow key for navigation
  • Touch Navigation – Allow you to use touch/slide for navigation
  • Start Slide – Allow you to set first slide
  • Strips – Allow to set number of strips for stripping animations
  • Block Cols – Allow to set number of block columns for blocking animations
  • Block Rows – Allow to set number of block rows for blocking animations
  • Animation Speed – Allow you to set how fast slideshow to slide (by miniseconds)
  • Interval – Allow you to set time to stop between sliding
  • Navigation Style – Allow you to choose style for navigation
  • Direction Navigation – Allow you to show direction for navigation
  • Control Navigation – Allow you to show control for navigation
  • Navigation Tooltip – Allow you to show tooltip for navigation
  • Timer Options
    • Display Timer – Allow to show small clock over big image
    • Timer – Allow to choose style for timer
    • Timer Position – Allow to set position for timer
    • Timer Background – Allow to set background for timer
    • Timer Color – Allow to set main color for timer
    • Timer Opacity – Allow to set transparency for timer
    • Timer Diameter – Allow to set how big is timer
    • Timer Padding – Allow to set padding for timer
    • Timer Stroke – Allow to set stroke for timer
    • Timer Bar Stroke – Allow to set bar stroke
    • Timer Bar Stroke Color – Allow to set color for bar stroke
    • Timer Bar Stroke Style – Allow to set style for bar stroke
Advanced Options

  • Alternative Layout – Set custom layout for this module
  • Include jQuery – Allow you to include jQuery or not
  • Pre-text – The content to show at the top of module
  • Post-text – The content to show at the end of module
  • Caching
    • Use Global: Turn on caching
    • No Caching: Turn off caching
  • Cache Times – The time to cache
  • Module Tag – Allow to select the HTML Tag for module
  • Bootstrap Size – Allow to set the number of columns that module will use.
  • Header Tag – Allow to select the HTML Tag for module header/title
  • Header Class – Support the CSS Class for module header/title
  • Module Style – Select module style

4SUPPORT – Back to top

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

Thanks so much!