UX-Pack Documentation

Activation Key - here enter your activation key, which was sent with installation package.

Note: Activation key is related to your domain. If you use it for differ domain the activation key will not be accepted.

Note: Activation key is related to Magento version. If you use key for CE version on EE version or vice versa the activation key will not be accepted.

Enabled AJAX loading products - enable or disable AJAX loading. This is the main settings of this module. If you choose "No" module will be deactivated.

Note: You can activate this module only if you entered the correct activation key.

Enabled endless pages - enable or disable "endless page system", where products page are continously loaded when user scrolls page in his browser. It can be enabled only if previous settings is set to "Yes".

Note: If you want to use endless page for grid view mode then set the number of products per page as integer multiple by number of columns (3,6,9 for 3 columns), otherwise there will appear holes (empty blocks). The number of columns you can change at "System/Configuration/Catalog/Frontend"

AJAX action - internally identification of "category view" action. For most cases there should be set to "catalog_category_view". Change this only if you use some module 3rd party which rewrites standard "Catalog_Category" controller.

AJAX search action - internally identification of "search result" action. For most cases there should be set to "catalogsearch_result_index". Change it only if you use some module 3rd party which rewrites standard "CatalogSearch_Result" controller.

AJAX advanced search action - internally identification of "advanced search result" action. For most cases there should be set to "catalogsearch_advanced_result". Change it only if you use some module 3rd party which rewrites standard "CatalogSearch_Advanced" controller.

AJAX blocks - the list of the loaded blocks by AJAX. It says which block from the layout will be placed into which DOM element in HTML. This settings has following format:

layout name1 => css_selector1;layout_name2 => css_selector2 ...

Remember these rules:

Default settings for basic design template of CE edition: "catalog.leftnav=>div.block-layered-nav;catalogsearch.leftnav=>div.block-la yered-nav;product_list=>div.category-products;search_result_list=>div.categ ory-products"

Default settings for basic design template of EE edition: "enterprisecatalog.leftnav=>div.block-layered-nav;enterprisesearch.leftnav= >div.block-layered-nav;product_list=>!div.category-view;search_result_list= >!div.results-view"

CSS selectors of control elements - defineds the list of elements which can intiate AJAX loading.

There is supported the events `click` on elements <A> and the events `change` on elements <SELECT>. If user click on <A> then the list of products will be loaded from URL defined by HREF attribute of it. If user change the value of <SELECT> product list will be loaded from URL defined by VALUE attribute of choosen value.

Default settings for basic design template of CE edition: "div.block-layered-nav a,div.category-products div.toolbar a,div.category-p roducts div.toolbar select"

Default settings for basic design template of EE edition: "div.block-layered-nav a,div.toolbar a,div.toolbar select"

Layout names of main block - defines which blocks represents block with product list. The values separate by comma. Default settings is "product_list,search_result_list". Change it only if you are using other layout names for these blocks.

Note if you change this value do not forget to change also AJAX blocks setting in previous section.

CSS selector of main block - defines the DOM element with product list. Default settings is "div.category-products"

Relative level to activate AJAX loading (%) - defines when should be loaded the next page. If you choose 100 then next page will be loaded if bottom line (100% of height) of the product list block is visible (it appears in view rectangle of browser). Default settings is 66.

CSS selector of container element (grid), Target position in container (grid) - defines the target position of product list in view mode GRID. First value defines DOM element, the second value defines position. For example settings "div.products" and "Bottom" says: "Place product list in view mode GRID at the bottom of element <DIV> with class "products". This controls WHERE will be block placed. The place depends on your design templage.

Default settings for basic design template of CE edition:

"div.toolbar-bottom" and "Before"

Default settings for basic design template of EE edition:

"div.category-products" and "Bottom"

Before HTML (grid), Start substring (grid), Start substring type (grid), End substring (grid), End substring type (grid), After HTML (grid) - previous settings means WHERE will be block placed, this settings means WHAT will be placed. Suppose your template for product list in view mode GRID would looks like this:

  <p>My Products</p>
  <ul class="product-list">
    <li class="product">
      <span>Product 1</span>
      <span>100.00</span>
    </li>
    <li class="product">
      <span>Product 2</span>
      <span>400.00</span>
    </li>
    <li class="product">
      <span>Product 3</span>
      <span>400.00</span>
    </li>
    <li class="product">
      <span>Product 4</span>
      <span>400.00</span>
    </li>
  </ul>
  <p>This was our products</p>
 

We need place only the list of <LI> elements, not <UL> wrapper and <P> around them. Therefore we set "Start substring" to "<li" and "End substring" to "</li>". This extracts from your template all between first occurence "<li" and last occurence "</li>".

The settings "Start substring type" and "End substring type" determines whether HTML includes border substrings or not.

By settings "Before HTML" and "After HTML" you can add some HTML before or after product list HTML. It is good for placing for example some Java Scripts does some corrections (adding CSS class first/last, etc.).

Default settings for basic design template of CE and EE edition:

CSS selector of container element (list) AND Target position in container (list) - this is the same meaning also "CSS selector of container element (grid)" and "Target position in container (grid)" but for view mode LIST.

Default settings for basic design template of CE and EE edition:

"ol#products-list" and "Bottom"

Before HTML (list), Start substring (list), Start substring type (list), End substring (list), End substring type (list), After HTML (list) - this is the same meaning also in previous case but for view mode LIST.

Default settings for basic design template of CE and EE edition:

Layout names of blocks to remove - defines blocks which will not be generated to next page. There is need to remove for example "Toolbar Block", because on page must be only once at the start page and once the bottom page, not between pages. The default settings is "product_list_toolbar".

CSS selector of elements to hide - defines DOM elements which will be hidden after page loading. There is need to hide the pager and the select for choosing the number of page at page (these elemenst has no sense for "endless page"). The default value is "div.limiter,div.pages".

Products counters - defines the way to show information about the number of displayed products and total number of products. This settings has follow format:

css_selecto1=>format1;css_selector2=>format2;

For example "span.counter=>There is %n / %t" means that into <SPAN> element with class "counter" will be displayed text "There is x / y", where x is the number of currently displayed products and y is number of total products.