How to Display EcoScore on Your Product Pages

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 defer src="https://cdn.ecoscores.co.uk/site-plugin/main.js" onload="ecoscores__ready()"></script>

<script>
	function ecoscores__ready() {
		EcoScores.Load({
			token: "PASTE YOUR TOKEN HERE",
		})
	}
</script>

<script>
  const mpn = [];
  const brand = [];

  function extractData() {
    const jsonLdScript = document.head.querySelector('script[type="application/ld+json"]');
    const structuredData = JSON.parse(jsonLdScript.textContent);

    const pdp = document.querySelector('.ex-product');
    const plp = document.querySelectorAll('.product');

    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);

    return ecoscoresRank;
  }

  function createEcoscoresContent(model, brandName) {
    const ecoscoresContent = document.createElement('ecoscores-content');
    ecoscoresContent.setAttribute('model', model);
    ecoscoresContent.setAttribute('brand', brandName);

    return ecoscoresContent;
  }

  document.addEventListener('live-inventory-done', () => {
    setTimeout(() => {
      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) => {
          productDetail.prepend(ecoscoresRank.cloneNode(true));
        });

        // Create ecoscores-content element inside .productdescription_container
        const productDescriptionContainer = document.querySelector('.productdescription_container .product-description');
        if (productDescriptionContainer) {
          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',
          });

          const imgThumbnail = product.querySelector('.imgthumbnail');
          if (imgThumbnail) {
            imgThumbnail.appendChild(ecoscoresRank);
          }
        });
      }

      ecoscores__ready();
    }, 1);
  }, false);

</script>

5. Publish Your Changes

Once you’ve updated the token, simply push Publish, and you’re done!