Advanced Filter Tooltips

The add-on provides a wide range of settings for creating informative filter tooltips. Additionally, you can create a glossary of terms for user convenience
Please enter a valid addres(es) of the shop where you are going to use the add-on.
$32 $36
Latest module version 1.7.14 Updated: 29.10.2023
Have questions about the module? Write to us: HelpDesk
30 days for return
If you are not satisfied with the operation of the module, we will return your money with bonus points in your Personal Account
Bonus for review
We will give 1000 bonus points in your Personal Account for a review after purchasing the module
Multi-display
One price regardless of the number of display cases, no need to pay extra
Support
Free consultation and support on the module, assistance with installation
Discount for revision
We will give a discount of up to 50% on improvements to any functionality when purchasing a module from us
Improved UX
Price for all
$132 $109
Order discount: $23

Tooltips for filters solve the problem of customers understanding specific product characteristics and help them make the right choice.

The add-on allows you to display tooltips for filters and to create a dictionary of terms - a section that contains a list of all filters and their descriptions. This makes the add-on an indispensable assistant for stores with technically complex and specific product catalogs.

The add-on provides a wide range of visual settings for creating informative tooltips, changing the type, color, and theme for displaying the tooltip.

Image
Image
Image

Add-on Features

  • Shows the filter description
  • Choice of tooltip display method
  • Ability to change the appearance of the tooltip window
  • Ability to change button colors
  • Automatically creates a dictionary of terms - a list of filters and their descriptions, with the ability to group by categories
Product:
  • Store Builder
  • Store Builder Ultimate
  • Multi-Vendor
  • Multi-Vendor Plus
  • Multi-Vendor Ultimate
Recipient:
  • Buyers
Development
:
  • Frontend
Localization:
  • English
  • Русский
Compatible versions:
  • 4.17.X
  • 4.16.X
  • 4.15.X
  • 4.14.X
  • 4.13.X
  • 4.12.X

Installation

After downloading the add-on , it can be installed using the standard CS-Cart tools on the page Admin panel → Add-ons→ Downloaded Add-ons → Upload and install add-on (+).

For CS-Cart version 4.13.1 and above, go to Admin panel → Add-ons→ Donwloaded add-ons → Gear button → Manual installation.

Image

Installation of hooks

For correct operation, you need to install hooks according to the instructions. The information is collected in the Information tab.

This operation of adding hooks is relevant for the current version of the add-on v.1.7.14 and later; in future versions this operation may no longer be needed.

Image

You need to insert the hook  product_features:ms_feature_label into the file “product_features.tpl”:

  1. Open the file product_features.tpl
    1. Its location depends on several variables:
      1. If you are using a theme UniTheme2 , then the file will be located along the path: public_html/design/themes/abt__unitheme2/templates/views/products/components
      2. If you are using a theme Youpi , then the file will be located along the path: public_html/design/themes/abt__youpitheme/templates/views/products/components
      3. If you are using a theme Responsive, then the file will be located along the path: public_html/design/themes/responsive/templates/views/products/components
      4. If you are using a theme Responsive and you have the AB add-on installed and enabled: SEO pages for filters, then the file will be located along the path: public_html/design/themes/responsive/templates/addons/ab__seo_filters/overrides/views/products/components
  2. In the file that opens, find the line with the code:
    1. <div class="ty-product-feature__label">
  3. Before the found line, insert the code:
    1.  {hook name="product_features:ms_feature_label"}
  4. After the line you found, paste the code:
    1.  {/hook}
  5. As a result, you should get the following:
    1. {hook name="product_features:ms_feature_label"}
              <div class="ty-product-feature__label"><span>{$feature.description nofilter}</span>{if $feature.full_description|trim}{include file="common/popupbox.tpl" link_meta="ty-icon ty-icon-help-circle cm-dialog-auto-size ut2-append-body" id="ut2_features_dialog_`$feature.feature_id`" text=$feature.description content=$feature.full_description show_brackets=false}{/if}</div>
              {/hook}
      Image
  6. Save the changes to the file;
  7. Clear cache.

Creating and editing a tooltip:

To create and edit a tooltip, you will need the following steps:

  1. Open the "Products - Features" section;
    1. Image
  2. Select the feature for which you want to add a tooltip;
  3. In the opened window, locate the "Description" field;
  4. Enter the tooltip text;
    1. Image
  5. Click on "Save.”

Connecting a Glossary of Terms:

To make the tooltip text appear on the "Glossary of Terms" page, you need to perform the following actions:

  1. Open the "Products - Features" section;
    1. Image
  2. Select the feature for which you want to add a Glossary of Terms;
  3. In the opened window, locate the "MS: Display in Glossary of Terms" field and check the box;
    1. Image
  4. Click on "Save.;
  5. Open the "Feature Groups" section;
    1. Image
  6. Open the feature group to which the feature, for which you enabled display earlier, belongs;
    1. Image
  7. In the opened window, locate the "MS: Display in Glossary of Terms" field and check the box;
    1. Image
  8. Click on "Save.”

Now the tooltip will be displayed for the filter on your website, and users will be able to see additional information or explanations when interacting with this filter.

Add-on settings

Design of the appearance of hints:

The add-on offers the following options for tooltip display types:

  • Popup: In this mode, the tooltip will be presented as a popup window;
  • Tooltip: In this mode, the tooltip will be presented as an extended window with the option to select the dimensions of this window. You will be able to manually set the tooltip window's dimensions to tailor it to your needs.
Image

When selecting the tooltip color scheme, you have the option to define a light or dark theme that will match the design of your online store.

Image

Next, you will have the option to choose the Tooltip Display Method:

  • By move: In this mode, the tooltip will automatically appear when the user hovers the cursor over the icon.
  • By Click: In this mode, the tooltip will open only after the user clicks on the icon.
Image

When selecting Tooltip, an additional feature becomes available - the ability to set the dimensions of the window.

Image

In the General section, the following functions will be available:

  • Idle Icon Color Selection: You will be able to choose a color for the icon that will be displayed in its normal state (when the user is not interacting with it);
  • Hover Icon Color Selection: Here, you can choose the color of the icon when the user hovers the mouse over it;
  • Click Icon Color Selection: This option will allow you to set the color of the icon when the user clicks on it.
Image

Glossary of Terms

In the "Glossary of Terms" tab, you'll find settings related to the functionality and display of the glossary of terms on your website. In this section, you can configure parameters that pertain to the creation and management of the glossary of terms.

Image
  • Show Glossary Link: Adds a link within the tooltip window to access the glossary of terms on your website;
  • Open Glossary in New Window: Opens the glossary of terms in a new browser tab when the link is clicked;
  • Enable Indexing: Allows search engines to index the content of the glossary of terms, improving your site's visibility in search results;
  • Top Header Margin to Target Term: Sets the distance from the top of the page (e.g., the menu) to the start of the glossary of terms;
  • Page Scroll Speed to Target Term (in milliseconds): Sets the time it takes for the page to smoothly scroll to the target term when transitioning to the glossary of terms.

v1.7.9 dated 19.07.2023

[+] Add-on standardization

v1.7.8 dated 26.12.2022

[+] Add-on standardization

v1.7.7 dated 09.10.2022

[+] Add-on standardization

v1.7.6 dated 29.12.2021

[*] Forgot to add the file responsive/templates/addons/ms_filter_tooltip/hooks/product_features/ms_feature_label.override.tpl

v1.7.5 dated 28.12.2021

[*] Adjusted styles for the tooltip on mobile devices (z-index)

v1.7.4 dated 20.12.2021

[*] Changed the link to the dictionary of terms: added a check for the variable $smarty.server.REQUEST_SCHEME

v1.7.3 dated 07.12.2021

[*] Changed language variables

[*] Add-on code standardization

v1.7.2 dated 25.11.2021

[*] Changed the dictionary of terms page: added breadcrumbs from the characteristic from which the user navigated to the dictionary of terms, modified the appearance of the sidebar navigation panel

v1.7.1 dated 16.11.2021

[*] Changed the JavaScript script, modified its inclusion, and made some style adjustments

v1.7.0 dated 12.11.2021

[+] Added a new type of MS Tooltip icon with customizable height and width in the add-onsettings

v1.6.2 dated 11.11.2021

[+] Added settings for the color of the question mark icon on mouse hover and click

v1.6.1 dated 21.10.2021

[+] Added adjustment for the speed and offset from the header to the desired term in the dictionary of terms when navigating from another page using an anchor link

v1.6.0 dated 21.10.2021

[*] Modified settings, moved them to a separate tab for dictionary of terms settings

[+] Added settings for the scroll speed in the dictionary of terms and offset from the header to the desired term

[+] Added a script for the dictionary of terms page to set the scroll speed to the desired term and offset from the website's header to the term

v1.5.5 dated 20.10.2021

[+] Added a span with a class for the dictionary of terms page title, allowing its styles to be modified without affecting the titles of the entire website

v1.5.4 dated 20.10.2021

[+] Added a side navigation panel to the dictionary of terms page

v1.5.3 dated 19.10.2021

[*] Modified the conditions for displaying tooltips in the mobile version (popup only)

v1.5.2 dated 14.10.2021

[+] Added a function to retrieve the characteristic group by parent_id

[*] Modified the test link that directs to the dictionary of terms

v1.5.1 dated 14.10.2021

[+] Added a template to display the "Show in the Dictionary of Terms" switch on the backend

[+] Added a check for the presence of internal_name in the characteristic array; otherwise, the name will be taken from the description.

v1.5.0 dated 13.10.2021

[+] Added a controller that generates a dictionary of terms from descriptions and names of characteristics.

[+] Added a frontend page for displaying the dictionary of terms.

[+] Added a toggle for "Displaying in the Dictionary of Terms" to the characteristic editing window and characteristic group.

[+] Added a toggle to settings for "Opening the Dictionary of Terms in a New Window."

[*] Changed the link to the dictionary of terms from external to internal and added an anchor to navigate to the desired characteristic.

v1.4.3 dated 04.10.2021

[*] Added information in the "Information" tab of settings.

v1.4.2 dated 30.09.2021

[*] Adjusted the "Information" setting.

[+] Added data validation in the template.

v1.4.1 dated 30.09.2021

[*] Changed language variables.

[!] Error in the hook description.

v1.4.0 dated 30.09.2021

[+] Added a block with information on adding hooks in the add-on settings.

[+] The entire add-on functionality is now applied to characteristics in the product card.

[+] Added a tooltip to the add-on setting "Show link to the dictionary of terms."

v1.3.0 dated 30.09.2021

[*] The template is updated to the latest CS-Cart version (4.13.2).

[*] Some language variables in the add-on settings are changed.

[!] Fixed a database query.

[!] Fixed an error in the class name.

[!] Default values are added for mandatory settings.

v1.2.2 dated 28.09.2021

[*] Updated the add-on’s name and description.

[*] Updated the add-on’s icon file.

[*] Refactored the code.

v1.2.1 dated 28.09.2021

[+] Added the add-on’s icon file.

v1.2.0 dated 28.09.2021

[+] Added a new method of displaying the tooltip.

[+] Added settings to allow styling the tooltips.

v1.0.1 dated 31.08.2020

[!] Fixed an error in the span/div nesting.

[*] Updated the add-on’s name.

v1.0.0 dated 28.01.2020

[+] First release.

v1.7.3 from 07.12.2021

[*] Changed language variables

[*] Add-on code standardization

v1.7.2 from 25.11.2021

[*] The page of the glossary of terms has been changed: breadcrumbs have been added to the characteristics from which they switched to the glossary of terms, the appearance of the side navigation bar has been changed

v1.7.1 from 16.11.2021

[*] Changed js script, changed its connection, slightly tweaked styles

v1.7.0 from 12.11.2021

[+] Added a new type of MS Tooltip icon with setting the height and width for it in the add-on settings

v1.6.2 from 11.11.2021

[+] Added settings for the color of the question mark when hovering the mouse and when clicking on it

v1.6.1 from 21.10.2021

[+] Added adjustment of the speed and indent from the header to the searched term in the term dictionary when moving from another page to the anchor of the term

v1.6.0 from 21.10.2021

[*] Changed settings, placed in a separate tab of the term dictionary settings

[+] Added settings for scrolling speed in the glossary of terms and indent from the header to the searched term

[+] Added a script for the term dictionary page to set the scroll speed to the searched term and the indent from the site header to the term

v1.5.5 from 20.10.2021

[+] Added a span with a class for the title of the term dictionary page, so that you can change its styles without affecting the titles of the entire site

v1.5.4 from 20.10.2021

[+] Added navigation sidebar to the glossary page

Отзывы

Here you can share your opinion and evaluate our work.

Your feedback helps us become better and offer you even better service.

Похожие модули