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 //<
Home
Forum
Extensions
Developer Portal
Recent Posts