log inhelp

View
 

Product Browser

Page history last edited by Eugene 1 year, 3 months ago

  1. Product Browser
  2. Advanced Settings
    1. Examples
  3. Troubleshooting
  4. Related Articles 
  5. Screenshots

Product Browser

This is the most important Ecwid widget. It renders a full-featured shopping cart with products, categories, checkout pages etc.

 

Ecwid can display products in three modes:

  • grid (default mode for the products in categories)
  • list (default mode for search. It shows the list of products with an abstract from the product description)
  • table (useful if your products don't have thumbnails. In this mode Ecwid shows all products in the list without product images)

You can always change the default modes by altering the product browser's settings.

 

The integration code for the product browser widget is as follows: 

 

<div>
<script type="text/javascript" src="http://app.ecwid.com/script.js?1003"></script>
<script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style="); </script>
<noscript>Your browser does not support JavaScript. Please proceed to <a href="http://mdemo.ecwid.com">HTML version of Eugene's store</a></noscript>
</div>

 

 

Advanced Settings

If your product browser is installed on one page, but you have minicart/vertical categories/search box on all other pages of your site, refer to the  ecwid_ProductBrowserURL option.

 

Also please pay attention to the "categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=" line.

It is the widget's settings. Let's see its parts:

 

  • "categoriesPerRow=3" -- defines number of categories per row
  • "views=grid(3,3) list(10) table(20)" - defines the available views and their settings. If you want to remove any view, just remove the "grid(3,3)" or "list(10)" or "table(20)" text from the settings.

 

The number in braces is number of products in the particular view. I.e.:

  • grid(K,L) - K is a number of products in a column, L -- number of products in a row
  • list(M) - M is number of products on one page
  • table(N) - N is number of products on one page

 

  • "categoryView=grid" - defines the default view for products in categories. Possible values: list, grid, table
  • "searchView=list" - defines the default view for search results. Possible values: list, grid, table.
  • "style=" - it allows to add a CSS style to the layer that enclose all product browser code. Usually it isn't used. If you want to change some Ecwid elements, use custom CSS instead.

 

You can use the Settings Wizard to create the necessary settings string quickly: http://www.ecwid.com/playground/pb-settings-wizard/

 

Examples

For example if we want to hide the "table" view and use the "list" / "grid" views only; set the 'grid' view as a default one for the products and the 'list' on for the search results, we should use the following code: 

 

xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10)","categoryView=grid","searchView=list","style=");

Hide all views except for the 'list' one. The 'list' view is a default one for the products and the search results:

 

xProductBrowser("categoriesPerRow=3","views=list(10)","categoryView=list","searchView=list","style=");

Set 4 categories per row, 'grid' will have 4 products in a row and a column, the 'list' view will have 5 products per page, the 'table' view will have 50 products per page. The default view for the products is a table, for the search results -- a grid

 

xProductBrowser("categoriesPerRow=4","views=grid(4,4) views=list(5) table(50)","categoryView=table","searchView=grid","style=");

If you make changes, but don't see the product browser after that, make sure you don't have any kind of syntax errors.

 

Troubleshooting

 

I don't see new view modes("List" and "Table") in my store. How to fix this?

You cannot see them, because your store uses the old integration code. Since the view modes add some new CSS classes, they may not fit your site's CSS styles. That's why they're not enabled for all existing Ecwid users by default. In order to add them, follow these steps:

 

  • go to the Ecwid control panel
  • grab a new integration code of the product browser
  • update the existing code with a new one

 

If you use the WordPress Ecwid plugin, you don't need to update the code. Just update this plugin to the 0.3 version.

 

 

Related Articles 

 

 

Screenshots

 

PDF version