Product List

So you are about to grab Magento extension JM Product List for your eCommerce Magento store. JM Product List is a handy Magento extension that allows you to show off the selected products in a tab, a slider or a block. You can also label your product as Latest, Feature, Best Buy, Most Viewed, Most Reviewed or Top Rated at ease.

This documentation will guide you step by step to install and configure JM Product List. Let’s get started.

Once purchased particular Magento themes, you can download JM Product List along with this. Otherwise, download JM Product List and then extract the downloaded package.

To install, kindly follow the Ubertheme Magento extension user guide.

Provided that JM Product List is installed properly, follow these steps to configure this for your eCommerce Magento site.

1. General settings

1. Log in to your Admin Panel.

2. Navigate to JM Products.

3. Add value for these following parameters as per screenshot:

  • Enabled : select to publish/unpublish the item labels.
  • Title : fill in the title of product list.
  • Mode : choose the criteria to display product list, including: Latest/Best Buy/Most Viewed/Most Reviewed/Top Rated/Featured Product.
  • Select Categories: : Select category on Box
  • Display product as random : tick if you want to display products randomly.
  • Description Max Length : add a numeric value to define how many words in the product description that you want to display; otherwise, add value = 0.

2. Featured Product settings

1. To use Featured Product mode, you need to create a new attribute named “featured” at first. Navigate to Catalog >> Attributes >> Manage Attributes >> Add New Attribute.

2. Create “featured” attribute.

3. Add the attribute to default feature set. Navigate to Catalog >> Attributes >> Manage Attributes Sets >> Product group and then enter “Edit attribute set of Product group”.

4. Drag and drop “featured” attribute to the attribute group you want.

5. Navigate to Catalog >> Manage Products >> select product >> add product with featured attribute = YES.

#

6. On Module configuration page, choose Mode = Featured Product, so products with “Featured” attribute will be displayed. Image below is demo on Megamenu in Sporty

3. Desktop Settings

In the Desktop Settings section, there are parameters as below.

Parameters explanation:

    • Enabled Ajax Load More : set “Yes” to display products with Ajax loading effect.
    • Enabled Accordion Slider : set “Yes” to display the list in the slider with accordion effect.

Note : Accordion Slider param only works for JM Gamestore theme.

  • Width of thumbnail : define the width of product thumbnails displayed.
  • Height of thumbnail : define the height of product thumbnails displayed.
  • No of products : define the quantity of products displayed.
  • No of products per page : define the quantity products displayed within one page.
  • No of products per row : define the quantity of product displayed within one row or column.

4. Tablet Settings

In the Tablet Settings section, there are parameters as below.

Parameters explanation:

  • Enabled Ajax Load More : set “Yes” to display products with Ajax loading effect.
  • No of products : define the quantity of products displayed.
  • No of products per page : define the quantity products displayed within one page.
  • No of products per row on tablet landscape : define the quantity of product displayed within one row or column.
  •  No of products per row on tablet portrait : define the quantity of product displayed within one row or column on portrait mode view.

5. Mobile Settings

In the Mobile Settings section, there are parameters as below.

Parameters explanation:

  • Enabled Ajax Load More : set “Yes” to display products with Ajax loading effect.
  • No of products : define the quantity of products displayed.
  • No of products per page : define the quantity products displayed within one page.
  • No of products per row on mobile landscape : define the quantity of product displayed within one row or column.
  • No of products per row on mobile portrait : define the quantity of product displayed within one row or column on mobile mode view.

6. Push module to front-end

1. Navigate to CMS >> Manage page >> select page e.g. Homepage.

2. Fill in Content parameter with the following syntax.

{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="Popular products" mode="top_rated" quanlity="1" perrow="1" width="180" height="180" max="300" catsid="13" }}

Front-end appearance then:

3. Tip : You can also directly declare parameters of JM Product List in Content parameter.

For example, to display latest products, you can declare mode and title parameters as follows:

{{block type="joomlart_jmproducts/list" title="Latest product" name="home.jmproducts.list" mode="latest"}}

The parameters that are declared directly here will overwrite those pre-defined in the module configuration panel in your admin. See how it changes:

Note : Direct declaration will be helpful to create multi feeds.

For example, in order to display two product lists including latest products list and top rated products list, you can declare as below:

{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="Latest products" mode="latest"}}
{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="Top Rated products" mode="top_rated"}}

Front-end appearance:

On Product list extension on version 1.3.2 and earlier, you can add Product List Magento extension on static blocks. Follow steps as follows.
 {{block type="joomlart_jmproducts/list" name="category.jmproducts.list" headtitle="Popular Books" mode="latest" quanlity="2" perrow="2" width="150" height="225" template="joomlart/jmproducts/twoproduct.phtml"}}

lastest product

    • name : defines the block with a different name from others.
    • template : defines the template (.phtml files which is located at app\design\frontend\default\{your theme name}\template\joomlart\jmproducts).
    • headtitle : defines the module’s title. Valid value : text.
    • mode : helps to enable the products filter with values as below :
      • latest -- Latest products created
      • best_buy -- Best Seller products
      • most_viewed -- Most Viewed products
      • most_reviewed -- Most Reviewed products
      • top_rated -- Top Rated products
      • featured -- Featured products
    • Param [catsid] defines the Category ID, which must exist under the Categories of your store.

CategoryID

  • width : defines the product image width. Valid value : number.
  • height : defines the product image height. Valid value : number.
  • random : displays products in the list randomly. Valid value : yes / no.
  • ajaxloadmore : enables Ajax for loading more. Valid value : yes / no.
  • accordionslider : (JM Gamestore only) enables the slider with accordion effect. Valid value : yes / no.
  • quanlity : defines the number of products displayed. Valid value : number.
  • quanlityperpage : defines the number of products displayed per page. Valid value : number.
  • perrow : defines the number of products displayed per row. Valid value : number.
On Product list extension on version 1.3.3 and later, you can add Product List Magento extension on static blocks. Follow steps as follows.
 {{block type="joomlart_jmproducts/list" title="New From The Shop" name="home.jmproducts.list" mode="latest"}}

lastest product

    • name : defines the block with a different name from others.
    • template : defines the template (.phtml files which is located at app\design\frontend\default\{your theme name}\template\joomlart\jmproducts).
    • title : defines the module’s title. Valid value : text.
    • show : Show or hide the prodcut list. Valid value : 1 to show and 0 to hide
    • mode : helps to enable the products filter with values as below :
      • latest -- Latest products created
      • best_buy -- Best Seller products
      • most_viewed -- Most Viewed products
      • most_reviewed -- Most Reviewed products
      • top_rated -- Top Rated products
      • featured -- Featured products
    • Param [category_ids] defines the Category ID, which must exist under the Categories of your store.

CategoryID

    • productsid : show only the product with specified ID. Valid value : number.
    • width : defines the product image width. Valid value : number.
    • width : defines the product image width. Valid value : number.
    • height : defines the product image height. Valid value : number.
    • random : displays products in the list randomly. Valid value : 1 to turn on and 0 to turn off
    • height : defines the product image height. Valid value : number.
    • max : maximum characters of product description will be displayed
    • ajaxloadmore : enables Ajax for loading more. Valid value : 1 to turn on and 0 to turn off

To enable ajax load more on static block, please insert code below

 
	{{block  type="joomlart_jmproducts/list" name="jmproducts.ajax.loadmore" title="JM Products with ajax load more" ajaxloadmore=1}}

To enable ajax load more on layout, please insert code below

 
	<block type="joomlart_jmproducts/list" name="jmproducts.list1">
    <action method="setData">
        <name>title</name>
        <value>Jm Products </value>
    </action>
    <action method="setData">
    • ajaxloadmoremobile : enables Ajax for loading more on mobile devices. Valid value : 1 to turn on and 0 to turn off
    • ajaxloadmoretable : enables Ajax for loading more on tablet devices. Valid value : 1 to turn on and 0 to turn off
    • accordionslider : enables the slider with accordion effect. Valid value : 1 to turn on and 0 to turn off

To enable Accordion slider on static block, please add code below:

 
	{{block  type="joomlart_jmproducts/list" name="jmproducts.accordion" title="JM Products With Accordion Slider" accordionslider=1 quanlity=5 quanlityperpage=5 perrow=5 max=150}}

To enable Accordion slider on layout, please add code below:

 
	<block type="joomlart_jmproducts/list" name="jmproducts.accordion">
    <action method="setData">
        <name>title</name>
        <value>Jm Products with accordion slider </value>
    </action>
    <action method="setData">
        <name>accordionslider</name>
        <value>1</value>
    </action>
    </block>
  • qty : defines the number of products displayed on desktop. Valid value : number.
  • qtytable : defines the number of products displayed on tablet landscape. Valid value : number.
  • qtytableportrait : defines the number of products displayed on tablet portrait. Valid value : number.
  • qtymobile : defines the number of products displayed on mobile landscape. Valid value : number.
  • qtymobileportrait : defines the number of products displayed on mobile portrait. Valid value : number.
  • qtyperpage : defines the number of products displayed per page on desktop. Valid value : number.
  • qtyperpagetable : defines the number of products displayed per page on tablet. Valid value : number.
  • qtyperpagemobile : defines the number of products displayed per page on mobile. Valid value : number.
  • perrow : defines the number of products displayed per row on desktop. Valid value : number.
  • perrowtablet : defines the number of products displayed per row on tablet devices. Valid value : number
  • perrowmobile : defines the number of products displayed per row on mobile devices. Valid value : number