How To Set Up Pronav In Magento (For Web Users)

Transcription

1 ProNav Magento User Manual Overview ProNav from Brandammo Commerce works seamlessly with Magento Static blocks to deliver a fully customizable mega drop-down navigation for your online store. Browser Compatibility ProNav has been tested and is fully compatible with the following browsers: Mozilla Firefox, Microsoft Internet Explorer 7 & 8, Apple Safari and Google Chrome. Features ProNav allows you to configure the following aspects of your drop down menu (Configuration options for ProNav are found in your Magento Admin Panel within System > Menu > ProNav): Sensitivity The sensitivity threshold of the drop-down on hover event (must be 1 or higher, default is 2). Interval Milliseconds for mouse over polling interval (default is 50). Time Out Milliseconds delay before mouse out events (default is 200). Fade In Milliseconds for fade in animation event. Fade Out Milliseconds for fade-out animation event. Quick Tip For a fast drop down, set configuration option to the following values: Sensitivity: 1 Interval: 50 Time Out: 0 Fade In: 0 Fade Out: 0

2 Installation Guide IMPORTANT: Before installing any Magento Extension always make a backup of your Magento web directories and database. Also make sure you clear your store cache (either under var/cache or in Magento Admin Panel cache management section). If you are using any other extension that replaces the default top navigation of your Magento store, make sure you disable it before installation, as this may conflict with ProNav. ProNav installation 1. Via SSH (The easiest way to install ProNav extension is via SSH) Upload the.tar archive you received with your order where you also have your Magento installation. In SSH terminal type the following command: Tar xvf pronav tar. After your order, you should have received your extension package (pronav tar) and license key. Upload pronavlicense.lic anywhere on your server. A good location is: app/code/local/pronav 2. Via FTP Untar pronav tar locally on your machine. If your FTP client support Merge operation you can simply upload all the files at once, otherwise simply upload extension files by mirroring the file structure in extracted archive. Known Installation Issues 1. jquery conflicts ProNav uses jquery library for its functionality and it might conflict with Prototype (which is included by default in Magento) as well as with other extensions that use jquery. To avoid conflicts with Prototype, ProNav declares the following: var jq = jquery.noconflict(); You have to make sure this does not conflict with other calls to noconflict() method and that jq variable is in scope when ProNav extension is loaded. 2. jquery inclusions If you are already including jquery library, then you won t need to include the library again. To avoid reloading it, just open the XML file found at the following location: app/design/frontend/default/default/layout/pronav.xml

3 Find the following block of code: <action method= addjs > <js>pronav/jquery js</js> </action> and change it to: <!--<action method= addjs > <js>pronav/jquery js</js> </action> --> To Create Navigation Items 1. Login to Magento Admin Panel 2. Hover the CMS navigation. You should see the ProNav item as shown: 3. Clicking the ProNav item will give you access to the extension grid where you can add/edit/delete top-level items for your mega-drop down menu. 4. By clicking the Add Item button you ll be presented with the following:

4 Name: Top-Level item string. This appears in front-end (e.g Home) URL Key (optional): If left empty item is not a hyperlink. If given the value of / hyperlink is to home page, and if an URL is entered link will be in the absolute format The http protocol and base URL is automatically added, so don t include it here. Item Index: (integer) Allows for top-level items ordering. Item CSS ID: CSS ID for top-level item Item CSS Class: CSS class for top-level item Link CSS ID: CSS ID for top-level item hyperlink Link CSS Class: CSS class for top-level item hyperlink Static Block: Static block for navigation drop-down Status: Enabled/Disabled ProNav Static Blocks To create the drop down part of your ProNav, access the Static Blocks section (found in Magento Admin Panel CSS menu). Click Add New Block button to create a new static block. New Static Block form in Magento IMPORTANT: You should always prefix the title with the string Pronav. This is required for a static block to show up in Static Block select set. Identifier: A unique string to identify the new block. Status: Enabled/Disabled Content: HTML for static block. Check below for default structure to use. Default HTML for a drop-down:

5 <div class= row > <ul> <li>item</li> </ul> <!-- LIST is floated to the left --> <ul> <li>item</li> </ul> </div> IMPORTANT: Always separate rows by defining a div with a class of row. ProNav automatically calculates the width of a drop down by adding up the width of each unordered list contained in a row. Styling ProNav You can style any aspect of ProNav by editing file found at: skin/default/default/pronav/css/pronav.default.css