Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/coveo implementation #308

Merged
merged 9 commits into from
May 13, 2024
+853 −426
Merged

Feature/coveo implementation #308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b340e41
Coveo Search Implementation
ankitguptaGspann Apr 29, 2024
7fbac39
code update for header, search and scripts
ankitguptaGspann May 3, 2024
9ca685c
coveoua analytics implementation
ankitguptaGspann May 7, 2024
51546d5
Search and header code update
ankitguptaGspann May 8, 2024
4f2b0ae
Accessibility Issues Changes
shivangi1422 May 8, 2024
10e5cfc
Removed border from the button
ankitguptaGspann May 9, 2024
9c2a37d
fixed lint issue and css
ankitguptaGspann May 9, 2024
ee479da
removed search page from drafts
ankitguptaGspann May 9, 2024
6b6af70
cross browser compatibility
ankitguptaGspann May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
572 changes: 238 additions & 334 deletions blocks/header/header.js
View file
Open in desktop

Large diffs are not rendered by default.

98 changes: 98 additions & 0 deletions blocks/search/search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
atomic-search-box::part(wrapper) {
border-color: rgb(75 85 99);
background-color: rgb(249 250 251);
margin-top: 2rem;
margin-bottom: 1rem;
}

atomic-search-box::part(submit-button) {
margin: auto;
margin-right: 9px;
background-color: #ec8f2d;
width: 2rem;
height: 2rem;
border-radius: 0.375rem;
text-align: center;
line-height: 1em;
}

atomic-pager::part(next-button) {
border: none;
color: var(--atomic-primary-dark)
}

atomic-pager::part(previous-button) {
border: none;
color: var(--atomic-primary-dark)
}

atomic-pager::part(buttons) {
border: none;
}

atomic-pager::part(active-page-button) {
color: var(--atomic-primary-dark)
}

atomic-result .display-list {
position: relative;
padding-right: 20%;
}

atomic-result .btn-right-view {
position: absolute;
top: 50%;
right: 0%;
}

.btn-view {
background-color: #dc6016;
border: 1px solid #dc6016;
color: #fff;
margin-top: .5rem;
width: 7rem;
padding: .5rem 0;
border-radius: .375rem;
font-weight: 600;
}

atomic-search-layout{
text-align: left;
}

.search-title{
width: 100%;
display: block;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
font-weight: 600;
}

.btn-atomic-link{
width: 7rem;
padding: .5rem 0;
border-radius: .375rem;
font-weight: 600;
}

atomic-layout-section.atomic-pagination{
margin-top: 3rem;
margin-bottom: 3rem;
}

.search{
margin: auto 6% ;
}

@media (max-width: 540px) {
.search{
margin: 0% ;
}
}

@media (max-width: 820px) {
.search{
margin: 0% ;
}
}
218 changes: 218 additions & 0 deletions blocks/search/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
import { loadCSS } from '../../scripts/aem.js';

const searchBody = `
<atomic-search-interface fields-to-include='["snrating", "sncost", "pagetype", "contenttype", "title", "description"]' pipeline="Aldevron Marketplace" search-hub="AldevronMainSearch">
<atomic-search-layout>
<atomic-layout-section section='search'>
<atomic-search-box></atomic-search-box>
</atomic-layout-section>
<atomic-layout-section section='facets'>
<atomic-facet-manager>
<atomic-facet field='contenttype' label='Content Type'></atomic-facet>
<atomic-facet field='pagetype' label='Page Type'></atomic-facet>
</atomic-facet-manager>
</atomic-layout-section>
<atomic-layout-section section='main'>
<atomic-layout-section section="status">
<atomic-breadbox></atomic-breadbox>
<atomic-query-summary></atomic-query-summary>
<atomic-refine-toggle></atomic-refine-toggle>
<atomic-sort-dropdown>
<atomic-sort-expression
label="relevance"
expression="relevancy"
></atomic-sort-expression>
<atomic-sort-expression
label="Title"
expression="title ascending"
></atomic-sort-expression>
</atomic-sort-dropdown>
<atomic-did-you-mean></atomic-did-you-mean>
<atomic-notifications></atomic-notifications>
</atomic-layout-section>
<atomic-layout-section section='results'>
<atomic-result-list>
<atomic-result-template>
<template>
<style>
@media (min-width: 1024px) {
.badge{
margin-left: 0.75rem;
margin-bottom: 0.75rem !important;
}
}

.description-excerpt{
margin-top: 0.5rem !important;
}

.display-list {
position: relative;
padding-right: 125px;
}

@media (max-width: 768px) {
.display-list {
position: relative;
padding-bottom: 60px;
padding-right: 0px;
}
}
@media (max-width: 540px) {
.display-list {
position: relative;
padding-bottom: 60px;
padding-right: 0px;
}
}
@media (max-width: 786px) {
.btn-right-view {
position: absolute;
bottom: 0%;
left: 0;
}
}
.btn-right-view {
position: absolute;
right: 0%;
}

@media (min-width: 1024px) {
.btn-right-view {
margin-top: 42px;
}
}

.btn-right-view .button{
background-color: #ec8f2d;
border-radius: 5px !important;
border: 1px solid #ec8f2d;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: Brown-Ald, Helvetica, Arial, sans-serif;
font-size: 18px !important;
font-weight: 400;
line-height: 100%;
margin: 0;
padding: .6em 1.3em;
text-align: center;
text-decoration: none;
transition: background .3s;
vertical-align: middle;
width: 7rem;
}

.btn-atomic-link {
width: 7rem;
padding: .5rem 0;
border-radius: .375rem;
font-weight: 600;
}

.search-title {
width: 100%;
display: block;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
font-weight: 600;
}

.description {
color: #333;
font-size: .875;
font-weight: 400;
}

.field {
display: inline-flex;
align-items: center;
}

.field-label {
font-weight: bold;
margin-right: 0.25rem;
}

.thumbnail {
display: none;
width: 100%;
height: 100%;
}

.icon {
display: none;
}

.result-root.image-small .thumbnail,
.result-root.image-large .thumbnail {
display: inline-block;
}

.result-root.image-icon .icon {
display: inline-block;
}

atomic-result-badge::part(result-badge-element) {
background: #E0E9EB;
padding: .25rem .375rem;
border-radius: 5px;
margin-top: .25rem;
color: black;
height: auto !important;
}

</style>
<atomic-result-section-title
><atomic-result-link class='search-title'></atomic-result-link
></atomic-result-section-title>
<atomic-result-section-excerpt class='description-excerpt'
><atomic-result-text field='excerpt' class='description'></atomic-result-text
></atomic-result-section-excerpt>
<atomic-result-section-badges class="badge">
<atomic-field-condition if-defined="contenttype" class="hydrated">
<atomic-result-badge class="hydrated" field="contenttype"></atomic-result-badge>
</atomic-field-condition>
<atomic-field-condition if-defined="pagetype" class="hydrated">
<atomic-result-badge class="hydrated" field="pagetype"></atomic-result-badge>
</atomic-field-condition>
</atomic-result-section-badges>
<atomic-result-link data-atomic-rendered="true" data-atomic-loaded="true" class="btn-right-view hydrated">
<button class="btn-atomic-link button">View</button>
</atomic-result-link>
</template>
</atomic-result-template>
</atomic-result-list>
<atomic-query-error></atomic-query-error>
<atomic-no-results></atomic-no-results>
</atomic-layout-section>
<atomic-layout-section section="pagination" class="atomic-pagination">
<atomic-pager></atomic-pager>
</atomic-layout-section>
</atomic-layout-section>
</atomic-search-layout>
</atomic-search-interface>
`;

export default async function decorate(block) {
loadCSS('https://static.cloud.coveo.com/atomic/v2/themes/coveo.css');

(async () => {
await import('https://static.cloud.coveo.com/atomic/v2/atomic.esm.js');// eslint-disable-line
await customElements.whenDefined('atomic-search-interface');

const searchInterface = document.querySelector('atomic-search-interface');
// Initialization
await searchInterface.initialize({
accessToken: window.aldevronConfig?.searchKey,
organizationId: window.aldevronConfig?.searchOrg,
organizationEndpoints: await searchInterface
.getOrganizationEndpoints(window.aldevronConfig.searchOrg),
});
// Trigger a first search
searchInterface.executeFirstSearch();
})();
block.innerHTML = searchBody;
}
8 changes: 8 additions & 0 deletions scripts/aem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -896,3 +896,11 @@ export {
loadFormDelayed,
getFormMeetingConfig,
};

export function debounce(func, timeout = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
47 changes: 47 additions & 0 deletions scripts/delayed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,50 @@ if (isForm()) {
if (getFormMeetingConfig()) {
loadFormDelayed();
}

// coveo analytics - start
/* eslint-disable */
(function (c, o, v, e, O, u, a) {
a = 'coveoua';
c[a] = c[a]
|| function () {
(c[a].q = c[a].q || []).push(arguments);
};
c[a].t = Date.now();

u = o.createElement(v);
u.async = 1;
u.src = e;
O = o.getElementsByTagName(v)[0];
O.parentNode.insertBefore(u, O);
}(
window,
document,
'script',
'https://static.cloud.coveo.com/coveo.analytics.js/2/coveoua.js',
));
/* eslint-enable */
function sendCoveoEventPage() {
const organizationId = window.aldevronConfig?.searchOrg;
const accessToken = window.aldevronConfig?.searchKey;

coveoua(// eslint-disable-line
'init',
accessToken,
`https://${organizationId}.analytics.org.coveo.com`,
);

coveoua('send', 'view', {// eslint-disable-line
contentIdKey: 'permanentid',
contentIdValue: window.location.origin + window.location.pathname,
language: 'en',
username: 'anonymous',
title: document.title,
location: document.location.href,
originLevel1: 'AldevronMainSearch',
});
}

if (!window.location.hostname.includes('localhost')) {
sendCoveoEventPage();
}
Loading
Loading