EcoScore is a unique assessment system developed by JGBM that ranks individual tech products based on environmental criteria - delivering a clear and trusted EcoScore rating for display on your product webpages. If you decide your webstore could benefit, we’ve put together a helpful guide that walks you through every step - including how to incorporate the EcoScore rating into your EvolutionX webstore.
1. Register
Head over to ecoscores.co.uk and create an account by selecting either a free or paid plan that best suits your needs. Registration only takes a few minutes and gives you access to EcoScore integration options.
2. Receive Your Client Token
Once your account is set up, EcoScore will email you a unique Client Token - a secure string of characters used to identify your account, website, and subscription level. You’ll need this token to display EcoScore ratings on your site.
3. Access Theme Options
In your EvolutionX admin panel, go to Appearance > Theme Options from the left-hand side menu.
4. Add Code to Header Block
Inside Theme Options, scroll down to the Header Block section and paste the following code snippet:
Important:
Before publishing, replace PASTE YOUR TOKEN HERE with the token provided by Ecoscore (see point 2).
Only replace the text inside the quotes - do not remove the quotation marks or change any other part of the code.
If you already have code in the Header Block, add this script on a new line at the bottom of the existing code.
<script>
let ecoscoresApiReady = false;
let ecoscoresInitialized = false;
let activeVisibilityInterval = null;
let processedElementIds = new Set();
const ecoscoresConfig = {
token: "PASTE YOUR TOKEN HERE",
};
function getElementId(element) {
const model = element.getAttribute('model') || 'unknown';
const brand = element.getAttribute('brand') || 'unknown';
const tagName = element.tagName || 'unknown';
return model + '_' + brand + '_' + tagName;
}
function showElement(element) {
if (element.style.opacity === '0') {
element.style.opacity = '1';
}
processedElementIds.add(getElementId(element));
}
function clearActiveInterval() {
if (activeVisibilityInterval) {
clearInterval(activeVisibilityInterval);
activeVisibilityInterval = null;
}
}
function checkAndFadeInElements() {
const allEcoElements = document.querySelectorAll('ecoscores-rank, ecoscores-content');
let processedCount = 0;
allEcoElements.forEach((element) => {
const hasChildren = element.children.length > 0;
const hasContent = element.textContent.trim().length > 0;
const outerHTML = element.outerHTML;
const hasAnyContent = outerHTML ?
element.innerHTML.trim().length > outerHTML.indexOf('>') + 1 :
element.innerHTML.trim().length > 0;
const hasEcoScoresContent = element.querySelector('[class*="eco"], [class*="score"], [class*="rating"]') ||
element.innerHTML.toLowerCase().includes('eco') ||
element.innerHTML.toLowerCase().includes('score') ||
element.innerHTML.toLowerCase().includes('rating') ||
element.innerHTML.toLowerCase().includes('badge');
if (hasChildren || hasContent || hasAnyContent || hasEcoScoresContent) {
if (element.style.opacity === '0') {
element.style.opacity = '1';
processedCount++;
}
}
});
return { total: allEcoElements.length, processed: processedCount };
}
function ecoscores__ready() {
if (ecoscoresInitialized) return;
if (typeof EcoScores !== 'undefined') {
ecoscoresInitialized = true;
EcoScores.Load(ecoscoresConfig);
setTimeout(() => {
ecoscoresApiReady = true;
startEcoScoresVisibilityCheck();
if (window.pendingEcoscoresProcess) {
processEcoscores();
window.pendingEcoscoresProcess = false;
}
}, 500);
} else {
setTimeout(ecoscores__ready, 100);
}
}
function refreshEcoScores() {
if (typeof EcoScores !== 'undefined' && ecoscoresApiReady) {
EcoScores.Load(ecoscoresConfig);
}
}
function startEcoScoresVisibilityCheck() {
const allEcoElements = document.querySelectorAll('ecoscores-rank, ecoscores-content');
const newElements = Array.from(allEcoElements).filter(el => {
const elementId = getElementId(el);
return !processedElementIds.has(elementId);
});
if (newElements.length === 0) {
return;
}
clearActiveInterval();
let checkCount = 0;
const maxChecks = 20;
activeVisibilityInterval = setInterval(() => {
checkCount++;
const result = checkAndFadeInElements();
if (result.processed > 0) {
const allEcoElements = document.querySelectorAll('ecoscores-rank, ecoscores-content');
allEcoElements.forEach(el => {
const elementId = getElementId(el);
processedElementIds.add(elementId);
});
clearActiveInterval();
return;
}
if (checkCount >= 3) {
const allEcoElements = document.querySelectorAll('ecoscores-rank, ecoscores-content');
allEcoElements.forEach((element) => {
if (element.style.opacity === '0') {
element.style.opacity = '1';
}
const elementId = getElementId(element);
processedElementIds.add(elementId);
});
clearActiveInterval();
return;
}
if (checkCount >= maxChecks) {
const allEcoElements = document.querySelectorAll('ecoscores-rank, ecoscores-content');
allEcoElements.forEach((element) => {
if (element.style.opacity === '0') {
element.style.opacity = '1';
}
const elementId = getElementId(element);
processedElementIds.add(elementId);
});
clearActiveInterval();
}
}, 100);
}
</script>
<script src="https://cdn.ecoscores.co.uk/site-plugin/main.js" onload="ecoscores__ready()"></script>
<script>
const mpn = [];
const brand = [];
function extractData() {
const pdp = document.querySelector('.ex-product');
const plp = document.querySelectorAll('.product');
if (!pdp && plp.length === 0) {
return;
}
const jsonLdScript = document.head.querySelector('script[type="application/ld+json"]');
if (!jsonLdScript) {
return;
}
let structuredData;
try {
structuredData = JSON.parse(jsonLdScript.textContent);
} catch (e) {
return;
}
if (pdp) {
mpn.push(structuredData.mpn);
brand.push(structuredData.brand.name.toLowerCase());
} else if (plp.length > 0) {
structuredData.forEach((item) => {
mpn.push(item.mpn);
brand.push(item.brand.name.toLowerCase());
});
}
}
function createEcoscoresRank(model, brandName, size, position) {
const ecoscoresRank = document.createElement('ecoscores-rank');
ecoscoresRank.setAttribute('model', model);
ecoscoresRank.setAttribute('brand', brandName);
ecoscoresRank.setAttribute('size', size);
ecoscoresRank.style.position = 'absolute';
ecoscoresRank.style.zIndex = '1';
Object.assign(ecoscoresRank.style, position);
if (size === 'normal') {
ecoscoresRank.style.opacity = '0';
ecoscoresRank.style.transition = 'opacity 0.3s ease-in-out';
}
return ecoscoresRank;
}
function createEcoscoresContent(model, brandName) {
const ecoscoresContent = document.createElement('ecoscores-content');
ecoscoresContent.setAttribute('model', model);
ecoscoresContent.setAttribute('brand', brandName);
ecoscoresContent.style.opacity = '0';
ecoscoresContent.style.transition = 'opacity 0.3s ease-in-out';
return ecoscoresContent;
}
function processEcoscores() {
if (!ecoscoresApiReady) {
window.pendingEcoscoresProcess = true;
return;
}
extractData();
const pdp = document.querySelector('.ex-product');
const plp = document.querySelectorAll('.product');
if (pdp) {
const ecoscoresRank = createEcoscoresRank(mpn[0], brand[0], 'normal', {
top: '0',
right: '0',
});
document.querySelectorAll('.productimage_container .main-image').forEach((productDetail) => {
const clonedRank = ecoscoresRank.cloneNode(true);
productDetail.prepend(clonedRank);
});
const productDescriptionContainers = document.querySelectorAll('.productdescription_container .product-description');
productDescriptionContainers.forEach((productDescriptionContainer) => {
if (productDescriptionContainer && !productDescriptionContainer.classList.contains('loaded-eco-content')) {
productDescriptionContainer.classList.add('loaded-eco-content');
const ecoscoresContent = createEcoscoresContent(mpn[0], brand[0]);
productDescriptionContainer.appendChild(ecoscoresContent);
}
});
} else if (plp.length > 0) {
plp.forEach((product, index) => {
const ecoscoresRank = createEcoscoresRank(mpn[index], brand[index], 'small', {
bottom: '0',
right: '0',
});
if (product.classList.contains('loaded-eco')) {
return;
}
product.classList.add('loaded-eco');
const imgThumbnail = product.querySelector('.imgthumbnail');
if (imgThumbnail) {
imgThumbnail.appendChild(ecoscoresRank);
}
});
}
setTimeout(() => {
refreshEcoScores();
setTimeout(() => {
startEcoScoresVisibilityCheck();
}, 25);
}, 50);
}
const eventHandlers = [
{ event: 'live-inventory-done', delay: 1000 },
{ event: 'live-pricing-done', delay: 1 },
{ event: 'product-loadmore-success', delay: 1000 }
];
eventHandlers.forEach(({ event, delay }) => {
document.addEventListener(event, () => {
setTimeout(processEcoscores, delay);
}, false);
});
</script>
5. Publish Your Changes
Once you’ve updated the token, simply push Publish, and you’re done!