Big Day Release: Magento Ajax Toolbar

August 5, 2014 Andrei Danilchyk Magento
Big Day Release: Magento Ajax Toolbar

Magento Ajax Toolbar is an extension which allows a number of must-have UI features for your category page. One is Infinite Scroll (with or without a specific button) lets our customers see all the products in a category without reloading the page. It also provides you with a “go to top” button to quickly navigate back to the top menu. Sorting (list/grid, price based, etc) also reloads via Ajax allowing for experience uninterrupted by reloads.

Key features:

  • All results are available to view on the same page (infinite scroll);
  • New results are uploaded via Ajax, which does not cause page reload;
  • Set the module to upload results either automatically or by clicking the button;
  • Convenient Back button which brings you back to the top of the page;
  • Sorting and changing the catalog style (grid/list) is done via Ajax.

One of the main usability problems that customers can often encounter in any Internet store when looking through a list of products or search results is that they have to constantly go from one page to another, leave and load new pages which makes the process quite inconvenient and not so user friendly.

Ajax Toolbar module will help you solve this problem. Now your customers will no longer need to load plenty of pages to find what they want – all results will be displayed on one and the same page, new results will be automatically uploaded to the same page via Ajax, without causing page reload.  This will incredibly improve browsing experience and usability of your store, which of course will also improve the general attitude of customers.

How to Configure

To access module settings go to your Magento admin panel to System -> Configuration -> Ajax Toolbar. The module contains the following preferences:

GENERAL SETTINGS

  • Enable for frontend – select Enable to switch on the module;
  • Autopager – here you select whether the module should upload new items automatically as soon as the user reaches the end of the page or only when the user clicks the button(manual mode);
  • Back Button – the button will be added to every page, and it will immediately bring you back to the beginning of the page when clicked.

screen-1Ajax Toolbar

AUTOPAGER SETTINGS

  • More Products text – here you can specify the text, which will be displayed on the button, that will load more products (appears in manual mode).

screen-2Ajax Toolbar

BACK BUTTON SETTINGS

  • Image – upload image, which will be used for the Back button;
  • Width/height – specify button dimensions;
  • Align to – choose the location of the Back button;
  • Vertical/Horizontal – specify the position of the button (in %).

screen-3Ajax Toolbar

  • Lifetime – specify cache lifetime;

screen-4Ajax Toolbar

The module uses default Magento cache to speed up the loading of blocks. You can access and manage module cache settings under the default Magento section System – Cache Management:

screen-5Ajax Toolbar

These are all settings which you will need to configure to make the module work. Once the settings are ready, click the Save button and the extension will immediately start functioning on your store.

How to Use

Now let’s see how the module works on the frontend.

Once the extension is installed and configured, your customers will no longer need to go from one page to another to see more results – new results will be uploaded to the same page by Ajax, either automatically or when users click the button.

screen-6Ajax Toolbar

For better navigation, the page will contain the Back button, which can immediately bring the user to the beginning of the page.

screen-7Ajax Toolbar

Default toolbar becomes Ajax-based too, so you can easily change the view and the sorting order without reloading the whole page.

screen-8Ajax Toolbar



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *