Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech...

19
Elitech Search Autocomplete + suggestions Elitech Systems Pvt Ltd. User-Guide

Transcript of Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech...

Page 1: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

Elitech Search Autocomplete + suggestions

Elitech Systems Pvt Ltd.

User-Guide

Page 2: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

2

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

Table of Contents

- - - - - - - - - - - - -

1. How to install the extension in Magento 2? ……………………………….3

2. AutoComplete - General Settings…………………………………………10

3. AutoComplete - Design Settings…………………………..………………14

4. AutoComplete - Frontend View …………………………………………..18

Page 3: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

3

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

1. How to install the extension in Magento 2?

To install a new extension, you will need to access your admin dashboard and navigate to system -> web setup wizard.

From the 3 blocks of options you have at your disposal, choose the component manager.

Here you will see already installed extensions on your website, any new updates for them and new extensions which you can install. Click on the install link below new purchases label.

Page 4: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

4

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

Select the extension/s you want to install and click on the install button or mark then and select a bulk install action from the top of the page.

It will start downloading extension

Page 5: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

5

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

1.1 Start a readiness check First step is readiness check, which will check if your Magento 2 installation has all the necessary components required for an extension installation. Click on start readiness check button.

After the check has been completed and your installation covers all the requirements, you will be able to proceed by clicking on next button.

Page 6: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

6

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

If you have any component marked as red, you will be able to check how to fix the issues with it by clicking on the link below it. This will direct you to official Magento 2 documentation section where you will find a guide on that particular matter.

Page 7: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

7

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

1.2 Backup your data Second step involves creating a backup of your store. It happens sometimes that the integrated Magento backup system may not take a proper backup of the system, so is the reason we highly recommend to take a manual backup of the system to avoid any such data loss. You can skip this step of create backup option here by clicking on the next button, otherwise, click on create backup if you have selected an option.

Page 8: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

8

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

If you choose the take a backup, you will receive a confirmation screen that the backup has been successfully created and then you can hit the next button to proceed.

Page 9: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

9

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

1.3 Install the extension In the last step, you will see again the list of extension/s you wanted to install. Click on the install button to continue.

Once the installation is completed, you will receive a confirmation and along with the ability to go back by clicking on the back to setup tool button. Congratulations, now the extension successfully installed. Once the extension is successfully installed you need to enable it from the general setting as mentioned below in next session.

Page 10: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

10

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

2. AutoComplete - General Settings We, Elitech Systems Pvt ltd, have tried our best for flexible extension development that can give maximum liberty to the user of the extension. Below mentioned are different general settings which will help the user to set according to their need.

To go to the general setting, go to ‘stores > configuration > ESPL extensions’. On mentioned path, you will be able to see the above mentioned picture. For better understanding, the same screen has been segregated & magnified in next section along with an explanation.

Page 11: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

11

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

❖ Select “yes” to enable extension and “no” to disable.

❖ Select ‘yes’ to add product suggestions to the result. It also asks to add suggestions limit,

by default, it is 3. It can be changed as per store owner’s requirement. In the case of left unfilled, the system will consider it 3.

Page 12: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

12

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

❖ If you want to add category suggestion, select ‘yes’ to add category suggestions to the

result. It also asks to add suggestions limit, by default, it is 5. It can be changed as per store owner’s requirement. In the case of left unfilled, the system will consider it 5.

❖ Minimum length is a limit of minimum character length. Based on the character length

set over here, the system will render suggestion results. By default minimum length is 1, which can be set as per store owner’s requirement. In case of the left unfilled, the system will consider it 1.

Page 13: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

13

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

❖ Cache lifetime is cache storage life. You can decide the life of cache storage in terms of

seconds. On completion of that time, storage will be flushed & new cache will be stored. In the case of the less updated site, it is recommended to keep higher cache lifetime for better results & less resource utilization. By default, value of cache lifetime is 86400 sec (1 day). It can be changed as per store owner’s requirement. In the case of left unfilled, the system will consider it 86400 seconds.

❖ To have faster results, storing results on the local machine is recommended. But for

frequently changing websites, it will be of no use. So, if you want to store data locally, select local storage option ‘yes’.

Page 14: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

14

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

3. AutoComplete - Design Settings At, Elitech Systems Pvt Ltd, we consider UI/UX with the highest priority. That is the reason, we have tried our best to accommodate with store’s theme. With this design setting, the user can customize extension design. ❖ The user can change the label of categories & keep it with his/her convenience that can

match website’s basic concept or theme. ❖ You can change category label’s text color, by clicking on text box beside on ‘category

header text-color. On clicking the text box, a color picker will open, from where you can select a color of your choice for text.

Page 15: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

15

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

❖ Same way you can set categories header background color, category results’ text color &

category results’ hover color.

Page 16: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

16

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

❖ As we can set categories another label name, same way product’s name can be set. Apart

from the name, the color attribute can be set same as categories, too.

Page 17: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

17

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

4. Autocomplete - Frontend View When both categories & product suggestions are enabled, it will look like the below mentioned screen. Where colors can be different as per admin settings.

Page 18: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

18

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

And when only category or product will be enabled it will look like the below mentioned image. In the case of more results, the scroll will be enabled.

Page 19: Elitech Search Autocomplete + suggestions › media › catalog › product › espl... · Elitech Search Autocomplete + suggestions . Elitech Systems Pvt Ltd. User-Guide

19

User Guide: Elitech AutoComplete

Support: http://www.elitechsystems.com/contact-us/

Thank You. If you have any query or suggestion, please feel free contact us at:

http://www.elitechsystems.com/contact-us/

Your feedback is absolutely welcome!