How To
Compare Products on Results Page
7min
- Modify 3 Template JS templates to add compare feature:
- klevuTemplateLanding - Add a table to display compared products
- filters - To display selected products to compare
- productBlock - Add compare toggle to each product
- Add JavaScript to power the compare feature
- Set attributes to display for compare
- Tell Klevu to override default templates
- Powerup code for compare feature
- Add CSS to style the compare feature
- You must have Klevu integrated in your store using Template JS
- You need the ability to modify the code in your store
- Compare feature will be added to the Search Result Landing Page and Category Pages
Add the following code anywhere on your store.
This code only needs to be loaded on the pages where the compare feature will be present, so you may conditionally add this code only when these pages are accessed.
If you already have custom templates for klevuTemplateLanding, filters, and/or productBlock, we have added comments to show what code is necessary.
JS
1<script type="template/klevu" id="klevuLandingTemplateBaseCustom">
2 <div ku-container data-container-id="ku_landing_main_container" data-container-role="main">
3
4 <header ku-container data-container-id="ku_landing_main_header_container" data-container-role="header">
5 <section ku-block data-block-id="ku_landing_main_header_sub_panel"></section>
6 <section ku-block data-block-id="ku_landing_main_header_banner">
7 <%=helper.render('klevuLandingPromotionBanner',scope,data,"top") %>
8 <%=helper.render('klevuLandingPromotionBanner',scope,data,"bottom") %>
9 </section>
10 <section ku-block data-block-id="ku_landing_main_header_site_navigation"></section>
11 </header>
12
13 <div class="kuContainer">
14 <% if(!helper.hasResults(data,"productList") && !helper.hasFilters(data,"productList")) { %>
15 <%=helper.render('noResultsFoundLanding',scope) %>
16 <% } else { %>
17 <%= helper.render('klevuLandingTemplateSearchBar', scope) %>
18 <%=helper.render('klevuLandingImageSearchUploadBanner',scope,data) %>
19 <%= helper.render('tab-results', scope) %>
20 <%= helper.render('results',scope) %>
21 <% } %>
22 <div class="kuClearBoth"></div>
23 </div>
24
25 <footer ku-container data-container-id="ku_landing_main_footer_container" data-container-role="footer">
26 <section ku-block data-block-id="ku_landing_main_footer_sub_panel"></section>
27 <section ku-block data-block-id="ku_landing_main_footer_banner">
28
29 </section>
30 </footer>
31
32 </div>
33 <!-- start of compare customization -->
34 <div class="klevu-compare-table" id="klevu-compare-table">
35 <table class="klevu-compare-table__products">
36 <div class="klevu-compare-table-header">
37 <label class="toggle-differences"><input type="checkbox" id="toggleDifferences" <% if (klevu_compare_show_differences_checked) { %>checked<% } %> /><%= helper.translate("Show only differences")%></label>
38 <button id="klevu-close-compare">
39 <svg style="pointer-events:none;" enable-background="new 0 0 386.667 386.667" height="15" viewBox="0 0 386.667 386.667" width="15">
40 <path d="m386.667 45.564-45.564-45.564-147.77 147.769-147.769-147.769-45.564 45.564 147.769 147.769-147.769 147.77 45.564 45.564 147.769-147.769 147.769 147.769 45.564-45.564-147.768-147.77z"/>
41 </svg>
42 </button>
43 </div>
44 <thead>
45 <tr>
46 <th class="klevu-compare-table__label"></th>
47 <th><img src="" alt=""><span></span></th>
48 </tr>
49 </thead>
50 <tbody>
51 <tr>
52 <td class="klevu-compare-table__label">Label</td>
53 <td><div class="spec" spec-title="Label"></div></td>
54 </tr>
55 </tbody>
56 </table>
57 </div>
58 <!-- end of compare customization -->
59</script>
60
61<script type="template/klevu" id="klevuLandingTemplateFiltersCustom">
62 <% if(data.query[dataLocal].filters.length > 0 ) { %>
63 <div class="kuFilters" role="navigation" data-position="left" aria-label="Product Filters" tabindex="0">
64
65 <!-- start of compare customization -->
66 <div class="klevu-compare-widget klevu-compare-widget--klevu-hidden" id="klevu-compare-widget">
67 <ul class="klevu-compare-widget__images"></ul>
68 <div class="klevu-compare-widget__header">
69 <span><%= helper.translate("To compare")%><span class="klevu-compare-widget__selected-amount"></span></span>
70 <button id="klevu-compare-button" type="button" disabled><%= helper.translate("Compare")%></button>
71 </div>
72 </div>
73 <!-- end of compare customization -->
74
75 <h3 class="kuFiltersTitleHeading"><%=helper.translate("Narrow by")%></h3>
76 <% helper.each(data.query[dataLocal].filters,function(key,filter){ %>
77 <% if(filter.type == "OPTIONS"){ %>
78 <div class="kuFilterBox klevuFilter <%=(filter.multiselect)?'kuMulticheck':''%>" data-filter="<%=filter.key%>" <% if(filter.multiselect){ %> data-singleselect="false" <% } else { %> data-singleselect="true"<% } %>>
79 <div class="kuFilterHead <%=(filter.isCollapsed) ? 'kuExpand' : 'kuCollapse'%>">
80 <% var filter_label = (filter.label=="klevu_price") ? "price" : filter.label; %>
81 <%=helper.translate(filter_label)%>
82 </div>
83 <div data-optionCount="<%= filter.options.length %>" class="kuFilterNames <%= (filter.options.length <= 5 ) ? 'kuFilterShowAll': '' %> <%=(filter.isCollapsed) ? 'kuFilterCollapse' : ''%>">
84 <ul>
85 <% helper.each(filter.options,function(key,filterOption){ %>
86 <li <% if(filterOption.selected ==true) { %> class="kuSelected"<% } %>>
87 <a
88 target="_self"
89 href="#"
90 title="<%=helper.escapeHTML(filterOption.name)%>"
91 class="klevuFilterOption<% if(filterOption.selected ==true) { %> klevuFilterOptionActive<% } %>"
92 data-value="<%=helper.escapeHTML(filterOption.value)%>"
93 data-name="<%=helper.escapeHTML(filterOption.name)%>"
94 >
95 <span class="kuFilterIcon"></span>
96 <span class="kufacet-text"><%=filterOption.name%></span>
97 <% if(filterOption.selected ==true) { %>
98 <span class="kuFilterCancel">X</span>
99 <% } else { %>
100 <span class="kuFilterTotal"><%=filterOption.count%></span>
101 <% } %>
102 </a>
103 </li>
104
105 <% }); %>
106 </ul>
107 <% if(filter.options.length > 5 ) { %>
108 <div class="kuShowOpt" tabindex="-1">
109 <span class="kuFilterDot"></span><span class="kuFilterDot"></span><span class="kuFilterDot"></span>
110 </div>
111 <% } %>
112 </div>
113 </div>
114 <% } else if(filter.type == "SLIDER") { %>
115 <div class="kuFilterBox klevuFilter" data-filter="<%=filter.key%>">
116 <div class="kuFilterHead <%=(filter.isCollapsed) ? 'kuExpand' : 'kuCollapse'%>">
117 <% var filter_label = (filter.label=="klevu_price") ? "price" : filter.label; %>
118 <%=helper.translate(filter_label)%>
119 </div>
120 <div class="kuFilterNames sliderFilterNames <%=(filter.isCollapsed) ? 'kuFilterCollapse' : ''%>">
121 <div class="kuPriceSlider klevuSliderFilter" data-query = "<%=dataLocal%>">
122 <div data-querykey = "<%=dataLocal%>" class="noUi-target noUi-ltr noUi-horizontal noUi-background kuSliderFilter kuPriceRangeSliderFilter<%=dataLocal%>"></div>
123 </div>
124 </div>
125 </div>
126 <% } else if (filter.type == "RATING") { %>
127 <div class="kuFilterBox klevuFilter <%=(filter.multiselect)?'kuMulticheck':''%>" data-filter="<%=filter.key%>" <% if(filter.multiselect){ %> data-singleselect="false" <% } else { %> data-singleselect="true"<% } %>>
128 <div class="kuFilterHead <%=(filter.isCollapsed) ? 'kuExpand' : 'kuCollapse'%>">
129 <%=helper.translate(filter.label)%>
130 </div>
131 <div data-optionCount="<%= filter.options.length %>" class="kuFilterNames <%= (filter.options.length <= 5 ) ? 'kuFilterShowAll': '' %> <%=(filter.isCollapsed) ? 'kuFilterCollapse' : ''%>">
132 <ul>
133 <% helper.each(filter.options,function(key,filterOption){ %>
134 <li <% if(filterOption.selected ==true) { %> class="kuSelected"<% } %>>
135 <a
136 target="_self"
137 href="#"
138 title="<%=helper.escapeHTML(filterOption.name)%>"
139 class="klevuFilterOption<% if(filterOption.selected ==true) { %> klevuFilterOptionActive<% } %>"
140 data-value="<%=helper.escapeHTML(filterOption.value)%>"
141 data-name="<%=helper.escapeHTML(filterOption.name)%>"
142 >
143 <span class="kuFilterIcon"></span>
144 <span class="kufacet-text">
145 <div class="klevuFacetStars">
146 <div class="klevuFacetRating" style="width:<%=(20*Number(filterOption.name))%>%;"></div>
147 </div>
148 </span>
149 <% if(filterOption.selected ==true) { %>
150 <span class="kuFilterCancel">X</span>
151 <% } else { %>
152 <span class="kuFilterTotal"><%=filterOption.count%></span>
153 <% } %>
154 </a>
155 </li>
156
157 <% }); %>
158 </ul>
159 </div>
160 </div>
161 <% } else { %>
162 <!-- Other Facets -->
163 <% } %>
164 <% }); %>
165
166 <!-- <div class="kuFiltersFooter">
167 <a target="_self" href="javascript:void(0)" class="kuBtn kuFacetsSlideOut kuMobileFilterCloseBtn" role="button" tabindex="0" area-label=""><%=helper.translate("Close")%></a>
168 </div> -->
169
170
171 </div>
172 <% } %>
173</script>
174
175<script type="template/klevu" id="klevuLandingTemplateProductBlockCustom">
176 <%
177 var updatedProductName = dataLocal.name;
178 if(klevu.search.modules.kmcInputs.base.getSkuOnPageEnableValue()) {
179 if(klevu.dom.helpers.cleanUpSku(dataLocal.sku)) {
180 updatedProductName += klevu.dom.helpers.cleanUpSku(dataLocal.sku);
181 }
182 }
183 %>
184 <li ku-product-block class="klevuProduct" data-id="<%=dataLocal.id%>">
185 <div class="kuProdWrap">
186 <header ku-block data-block-id="ku_landing_result_item_header">
187 <%=helper.render('landingProductBadge', scope, data, dataLocal) %>
188 </header>
189 <% var desc = [dataLocal.summaryAttribute,dataLocal.packageText,dataLocal.summaryDescription].filter(function(el) { return el; }); desc = desc.join(" "); %>
190 <main ku-block data-block-id="ku_landing_result_item_info">
191 <div class="kuProdTop">
192 <div class="klevuImgWrap">
193 <a data-id="<%=dataLocal.id%>" href="<%=dataLocal.url%>" class="klevuProductClick kuTrackRecentView">
194 <img src="<%=dataLocal.image%>" origin="<%=dataLocal.image%>" onerror="klevu.dom.helpers.cleanUpProductImage(this)" alt="<%=updatedProductName%>" class="kuProdImg">
195 <%=helper.render('landingImageRollover', scope, data, dataLocal) %>
196 </a>
197 </div>
198 <!-- <div class="kuQuickView">
199 <button data-id="<%=dataLocal.id%>" class="kuBtn kuBtnLight kuQuickViewBtn" role="button" tabindex="0" area-label="">Quick view</button>
200 </div> -->
201 </div>
202 </main>
203 <footer ku-block="" data-block-id="ku_landing_result_item_footer">
204 <div class="kuProdBottom">
205 <div class="kuName kuClippedOne"><a data-id="<%=dataLocal.id%>" href="<%=dataLocal.url%>" class="klevuProductClick kuTrackRecentView" title="<%= updatedProductName %>"><%= updatedProductName %></a></div>
206 <% if(dataLocal.inStock && dataLocal.inStock != "yes") { %>
207 <%=helper.render('landingProductStock', scope, data, dataLocal) %>
208 <% } else { %>
209 <% if(klevu.search.modules.kmcInputs.base.getShowPrices()) { %>
210 <div class="kuPrice">
211 <%
212 var kuTotalVariants = klevu.dom.helpers.cleanUpPriceValue(dataLocal.totalVariants);
213 var kuStartPrice = klevu.dom.helpers.cleanUpPriceValue(dataLocal.startPrice,dataLocal.currency);
214 var kuSalePrice = klevu.dom.helpers.cleanUpPriceValue(dataLocal.salePrice,dataLocal.currency);
215 var kuPrice = klevu.dom.helpers.cleanUpPriceValue(dataLocal.price,dataLocal.currency);
216 %>
217 <% if(!Number.isNaN(kuTotalVariants) && !Number.isNaN(kuStartPrice)) { %>
218 <div class="kuSalePrice kuStartPrice kuClippedOne">
219 <span class="klevuQuickPriceGreyText"><%=helper.translate("Starting at")%></span>
220 <span><%=helper.processCurrency(dataLocal.currency,parseFloat(dataLocal.startPrice))%></span>
221 </div>
222 <% } else if(!Number.isNaN(kuSalePrice) && !Number.isNaN(kuPrice) && (kuPrice > kuSalePrice)){ %>
223 <span class="kuOrigPrice kuClippedOne">
224 <%= helper.processCurrency(dataLocal.currency,parseFloat(dataLocal.price)) %>
225 </span>
226 <span class="kuSalePrice kuSpecialPrice kuClippedOne">
227 <%=helper.processCurrency(dataLocal.currency,parseFloat(dataLocal.salePrice))%>
228 </span>
229 <% } else if(!Number.isNaN(kuSalePrice)) { %>
230 <span class="kuSalePrice kuSpecialPrice">
231 <%= helper.processCurrency(dataLocal.currency,parseFloat(dataLocal.salePrice)) %>
232 </span>
233 <% } else if(!Number.isNaN(kuPrice)) { %>
234 <span class="kuSalePrice">
235 <%= helper.processCurrency(dataLocal.currency,parseFloat(dataLocal.price)) %>
236 </span>
237 <% } %>
238 <%=helper.render('searchResultProductVATLabel', scope, data, dataLocal) %>
239 </div>
240 <% } %>
241 <% } %>
242 </div>
243 <div class="kuProdAdditional">
244 <div class="kuProdAdditionalData">
245 <% if(desc && desc.length) { %>
246 <div class="kuDesc kuClippedTwo"> <%=desc%> </div>
247 <% } %>
248 <%=helper.render('landingProductSwatch',scope,data,dataLocal) %>
249 <%=helper.render('klevuLandingProductRating',scope,data,dataLocal) %>
250 <% var isAddToCartEnabled = klevu.search.modules.kmcInputs.base.getAddToCartEnableValue(); %>
251 <% if(isAddToCartEnabled) { %>
252 <%=helper.render('landingPageProductAddToCart',scope,data,dataLocal) %>
253 <% } %>
254 </div>
255 </div>
256 </footer>
257 </div>
258
259 <!-- start of compare customization -->
260 <button class="klevu-compare" data-id="<%=dataLocal.id%>" data-itemGroupId="<%=dataLocal.itemGroupId%>">
261 <input id="klevuCompare_<%=dataLocal.id%>" class="klevu-compare__checkbox" type="checkbox" style="pointer-events:none"/>
262 <label for="klevuCompare_<%=dataLocal.id%>" class="klevu-compare__label"> <%= helper.translate("Compare")%> </label>
263 </button>
264 <!-- end of compare customization -->
265
266 </li>
267</script>
First, let’s add the code that will choose which attributes to callout when products are compared
JS
1// Array of keys you want to render in the Compare table
2window.KEYS_TO_COMPARE = [
3 "inStock",
4 "grams",
5 "sku",
6 "brand",
7 "size",
8 "category"
9 // "tags",
10 // "type",
11 // "itemGroupId",
12 // "storeBaseCurrency",
13 // "inventory_item_id",
14 // "imageUrl",
15 // "currency",
16 // "id",
17 // "image",
18 // "url",
19 // "product_type",
20 // "name",
21 // "shortDesc",
22];
Next we need to tell Klevu to use our custom templates. Skip this step if you are already customizing all three of these templates (klevuTemplateLanding, filters, and productBlock). You may need to modify the code if you only have one or two of these templates.
JS
1klevu({
2 theme: {
3 setTemplates: {
4 compareBase: {
5 scope: "landing,catnav",
6 selector: "#klevuLandingTemplateBaseCustom",
7 name: "klevuTemplateLanding"
8 },
9 compareFilters: {
10 scope: "landing,catnav",
11 selector: "#klevuLandingTemplateFiltersCustom",
12 name: "filters"
13 },
14 compareProductBlock: {
15 scope: "landing,catnav",
16 selector: "#klevuLandingTemplateProductBlockCustom",
17 name: "productBlock"
18 }
19 }
20 }
21});
Now we need to add the code that will powerup the compare feature:
JS
1// This settings controls whether to Show only differences on page load or not.
2window.klevu_compare_show_differences_checked = true;
3
4klevu.afterTemplateRender('landing,catnav', function(data, scope){
5 /** COMPARE PRODUCTS FEATURE */
6 const docBody = document.getElementsByTagName('body')[0];
7 const klevuAPIkey = klevu.getGlobalSetting("search.apiKey", klevu.getGlobalSetting("global.apiKey"));
8 const placeholderImageUrl = 'https://js.klevu.com/klevu-js-v1/img-1-1/place-holder.jpg'; // Replace with your placeholder image URL
9 const klevuScope = klevu.getSetting(klevu, "settings.flags.setRemoteConfigLanding.build") ? 'landing' : 'catnav';
10
11 toggleCheckbox();
12 saveCompareDataToLocalStorage();
13 [...document.querySelectorAll('.klevu-compare')].forEach(element => {
14 klevu.event.attach(element, "click", clickHandler_addToCompareList);
15 });
16
17 docBody.addEventListener('click', function ({ target }) {
18 try {
19 if (target.matches('#klevu-compare-button, #klevu-compare-button *, #klevu-compare-table, #klevu-compare-table *')) {
20 docBody.classList.add('klevu-compare-table-shown');
21 } else {
22 docBody.classList.remove('klevu-compare-table-shown');
23 }
24 // close button
25 if (target.matches("#klevu-close-compare, #klevu-close-compare *")) {
26 docBody.classList.remove('klevu-compare-table-shown');
27 }
28 } catch (err) { }
29 })
30
31 function getKlevuCompareIdArray() {
32 return localStorage.getItem(`klevu-compare-ids-${klevuScope}-${klevuAPIkey}`) ? JSON.parse(localStorage.getItem(`klevu-compare-ids-${klevuScope}-${klevuAPIkey}`)) : [];
33 }
34
35 function saveIDsToLocalStorage(currID, forceOverride = false) {
36 if (forceOverride) {
37 // Save the updated data back to local storage
38 localStorage.setItem(`klevu-compare-ids-${klevuScope}-${klevuAPIkey}`, JSON.stringify(currID));
39 } else {
40 let existingIDs = getKlevuCompareIdArray();
41
42 if (!getKlevuCompareIdArray().includes(currID)) { // Check if the ID is not already in the existing data
43 existingIDs.push(currID); // Add the new ID to the existing data
44 } else if (getKlevuCompareIdArray().includes(currID)) {
45 const existingIndex = getKlevuCompareIdArray().indexOf(currID);
46 existingIDs.splice(existingIndex, 1); // Remove this ID from the existing data
47 }
48
49 // Save the updated data back to local storage
50 localStorage.setItem(`klevu-compare-ids-${klevuScope}-${klevuAPIkey}`, JSON.stringify(existingIDs));
51 }
52 };
53
54 function saveCompareDataToLocalStorage(data = null) {
55 localStorage.setItem(`klevu-compare-data-${klevuScope}-${klevuAPIkey}`, data);
56
57 // If no argument passed && there are some IDs in the storage, but no entries in local storage
58 if (data === null && getKlevuCompareIdArray() && !getKlevuCompareDataObject()) {
59 getAndSaveDataByIDs(getKlevuCompareIdArray());
60 }
61 }
62
63 function getKlevuCompareDataObject() {
64 return JSON.parse(localStorage.getItem(`klevu-compare-data-${klevuScope}-${klevuAPIkey}`))
65 }
66
67 function clearImgUrl(url) { return url.replace("/needtochange/", "/") };
68
69 function renderSideWidget() {
70 const selectedProductsAmount = getKlevuCompareIdArray().length || null;
71 const widgetElement = document.querySelector('#klevu-compare-widget');
72 const widgetCompareButtonElement = document.querySelector('#klevu-compare-button');
73 const selectedProductsAmountElement = document.querySelector('.klevu-compare-widget__selected-amount');
74 const selectedProductsImagesElement = document.querySelector('.klevu-compare-widget__images');
75 let widgetHTMLlistItem = '';
76
77 getKlevuCompareDataObject().map(item => {
78 const imageUrl = item.image ? clearImgUrl(item.image) : placeholderImageUrl;
79 widgetHTMLlistItem += `
80 <li class="klevu-compare-widget__item">
81 <button class="klevu-compare-widget__item-button" data-id="${item.id}" title="Remove from Klevu comparison">
82 <img class="klevu-compare-widget__item-image" alt="${item.name}" style="max-height:50px;max-width:40px;" src="${imageUrl}" onerror="this.onerror=null; this.src='${placeholderImageUrl}'" />
83 <i class="klevu-compare-widget__item-button-cross">×</i>
84 </button>
85 </li>`;
86 selectedProductsImagesElement.innerHTML = widgetHTMLlistItem;
87 });
88
89
90 if (selectedProductsAmount && widgetElement) {
91 selectedProductsAmountElement.innerHTML = selectedProductsAmount;
92 selectedProductsImagesElement.innerHTML = widgetHTMLlistItem;
93 widgetElement.classList.remove('klevu-compare-widget--klevu-hidden');
94 if (selectedProductsAmount > 1) {
95 widgetCompareButtonElement.disabled = false;
96 } else {
97 widgetCompareButtonElement.disabled = true;
98 }
99 } else if (widgetElement) {
100 widgetElement.classList.add('klevu-compare-widget--klevu-hidden');
101 }
102
103 }
104
105 function generateAddToCartHTML(item) {
106 // Check if the item is in stock
107 if (item.inStock !== "no") {
108 // Get the 'Add to Cart' caption
109 var addToCartCaption = klevu.getObjectPath(klevu.search, "modules.kmcInputs.kmcData.klevu_uc_userOptions.addToCartButton", "Add to cart");
110
111 var translatedCaption;
112 if (typeof klevu_uc_userOptions !== 'undefined' && klevu_uc_userOptions) {
113 translatedCaption = klevu_uc_userOptions.addToCartButton;
114 }
115
116 // Check if the 'Add to Cart' caption contains an image
117 if (addToCartCaption) {
118 return `
119 <div class="kuAddtocart" data-id="${item.id}">
120 <a target="_self" href="javascript:void(0)" class="kuBtn kuBtnDark kuLandingAddToCartBtn" role="button" tabindex="0" aria-label="Add to cart">${addToCartCaption}</a>
121 </div>
122 `;
123 }
124 }
125 return '';
126 }
127
128 function generatePriceHTML(data) {
129 var kuTotalVariants = klevu.dom.helpers.cleanUpPriceValue(data.totalVariants);
130 var kuStartPrice = klevu.dom.helpers.cleanUpPriceValue(data.startPrice, data.currency);
131 var kuSalePrice = klevu.dom.helpers.cleanUpPriceValue(data.salePrice, data.currency);
132 var kuPrice = klevu.dom.helpers.cleanUpPriceValue(data.price, data.currency);
133
134 var processCurrency = scope.kScope.template.getTemplateSettings().helpers.processCurrency;
135
136 let htmlParts = [''];
137
138 if (!isNaN(kuTotalVariants) && !isNaN(kuStartPrice)) {
139 htmlParts.push(`
140 <div class="kuSalePrice kuStartPrice kuClippedOne">
141 <span class="klevuQuickPriceGreyText">Starting at</span>
142 <span>${processCurrency(data.currency, parseFloat(data.startPrice))}</span>
143 </div>`);
144 } else if (!isNaN(kuSalePrice) && !isNaN(kuPrice) && (kuPrice > kuSalePrice)) {
145 htmlParts.push(`
146 <span class="kuOrigPrice kuClippedOne">
147 ${processCurrency(data.currency, parseFloat(data.price))}
148 </span>
149 <span class="kuSalePrice kuSpecialPrice kuClippedOne">
150 ${processCurrency(data.currency, parseFloat(data.salePrice))}
151 </span>`);
152 } else if (!isNaN(kuSalePrice)) {
153 htmlParts.push(`
154 <span class="kuSalePrice kuSpecialPrice">
155 ${processCurrency(data.currency, parseFloat(data.salePrice))}
156 </span>`);
157 } else if (!isNaN(kuPrice)) {
158 htmlParts.push(`
159 <span class="kuSalePrice">
160 ${processCurrency(data.currency, parseFloat(data.price))}
161 </span>`);
162 }
163
164 htmlParts.push('');
165
166 return htmlParts.join('');
167 }
168
169 function renderCompareProducts() {
170 const selectedProductsAmount = getKlevuCompareIdArray().length || null;
171 const tableElement = document.querySelector('#klevu-compare-table');
172 const tableHeadElement = tableElement.querySelector('thead tr');
173 const tableOptionElement = tableElement.querySelector('tbody');
174 let listItemHeadingHTML = ``;
175 let listItemOptionHTML = ``;
176
177
178 getKlevuCompareDataObject().forEach(item => {
179 const imageUrl = item.image ? clearImgUrl(item.image) : placeholderImageUrl;
180
181 listItemHeadingHTML += `<th>
182 <img src="${imageUrl}" alt="${item.name}">
183 <div class="kuName kuClippedOne">
184 <a data-id="${item.id}" href="${item.url}" class="klevuProductClick" title="${item.name}">${item.name}</a>
185 </div>
186 <div class="kuPrice">${generatePriceHTML(item)}</div>
187 <button class="klevu-compare-widget__item-button" data-id="${item.id}" title="Remove from Klevu comparison"><span>×</span></button>
188 ${generateAddToCartHTML(item)}
189 </th>`;
190 });
191
192 try {
193
194 KEYS_TO_COMPARE.forEach(key => {
195 // Map out the values for this key from each product
196 const values = getKlevuCompareDataObject().map(item => item[key] || '');
197
198 // Check if all values are the same, ignoring case
199 const allValuesSame = values.every((val, _, arr) => val.toLowerCase() === arr[0].toLowerCase());
200
201 // Determine whether to add the 'hide' class based on the comparison
202 const trClass = allValuesSame && klevu_compare_show_differences_checked ? 'hide' : '';
203
204 const valueRows = values.map(value => `<td><span class="spec" spec-title="${key}">${value}</span></td>`).join('');
205
206 if (valueRows.trim()) { // Only add the row if it's not empty
207 listItemOptionHTML += `<tr class="${trClass}" data-name="${key}"><td class="klevu-compare-table__label">${key}</td>${valueRows}</tr>`;
208 }
209 });
210 } catch (error) {
211 console.log('KEYS_TO_COMPARE array error. Please declare the KEYS_TO_COMPARE Array!', error);
212 }
213
214 tableHeadElement.innerHTML = `<th class="klevu-compare-table__label"> </th> ${listItemHeadingHTML}`;
215 tableOptionElement.innerHTML = listItemOptionHTML;
216
217 if (selectedProductsAmount) {
218 // Add code for displaying the selected products amount
219 } else {
220 // Add code for handling no selected products
221 }
222 }
223
224 function toggleDifferences() {
225 const toggleDifferencesCheckbox = document.getElementById('toggleDifferences');
226 toggleDifferencesCheckbox.addEventListener('change', function () {
227 const rows = document.querySelectorAll('#klevu-compare-table tbody tr');
228 rows.forEach(row => {
229 const values = [...row.querySelectorAll('td span.spec')].map(spec => spec.textContent.trim().toLowerCase());
230 const allEqual = values.every(val => val === values[0]);
231 if (allEqual) {
232 row.classList.toggle('hide', this.checked);
233 }
234 });
235 });
236 }
237
238 function renderCompareWidget() {
239 renderSideWidget();
240 renderCompareProducts();
241 toggleDifferences();
242 }
243
244 function getAndSaveDataByIDs(idArray) {
245 /** SEND REQUEST - get products by IDs */
246 const idQueryString = `(${idArray.map(id => `id:"${id}"`).join(" OR ")})`;
247 var data = JSON.stringify({
248 recordQueries: [
249 {
250 settings: {
251 customANDQuery: idQueryString,
252 query: { term: "*" },
253 typeOfRecords: ["KLEVU_PRODUCT"],
254 fields: [],
255 limit: idArray.length,
256 },
257 id: "productSearch",
258 },
259 ], context: { apiKeys: [klevuAPIkey] },
260 });
261 var xhr = new XMLHttpRequest();
262 xhr.withCredentials = false;
263 xhr.addEventListener("readystatechange", function () {
264 if (this.readyState === 4) {
265 const results = JSON.parse(this.responseText).queryResults[0].records;
266 fireAfterRequest(results);
267 }
268 });
269 xhr.open("POST", klevu.settings.url.search);
270 xhr.setRequestHeader("Content-Type", "application/json");
271 xhr.send(data); // Send the request
272 }
273
274 function toggleCheckbox(currentId = null) {
275
276 try {
277 if (currentId) {
278 // on click:
279 if (getKlevuCompareIdArray().includes(currentId)) {
280 document.querySelector(`.klevu-compare[data-id="${currentId}"]`).classList.add('klevu-selected');
281 document.querySelector(`.klevu-compare[data-id="${currentId}"] input`).checked = true;
282 } else {
283 document.querySelector(`.klevu-compare[data-id="${currentId}"]`).classList.remove('klevu-selected');
284 document.querySelector(`.klevu-compare[data-id="${currentId}"] input`).checked = false;
285 }
286 } else {
287 // on load:
288 [...document.querySelectorAll('.klevu-compare')].forEach(element => {
289 // if (getKlevuCompareIdArray().includes(element.dataset.itemgroupid)) {
290 if (getKlevuCompareIdArray().includes(element.dataset.id)) {
291 element.classList.add('klevu-selected');
292 element.querySelector('input.klevu-compare__checkbox').checked = true;
293 }
294 });
295 }
296 } catch (error) {
297
298 }
299
300 }
301
302 function removeFromKlevuComparison(id) {
303
304 [...document.querySelectorAll('.klevu-compare-widget__item-button')].forEach(element => {
305 element.addEventListener('click', function (ev) {
306 ev.preventDefault();
307 ev.stopPropagation();
308
309 // const currID = ev.target.closest('.klevu-compare-widget__item-button').dataset.itemgroupid;
310 const currID = ev.target.closest('.klevu-compare-widget__item-button').dataset.id;
311 const filteredData = getKlevuCompareIdArray().filter(val => val !== currID);
312 saveIDsToLocalStorage(filteredData, true);
313 getAndSaveDataByIDs(getKlevuCompareIdArray());
314 toggleCheckbox(currID);
315
316 // hide compare popup if there's 1 product
317 if (getKlevuCompareIdArray().length <= 1) {
318 docBody.classList.remove('klevu-compare-table-shown');
319 }
320 })
321 });
322
323 }
324
325 function clickHandler_addToCompareList(event) {
326 // const currentId = event.target.closest('.klevu-compare').dataset.itemgroupid;
327 const currentId = event.target.closest('.klevu-compare').dataset.id;
328
329 event.stopPropagation();
330 event.preventDefault();
331
332 saveIDsToLocalStorage(currentId);
333 toggleCheckbox(currentId);
334 getAndSaveDataByIDs(getKlevuCompareIdArray());
335 // renderCompareWidget();
336 }
337
338 function fireAfterRequest(results) {
339 saveCompareDataToLocalStorage(JSON.stringify(results));
340 renderCompareWidget();
341 removeFromKlevuComparison();
342 }
343
344 /** END OF COMPARE PRODUCTS FEATURE */
345});
The final step is to add the CSS code that will style the compare feature.
CSS
1<style>
2/* COMPARE FEATURE */
3
4.kuSearchResultsPageContainer [ku-container] .klevu-compare,
5.kuSearchResultsPageContainer .klevu-compare {
6 display: flex;
7 justify-content: center;
8 align-content: center;
9 position: absolute;
10 top: 0;
11 right: 0;
12 z-index: 2;
13 background-color: #fff;
14 padding: 3px 15px;
15 display: flex;
16 justify-content: center;
17 align-items: center;
18 border: 1px solid var(--klevu-bgcolor);
19 border-radius: var(--klevu-buttonRadius);
20}
21
22.kuSearchResultsPageContainer [ku-container] #klevu-compare-button,
23.kuSearchResultsPageContainer #klevu-compare-button {
24 color: #fff;
25 cursor: pointer;
26 background-color: var(--klevu-blue);
27 border: 0;
28 padding: 5px 8px;
29}
30
31.kuSearchResultsPageContainer [ku-container] #klevu-compare-button:disabled,
32.kuSearchResultsPageContainer #klevu-compare-button:disabled {
33 cursor: no-drop;
34 opacity: 0.5;
35}
36
37.kuSearchResultsPageContainer [ku-container] .klevu-compare__checkbox,
38.kuSearchResultsPageContainer .klevu-compare__checkbox {
39 margin: 0;
40}
41
42.kuSearchResultsPageContainer [ku-container] .klevu-compare__label,
43.kuSearchResultsPageContainer .klevu-compare__label {
44 margin-left: 5px;
45 cursor: pointer;
46}
47
48.kuSearchResultsPageContainer [ku-container] div .klevu-compare-widget__selected-amount::before {
49 content: ':';
50 margin-left: 0;
51 margin-right: 5px;
52}
53
54.kuSearchResultsPageContainer [ku-container] div #klevu-compare-widget {
55 display: flex;
56 flex-direction: column;
57 gap: 10px;
58 margin: 10px auto;
59}
60
61.kuSearchResultsPageContainer [ku-container] div .klevu-compare-widget__header {
62 display: flex;
63 flex-direction: column;
64 gap: 10px;
65}
66
67.kuSearchResultsPageContainer [ku-container] div .klevu-compare-widget__images {
68 display: flex;
69 align-items: center;
70 gap: 0 10px;
71 margin: 0;
72 padding: 0;
73 overflow-x: auto;
74}
75
76.kuSearchResultsPageContainer [ku-container] div .klevu-compare-widget__item {
77 list-style: none;
78 border: 1px solid transparent;
79}
80
81.kuSearchResultsPageContainer [ku-container] div .klevu-compare-widget__item:hover {
82 list-style: none;
83 border: 1px solid #888;
84}
85
86.kuSearchResultsPageContainer [ku-container] div .klevu-compare-widget__item-button {
87 border: 0;
88 background-color: transparent;
89 padding: 0;
90 margin: 0;
91 cursor: pointer;
92 position: relative;
93}
94
95.kuSearchResultsPageContainer [ku-container] div .klevu-compare-widget__item-button-cross {
96 position: absolute;
97 font-style: normal;
98 top: -5px;
99 right: 0;
100}
101
102.kuSearchResultsPageContainer #klevu-close-compare {
103 background-color: #fff;
104 border: 0;
105 padding: 15px;
106 cursor: pointer;
107 z-index: 1;
108 border: 1px solid transparent;
109 display: flex;
110 align-items: center;
111 justify-content: center;
112}
113
114.kuSearchResultsPageContainer #klevu-close-compare:hover {
115 border: 1px solid var(--klevu-black)
116}
117
118.kuSearchResultsPageContainer #klevu-compare-table tr {
119 display: grid;
120 grid-auto-flow: column;
121 grid-auto-columns: 1fr;
122}
123
124.kuSearchResultsPageContainer #klevu-compare-table thead {
125 position: sticky;
126 top: 0;
127}
128
129.kuSearchResultsPageContainer #klevu-compare-table tr th .klevu-compare-widget__item-button {
130 position: absolute;
131 top: 0;
132 right: 0;
133 background-color: var(--klevu-blue);
134 color: #fff;
135 border: 0;
136}
137
138.kuSearchResultsPageContainer [ku-container] div #klevu-compare-widget.klevu-compare-widget--klevu-hidden {
139 display: none;
140 visibility: hidden;
141}
142
143.kuSearchResultsPageContainer .klevu-compare-table {
144 display: none;
145 visibility: hidden;
146 background: #fff;
147 max-height: calc(100vh - 10%);
148 overflow: auto;
149 position: fixed;
150 top: 50%;
151 left: 50%;
152 transform: translate(-50%, -50%);
153 max-width: 85vw;
154 z-index: 1000;
155}
156
157body.klevu-compare-table-shown .kuSearchResultsPageContainer .klevu-compare-table {
158 display: block;
159 visibility: visible;
160}
161
162body.klevu-compare-table-shown .kuSearchResultsPageContainer [data-container-role=main] .kuContainer {
163 filter: blur(3px);
164}
165
166body.klevu-compare-table-shown .kuSearchResultsPageContainer .klevuWrap::before {
167 background-color: #000;
168 opacity: 0.5;
169 width: 100vw;
170 height: 100vh;
171 position: fixed;
172 top: 0;
173 left: 0;
174 right: 0;
175 bottom: 0;
176 display: block;
177 content: '';
178 z-index: 1;
179}
180
181.kuSearchResultsPageContainer .klevu-compare-table table {}
182
183.kuSearchResultsPageContainer .klevu-compare-table th {
184 position: sticky;
185 /* Make th sticky to avoid JavaScript */
186 z-index: 1;
187 /* border: 1px solid #ccc; */
188 top: 0;
189 display: flex;
190 flex-direction: column;
191 align-items: center;
192 justify-content: center;
193}
194
195.kuSearchResultsPageContainer .klevu-compare-table th:not(:last-child),
196.kuSearchResultsPageContainer .klevu-compare-table td:not(:last-child) {
197 border-right: 1px solid #ccc;
198}
199
200.kuSearchResultsPageContainer .klevu-compare-table td,
201.kuSearchResultsPageContainer .klevu-compare-table th {
202 padding: 10px;
203 min-width: 300px;
204 /* Add a minimum width below which no resize is allowed (for small screens). It can be whatever serves the design best */
205 text-align: center;
206}
207
208.kuSearchResultsPageContainer .klevu-compare-table .klevu-compare-table__products {
209 /* padding-top: 40px; */
210 max-height: calc(100vh - 10%);
211 overflow: auto;
212 padding: 15px;
213}
214
215.kuSearchResultsPageContainer .klevu-compare-table .klevu-compare-table__products th,
216.kuSearchResultsPageContainer .klevu-compare-table .klevu-compare-table__products td {
217 width: 25%;
218 max-width: 300px;
219 overflow: hidden;
220 gap: 10px 0;
221 /* Depending on the number of products in comparison, different classes should be used (e.g. 3 products should have a .products-3 class with a width of 33.333%) */
222}
223
224.kuSearchResultsPageContainer .klevu-compare-table th {
225 background: #fff;
226 /* top: -2px; */
227 top: 0;
228 /* We need this to attach the "stuck" attribute */
229}
230
231.kuSearchResultsPageContainer .klevu-compare-table th h4 {
232 margin: 15px 0 0;
233}
234
235.kuSearchResultsPageContainer .klevu-compare-table th img {
236 max-height: calc(var(--klevu-product-image-height--desktop) - 50px) !important;
237 max-width: 100%;
238 object-fit: contain;
239 margin: 0 auto;
240 display: block;
241 transition: height 200ms ease-in-out;
242}
243
244.kuSearchResultsPageContainer .klevu-compare-table th .kuName {
245 display: block !important;
246}
247
248.kuSearchResultsPageContainer .klevu-compare-table th .kuPrice {
249 margin-top: auto;
250 text-align: center;
251}
252
253.kuSearchResultsPageContainer .klevu-compare-table th .kuBtn,
254.kuSearchResultsPageContainer .klevu-compare-table th .kuAddtocart {
255 margin: 0;
256}
257
258.kuSearchResultsPageContainer .klevu-compare-table .klevu-compare-table__sticky img {
259 height: 100px;
260}
261
262.kuSearchResultsPageContainer .klevu-compare-table .klevu-compare-table__label {
263 font-weight: bold;
264 text-align: left;
265 min-width: 150px;
266 /* Labels should have a strict width, based on the design (150px is just for this demo) */
267 width: 150px;
268 /* In order to enforce the width we need to apply both a min-width and a width with the same value */
269 background: #eee;
270}
271
272.kuSearchResultsPageContainer .klevu-compare-table th.klevu-compare-table__label {
273 background: #fff;
274 border-color: #fff;
275}
276
277.kuSearchResultsPageContainer .klevu-compare-table .klevu-compare-table__heading {
278 background: #ccc;
279 width: 100%;
280 text-align: left;
281 position: relative;
282}
283
284.kuSearchResultsPageContainer .klevu-compare-table .klevu-compare-table__heading span {
285 position: sticky;
286 top: 0;
287 left: 10px;
288}
289
290.kuSearchResultsPageContainer .klevu-compare-table .spec {
291 word-break: break-all;
292}
293
294.kuSearchResultsPageContainer #klevu-compare-table .hide {
295 display: none;
296 visibility: hidden;
297}
298
299.kuSearchResultsPageContainer #klevu-compare-table .klevu-compare-table-header {
300 z-index: 2;
301 background-color: #fff;
302 position: sticky;
303 top: 0;
304 right: 0;
305 left: 0;
306 display: flex;
307 justify-content: space-between;
308 align-items: center;
309 padding: 15px;
310}
311
312.kuSearchResultsPageContainer #klevu-compare-table .toggle-differences {
313 position: sticky;
314 top: 5px;
315 left: 5px;
316 padding: 10px 15px;
317 border: 1px solid var(--klevu-black);
318}
319
320/* @media all and (max-width: 600px) { */
321
322.kuSearchResultsPageContainer .klevu-compare-table .klevu-compare-table__label {
323 display: none;
324 /* We want to hide the labels on small screens... */
325}
326
327.kuSearchResultsPageContainer .klevu-compare-table .spec::before {
328 /* ...and show them above each spec instead. */
329 content: attr(spec-title);
330 color: #999;
331 display: block;
332 text-transform: capitalize;
333}
334
335/* COMPARE FEATURE END */
336</style>
Updated 20 May 2024
Did this page help you?