How to implement the VM JavaScript Handler?

[flippertricks]

Hi,

Joomla: 3.10.12
Virtuemart: 4.2.3
PHP: 8.0.30

I've been trying to get the VM Javascript Handler to work (https://docs.virtuemart.net/tutorials/development/196-the-vm-javascript-handler.html) but I don't know enough about js to know how and where to put the code, if someone is able to help me?
I've made a few failed attempts.

I use the RegularLabs 'modules anywhere' plugin to insert 'custom' type modules for the long & short descriptions for my products. I have some js at the bottom of my template's index.php (which I had some help creating) which inserts text and images in the modules, based on text contained in the h1 tag on the page.


An example of a text insert script is..

-------------------------------------
window.addEventListener("load",function(){
  const h1 = document.querySelector("h1"),
      description = document.querySelector("#changesize"),
      changesizes = [
        { changesize: "1", description: "size 1" },
        { changesize: "2", description: "size 2" },
        { changesize: "3", description: "size 3" },
        { changesize: "4", description: "size 4" }
      ]
 
description.innerText = changesizes.filter(f => h1.innerText.toLowerCase().includes(f.changesize))[0]?.description
  },false);
-------------------------------------

An example of the image insert script is...

-------------------------------------
const IMAGE_TAGS_PAIRS = [
{tags: 'article size 1 colour a',src: '/images/stories/virtuemart/product/article-1-a.jpg'},
{tags: 'article size 1 colour b',src: '/images/stories/virtuemart/product/article-1-b.jpg'},
{tags: 'article size 2 colour a',src: '/images/stories/virtuemart/product/article-2-a'},
{tags: 'article size 2 colour b',src: '/images/stories/virtuemart/product/article-2-b'},
{tags: 'article size 3 colour a',src: '/images/stories/virtuemart/product/article-3-a.jpg'}
]

const TAG_NOT_FOUND_IMG = '/images/logo.png'

function getImageSrcByDescription(description) {
  const normalizedDescription = description.toLowerCase().trim()

  const image = IMAGE_TAGS_PAIRS.find((obj) => {
    const tags = obj.tags.split(' ');

    const isMatchingAllTags = tags.every(tag => normalizedDescription.includes(tag))

    return isMatchingAllTags ? obj : undefined
  })

  return image ? image.src : TAG_NOT_FOUND_IMG
}

window.addEventListener("load", function() {
  const productTitleElem = document.querySelector("h1");
  const productImageElem = document.querySelector("#infographic");

  const description = productTitleElem.innerText
  const imageSrc = getImageSrcByDescription(description)

  productImageElem.alt = 'New Image'
  productImageElem.src = imageSrc
})
-------------------------------------

Of course, when a child product variant is selected, the js is not picked up. I understand the principles of the VM JavaScript Handler article and it sounds like what I need. I've also read other people's forum posts on the matter to try and help, but it's all a bit over my head.

I'm unsure what exact code I need and I also don't know which file, or where in the file, to insert the function code in. Also, does it need some containing tags? The article mentions wrapping it in //<![CDATA[  ?

In a nutshell, can someone please help me to get the modules to read the js?

Any help is much appreciated! Thank you!