ecd9c26c8c
# Pull Request Template
## Description
Implemented search results page functionality. Now you can press "Enter"
to search by term and display results in a results page. Also now you
can link to /hc/{account}/en/search?query=XXXXXX to view search results
for XXXXXX query.
fixes: https://github.com/chatwoot/chatwoot/issues/10945
## Screenshots
Classic layout search results:
<img width="3840" height="2160" alt="classic-results"
src="https://github.com/user-attachments/assets/3bbb3272-33ca-4eb4-b80a-76ed77442088"
/>
Classic layout pagination:
<img width="3840" height="2160" alt="classic-page-two"
src="https://github.com/user-attachments/assets/062b09d3-7c58-4d3b-8611-b94375e7db51"
/>
Classic layout empty search:
<img width="3840" height="2160" alt="no-results"
src="https://github.com/user-attachments/assets/c5e3f47a-cd9a-4e14-ae92-ccba00c89e98"
/>
Documentation layout search results:
<img width="3840" height="2160" alt="documentation-results"
src="https://github.com/user-attachments/assets/9e45d8d9-c975-4589-b6c6-3bc7bb3c588e"
/>
Documentation layout dark theme:
<img width="3840" height="2160" alt="documentation-dark"
src="https://github.com/user-attachments/assets/cdb6ed63-4241-4b32-9f79-7d92ed479fc8"
/>
Plain embedded dark layout:
<img width="3840" height="2160" alt="plain-embedded-dark"
src="https://github.com/user-attachments/assets/7deb02b9-9f24-48fb-8979-a2ecd7002c05"
/>
---------
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Vinay Keerthi <11478411+stonecharioteer@users.noreply.github.com>
94 lines
3.2 KiB
ERB
94 lines
3.2 KiB
ERB
<% if @article.present? %>
|
|
<script>
|
|
(function() {
|
|
let viewTracked = false;
|
|
const trackView = function() {
|
|
if (!viewTracked) {
|
|
viewTracked = true;
|
|
const img = new Image();
|
|
img.src = '<%= request.base_url %>/hc/<%= @portal.slug %>/articles/<%= @article.slug %>.png';
|
|
}
|
|
};
|
|
|
|
const addTrackingListeners = function() {
|
|
const events = ['mouseenter', 'touchstart', 'focus'];
|
|
events.forEach(event => {
|
|
document.body.addEventListener(event, function() {
|
|
setTimeout(trackView, 5000);
|
|
}, { once: true });
|
|
});
|
|
};
|
|
addTrackingListeners();
|
|
})();
|
|
</script>
|
|
<% end %>
|
|
<style>
|
|
html.dark {
|
|
--dynamic-portal-bg: <%= generate_portal_bg(@portal.color, 'dark') %>;
|
|
--dynamic-portal-bg-gradient: <%= generate_gradient_to_bottom('dark') %>;
|
|
--dynamic-hover-bg-color: <%= generate_portal_hover_color(@portal.color , 'dark') %>;
|
|
--dynamic-portal-color: <%= @portal.color %>;
|
|
--dynamic-portal-color-soft: color-mix(in srgb, <%= @portal.color %> 18%, transparent);
|
|
--dynamic-portal-color-faint: color-mix(in srgb, <%= @portal.color %> 6%, transparent);
|
|
}
|
|
|
|
html.light {
|
|
--dynamic-portal-bg: <%= generate_portal_bg(@portal.color, 'light') %>;
|
|
--dynamic-portal-bg-gradient: <%= generate_gradient_to_bottom('light') %>;
|
|
--dynamic-hover-bg-color: <%= generate_portal_hover_color(@portal.color , 'light') %>;
|
|
--dynamic-portal-color: <%= @portal.color %>;
|
|
--dynamic-portal-color-soft: color-mix(in srgb, <%= @portal.color %> 12%, transparent);
|
|
--dynamic-portal-color-faint: color-mix(in srgb, <%= @portal.color %> 5%, transparent);
|
|
}
|
|
|
|
/* Portal background */
|
|
#portal-bg {
|
|
background: var(--dynamic-portal-bg);
|
|
}
|
|
/* Portal background gradient */
|
|
#portal-bg-gradient {
|
|
background-image: var(--dynamic-portal-bg-gradient);
|
|
}
|
|
/* Category block item hover color */
|
|
#category-item:hover {
|
|
background-color: var(--dynamic-hover-bg-color);
|
|
}
|
|
|
|
/* Header section */
|
|
#header-action-button:hover,
|
|
#toggle-appearance:hover,
|
|
#toggle-theme-button:hover {
|
|
color: var(--dynamic-hover-color);
|
|
stroke: var(--dynamic-hover-color);
|
|
}
|
|
#category-block:hover {
|
|
border-color: var(--dynamic-hover-color);
|
|
}
|
|
#category-block:hover #category-name {
|
|
color: var(--dynamic-hover-color);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
window.portalConfig = {
|
|
portalSlug: '<%= @portal.slug %>',
|
|
portalColor: '<%= @portal.color %>',
|
|
theme: '<%= @theme_from_params %>',
|
|
customDomain: '<%= @portal.custom_domain %>',
|
|
hostURL: '<%= ENV.fetch('FRONTEND_URL', '') %>',
|
|
localeCode: '<%= @locale %>',
|
|
searchTranslations: {
|
|
searchPlaceholder: '<%= I18n.t('public_portal.search.search_placeholder') %>',
|
|
emptyPlaceholder: '<%= I18n.t('public_portal.search.empty_placeholder') %>',
|
|
loadingPlaceholder: '<%= I18n.t('public_portal.search.loading_placeholder') %>',
|
|
resultsTitle: '<%= I18n.t('public_portal.search.results_title') %>',
|
|
submit: '<%= I18n.t('public_portal.search.submit') %>',
|
|
},
|
|
isPlainLayoutEnabled: '<%= @is_plain_layout_enabled %>',
|
|
tocHeader: '<%= I18n.t('public_portal.toc_header') %>'
|
|
};
|
|
</script>
|
|
<% if @portal.channel_web_widget.present? && !@is_plain_layout_enabled %>
|
|
<%= @portal.channel_web_widget.web_widget_script.html_safe %>
|
|
<% end %>
|