Flexslider v1.x Installation and User Manual

This is the installation and user manual for the Magento Flexslider v1.x extension created by Solide Webservices. Although great care has been taken to ensure the accuracy and completeness of this manual, Solide Webservices is unable to accept any legal responsibility concerning errors or ommisions in this document.

You are not allowed to copy or edit the content or the layout of this document. If you would like to redistribute the content of this document please contact Solide Webservices.

The zip package you have downloaded from the webshop of Solide Webservices contains a link to this manual and a .tzg file. This .tzg file will be used to install the extension from the Magento backend.

• Magento version 1.7.x or higher
• PHP version 5.2.0 or higher

With these steps you will be able to install the Magento Flexslider v1.x extension in your webshop.

1. Extract the .tzg file from the zip file you have downloaded from the webshop from Solide Webservices.
2. Disable all caches under “System > Cache Management” and make sure Magento Compilation is disabled under “System > Tools > Compilation”. This is necessary to avoid any caching problems after the installation of an extension.
3. Go to http://www.yourdomain.com/downloader/ where yourdomain.com is the URL where your Magento installation is located and log into your Magento Connect Manager with your admin credentials. If you have a previous version of the Flexslider installed and you are upgrading to a newer version please follow the de-installation steps from the next chapter first. This will remove the old extension files but wil keep your data intact.
4. Select the .tzg file you have extracted in step one in the browse field under the option “Direct package file upload” as shown below and then click the upload button.
5. Wait until the upload and installation process is finished and click the refresh button below the command line textarea afterwards.
6. Go the http://www.yourdomain.com/admin/ where yourdomain.com is the URL where your Magento installation is located. If you are already logged in to the backend please log out and login again as this will prevent you from getting a 404 error on the extension pages due to permissions that have not been set for the logged in user. After logging in you can reenable your cache settings under “System > Cache Management” and if used reenable Magento Compilation under “System > Tools > Compilation”. The installation or upgrade is now completed. If you are upgrading dont forget to re-enable the extension under “System > Configuration > Advanced”. You can view the extension under “CMS > Flexslider”.

With these steps you will be able to remove this extension from your webshop. These steps are also needed when upgrading to a newer version.

1. Disable the extension under “System > Configuration > Advanced”. On this page you will find the extension and you can disable it.
2. Go to http://www.yourdomain.com/downloader/ where yourdomain.com is the URL where your Magento installation is located and log into your Magento Connect Manager with your admin credentials.
3. Scroll down to the list of existing extensions and select the “Uninstall” option next to the extension as shown below. Then click the “Commit Changes” button at the end of the list.
4. Click the refresh button after the de-installation process has finished. The extension is now uninstalled. In case you are upgrading you can continue the steps in the previous chapter.

The general extension settings for the Flexslider extension can be found through the Magento backend menu under “CMS > Flexslider > Settings”.

In the advanced settings you are able to tweak the extension to optimize it based on your needs. The position settings can disable/enable positions for the slider groups. Enabled postions will add extra database queries to the frontend. Positions that arent in use should be disabled for optimal performance.

Magento Flexslider extension allows you to add sliders that consist of a group of images and/or videos. Each group has it's own configuration like effect settings and a selection of pages and/or categories where the slider group should be displayed. This chapter explains how to add, edit and delete a slider group.

To add, edit or delete a slider group select the menu option “CMS > Flexslider > Manage Groups”. A grid is loaded with the existing slider groups. To add a new slider group click the add button, to edit an existing slider group select the group you want to edit from the grid. If you want to delete a group select the delete action from selectbox in the row of the group you want to delete.

You can also delete a selection of slider groups with a mass-change action by selecting these sliders and choosing the delete action from the actionbox in the grid header. With this same actionbox you can also mass-change the status of the selected sliders and set the selected slider groups as enabled of disabled at once. When adding or editing a slider group these options are available.

On this tab you can select the CMS pages on which to display the slider group you are currently adding or editing. When adding the slider through XML Layout update or template tage don't select any pages here.

On this tab you can select the catalog categories on which to display the slider group you are currently adding or editing. When adding the slider through XML Layout update or template tag don't select any categories here.

On this tab you can select the products on which to display the slider group you are currently adding or editing. Due the limitations of Magento it is only possible to add a slider before or after a product on the product page.

This tab is only shown when editing an existing slider group. The tab shows all slides that are added to this group as reference information. Editing the slides is done through the slide management configuration.

This tab is only shown when editing an existing slider group. The tab gives information on how to add a slider to a page, category or static block using XML Layout Update code or template tags. This will give you even more flexibility on where to display sliders in your webshop.

This chapter explains how to manage slides. After adding a slider group you can now add slides to this slider group. Each slider group can have unlimited slides which are managed from the menu option “CMS > Flexslider > Manage Slides”. Here a grid is loaded containing the existing slides.

To add a new slide click the add button, to edit an existing slide select the slide you want to edit from the grid. If you want to delete a slide select the delete action from selectbox in the row of the group you want to delete.

You can also delete a selection of slides with a mass-change action by selecting these slides and choosing the delete action from the actionbox in the grid header. With this same actionbox you can also mass-change the status of the selected slides and set the selected slides as enabled of disabled at once. When adding or editing a slide the following options are available.

For more flexibility on where to position a slider group you can use a Layout XML update or template tag to add a slider group to any page or static block. If you are unfamiliar with the Magento XML Layout Update functionality you can catch up on some reading here .

After adding a slider group a new tab becomes available when editing a slider group called “Use Code Inserts”. Selecting this tab will bring up the following screen. The “Information” block on this tab explains the functionality in further detail.

The use of the CMS template tag is pretty straight forward. Just copy the code and paste in inside the content editor of a CMS page or static block where you want to add the slider.

The template code can be copied into a phtml template file of your current template.

The XML code contains a couple of parameters that allow you to position the slider group exactly where you want as well. These parameters are explained below.

<reference name="content">
<block type="flexslider/view" name="flexslider_homepage" template="flexslider/template.phtml">
<action method="setCode"><code>homepage</ code></action>
<action method="setStartSlideId"><start_slide_id>1</start_slide_id></action>
</block>
</reference>

Follow these steps to add a slider group with the use of the XML Layout Update functionality.

1. Copy the XML code to the clipboard from the tab for code inserts;
2. Open the CMS page or category where you want to add the slider group;
3. For CMS pages go to the tab “Design” and paste the code in the “Layout Update XML” textarea;
4. For categories go to the tab “Custom Design” from the category management page and paste the code in the “Custom Layout Update” textarea;
5. Edit the parameters (as explained before) to your needs to position the slider group exactly where you like and save the CMS page or category, save it and you are done.

In this section you will find answer to common issues.

This is a common issue when installing Magento extensions. It is caused because the permission for using the new extension havent been set for the currently logged in admin user. The solution is to logout and login again in the admin backend.

First of all, check your group settings to see if the group is enabled and the page or category where you want the slider group to show up is actually selected.

If you have configured the slider group correctly but it still isnt showing up then the issue is generally caused by a javascript jQuery conflict with another extension or your theme. Most extensions and premium themes come with their own jQuery library and some extensions still use outdated versions that can conflict with the Magento Flexslider extension. Your first option would be to disable the loading of jQuery from the general settings. If this does not fix the issue you could experiment with the version of jQuery that is loaded through the Magento Flexslider extension to see if there is an older version of jQuery that doesnt cause any conflicts. These is a configuration setting that can also be found under the general settings of the Magento Flexslider extension. As a last resort you could also try to locate the extension that causes a conflict by disabling these extensions through the Magento backend under “Configuration > Advanced > Advanced”.

Unfortunately there is no straight forward solution to solve jQuery conflicts. If these actions did not fix the issue and you lack the technical skills to find the cause of the conflict yourself feel free to contact Solide Webservices and we will try to solve this for you free of charge.

This is caused by a javascript jQuery conflict between the Magento Flexslider extension and another extension and/or your theme. Most extensions and premium themes come with their own jQuery library and some extensions still use outdated versions that can conflict with the Magento Flexslider extension. Your first option would be to disable the loading of jQuery from the general settings. If this does not fix the issue you could experiment with the version of jQuery that is loaded through the Magento Flexslider extension to see if there is an older version of jQuery that doesnt cause any conflicts. These is a configuration setting that can also be found under the general settings of the Magento Flexslider extension. As a last resort you could also try to locate the extension that causes a conflict by disabling these extensions through the Magento backend under “Configuration > Advanced > Advanced”.

Unfortunately there is no straight forward solution to solve jQuery conflicts. If these actions did not fix the issue and you lack the technical skills to find the cause of the conflict yourself feel free to contact Solide Webservices and we will try to solve this for you free of charge.