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
Field
|
Default
|
Description
|
Module enable
Main mode
Enable "No more products" message
Enable up button
Enable "down" button
Enable fixed toolbar
Container selector
Item selector
Pagination selector
Next url selector
Previous url selector
Amount selector
|
Yes
Infinite scrolling
Yes
Yes
Yes
No
.products-grid, .products-list
.item
.pages
.pages a.next
.pages .previous
.toolbar-amount
|
Enable/disable extension.
Sets the method of content downloading
Enable/disable displaying message at the bottom of catalog, when no more products to show
Enable/disable displaying “up” button in the right bottom corner
Enable/disable displaying “down” button in the right bottom corner after click on “up” button
Enable/disable displaying toolbar in the bottom of window
Here are presented default Magento HTML selectors. Ajax Catalog uses them to work.
|
Spinner Settings Section
Field
|
Default
|
Description
|
Download spinner icon
Selected spinner
Spinner icons
|
-
-
-
|
Here you can download your own spinner animation
Displaying which spinner animation is selected
Here you can choose spinner animation.
|
Load Button Settings Section
Field
|
Default
|
Description
|
Button text
Button text color
Text size
Button background color
Button background opacity
Button height
Button width
Button shape
Button border
Border color
|
-
-
-
-
-
-
-
-
-
-
|
Here you can write text which displays in the button
Sets color of the text in the button. Click on the field and then click on any color you liked
Sets text size
Sets button’s background color
Sets the button background color’s opacity. (0 - fully transparent, 1 - not transparent). Range from 0.0 to 1.0
Sets button’s height
Sets button’s width
Makes button’s corners round. 0 - no rounding. Max value can be half from button’s height
Sets borders for button. 0 - no borders, value 1 and more sets thickness of border
Sets border’s color
|
“Up button” Section
Field
|
Default
|
Description
|
Button view
Button background color
Button background opacity
Button size
Button shape
Button border
Border color
Arrow color
Arrow size
|
Arrow
FFFFFF(white)
0
30
50
0
000000
000000
20
|
Sets view of “up” button
If selected view “text” or “arrow” sets background color
Sets background color’s opacity. (0 - fully transparent, 1 - not transparent). Range from 0.0 to 1.0
Sets button size
Sets button shape. 0 - square, 50 - circle.
Sets borders for button. 0 - no borders, value 1 and more sets thickness of border
Sets border’s color
Sets arrow’s color
Sets arrow’s size
|
Message Settings Section
Field
|
Default
|
Description
|
Message text
Text color
Text size
Text opacity
|
No more products
000000(black)
18
1
|
Sets text for message when no more products to show
Sets text color
Sets text size
Sets opacity of text
|
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.