Overview

With this module, you must show carousel any products on a CMS page by insert widget or using XML layout update to show in any page. You can choose new products, most view products or custom products.

Backend

  • Created / edit unlimit block.
  • Set type of block: new products, most view products or custom products.
  • Set block width, block height, image width, image height, number of product to show, scroll one a time.
  • Option to show attributes of product: product title, thumbnail, price, add to cart button, add to link, product review and short description.
  • 8 skin of navigation.
  • Customize block title color, background color and text color.
  • Option to load Jquery api.
  • Set store view.

Frontend

  • Update XML layout with block id and PHTML template to display.
  • Using widget insert into a CMS page.

Installation

Install from Magento Connect Manager

  1. Step 1: Go to Magento Connect Manager from admin panel:

  2. Step 2: Login to Magento Connect Manager

  3. Step 3: Select direct package file upload
    Choose file MagPassion_Productcarousel-1.1.0.tgz from your local computer

  4. Step 4: Click button Install / Upload to download / upload and install that module
  5. Step 5: View current processing

Install via FTP upload

Unzip the theme package MagPassion_Productcarousel-1.1.0.tgz by your usual software(such as winrar, winzip v..v) (You could not care about package.xml because it only unsing for above method)

There are three directories with name is app, js and skin. These directories wered structured form by Magento Directories Structrure.

You only do upload it via ftp client to your root website magento directory which have same structured.

After upload successful, the actions installation done here. Sometime, you must be Clear Cache to run this module successful.

Create carousel

Go to Magento Admin.
Access "Product carousel > Product Carousel" on the top menu navigation.

Click to button "Add Product Carousel" to create new or click the row list to edit one.

Basic option
Option Value
Block Title Input the block title that you want to display.
Type Choose the type products that you want to get collection.
  1. New product: Collection product has New from date and New to date
  2. Most viewed: Colelction product that has most viewed by Magento Statitics.
  3. Custom: Manunal select product that you want
Category Filter product by the category. Apply filter for "New product" and "Most viewed" type.
Number of products to get Input the number product that you want to carousel
Enable Enable or disable this product carousel
Carousel setting
Option Value
Show block title Show/hidden block title
Block title color Picker color for block title text.
Block title background color Picker the background color for block title.
Show navigator Navigator show on top bar, or midde of the carousel slider block.
Navigator Skin Choose the available skin for navigator.
Show pagination Show or hide the bottom pagination
Auto height Enable for the carousel item have differen height.
Slide speed Set time between slide step.
Pagination speed Set time between two page step.
Rewind speed Set timer when slider rewind.
Direction Horizontal/vertical mode
Number of products to show Setting only if you use vertical mode. In this mode, carosel have only 1 column.
Auto play Enable auto play function if input the number milisecond of auto play between two slide.
Stop on hover Stop auto play when mouse over the carousel block.
Swipe on touch Enable or disable swipe on the touch devices(such as iphone, ipad..).
Swipe on mouse Enable or disable swipe using mouse drag slide.
Custom config Input the custom variables of carousel javascript.
Product display options
Option Value
Show product image Option show product image thumbnail or none.
Image width Input the width of image thumbnail.
Image Height Input the height of image thumbnail.
Show product name Option show the product name
Show product short description Show the short description of product. Auto truncate string to 200 characters.
Show product price Option show the price of product. Using magento get price default function.
Show add to cart button Show add to cart link product on the carousel.
Show product add to link Show add to compare - add to wishlist link.
Show quickview product Embed magento quick view product extension by us to this carousel.
Store view
Option Value
Store view Multi select the store view that the product carousel can display.
Associated products
Choose the products that you want display in the carousel. The list of product selected only using for the "Custome products" mode in the param "Basic option > Type"

Front-end result display

Display the product carousel by widget

This extension using "Magento widget standard" so you can display it everywhere you want.

Text area support magento widget

  • CMS Page.
  • Static block
  • Textarea field such as: Category description,Product text area fied...

Magento block at theme: Using widget instance for insert product carousel to Left block, right block, footer, main conntent or custom block that your theme define.

Insert to text area

Using WYWIWYG

  1. Click to the Widget insert icon
  2. Choose widget type: Product carousel view.
  3. Select the product carousel that you want to insert.

Using widget short code

add this short code

{{widget type="productcarousel/productcarousel_widget_view" productcarousel_id="1"}}

Change the productcarousel_id = "1" param to the carousel id that you want to insert.

Insert to theme block

  1. Go to "CMS > Widget" at the menu navigation.
  2. Click button "Add new widget instance" Type: Product carousel wiew.
    Design Package/Theme: Your current theme.
    Continue to the next step.
  3. Setting some parameter for widget instance.

Global configuration

jQuery load library

You can set it to no if your website loaded jQUery library before. This option can help you not conflict javascript cause by load jQuery duplicate.

Change Upsell to carousel

Our extension can override the default upsell list product to carousel style. You can enable it by change configuration to "Yes".