Webinse Ajax Catalog

Extension provides automatic Ajax loading catalog content without reloading page, which increases speed of loading items to catalog. You can choose one of 2 loading modes, and additional useful features will make your visitors staying at the site long and pleasant.

Overview

Webinse Ajax Catalog extension provides automatic Ajax loading catalog content without reloading page, which in many times increases speed of loading items to catalog. You can choose one of 2 loading modes you like, and additional useful features will make your visitors staying at the site long and pleasant. 

When user gets to the end of current content, extension begins to load next portion of content and while processing shows user loading animation. When the user clicks on some product, Ajax catalog will remember position and bring back directly to the same place after user watched product details. 

The button "up" and “down” will make it convenient to navigate through the catalog.  Floating toolbar will make its features available everywhere through catalog.

How to install the extension

Follow to our Magento 2 Extension Installation Guide

Features 

• Two types of content loading

• Full customization of all displayed elements

• “Up” button that will take you to the top of the page after long scrolling

• “Down” button will back you to place where “up” button was clicked

• Floating toolbar

• After viewing product details, return to the spot you stopped in the catalog, no need to scroll through catalog again.

Administration & Configuration

All features and user interfaces are fully configurable, require little time to install and can be controlled from the Magento Administration Panel.

Version and Compatibility

Ajax Catalog Extension version 1.0.0 is compatible with Magento Community Edition version 2.0.0-2.1.7 and guaranteed to work with Magento default theme.

Ajax Catalog Configuration 

Webinse Ajax Catalog Tab

The settings in this section define all configurations of the Ajax Catalog integration on your Magento e-Commerce site.

General Settings Section

Spinner Settings Section

Load Button Settings Section

“Up button” Section

Message Settings Section

How to Configure 

Log in to the admin panel, and we will show you how to configure the extension step by step. To configure basic settings, go to Webinse -> Ajax Catalog -> Configuration on your Dashboard.

How to start use extension 

As soon as you installed extension, it is ready for work. The extension is enabled by default and have some default settings. The extension has default load animation, but you also can download your own load animation. Select an image in the required format in “download spinner icon” field and save config. After that your image will appear in “spinner icons” list, choose it and save config again.

Extension view

As you see extension removes pagination and amount of products from toolbar and adds loading animation under catalog and “up” button in the right bottom corner.  You will also see a message saying that there are no more products when you reach the end of the catalog

General settings 

In “general settings” section you can change main load mod and enable or disable all displayed elements of extension.

Every displayed feature has full customization. There is a section with settings for every feature.

“Selector” fields  contain Magento HTML selectors. Most likely you won't have to change them. They have default designations  in most cases. But sometimes developers change them. But it’s not difficult to find what we need.

First go to any product category page, then open “developers tools”. You can find it in your browser’s settings.

Next step is to click button 1 and then navigate to products amount. Then you should see code structure like on the picture below.

As we see class=”toolbar-amount” is what we need. Write down “.toolbar-amount” into the “Amount selector field”. Do the same thing with other selector fields, as on the pictures. 

“.products-grid” is selector for “Container selector” in grid mode. If your website has switching to list mode, switch it and repeat this for list mode. 

Write “.products-list” after the decimal point in “Container selector” field.

We can see many repeating elements, this is our products, “.items” is selector for “Item selector” field.

“.pages” is selector for “Pagination selector” field.

For “Next url selector” you should first copy “Pagination selector” and then write down “.next”.

For “Previous url selector” you should first copy “Pagination selector” and then write down “.previous”.

Spinner settings

On spinner settings section you can change loading animation. Also you can download your own image. Choose file and save config, after that your image will appear in spinner icons list. Select it, you will see it in selected spinner field and save config one more time.

Load button settings 

This button is displayed instead of loading animation when “button load” mode selected in “main mode” field in general settings.

All fields in this section are intended for customizing button’s styles. It is not difficult to set up. 

Message settings

Here you can change default text, text color, text size and text opacity.

Up button settings

There are two views of up button: button with customizable arrow and downloaded arrow image. 

Depending on what view is selected, the section changes the set of fields.

To set your own image of arrow choose file, save config, then select it from the “arrow icons” and save config again.