Jump to content

Hiding script button on website and creating a new button

Recommended Posts

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

Link to comment
  • Replies 0
  • Views 642
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.