Last active
June 19, 2026 06:59
-
-
Save sandipklevu/c09f180ca9bd13dc855c7f334273438f to your computer and use it in GitHub Desktop.
Klevu Template Custom Price Fetch from Magento 2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/javascript"> | |
| klevu.interactive(function () { | |
| function formatPrice(price, currency, locale = navigator.language) { | |
| return new Intl.NumberFormat(locale, { | |
| style: 'currency', | |
| currency: currency | |
| }).format(price); | |
| } | |
| function findProductList(data) { | |
| return data.find(function (item) { | |
| return item.id === 'productList'; | |
| }); | |
| } | |
| function clearElementsById(elements) { | |
| elements.forEach(function (element) { | |
| if (typeof element === 'string') { | |
| element = document.getElementById(element); | |
| } | |
| if (element) { | |
| element.innerHTML = ''; | |
| } | |
| }); | |
| } | |
| function cleanUpProductId(id) { | |
| if (typeof id === 'undefined' || id === null || id === '') { | |
| return false; | |
| } | |
| var value = id.toString().trim(); | |
| if (!value) { | |
| return false; | |
| } | |
| if (value.indexOf('-') !== -1) { | |
| var parts = value.split('-'); | |
| return parts[parts.length - 1]; | |
| } | |
| return value; | |
| } | |
| function fetchPrices(klevuIds, currency, callback) { | |
| var finalIds = []; | |
| klevuIds.forEach(function (id) { | |
| var cleaned = cleanUpProductId(id); | |
| if (cleaned) { | |
| finalIds.push(cleaned); | |
| } | |
| }); | |
| if (!finalIds.length) { | |
| callback({ items: [] }); | |
| return; | |
| } | |
| //change route as per webapi.xml | |
| fetch('/rest/V1/custom-pricing/final-price', { | |
| method: 'POST', | |
| credentials: 'same-origin', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| items: finalIds, | |
| currency: currency | |
| }) | |
| }) | |
| .then(function (res) { | |
| return res.json(); | |
| }) | |
| .then(callback) | |
| .catch(function (error) { | |
| console.error('Custom Magento pricing API error:', error); | |
| callback({ items: [] }); | |
| }); | |
| } | |
| function renderPricesOnFrontend(result, productList, priceSelector, listItemSelector, locale, currency) { | |
| if (!result || !result.items) { | |
| return; | |
| } | |
| var priceBeforeDiscountSelector = priceSelector.replace('Sale', 'Orig'); | |
| var helpers = klevu.search.base.getScope().template.getHelpers(); | |
| helpers.clearElementsById(document.querySelectorAll(priceSelector)); | |
| helpers.clearElementsById(document.querySelectorAll(priceBeforeDiscountSelector)); | |
| var resultMap = {}; | |
| result.items.forEach(function (item) { | |
| var key = (item.entity_id || item.id || '').toString().trim(); | |
| if (key) { | |
| resultMap[key] = item; | |
| } | |
| }); | |
| productList.forEach(function (currentProduct) { | |
| var productId = currentProduct.id; | |
| var lookupId = cleanUpProductId(productId); | |
| if (!lookupId || !resultMap[lookupId]) { | |
| return; | |
| } | |
| var priceData = resultMap[lookupId]; | |
| var basePrice = priceData.base_price != null ? priceData.base_price : null; | |
| var finalPrice = priceData.final_price != null ? priceData.final_price : null; | |
| var regularPrice = priceData.price != null ? priceData.price : basePrice; | |
| if (finalPrice === null) { | |
| return; | |
| } | |
| var formattedFinalPrice = helpers.formatPrice(finalPrice, currency, locale); | |
| var formattedOriginalPrice = regularPrice !== null | |
| ? helpers.formatPrice(regularPrice, currency, locale) | |
| : null; | |
| var listPriceItems = document.querySelectorAll(listItemSelector + '[data-id="' + productId + '"]'); | |
| Array.prototype.forEach.call(listPriceItems, function (list) { | |
| var salePriceItem = list.querySelector(priceSelector); | |
| var origPriceItem = list.querySelector(priceBeforeDiscountSelector); | |
| if (salePriceItem) { | |
| salePriceItem.innerHTML = '<span data-custom-price="' + formattedFinalPrice + '" class="klevu-cg-sp-prices">' + formattedFinalPrice + '</span>'; | |
| } | |
| if ( | |
| origPriceItem && | |
| formattedOriginalPrice !== null && | |
| parseFloat(regularPrice) > parseFloat(finalPrice) | |
| ) { | |
| origPriceItem.innerHTML = '<span data-custom-price="' + formattedOriginalPrice + '" class="klevu-cg-prices">' + formattedOriginalPrice + '</span>'; | |
| } | |
| }); | |
| }); | |
| } | |
| klevu.search.base.getScope().template.setHelper('formatPrice', formatPrice); | |
| klevu.search.base.getScope().template.setHelper('findProductList', findProductList); | |
| klevu.search.base.getScope().template.setHelper('clearElementsById', clearElementsById); | |
| klevu.search.base.getScope().template.setHelper('fetchPrices', fetchPrices); | |
| klevu.search.base.getScope().template.setHelper('cleanUpProductId', cleanUpProductId); | |
| klevu.search.base.getScope().template.setHelper('renderPricesOnFrontend', renderPricesOnFrontend); | |
| }); | |
| klevu.afterTemplateRender("quick", function (data, scope) { | |
| var helpers = klevu.search.base.getScope().template.getHelpers(); | |
| var salePriceSelector = '.klevuQuickSalePrice'; | |
| var kuProductSelector = '.kuQuickResultsListContainer .klevuProduct'; | |
| var currentCurrencyCode = 'USD'; //change if required. | |
| var currentLocale = 'en-US'; | |
| helpers.clearElementsById(document.querySelectorAll(salePriceSelector)); | |
| var klevuResponse = klevu.getObjectPath(data, 'response.current.queryResults'); | |
| var productList = typeof helpers.findProductList(klevuResponse) !== 'undefined' | |
| ? helpers.findProductList(klevuResponse).records | |
| : null; | |
| if (!productList) { | |
| return; | |
| } | |
| var arrayIDs = productList.map(function (element) { | |
| return element.id; | |
| }); | |
| helpers.fetchPrices(arrayIDs, currentCurrencyCode, function (result) { | |
| helpers.renderPricesOnFrontend( | |
| result, | |
| productList, | |
| salePriceSelector, | |
| kuProductSelector, | |
| currentLocale, | |
| currentCurrencyCode | |
| ); | |
| }); | |
| }); | |
| klevu.afterTemplateRender("full_page", function (data, scope) { | |
| var helpers = klevu.search.base.getScope().template.getHelpers(); | |
| var salePriceSelector = '.kuSalePrice'; | |
| var kuProductSelector = '.klevuProduct'; | |
| var currentCurrencyCode = 'USD'; | |
| var currentLocale = 'en-US'; | |
| var klevuResponse = klevu.getObjectPath(data, 'response.current.queryResults'); | |
| var productList = typeof helpers.findProductList(klevuResponse) !== 'undefined' | |
| ? helpers.findProductList(klevuResponse).records | |
| : null; | |
| if (!productList) { | |
| return; | |
| } | |
| var arrayIDs = productList.map(function (element) { | |
| return element.id; | |
| }); | |
| helpers.fetchPrices(arrayIDs, currentCurrencyCode, function (result) { | |
| helpers.renderPricesOnFrontend( | |
| result, | |
| productList, | |
| salePriceSelector, | |
| kuProductSelector, | |
| currentLocale, | |
| currentCurrencyCode | |
| ); | |
| }); | |
| }); | |
| </script> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
default.xmlprices.phtmlabove gist content
(/rest/V1/custom-pricing/final-price)