Responsive Product Slider for Magento 1 OpenMage

Increase Sales with Animated Responsive Product Slider with Ajax!

Animated Responsive Product Slider with Ajax is a must-have for every modern store. Works with every theme, just install the extension and use Magento Admin to configure it. You have completely independent configuration options for category, cms, home, and product pages. Supports mobile/touch devices. It is smart and recalculates itself depending on device resolution/orientation. SEO Friendly.

Features

General Settings

• The Easy way to enable or disable the extension.
• The Easy and proper way to include jQuery library if you did not include it already.
• The Easy and proper way to include jQuery Mobile library if you did not include it already.
• The Easy and proper way to include jQuery UI library if you did not include it already.

Category/CMS/Home/Product Page Settings

• Easy way to enable or disable Responsive Product Slider on category/cms/home/product pages.
• Animation Duration [ms] (Set how long the transition between two slides will last.)
• Autoslide Interval [ms] (If you type 0 autoslide will be disabled.)
• Parent Block where product slider will reside. Options are:
  • Page Top (after_body_start)
  • Header (top.container)
  • Top Menu (top.menu)
  • Content (content)
  • Left (left)
  • Right (right)
  • Footer (footer)
  • Footer (bottom.container)
  • Page Bottom (before_body_end)
• Position inside parent block. (Can be "Bottom (after)" and "Top (before)")
• Page Size is the number of products returned per server call (Server calls are done via Ajax).
• Sort Products (Options are: Date, Name, and Price)
• Sort Direction (Options are: Ascending and Descending)
• Info Sort Order (Order of info elements. 1=name, 2=description, 3=image, 4=sku, 5=price, 6=rating, 7=cart, 8=compare, 9=wishlist)
• Description Source (What database field to use for the product description text. Options are: "Description", "Meta Description", and "Short Description")
• Description Limit (Maximum number of characters allowed for description. (0 means no limit.) If description text is longer, it will be truncated and an ellipsis will be added at the end.)
• Image Resize Width [px] (This value is used for server-side resize. Actual dimension of the image can be set in the CSS file.)
• Image Resize Height [px] (This value is used for server-side resize. Actual dimension of the image can be set in the CSS file.)
• Use Custom Rating Style (If set to "Yes" custom rating styles will be used. See the tooltip for more information. If this option is set to "Yes" custom rating styles will be used and if you want you can easily change the rating stars .png image to whatever you desire as long as your .png image has the same dimensions and filename. If this option is set to "No" default Magento rating styles will be used. In this case, the requirement is that your theme is using the same CSS class names for rating.)
• Scroll By Item will move the slider by one product on any slider interaction. If this option is set to "No" the slider will move by visible area.
• Enable Scrollbar (Show horizontal scrollbar or not.)
• Specific IDs (type in a comma-separated list of product IDs you want to show in the slider. Example: 431,430,874,875 If you leave this field empty, all products will be shown in the slider which is a default behavior. There is no limit on the number of IDs in this comma-separated list.
• Show All Products (option is applicable only for Product Slider on category pages.) On category pages default behavior is to show only products that belong to a particular category. If this option is enabled all products will be shown in the slider.

Installation Instructions

- Log in to Magento Admin
- (Optional) Disable Magento Compiler if you are using it (System > Tools > Compilation)
- Go to System > Magento Connect > Magento Connect Manager
- If you purchased an extension on our site use the "Direct package file upload" section and the "Upload package file". Browse to the .tgz file. Click the "Upload" button.
- If you purchased an extension on Magento Marketplace use the "Paste extension key to install" and paste Access Key you get from Magento Marketplace. Click the "Install" button. Click the "Proceed" button.
- Go back to Magento Admin
- Flush Magento Cache (System > Cache Management), then log out from Magento Admin and log back in
- (Optional) Enable Magento Compiler by clicking the "Run Compilation Process" button (System > Tools > Compilation)
- If you do not have jQuery included in your theme, set the (System > Configuration > Apptrian Extensions > Responsive Product Slider > General > Include jQuery) option to "Yes".
- Refresh Magento cache (System > Cache Management), then log out from Magento Admin and log back in
- (Optional) Enable Magento Compiler by clicking the "Run Compilation Process" button (System > Tools > Compilation)

If you do not know how to install an extension or you wish a professional to do it for you, we offer additional installation service for a small fee.

Configuration

Our extension works out of the box. However, if your theme does not include the jQuery library you need to enable it in our extension. To do this log in to your Magento Admin and go to:

System > Configuration > Apptrian Extensions > Responsive Product Slider

Set System > Configuration > Apptrian Extensions > Responsive Product Slider > General > Include jQuery option to "Yes". Once again set this to "Yes" only if you did not already include jQuery library some other way. There is no need to include it twice or multiple times.

If you want to configure something differently you can.

All options are self-explanatory and usually have tooltips for additional information.

After changing options make sure you refresh your Magento cache.

Customization Instructions

If you want to style Responsive Product Slider further, copy
./skin/frontend/base/default/css/apptrian_productslider.css
to
./skin/frontend/your_design_package/your_theme/css/apptrian_productslider.css
and add your CSS styles.

Read comments in the CSS file and you will be able to make most of the changes in a very succinct way.

You can change Responsive Product Slider ajax loader animated gif by creating a directory
./skin/frontend/your_design_package/your_theme/images/apptrian/productslider/
and then copy your ajax loader gif inside it. The filename must be ajax-loader.gif.
Controls and rating stars can be substituted the same way just make sure they have the same filenames (controls.png and rating.png) and dimensions.

If you do not know how to style with CSS or you wish a professional to do it for you, we offer additional CSS Custom Style service for a small fee.