Hi there,
I am looking for any help implementing a script in the additional info section of a product page. My issue is that the script provided by an external company for the "furniture visualiser" is fixed and centered at the bottom of the browser and I want it to sit with my other buttons.
My approach was to try "hide" the provided button and link it to my new button with the following code, but it doesn't seem to work and I'm not sure what's wrong. Please lend me your expertise!
<!-- Furniture Visualiser -->
<script charset="utf-8" type="text/javascript" src="//www.jamesdunloptextiles.com/static/j/visualiser/visualiser.js"></script>
<script>
jdVisualiser({
"buttonTextColour": "#000000",
"buttonBackgroundColour": "#FFFFFF",
"profile": "maple-chair",
"type": "furniture",
"disableButton": true // Add this option to disable the default button
});
</script>
<style>
/* Hide the original visualiser button */
.jdVisualiserButton {
display: none !important;
}
/* Custom CSS to style the new button */
#customVisualiserButton {
position: absolute;
/* Center the button horizontally and vertically */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #000000;
color: #ffffff;
border: #000000;
padding: 20px 30px;
cursor: pointer;
z-index: 9999; /* Ensure the button is on top of other elements */
}
</style>
<!-- Furniture Visualiser -->
<div id="visualiserContainer">
<!-- Custom button to trigger the Furniture Visualiser -->
<button id="customVisualiserButton">Visualise Furniture</button>
</div>
<script>
// Function to trigger the Furniture Visualiser
function openVisualiser() {
jdVisualiser({
"profile": "cocoonsettee",
"type": "furniture"
});
}
// Add event listener to the custom button to trigger the Furniture Visualiser
const customVisualiserButton = document.getElementById("customVisualiserButton");
if (customVisualiserButton) {
customVisualiserButton.addEventListener("click", openVisualiser);
}
// Hide the original visualiser button
const observer = new MutationObserver(function(mutationsList) {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
const originalVisualiserButton = document.querySelector(".jdVisualiserButton");
if (originalVisualiserButton) {
originalVisualiserButton.style.display = "none";
observer.disconnect(); // Disconnect the observer once the button is hidden
}
}
}
});
observer.observe(document.getElementById("visualiserContainer"), { childList: true });
</script>
Thanks,
T
