Productslider Documentation

It's always handy to have a good product documentation around. We certainly do allocate an updated documentation for Magento Productslider on this page explaining installation, integration, product implementation and configuration processes.

Productslider Installation

You will receive the Productslider extension compressed in a tar-File called productslider.tar. For installation process please follow these steps:

  1. Upload productslider.tar into the root
    directory of your Magento installation
  2. Run the command "tar -xvf productslider.tar"
  3. Login to the Admin Panel of your Magento Shop
  4. Navigate to System » Configuration » Advanced
    and make sure Velite_Productslider is enabled.


Notice that the template files get copied into the directory of the default design template (/magento/app/design/frontend/default/default). If you want to use the Productslider in a different template just copy the layout/productslider/ and template/productslider/ directories to your desired template.

 

Productslider Integration

Now it's time to integrate the Productslider into your design. You either have the possibility to integrate the extension into a CMS-Page or into an existing Template-File.

Option 1: CMS-Page integration

  1. Login to the Magento Admin Panel and navigate to CMS » Manage Pages
  2. Switch to the page on which you want to integrate the Productslider
    (e.g. "Home page" for displaying it on the store's home page)
  3. In the content-field add the following code at the line you want the Productslider to be displayed: {{block type="productslider/index" template="productslider/box.phtml"}}

Option 2: Template-File integration

  1. Figure out which XML-Configuration file in the layout directory is responsible for the template in which you want to integrate the Productslider and open it in your favourite text-editor
  2. Add this line <block type="productslider/index" name="productslider.box" as="productslider_box" template="productslider/box.phtml" />
  3. Switch to the template directory and open the desired Template-File
  4. Add this line <?php echo $this->getChildHtml('productslider_box') ?> right at the position you want the Productslider to get shown up
 

Productslider Content

Now we want to get some of your products displayed in the Productslider:

  1. Navigate to Catalog » Manage Products within the Magento Admin Panel
  2. Select a product you want to get displayed in the Productslider
  3. Switch to the tab Productslider and choose an image from the dropdown
  4. You now have the ability to set an order priority, that means the higher you set the number, the more left the product will be pushed within the slider - this field is optional; if you don't set a priority the product will be placed randomly - multiple products can have the same priority
  5. Put in an alternative product name, which will replace the standard description from your Magento database - this field is optional but recommended if your product description is pretty long
  6. After saving the product, it should be displayed in the Productslider
 

Productslider Scopes (v1.5 <)

Many customers of the Productslider 1.0 requested this feature, so we finally implemented it in version 1.5. Scoping is a way to display different products in multiple Productslider instances. Basically there are two possible ways of scoping: Target based and category based scoping. Both can also be combined.

Option 1: Target based scoping

Login to the admin-area and go to the edit-page of a product you want to get added to the slider. Go to the "Productslider" tab. Make sure you have selected an image in the "Show in Productslider" Dropdown. There is a field "Scope" as well. Fill in a name for this scope (e. g. "scope1"). You have now the ability to only show products in the Productslider which are in that specific scope. If you integrate the slider in a CMS block you do it like this:

{{block type="productslider/index" template="productslider/box.phtml" use_scope="scope1"}}

If you integrate it in your template files, this is how you do it:

<block type="productslider/index" name="productslider.box" as="productslider_box" template="productslider/box.phtml" >
<action method="setUseScope"><scope>scope1</scope></action>
</block>

Option 2: Category based scoping

The second possibilty is to show only products of the current category and its subcategories in the Productslider. Therefor the products must also be added to the slider in the Magento backend. Let's say, you have two categories Shoes and Socks - you add 3 pair of shoes and 2 pair of socks to the Productslider. Now you want to use the slider on the category page and you only want the products of the current category being displayed. In the shoes category the shoes and in the socks category the socks. You handle this in a CMS block by enabling category based scoping like this:

{{block type="productslider/index" template="productslider/box.phtml" use_category_scope="yes"}}

Or in the template:

<block type="productslider/index" name="productslider.box" as="productslider_box" template="productslider/box.phtml" >
<action method="setUseCategoryScope"><use>yes</use></action>
</block>

 Notice that the category scope won't have any effect, if you are using it on a page without category context.

Combining both

As mentioned above, you can also combine both ways of scoping:

{{block type="productslider/index" template="productslider/box.phtml" use_scope="scope1" use_category_scope="yes"}}

This would only display products from the current category which has the target "scope1" in the Productslider. The following way shows how to implement it directly into the template:

<block type="productslider/index" name="productslider.box" as="productslider_box" template="productslider/box.phtml" >
<action method="setUseCategoryScope"><use>yes</use></action>
<action method="setUseScope"><scope>scope1</scope></action>
</block>

As you see, scoping provides a great new flexibility.

 

Productslider Update

As a customer of us, you can always request product updates. Just mail us your personal licence key(s) and we will send you the latest version of Magento Productslider. Please notice, that you will have to add the products to the slider again after the update process. The "box.phtml" template file gets overwritten as well in this case. We strongly recommend to test the update on a non production-machine at first. These are the steps that describe how an update of Magento Productslider should be performed:

  1. Copy the new producstslider.tar into your Magento root directory
  2. Run the command: tar -xvf productslider.tar to overwrite the existing Productslider files
  3. Run this SQL Statement in your Database to reset the System-Attributes that Productslider makes use of:
    DELETE FROM `eav_attribute` WHERE attribute_code = 'addtoproductslider';
    DELETE FROM `eav_attribute` WHERE attribute_code = 'productsliderprio';
    DELETE FROM `eav_attribute` WHERE attribute_code = 'productslideralttext';
    DELETE FROM `eav_attribute` WHERE attribute_code = 'productsliderscope';
    DELETE FROM `core_resource` WHERE code = 'productslider_setup';
    DELETE FROM `core_config_data` WHERE path LIKE 'productslider/%'
    DELETE FROM `eav_attribute_group` WHERE attribute_group_name = 'Productslider';
  4. Login to the admin area and make sure, there is a "Productslider" tab under System -> Configuration.
  5. Navigate to System -> Cache Management and Rebuild the "Flat Catalog Product".
 

Productslider Uninstallation

This is a short description on how you can uninstall the Productslider completely from your Magento installation. First delete these Files and Folders:

  • app/code/local/Velite/Productslider/
  • js/velite/productslider/
  • app/etc/modules/Velite_Productslider.xml
  • app/design/frontend/default/default/template/productslider/
  • app/design/frontend/default/default/template/layout/productslider.xml

If you don't use any other velite extensions, you can also delete the folders js/velite/ and app/code/local/Velite/

Clear the attributes that the Productslider writes into the database by executing these SQL delete statements:

DELETE FROM `eav_attribute` WHERE attribute_code = 'addtoproductslider';
DELETE FROM `eav_attribute` WHERE attribute_code = 'productsliderprio';
DELETE FROM `eav_attribute` WHERE attribute_code = 'productslideralttext';
DELETE FROM `eav_attribute` WHERE attribute_code = 'productsliderscope';
DELETE FROM `core_resource` WHERE code = 'productslider_setup';
DELETE FROM `core_config_data` WHERE path LIKE 'productslider/%'
DELETE FROM `eav_attribute_group` WHERE attribute_group_name = 'Productslider';

Rebuild Flat Catalog Product in System -> Cache Management.

That's it. Please notice that running these SQL statements is required, otherwise you will get an error message on your product-edit page. This happens just because the Productslider installs some special system attributes that we need to get rid of.

 

Productslider Configuration

Most of the settings can be configured directly in the Magento Admin Panel. Navigate to System » Configuration » Productslider. There you will find the following options for your individual configuration:

  • Spacing
    The spacing between each image (Value must be a positive integer)
  • Margin
    The margin to the right and to the left of your product container (Value must be a positive integer)
  • Scrolling speed
    Define the scrolling speed from very slow to very fast regarding to the amount of products you display
  • Direction
    Define if the Productslider should be displayed horizontal or vertical
  • Scaling
    Defines how much an image scales when the mouse cursor rollovers (Value must be a positive number, Format is 1.x, 1 = no scaling)
  • Zoom-Icon color
    The color of the Zoom-Icon (Hex value required, Format is xxxxxx)
  • Background color
    Set a background color (Hex value required, Format is xxxxxx)
  • Watermarks (v1.5.2 <)
    If this is set to "yes", there will be no watermarks used in the images used in the slider, no matter if you have enabled watermarks in the global shop settings. You will have to clear the Image Cache and maybe also youre browser Cache after chaning this option.
  • Image width
    If vertical-direction is choosen, images will get scaled to this width (Value must be a positive number)
  • Image height
    If horizontal-direction is choosen, images will get scaled to this height (Value must be a positive number)
  • Show tooltips
    Enable or disable tooltips
  • Show Zoom-Icon
    Enable or disable Zoom-Icon
  • Fixed tooltips
    Tooltips get displayed fixed and centered at the bottom of the Productslider
  • Show price
    Display the product's price
  • Sound effect
    Enable a sound effect when moving the mouse-cursor over a product
  • Alignment
    Choose an initial position for the products within the Productslider
  • Productslider Width (v1.5 <)
    The width of the Productslider
  • Productslider Height (v1.5 <)
    The height of the Productslider
 

All these settings affect the Productslider output itself. We pass the settings into a XML-Structure to the Flash-File. If you are willing to see the XML-Output take a look at http://<your-shop-url>/index.php/productslider/xml. However, if you want to change the width and height of the Produtslider you'll have to edit the Template-File that comes with the Productslider directly. In case open /productslider/box.phtml within a text-editor of your choice and simply change the parameters passed to SWFObject. For further information take a look at the SWFObject project page.