Animated Responsive Product Slider with Ajax on category/cms/home/product pages. Mobile/touch devices support.
OverviewBack to top
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.
Responsive Product Slider adds very useful feature to Magento stores. It will show product slider you can see in the screenshots. You can change many visual and functional aspects of the slider from extension config. On initial load of the page where product slider is added several products will be loaded and then when user start to interact with it more products will be loaded via Ajax calls to the server. You can adjust how many products are retrieved per Ajax call. You can choose what product information you want to show in the slider from the extension configuration. Like every other extension we offer to our customers we use Responsive Product Slider on our own site so check it out in action.
- Easy way to enable or disable extension.
- Easy and proper way to include jQuery library if you did not include it already.
- Easy and proper way to include jQuery Mobile library if you did not include it already.
- 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 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 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 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 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 CSS file.)
- Image Resize Height [px] (This value is used for server-side resize. Actual dimension of the image can be set in CSS file.)
- Use Custom Rating Style (If set to "Yes" custom rating styles will be used. See 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 rating stars .png image to whatever you desire as long as your .png image has same dimensions and filename. If this option is set to "No" default Magento rating styles will be used. In this case requirement is that your theme is using same CSS class names for rating.)
- Scroll By Item will move slider by one product on any slider interaction. If this option is set to "No" slider will move by visible area.
- Enable Scrollbar (Show horizontal scrollbar or not.)
- Specific IDs (type in 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 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 particular category. If this option is enabled all products will be shown in the slider.
- 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
- Use "Direct package file upload" section and "Upload package file"
- Browse to the .tgz file
- Click "Upload" 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 "Run Compilation Process" button (System > Tools > Compilation)
- If you do not have jQuery included in your theme, set (System > Configuration > Apptrian Extensions > Responsive Product Slider > General > Include jQuery) option to "Yes".
- Refresh Magento cache (System > Cache Management)
If you do not know how to install extension or you wish a professional to do it for you, we offer additional Installation service for a small fee.
Our extension works out of the box. However if your theme does not include jQuery library you need to enable it in our extension. To do this log 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 included 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.
If you want to style Responsive Product Slider further, copy
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 directory
and than 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 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.
Release NotesBack to top
- Compatible with Open Source (CE) : 1.5 1.6 1.6.1 22.214.171.124 1.7 1.8 1.8.1 1.9 1.9.1 1.9.2
- Stability: Stable Build
* Fixed grouped products price