Webinse Ajax Catalog

Transcription

1 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 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 & Con guration All features and user interfaces are fully con gurable, require little time to install and can be controlled from the Magento Administration Panel.

2 Version and Compatibility Ajax Catalog Extension version is compatible with Magento Community Edition version and guaranteed to work with Magento default theme. Ajax Catalog Con guration Webinse Ajax Catalog Tab The settings in this section de ne all con gurations of the Ajax Catalog integration on your Magento ecommerce site. General Settings Section Field Default Description Module enable Main mode Enable "No more products" message Yes In nite scrolling Yes 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 up button Enable "down" button Enable xed toolbar Container selector Item selector Yes Yes No.productsgrid,.productslist.item 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.

3 Pagination selector Next url selector Previous url selector Amount selector.pages.pages a.next.pages.previous.toolbaramount 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 Here you can write text which displays in the button Sets color of the text in the button. Click on the eld 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

4 Button width Button shape Button border Border color 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) 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

5 Message Settings Section Field Default Description Message text Text color No more products (black) Sets text for message when no more products to show Sets text color Text size Text opacity 18 1 Sets text size Sets opacity of text

6 How to Con gure Log in to the admin panel, and we will show you how to con gure the extension step by step. To con gure basic settings, go to Webinse > Ajax Catalog > Con guration 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 eld and save con g. After that your image will appear in spinner icons list, choose it and save con g again.

7 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

8 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 elds 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 di cult to nd what we need. First go to any product category page, then open developers tools. You can nd it in your browser s settings.

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

10 As we see class= toolbaramount is what we need. Write down.toolbaramount into the Amount selector eld. Do the same thing with other selector elds, as on the pictures.

11 .productsgrid is selector for Container selector in grid mode. If your website has switching to list mode, switch it and repeat this for list mode.

12 Write.productslist after the decimal point in Container selector eld.

13 We can see many repeating elements, this is our products,.items is selector for Item selector eld.

14 .pages is selector for Pagination selector eld.

15 For Next url selector you should rst copy Pagination selector and then write down.next. For Previous url selector you should rst copy Pagination selector and then write down.previous.

16 Spinner settings On spinner settings section you can change loading animation. Also you can download your own image. Choose le and save con g, after that your image will appear in spinner icons list. Select it, you will see it in selected spinner eld and save con g one more time. Load button settings This button is displayed instead of loading animation when button load mode selected in main mode eld in general settings.

17 All elds in this section are intended for customizing button s styles. It is not di cult to set up.

18 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.

19

20 Depending on what view is selected, the section changes the set of elds. To set your own image of arrow choose le, save con g, then select it from the arrow icons and save con g again.