VirtueMart Product Scroller Module Introduction: VirtueMart provides a module (mod_productscroller_1.1.5.j15.zip) in the complete installation package of VirtueMart. mod_productscroller_1.1.5.j15.zip: This module when installed and published, it will display scrolling products on your website page using the marquee tag. You can configure how many products will be scrolling and how quickly they will scroll. This tutorial, explains how VirtueMart Product Scroller Module is implemented in VirtueMart. Install: To setup the VirtueMart Product Scroller Module in Joomla, login to Joomla as administrator, by simply entering the url_of_your_website/administrator in your Browser. Enter the appropriate username and password {which was provided while installing Joomla} and then click on Login as shown in Diagram 1. Diagram 1 1
After logging in as Joomla Admin, a Control Panel page opens as shown in Diagram 2. The Control Panel provides access to different Joomla functions and features. Diagram 2 In the top menu, locate the link Extensions. Click on Extensions from the drop down menu that appears click on Install/Uninstall as shown in Diagram 3. Diagram 3 An Extension Manager page opens. In the Upload Package File section, click the Browse button as shown in Diagram4. Diagram 4 2
After clicking on the Browse Button a file navigator window opens. Navigate from VirtueMart complete installation package folder to modules folder via the file browser that opens up. Select and Open the module zip file (mod_productscroller_1.1.5.j15.zip) from there as shown in Diagram 5. Diagram 5 The zip file name appears in the Package File text box as shown in Diagram 6. Then click the Upload File & Install button. Diagram 6 3
Once the file has been uploaded you will see the successful installation message as shown in Diagram 7. Diagram 7 In the top menu, locate the link Extensions. Click on Extensions, from the drop down menu that appears click on Module Manager, in order to activate the module on the frontend as shown in Diagram 8. Diagram 8 A list of modules in Module Manager is displayed. From the list of Module Name, locate the VirtueMart Product Scroller module. Click on that module to edit the configuration as shown in Diagram 9. Diagram 9 4
On click of the link VirtueMart Product Scroller module, the Module: [Edit] screen is displayed in the Browser as shown in Diagram 10. Diagram 10 Change the following configuration settings of module in this screen: Enabled: Yes Position: [desired location] (In this case the Position is Left) NOTE: You should have a position free in your template in which this module can display its output. Menu Selection: [desired main menu item when the module will display its output on the page] (In this case the Menu Selection is All). 5
NOTE: You can configure which menu items the current module display its output. Select All to display this module for all menus. Select None for not displaying in any menu Select Menu Item(s) from the list to make it visible for specific menu items. The following are the list of options provided in the Module Parameters of VirtueMart Product Scroller Module: Pre-Text: You can type some text in this field to display at the beginning of the module. Number of Products: Specify the number of products to be displayed in this scrolling products module. The default value is 5. You can also change it to 10 or 20. Featured Products Only: Selecting Yes in this field will only display the featured products in this module. The default value is No. In which order the products should be displayed?: You can choose one of the three options: Newest, Oldest, and Random. The default value is Random, however, if you want to show the products by newest to oldest or oldest to newest, then select Newest or Oldest respectively. Show Product Name?: Select Yes to display the product's name in the scrolling module. You may select No to only show pictures of products. Show Add-to-Cart Link?: Select No if you don't want to show the Add-to-Cart link with the products displayed in this module. The default value is Yes. Show Prices?: Select No if you don't want to show the product's prices in this module. The default value is Yes. Scroll Height: Specify the scroll height in pixels for this field. Scroll width: You can specify scroll width in pixels for this field. Scroll Behavior: Specify how the scroll will behave. There are three options to choose from: Scroll, Slide, and Alternate. Scroll Direction: Select a direction of scrolling from this drop-down list. The options are Scroll Up, Scroll Down, Scroll Left, and Scroll Right. Scroll Amount: Select how much scrolling will happen at a time. The default setting is 1 line, you can select 1 to 5 lines as scroll amount. Scroll delay: Specify the scroll delay. The higher the value in this field, the slower the scrolling will be. Scroll Align: Select the alignment of scrolling products. There are four options to choose from: Left Align, Right Align, Center Align, and Justify. Scroll SpaceChar: The HTML space character to use when scrolling left or right. Default is: space character [ ] Scroll SpaceChar Times: The amount of times to display the Scroll SpaceChar. 6
Scroll LineChar: The HTML line character to use when scrolling up or down. Default is: break [br] Scroll LineChar Times:The amount of times to display the Scroll LineChar. Override CSS: Overrides your sites basic default CSS elements and enables the mammemters below. This must be set to yes to use the setting below. Scroll Text Align: Align the text output of your content items. Scroll Text Weight: Adjusts the text weight. Scroll Text Size: Adjusts the text size and is measured in pixels. Scroll Text Color: The text color hex value attribute (including the # [pound sign] ) or the IE color name. Scroll BackGround Color: The background color hex value attribute (including the # [pound sign] ) or the IE color name. Scroll Margin: Adjusts the clear area around your text and is measured in pixels. Enable Cache: Select whether to Cache the content of this Module Module Class Suffix: A suffix to be applied to the css class of the module (table.moduletable), this allows individual module styling Menu Class Suffix: A suffix to be applied to the css class of the menu items Now you're done. Just click on Save/Apply, to make sure the changes are stored as shown in Diagram 11. 7
Diagram 11 8
The VirtueMart Product Scroller Module will be successfully activated (enabled) as shown in Diagram 12. Click on Preview in order to view the VirtueMart Product Scroller Module on your website. Diagram 12 The VirtueMart Product Scroller Module would be displayed on the specific location of website as shown in Diagram 13. Diagram 13 9
Uninstallation: To uninstall the VirtueMart Product Scroller Module, click Extensions -> Install/Uninstall, Click on Modules tab, a list of modules are displayed. Select the check-box adjacent to mod_productscroller and then click the Uninstall icon at the top-right hand corner as shown in Diagram 14. This will successfully uninstall the module. Diagram 14 The Uninstall Module Success message is displayed as shown in Diagram 15. Diagram 15 10